119 lines
2.7 KiB
Sass
119 lines
2.7 KiB
Sass
$primary: #1E1E1E
|
|
$primary-dark: darken($primary, 20%)
|
|
$primary-light: lighten($primary, 20%)
|
|
$secondary: #636363
|
|
$secondary-dark: darken($secondary, 20%)
|
|
$secondary-light: lighten($secondary, 20%)
|
|
$tertiary: #A8A8A8
|
|
$tertiary-dark: darken($tertiary, 20%)
|
|
$tertiary-light: lighten($tertiary, 20%)
|
|
|
|
$white: #F9F9FA
|
|
$black: #0F0F0F
|
|
$grey: #858585
|
|
$grey-light: lighten($grey, 20%)
|
|
$red: #8B0000
|
|
$purple: #4B0082
|
|
$midnight-black: #0F0F0F
|
|
$darkgrey: #202020
|
|
$grey2: #2D2D2D
|
|
$dark-grey: #202020
|
|
|
|
$button-color: $white
|
|
$button-background-color: $black
|
|
:root
|
|
--primary: #{$primary}
|
|
--primary-light: #{$primary-light}
|
|
--primary-dark: #{$primary-dark}
|
|
--secondary: #{$secondary}
|
|
--secondary-light: #{$secondary-light}
|
|
--secondary-dark: #{$secondary-dark}
|
|
--tertiary: #{$tertiary}
|
|
--tertiary-light: #{$tertiary-light}
|
|
--tertiary-dark: #{$tertiary-dark}
|
|
--white: #{#F9F9FA}
|
|
--grey: #{$grey}
|
|
--grey-light: #{$grey-light}
|
|
--grey2: #{$grey2}
|
|
--dark-grey: #{$dark-grey}
|
|
--purple: #{$purple}
|
|
--blood-color: #{$red}
|
|
--midnight-black: #{$midnight-black}
|
|
--black: #{$midnight-black}
|
|
--darkgrey: #{$darkgrey}
|
|
|
|
//fonts
|
|
.low-mid-text
|
|
font-family: Inter
|
|
font-size: 16px
|
|
font-style: normal
|
|
font-weight: 400
|
|
line-height: normal
|
|
@media (min-width: 992px)
|
|
font-size: 24px
|
|
.mid-mid-text
|
|
font-family: Inter
|
|
font-size: 18px
|
|
font-style: normal
|
|
font-weight: 400
|
|
line-height: normal
|
|
@media (min-width: 992px)
|
|
font-size: 24px
|
|
.mid-text
|
|
font-family: Inter
|
|
font-size: 24px
|
|
font-style: normal
|
|
font-weight: 400
|
|
line-height: normal
|
|
.small-text
|
|
font-family: Inter
|
|
font-size: 14px
|
|
font-style: normal
|
|
font-weight: 400
|
|
line-height: normal
|
|
@media (min-width: 992px)
|
|
font-size: 18px
|
|
.number-mobile
|
|
font-family: Inter
|
|
font-size: 24px
|
|
font-style: normal
|
|
font-weight: 400
|
|
line-height: normal
|
|
letter-spacing: 4.32px
|
|
.sub-header
|
|
font-family: Inter
|
|
font-style: normal
|
|
font-weight: 400
|
|
line-height: normal
|
|
font-size: 24px
|
|
@media (min-width: 992px)
|
|
font-size: 32px
|
|
.header
|
|
font-family: Inter
|
|
font-size: 32px
|
|
font-style: normal
|
|
font-weight: 400
|
|
line-height: normal
|
|
@media (min-width: 992px)
|
|
font-size: 40px
|
|
|
|
// :root
|
|
// --font-size-text: 16px
|
|
// --font-size-title: 32px
|
|
// @media (min-width: 992px)
|
|
// --font-size-text: 24px
|
|
// --font-size-title: 36px
|
|
|
|
.text-center
|
|
text-align: center
|
|
|
|
.transparent
|
|
background-color: transparent
|
|
|
|
.card
|
|
border-radius: 16px
|
|
@media (min-width: 992px)
|
|
padding: 48px 32px
|
|
&.card--glow
|
|
box-shadow: 0px 12px 150px 0px rgba(75, 0, 130, 0.35)
|