style.sass

@import url(https://fonts.googleapis.com/css?family=Merriweather%3A400%2C700%2C900%2C400italic%2C700italic%2C900italic%7CMontserrat%3A400%2C700%7CInconsolata%3A400&subset=latin%2Clatin-ext)

$cGrayVeryDark: #686868
$cGrayDark: #ddd
$cGrayLight: #eee
$cGrayVeryDark: #aaa
$cBlack: #1a1a1a
$cBrand: #d00f16
$cHighlight: #fefbec
$cHighlightBorder: #faf0b7
$cLink: #007acc

$fontHead: Montserrat, "Helvetica Neue", sans-serif
$fontBody: Merriweather, Georgia, serif

$sHead: 2.0625rem
$sBody: 1rem
$sMaxWidth: 1070px

$qDesktop: "only screen and (min-width : 500px)";
$qMobile: "only screen and (max-width : 499px)";

html, body
  font-size: 16px
html
  background-color: #ccc
body
  margin: 21px
  background-color: #fff
  min-height: 100%
  padding: 0 3rem

header, .intro, .cognito
  max-width: $sMaxWidth
  margin: 0 auto

// Fix misc colors
p, li, input, textarea, h1, h2, h3, .c-label, .c-forms-description
  color: $cBlack

// Fonts
p, li
  font-family: $fontBody
  font-size: $sBody
  line-height: 1.75
  a
    color: $cLink
    text-decoration: underline
    &:hover
      color: $cGrayVeryDark
      text-decoration: none


// Fix the title block
header
  h1
    display: inline-block
    a
      text-indent: -1000em
      overflow: hidden
      display: block
      height: 150px
      width: 150px
      background-image: url(logo.png)
      background-size: contain
      background-position: 50% 50%
      background-repeat: no-repeat
  nav
    margin-top: 0
    li
      display: inline-block
      list-style-type: none
      a
        color: $cBlack
        font-family: $fontHead
        font-size: 14px
        text-decoration: none
        padding: .65625em .875em
        &:hover
          color: $cLink

@media #{$qDesktop}
  header nav
    margin: 60px 0
    &, & li
    float: right
@media #{$qMobile}
  header
    text-align: center
    h1
      margin-bottom: 0
    nav ul
      padding-left: 0
      margin-bottom: 3rem


// Intro
.intro
  h2
    font-family: $fontHead
    font-size: 2.0625rem

// Add padding, rounding, and shadow to the form
.cognito
  padding: 0
  min-height: 800px

// Fix title
.c-forms-form-title
  padding-top: 0 !important
  padding-bottom: 1rem !important
  h2
    display: none
  .c-forms-description
    font-family: $fontBody !important
    font-size: $sBody !important
    padding: 0 !important

// Only show tooltips when the fields they apply to are focused
@media #{$qDesktop}
  .c-page-page1 .c-field
    & + .c-field .c-editor.c-html
      margin-left: 2rem
      position: absolute !important
      transition: opacity 250ms
      opacity: 0
    &:focus-within
      & + .c-field .c-editor.c-html
        opacity: 1

.c-page-page1 .c-field
  & + .c-field .c-editor.c-html
    padding: 1.5rem 2em 2rem
    box-sizing: border-box
    border: 2px solid $cHighlightBorder
    background-color: $cHighlight
    font-family: $fontBody !important
    font-size: 1rem !important

// Make the pitch field bigger (not possible to do in the editor)
.cognito .c-field[data-field="Pitch"] .c-editor textarea
  height: 200px

// Fix progress bar
.c-forms-progress
  padding-bottom: 1rem !important
  padding-top: 0 !important
  li
    a
      font-family: $fontHead !important
      font-size: $sBody !important
      span
        color: $cBlack !important
    &:not(.c-page-selected) a
      &:before
        background-color: $cGrayLight !important
        color: $cGrayVeryDark !important
      span
        color: $cGrayVeryDark !important

.cognito .c-helptext p
  color: $cGrayVeryDark !important
  font-size: 0.9rem

.c-page-previous-page
  background-color: $cGrayVeryDark !important
  border-color: $cGrayVeryDark !important

.c-page-next-page, #c-submit-button
  background-color: $cBrand !important
  border-color: $cBrand !important

// Fix misc fonts
.cognito .c-label
  font-family: $fontHead !important
  font-size: $sBody !important
textarea, input
  font-family: $fontBody !important
  font-size: $sBody !important
.c-action button
  font-family: $fontHead !important
  font-size: $sBody !important