@require '_input'
@require '_button'
linkColor = #3090de
textColor = #444

body, html
  margin 0
  font 16px 'proxima-nova', 'Helvetica Neue', helvetica, arial, sans-serif
  height 100%
  width 100%
  font-weight 400
  color textColor
  font-smoothing antialiased

h1, h2, h3
  margin 0
  margin-bottom 0.5em
  text-shadow 1px 1px 0 rgba(255, 255, 255, 0.15)

a
  color linkColor
  text-decoration none
  &:hover
    text-decoration underline

.jumbo
  width 100%
  height 100%
  padding-bottom 200px
  background url('../images/jumbo.jpg')
  background-size cover
  display table

  .jumbo__container
    display table-cell
    vertical-align middle
    text-align center
    padding 0 1em
    h1
      max-width 800px
      margin auto
      @media screen and (max-width: 600px)
        font-size 1.5em
        margin-top 1em
#logo
  width 80px
  height 80px
  position absolute
  top 1em
  left 1em
  background url('../images/logo.png')
  background-size 100% 100%
  @media screen and (max-width: 600px)
    width 60px
    height 60px
section
  background #fff

.jumbo + section
  margin-top -200px

.row
  max-width 800px
  padding 2em 0
  margin auto

.invite-form
  position relative
  .btn
    width 40px
    height 32px
    background linkColor
    padding 0
    position absolute
    right 8px
    top 7px

    border-bottom 2px solid #117280
    color rgba(255, 255, 255, 0.5)
    &:active
      border-bottom 0

@keyframes drop
  0%
    transform rotateX(90deg)
  30%
    transform rotateX(45deg)
  45%
    transform rotateX(0deg)
  60%
    transform rotateX(45deg)
  100%
    transform rotateX(0deg)

.invite-form--message
  background linkColor
  color #fff
  height 40px
  line-height 40px
  padding 0 0.5em
  margin-top 4px
  transform rotateX(0deg)
  transform-origin 100% 0
  animation drop 0.6s linear

.invite-form.has-error
  .invite-form--message
    background rgb(226, 33, 112)

.form-container
  margin auto
  margin-top 1em
  padding 0 2em
  box-sizing border-box
  p
    text-align center
    line-height 1.7em

footer
  font-size 1.5em
  padding 0.5em
  background textColor

  i
    margin 0 0.30em
    font-size 1.5em
    color #fff

.fader
  position fixed
  bottom 0
  left 0
  width 100%
  height 50px
  background linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 99%,rgba(0,0,0,0.2) 100%)
  pointer-events none