@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Source+Sans+Pro:wght@400;600;700&display=swap');

linkColor = #3090de
textColor = #444
feedWidth = 500px
footerHeight = 50px

@require '_input'
@require '_button'
@require '_header'
@require '_loader'

body, html
  margin 0
  font 18px 'Source Sans Pro', 'Helvetica Neue', helvetica, arial, sans-serif
  height 100%
  width 100%
  font-weight 400
  color textColor
  font-smoothing antialiased
  box-sizing border-box

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

h2
  margin-bottom 1em

h3
  font-size 1.25em

p
  margin-top 1em
  line-height 1.75em
  font-size 16px

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

.site
  display flex
  min-height 100vh
  flex-direction column

.container
  flex 1

section
  background #fff
  padding 2em 0

.content
  z-index 2
  position relative
  min-height 50vh
  box-sizing border-box

  @media screen and (max-width: 700px)
    h3
      margin-top 0

  &.with-feed
    padding-right feedWidth


section:first-child
  box-shadow -1px -1px 1px rgba(0, 0, 0, 0.05)
  border-bottom 1px solid #EEEEEE
  background #FCFCFC

.row
  max-width 850px
  margin auto
  overflow auto
  padding 0 2em
  margin-top 2em

  &:first-child
    margin-top 0

.column
  float left
  overflow auto
  padding 0 1em
  box-sizing border-box
  &:first-child
    padding-left 0
  &:last-child
    padding-right 0

  img:first-child
    max-width 100%

.column3-5
  width (100/5*3)%

.column2-5
  width (100/5*2)%

.column1-2
  width 50%

.column
  @media screen and (max-width: 700px)
    width 100%
    float none
    margin-top 1em
    padding 0
    &:first-child
      margin-top 0

.form
  display flex
  flex-direction column
  .btn
    background linkColor
    color rgba(255, 255, 255, 0.9)
    margin-left 0.5rem
  &.sending
    .invite-form__loader
      display block

.controls-wrapper
  display flex
  @media screen and (max-width: 450px)
    flex-direction column
    .btn
      margin 0
      margin-top 0.5rem

.input-wrapper
  position relative
  flex-grow 1
  width 400px
    @media screen and (max-width: 650px)
      width auto

.invite-form
  margin-top 0.5rem
  position relative
  .input
    width 100%
  .invite-form__input
    padding-right 2em

  .label
    margin-bottom 0.5rem
    font-size 0.9rem
    opacity 0.6
    display block

  .btn
    height 45px
    font inherit
    border-radius 15px
    padding 0.5rem 3rem
    color #fff
    &:active
      border-bottom 0
  .invite-form__loader
    display none
    width 10px
    height 10px
    position absolute
    right 1rem
    top 50%
    margin-top -5px

.code-of-conduct
  margin-bottom 0

.membership-form
  .input
    margin 8px 0px
  .btn
    margin-top 12px

.membership-form__loader
  width 70px
  height 70px
  margin auto

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

.form--message
  background linkColor
  color #fff
  line-height 40px
  padding 0 0.5em
  margin-top 4px
  transform rotateX(0deg)
  transform-origin 100% 0
  animation drop 0.6s linear
  a
    color #fff
    font-weight bold
.form.has-error
  .form--message
    background rgb(226, 33, 112)

.members
  a
    display inline-block

.member
  width 30px
  vertical-align middle
  margin 3px
  border-radius 3px

.project-image__codestats
  width 143px

footer
  padding 0.5em 1em
  z-index 2
  border-top 1px solid #ECECEC
  font-size 1.5em
  display flex
  justify-content space-between
  flex-wrap wrap
  text-align center
  @media screen and (max-width: 940px)
    display block
  i
    margin 0 0.30em
    font-size 1.5em

.contacts
  line-height normal
  text-align center
  display flex
  flex-direction column
  justify-content center
  @media screen and (max-width: 940px)
    margin-top 1em

.sponsors
  text-align center
  display inline-block

.sponsors__label
  color #ccc
  font-size 12px
  text-align left

#email
  font-size .85rem
  @media screen and (min-width: 400px)
    font-size 1rem

.sponsor
  height 60px
  margin-right 1em
  vertical-align middle
  @media screen and (max-width: 940px)
    margin-top 1em

.feed
  width feedWidth
  height 100%
  overflow auto
  position absolute
  top 0
  right 0
  z-index 5
  background #fff
  border-left 1px solid #E5E5E5
  &::-webkit-scrollbar
      display none

@media screen and (max-width: 980px)
  .feed
    width 0
  .content.with-feed
    padding-right 0

.message
  padding 1em
  padding-right 2em
  border-top 1px solid #E5E5E5
  position relative
  display flex

.message__content
  flex 1

.message__body
  font-weight 400
  font-size 15px
  line-height 1.4em

.message__image
  width 50px
  margin-right 1em
  margin-top 0.5em
  text-align center
  a
    outline 0
  img
    width 50px

.message__icon
  margin 6px
  font-size 20px
  position absolute
  top 0
  right 0
  .fa-twitter
    color #55ACEE
  .fa-github
    color #333333
  .fa-slack
    color #DC005D

.message__details
  font-size 0.7em
  margin-top 0.5em

.message__meta
  margin-left 0.5em

.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.15) 99%,rgba(0,0,0,0.15) 100%)
  pointer-events none
  z-index 2

.bread
  display table
  table-layout fixed
  width 100%
  .column
    float none
    display table-cell
    vertical-align middle

@media screen and (max-width: 700px)
  .bread
    display block
    .column
      display block

.bread-img
  background url('/static/images/hp3_bw.jpg')
  background-size cover
  border-radius 160px
  opacity 0.85
  width 320px
  height 320px
  margin auto

@media screen and (max-width: 700px)
  .bread-img
    display none

.organization
  padding-top 3em

.membership-information.column
  vertical-align initial
  p:first-child
    margin-top 37px