// TYPOGRAPHY // =========================== // Set the base font size for em's to work body {
font-size: $font-size-base; // Takes control of the base font size from Bootstrap/reboot
}
// HEADINGS // Special Headings (decorative headings used for specific sections)
// h1 is KCC's logo-font, reserved for the nav-local's page-title heading. .typography__nav-heading { // Not to be used for page content
color: $primary-blue; display: inline; font-family: $font-family-kcc; font-size: 1.5rem; font-style: italic; font-weight: 700; text-transform: uppercase; transition-property: color; transition-timing-function: ease; transition-duration: .4s; &:hover, &:focus { color: $primary-red; } &--smaller { font-size: 1.25rem; }
}
@media screen and (min-width:360px) {
.typography__nav-heading { font-size: 1.8rem; &--smaller { font-size: 1.5rem; } }
}
@media screen and (min-width:410px) {
.typography__nav-heading { font-size: 2rem; }
}
@media screen and (min-width:576px) {
.typography__nav-heading { font-size: 2.3rem; }
}
@media screen and (min-width: 768px) {
.typography__nav-heading { font-size: 2.4rem; }
}
@media screen and (min-width: 1500px) {
.typography__nav-heading { font-size: 2.6rem; }
}
.typography__footer-heading { // Footer heading/link that shows the site URL
font-family: $font-family-headings; font-size: 1.95rem; font-weight: $font-weight-black;
}
@media screen and (min-width: 360px) {
.typography__footer-heading { font-size: 2.2rem; }
}
@media screen and (min-width: 375px) {
.typography__footer-heading { font-size: 2.4rem; }
}
@media screen and (min-width: 410px) {
.typography__footer-heading { font-size: 2.6rem; }
}
// Content Headings .typography__h2 {
color: $color-grey-heading; font-family: $font-family-headings; font-size: 2rem; font-weight: $font-weight-boldish;
}
.typography__h3 {
color: $primary-blue; font-family: $font-family-headings; font-size: 1.75rem; font-weight: $font-weight-bolder;
}
.typography__h4 {
color: $primary-red; font-family: $font-family-headings; font-size: 1.7rem; font-weight: $font-weight-bolder;
}
.typography__h5 {
color: $color-grey-heading; font-family: $font-family-headings; font-weight: $font-weight-bold; font-size: 1.5rem;
}
.typography__h6 {
color: $color-grey-heading; font-family: $font-family-headings; font-weight: $font-weight-bold; font-size: 1.4rem;
}
.typography__phone–span {
color: $white; font-family: $font-family-oswald; font-size: 1.3rem; font-weight: $font-weight-regular; letter-spacing: .07rem; white-space: nowrap;
}
@media screen and (min-width: 768px) {
.typography__phone--span { font-size: 1.45rem; }
}
@media screen and (min-width: 1024px) {
.typography__phone--span { font-size: 1.5rem; }
}
p, ul:not(.navbar-nav), // :not() selecter prevents unnecesary style override ol { // Needed so list font looks the same as paragraph font
color: $color-grey-typography; // Bootstrap sets these things to black font-family: $font-family-paragraph; font-size: $font-size-base;
}
h1 sup, h2 sup, h3 sup, h4 sup, h5 sup, h6 sup { // Make superscripts within headings a little bit smaller than reboot's styling
font-size: 45% !important; top: -1em; font-weight: normal;
}
.typography__register–h2 {
color: $white; font-family: eurostile, sans-serif; font-size: 2.4rem; font-weight: $font-weight-boldish; letter-spacing: .03rem; position: relative; top: 30%; margin-bottom: -10px;
}
@media screen and (min-width: 400px) {
.typography__register--h2 { font-size: 3rem; }
}
@media screen and (min-width: 768px) {
.typography__register--h2 { font-size: 5.2rem; }
}
@media screen and (min-width: 1200px) {
.typography__register--h2 { font-size: 6rem; }
}
@media screen and (min-width: 1800px) {
.typography__register--h2 { font-size: 6.6rem; }
}
.typography__register–h3 {
color: $white; font-family: eurostile, sans-serif; font-size: 1.2rem; font-weight: $font-weight-boldish; letter-spacing: .03rem; position: relative; top: 31%;
}
@media screen and (min-width: 400px) {
.typography__register--h3 { font-size: 1.45rem; top: 30.5%; }
}
@media screen and (min-width: 768px) {
.typography__register--h3 { font-size: 2.5rem; top: 30%; }
}
@media screen and (min-width: 1200px) {
.typography__register--h3 { font-size: 2.6rem; top: 30%; }
}
@media screen and (min-width: 1800px) {
.typography__register--h3 { font-size: 2.7rem; top: 30%; }
}
.typography__register–caption {
bottom: 15px; color: $white; filter: drop-shadow(0 0 2px rgba(0,0,0,0.25)); font-family: $font-family-oswald; font-size: 1rem; font-weight: $font-weight-boldish; letter-spacing: .07rem; position: absolute; right: 25px;
}
@media screen and (min-width: 768px) {
.typography__register--caption { font-size: 1.1rem; }
}
@media screen and (min-width: 1000px) {
.typography__register--caption { font-size: 1.2rem; }
}
.typography__register-h4 {
font-family: $font-family-oswald; font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
.typography__register-h4 { font-size: 2rem; }
}
@media screen and (min-width: 1200px) {
.typography__register-h4 { font-size: 2rem; }
}
@media screen and (min-width: 1800px) {
.typography__register-h4 { font-size: 2.3rem; }
}
.typography__larger-p {
font-size: 1.2rem;
}
.typography__register–thank-you {
color: $primary-blue; font-family: $font-family-kcc; font-size: 2rem; &--message { color: $primary-red; font-family: $font-family-saira; font-weight: $font-weight-bold; font-size: 1.4rem; }
}
@media screen and (min-width: 768px) {
.typography__register--thank-you { font-size: 2.4rem; margin-left: 100px; margin-top: -10px; &--message { font-size: 1.6rem; margin-left: 95px; } }
}
@media screen and (min-width: 1200px) {
.typography__register--thank-you { font-size: 2.6rem; }
}
@media screen and (min-width: 1800px) {
.typography__register--thank-you { font-size: 3rem; margin-top: -15px; }
}
.typography–text-shadow {
text-shadow: 0 0 10px rgba(0, 0, 0, .75);
}