$body-font: serif !default; $copy-font: serif !default; $heading-font: sans-serif !default; $body-font-size: 16px !default; $copy-font-size: 1rem !default; $heading-1-font-size: 2rem !default; $heading-2-font-size: 1.5rem !default; $heading-3-font-size: 1.17rem !default; $heading-4-font-size: 1.12rem !default; $heading-5-font-size: .83rem !default; $heading-6-font-size: .75rem !default; $heading-margin: 0 0 .5rem 0 !default; $copy-margin: 0 0 .5rem 0 !default; $copy-line-height: 1.2 !default; $heading-line-height: 1.2 !default; $copy-font-weight: normal !default; $heading-font-weight: bold !default; $btn-font: $copy-font !default; html { font-family: $body-font; font-size: $body-font-size; color: $heading-color; } .copy { font-family: $copy-font; color: $copy-color; margin: $copy-margin; font-size: $copy-font-size; line-height: $copy-line-height; font-weight: $copy-font-weight; } .heading, .heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6, { font-family: $heading-font; margin: $heading-margin; line-height: $heading-line-height; font-weight: $heading-font-weight; } .heading-1 { font-size: $heading-1-font-size; } .heading-2 { font-size: $heading-2-font-size; } .heading-3 { font-size: $heading-3-font-size; } .heading-4 { font-size: $heading-4-font-size; } .heading-5 { font-size: $heading-5-font-size; } .heading-6 { font-size: $heading-6-font-size; } @for $i from 1 through 200 { .fz-#{$i} { font-size: #{$i}px !important; } @media (min-width: $medium) { .md-fz-#{$i} { font-size: #{$i}px !important; } } @media (min-width: $large) { .lg-fz-#{$i} { font-size: #{$i}px !important; } } @media (min-width: $xlarge) { .xlg-fz-#{$i} { font-size: #{$i}px !important; } } @media (min-width: $xxlarge) { .xxlg-fz-#{$i} { font-size: #{$i}px !important; } } } .fw-100 { font-weight: 100 !important; } .fw-200 { font-weight: 200 !important; } .fw-300 { font-weight: 300 !important; } .fw-400 { font-weight: 400 !important; } .fw-500 { font-weight: 500 !important; } .fw-600 { font-weight: 600 !important; } .fw-700 { font-weight: 700 !important; } .fw-800 { font-weight: 800 !important; } .fw-900 { font-weight: 900 !important; } .lh-1 { line-height: 1 !important; } .lh-normal { line-height: 1.2 !important; } .lh-2 { line-height: 2 !important; } .lh-lg { line-height: 2.5 !important; } .lh-xl { line-height: 3.5 !important; } /* TEXT HELPERS */ .bold { font-weight: bold !important; } .italic { font-style: italic !important; } .uppercase { text-transform: uppercase !important; } .lowercase { text-transform: lowercase !important; } .capitalize { text-transform: capitalize !important; } .nowrap { white-space: nowrap !important; } .underline { text-decoration: underline !important; } .line-through { text-decoration: line-through !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-left { text-align: left !important; } .text-justify { text-align: justify !important; } @media (min-width: $medium) { .md-text-center { text-align: center !important; } .md-text-right { text-align: right !important; } .md-text-left { text-align: left !important; } .md-text-justify { text-align: justify !important; } } @media (min-width: $large) { .lg-text-center { text-align: center !important; } .lg-text-right { text-align: right !important; } .lg-text-left { text-align: left !important; } .lg-text-justify { text-align: justify !important; } } @media (min-width: $xlarge) { .xlg-text-center { text-align: center !important; } .xlg-text-right { text-align: right !important; } .xlg-text-left { text-align: left !important; } .xlg-text-justify { text-align: justify !important; } } @media (min-width: $xxlarge) { .xxlg-text-center { text-align: center !important; } .xxlg-text-right { text-align: right !important; } .xxlg-text-left { text-align: left !important; } .xxlg-text-justify { text-align: justify !important; } }