2024-09-12 17:35:00 +02:00

286 lines
5.0 KiB
SCSS

@import "@Themes/constants.scss";
@import "@Themes/modes.scss";
.root {
vertical-align: center;
font-family: var(--font-text-family);
color: var(--data-color, var(--color-neutral-950));
//Displays
&.display-large {
font-style: normal;
font-weight: 600;
font-size: 50px;
line-height: 75px;
letter-spacing: -0.8px;
@media (max-width: $screen-m) {
font-size: 48px;
line-height: 72px;
}
}
&.display-medium {
font-style: normal;
font-weight: 600;
font-size: 48px;
line-height: 72px;
letter-spacing: -0.8px;
@media (max-width: $screen-m) {
font-size: 48px;
line-height: 72px;
}
}
&.display-small {
font-style: normal;
font-weight: 600;
font-size: 44px;
line-height: 66px;
letter-spacing: -0.8px;
@media (max-width: $screen-m) {
font-size: 48px;
line-height: 72px;
}
}
//Titles
&.title-h1 {
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 60px;
letter-spacing: -0.8px;
}
&.title-h2 {
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 54px;
letter-spacing: -0.8px;
}
&.title-h3 {
font-style: normal;
font-weight: 300;
font-size: 32px;
line-height: 48px;
letter-spacing: -0.8px;
}
&.title-h4 {
font-style: normal;
font-weight: 600;
font-size: 28px;
line-height: 42px;
letter-spacing: -0.8px;
}
&.title-h5 {
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 36px;
letter-spacing: -0.8px;
}
&.title-h6 {
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 30px;
letter-spacing: -0.8px;
}
//Text large
&.text-lg-bold {
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 27px;
letter-spacing: 0.5%;
}
&.text-lg-semibold {
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 27px;
letter-spacing: 0.5%;
}
&.text-lg-regular {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 27px;
letter-spacing: 0.5%;
}
&.text-lg-uppercase {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 27px;
letter-spacing: 0.5%;
text-transform: uppercase;
}
&.text-lg-light {
font-style: normal;
font-weight: 300;
font-size: 18px;
line-height: 27px;
letter-spacing: 0.5%;
}
//Text medium
&.text-md-bold {
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5%;
}
&.text-md-semibold {
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5%;
}
&.text-md-regular {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5%;
}
&.text-md-uppercase {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5%;
text-transform: uppercase;
}
&.text-md-light {
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5%;
}
//Text small
&.text-sm-bold {
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.5%;
}
&.text-sm-semibold {
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.5%;
}
&.text-sm-regular {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.5%;
}
&.text-sm-uppercase {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.5%;
text-transform: uppercase;
}
&.text-sm-light {
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.5%;
}
//Text extra small
&.text-xs-bold {
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.5%;
}
&.text-xs-semibold {
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.5%;
}
&.text-xs-regular {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.5%;
}
&.text-xs-uppercase {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.5%;
text-transform: uppercase;
}
&.text-xs-light {
font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.5%;
}
//Caption
&.caption-bold {
font-style: normal;
font-weight: 700;
font-size: 10px;
line-height: 15px;
letter-spacing: -0.8px;
}
&.caption-semibold {
font-style: normal;
font-weight: 600;
font-size: 10px;
line-height: 15px;
letter-spacing: -0.8px;
}
&.caption-regular {
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 15px;
letter-spacing: -0.8px;
}
&.caption-uppercase {
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 15px;
letter-spacing: -0.8px;
text-transform: uppercase;
}
&.caption-light {
font-style: normal;
font-weight: 300;
font-size: 10px;
line-height: 15px;
letter-spacing: -0.8px;
}
&.italic {
font-style: italic;
}
}