AngelsTeach Titles

typography.scss

// Colors
$brand-primary: #27ae60;
$fa-font-path: '~font-awesome/fonts';
$brand-white: #fff;
$brand-grey: #929095;
$brand-violet: #5d0e8b;
$brand-violet-link: #5d2c85;
$brand-violet-light: #8d1179;
$brand-violet-button: #c114a2;
$brand-violet-active: #b63293;
$brand-violet-faded: #aea3b8;
$brand-violet-angels-faded: #f8f5fd;
$brand-violet-angels: #d5c3f2;
$brand-violet-ultralight: #dfdbe9;
$brand-gold: #906d4f;
$brand-gold-light: #bfa17a;
$brand-gold-dot: #ad862e;
$brand-gold-faded: #e6e1df;
$brand-gold-input: #9b846f;
$brand-gold-border: #cab9ab;
$brand-brown: #512c1d;
$brand-brown-lighter: #755b32;
$brand-blue: #250671;
$brand-blue-violet: #2c256c;
$brand-blue-lighter: #2c256d;
$brand-black: #362f2d;
$brand-popup-border: #e2d8c9;

// Overlays
$brand-overlay-light: rgba(#e3d9d9, 0.6);

// Fonts
$brand-primary-sans: 'Bebas Neue', sans-serif;
$brand-primary-book: 'Bebas Neue Book', sans-serif;
$brand-secondary-sans: 'Naive Sans', sans-serif;
$brand-tertiaty-sans: 'Source Sans Pro', sans-serif;
$brand-primary-serif: 'Silicia Script', serif;


h1, h2, h3, h4, h5 {
    font-family: $brand-primary-sans;
    color: $brand-violet-link;
    letter-spacing: 0.075em;
    margin-bottom: 30px;
    margin-top: 60px;
  }

  h1 {
    font-size: 35px;
  }

  h2 {
    font-size: 30px;
  }


// Hero Content
.hero__content {
    text-align: center;
    h1 {
      font-family: $brand-primary-book;
      font-size: 52px;
      letter-spacing: 0.075em;
      margin: 0;

      strong {
        font-family: $brand-primary-serif;
        display: block;
        font-weight: 400;

        sup {
          font-family: $brand-tertiaty-sans;
          font-size: 18px;
          text-transform: uppercase;
          letter-spacing: normal;
        }
      }

      &::after {
        content: '';
        display: block;
        margin: 50px auto 40px;
        width: 100px;
        height: 3px;
        background-color: $brand-white;
      }
    }

    h2 {
      font-family: $brand-primary-sans;
      font-size: 20px;
      letter-spacing: 0.15em;
      margin-bottom: 42px;
    }

    p {
      font-family: $brand-tertiaty-sans;
      font-size: 25px;
      font-weight: 300;
      max-width: 750px;
      margin: 0 auto 60px;
    }

    &--no-chevron {
      h1::after,
      &::after {
        display: none;
      }
    }

    &::after {
      content: url('../images/chevron_hero.png');
    }

    &--white {
      color: $brand-white;
    }

    &--gold {
      color: $brand-gold;

      @media screen and (max-width: 500px) {
        color: $brand-white;
      }
      h1::after {
        background-color: $brand-gold;
        @media screen and (max-width: 500px) {
          background-color: $brand-white;
        }
      }

      &::after {
        content: url('../images/chevron_hero--gold.png');
        @media screen and (max-width: 500px) {
          content: url('../images/chevron_hero.png');
        }
      }
    }

    &--alt {
      h1 {
        font-family: $brand-primary-serif;
        font-size: 100px;
        margin-bottom: 70px;
        letter-spacing: normal;
      }

      p {
        font-size: 20px;
        text-align: justify;
        max-width: 765px;
        margin: 0 auto 47px;
      }
    }

    .angelsteach-name {
      color: $brand-white;
      text-transform: uppercase;
      font-family: $brand-primary-sans;
      font-weight: 100;
      font-size: 33px;
      letter-spacing: 0.085em;

      strong {
        font-family: inherit;
        display: inline;
        font-weight: 500;
      }
    }
  }


// Titles
.title {

  &__right {
    display: inline-block;
    text-align: right;
    position: relative;
    left: 200px;
    top: -20px;
  }
}

.title--center {
  text-align: center;
}

.title--book {
  font-family: $brand-primary-book;
}

.title--sans {
  font-family: $brand-primary-sans;
}

.title--gold {
  color: $brand-gold-light;
  font-size: 52px;
  letter-spacing: 0.075em;
  line-height: 71px;
  h1 {
    font-size: 52px;
    line-height: 71px;
  }

  span {
    font-family: $brand-primary-serif;
    font-size: 80px;
    text-align: right;
  }

  @media screen and (max-width: 992px) {
    font-size: 32px;
    line-height: 41px;
    h1 {
      font-size: 32px;
      line-height: 41px;
    }
  }
}

.title--violet {
  color: $brand-violet;
  font-size: 90px;
  font-family: $brand-primary-serif;
  h2 {
    font-size: 90px;
  }
}

@media screen and (max-width: 992px) {
  .title--gold {
    font-size: 32px;
    line-height: 41px;
    h1 {
      font-size: 32px;
      line-height: 41px;
    }

    span {
      font-size: 42px;
      text-align: center;
      top: -5px;
    }
  }

  .title--violet {
    font-size: 50px;
    h2 {font-size: 50px;}
  }

  .title__right {
    left: 0;
  }
}