165 lines
3.4 KiB
SCSS
165 lines
3.4 KiB
SCSS
//font-family: 'Inter', sans-serif;
|
|
//font-family: 'Lato', sans-serif;
|
|
@import "../variables/media";
|
|
:root {
|
|
--main-font: 'Inter', sans-serif;
|
|
--sub-fonst: 'Lato', sans-serif;
|
|
|
|
--h1: 300 48rem/60rem var(--sub-fonst);
|
|
--h2-inter: 700 28rem/normal var(--main-font);
|
|
--h1-inter: 700 36rem/46rem var(--main-font);
|
|
--h1-sub: 400 24rem/32rem var(--main-font);
|
|
--h1-sub_v2: 200 24rem/32rem var(--main-font);
|
|
--h3-boold: 700 24rem/32rem var(--main-font);
|
|
--h3-normal: 600 24rem/32rem var(--main-font);
|
|
--h4: 500 18rem/28rem var(--main-font);
|
|
--h4-bold: 700 18rem/28rem var(--main-font);
|
|
--h5: 300 20rem/28rem var(--main-font);
|
|
--h5-bold: 500 20rem/28rem var(--main-font);
|
|
--h6: 500 30rem/36rem var(--main-font);
|
|
--h6-bold: 700 30rem/36rem var(--main-font);
|
|
--h6-date: 700 30rem/36rem var(--main-font);
|
|
--h5-boold: 700 22rem/28rem var(--main-font);
|
|
--h7: 400 32rem/36rem var(--main-font);
|
|
--p: 300 18rem/28rem var(--main-font);
|
|
--p-15: 300 15rem/26rem var(--main-font);
|
|
--p-15-bold: 500 15rem/18rem var(--main-font);
|
|
--p-md: 400 16rem/28rem var(--main-font);
|
|
--p-md-bold: 600 16rem/28rem var(--main-font);
|
|
--p-sm: 500 14rem/21rem var(--main-font);
|
|
--p-sm-bold: 700 14rem/21rem var(--main-font);
|
|
--p-sub: 300 12rem/15rem var(--main-font);
|
|
--p-card: 300 17rem/24rem var(--main-font);
|
|
--nav-link: 500 16rem/28rem var(--main-font);
|
|
--nav-bred: 400 13rem/18rem var(--main-font);
|
|
|
|
--price-icon: 700 24rem/18rem var(--main-font);
|
|
|
|
--icon-count: 700 64rem/60rem var(--sub-fonst);
|
|
}
|
|
|
|
@media (max-width: $media-md) {
|
|
:root {
|
|
--h6-date: 700 16rem/22rem var(--main-font);
|
|
--h1: 300 36rem/normal var(--sub-fonst);
|
|
--h1-sub: 400 18rem/32rem var(--main-font);
|
|
--h5-boold: 700 16rem/28rem var(--main-font);
|
|
--p: 300 18rem/28rem var(--main-font);
|
|
--p-md: 400 16rem/28rem var(--main-font);
|
|
--p-sm: 500 14rem/28rem var(--main-font);
|
|
--p-sm-light: 300 14rem/18rem var(--main-font);
|
|
--p-sub: 300 12rem/15rem var(--main-font);
|
|
--nav-link: 500 13rem/24rem var(--main-font);
|
|
|
|
--h1-inter: 500 24rem/36rem var(--main-font);
|
|
--icon-count: 700 48rem/60rem var(--sub-fonst);
|
|
}
|
|
}
|
|
|
|
// Title
|
|
.h1{
|
|
font: var(--h1);
|
|
color: var(--common-white);
|
|
}
|
|
.h1-inter {
|
|
font: var( --h1-inter);
|
|
}
|
|
.h1-sub {
|
|
font: var(--h1-sub);
|
|
color: var(--common-white);
|
|
}
|
|
.h2{
|
|
font: var(--h1);
|
|
color: var(--black-white);
|
|
}
|
|
.h2-inter {
|
|
font: var( --h2-inter);
|
|
}
|
|
.h2-sub{
|
|
font: var(--h1-sub);
|
|
color: var(--black-white);
|
|
}
|
|
.h2-sub_v2{
|
|
font: var(--h1-sub_v2);
|
|
color: var(--common-white);
|
|
}
|
|
.h3-normal {
|
|
font: var(--h3-normal);
|
|
}
|
|
.h3-bold {
|
|
font: var( --h3-boold);
|
|
color: var(--common-black);
|
|
}
|
|
.h4 {
|
|
font: var(--h4);
|
|
}
|
|
.h4-bold {
|
|
font: var(--h4-bold);
|
|
}
|
|
.h5 {
|
|
font: var(--h5);
|
|
color: var(--black-white);
|
|
}
|
|
|
|
.h5-bold {
|
|
font: var(--h5-bold);
|
|
}
|
|
.h6-date {
|
|
font: var(--h6-date);
|
|
}
|
|
.h6 {
|
|
font: var(--h6);
|
|
}
|
|
.h6-bold {
|
|
font: var(--h6-bold);
|
|
}
|
|
.h5-boold {
|
|
font: var( --h5-boold);
|
|
}
|
|
.h7 {
|
|
font: var(--h7);
|
|
}
|
|
// Text
|
|
.p{
|
|
font: var(--p);
|
|
}
|
|
.p-15 {
|
|
font: var(--p-15);
|
|
}
|
|
.p-md {
|
|
font: var(--p-md);
|
|
}
|
|
.p-sm {
|
|
font: var(--p-sm);
|
|
}
|
|
.p-sm-bold{
|
|
font: var(--p-sm-bold);
|
|
}
|
|
.p-sm-light {
|
|
font: var(--p-sm-light);
|
|
}
|
|
.p-15-bold {
|
|
font: var(--p-15-bold);
|
|
}
|
|
.p-card {
|
|
font: var(--p-card);
|
|
}
|
|
.p-md-bold {
|
|
font: var(--p-md-bold);
|
|
}
|
|
.nav-link{
|
|
font: var(--nav-link);
|
|
}
|
|
.nav-bred {
|
|
font: var(--nav-bred);
|
|
color: var(--common-white);
|
|
}
|
|
|
|
.icon-count {
|
|
font: var(--icon-count);
|
|
}
|
|
|
|
.price-icon {
|
|
font: var(--price-icon);
|
|
}
|
|
|