@import '../../../css/mixins.sass'
@import '../../../css/flexbox.sass'

.landingPage
  overflow-y: auto

  .header
    background-color: transparent !important
    box-shadow: none !important
    z-index: 20

    &.opaque
      background-color: black !important
      box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), 0 1px 1px rgba(16, 22, 26, 0.4) !important

    .logoContainer
      display: flex
      align-items: center
      cursor: pointer
      .logo
        width: 30px
        height: 38px
      .logoText
        font-size: 30px
        font-weight: 600
        margin-left: 5px
        margin-bottom: 5px

  .landingPageContent
    &.landingPageProjects

.background
  position: absolute

  top: 0
  left: 0
  right: 0
  height: 100vh

  opacity: 0.95
  // background: black
  background-size: cover
  background-position: 50% 0%

.ctaSection
  background-color: rgba(0, 0, 0, 0.8)

.ctaBox
  display: flex
  margin: 150px auto

  flex-direction: row
  align-items: center
  flex-shrink: 0
  &:before
    +move-bg-animation

    background: url(../../../assets/images/landing_background.png) no-repeat
    background-size: cover
    background-position: 0% 0%

    opacity: 0.7

    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100vh
    content: ""
    z-index: -1

  div.left, div.right
    flex-grow: 1
    flex-basis: 0

  .left
    max-width: 550px
    margin-right: 50px

  .primaryCopy
    display: flex
    align-items: left
    justify-content: left

    font-family: 'Roboto Condensed', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif
    text-align: left    

    color: white
    font-size: 34px
    font-weight: 600
    max-width: 420px
    text-transform: uppercase

  .secondaryCopy
    display: flex
    flex-direction: column
    margin: 20px 0px 45px
    font-size: 16px
    text-align: left
    color: white

  .ctaContainer
    display: flex
    flex-direction: column
    // margin-right: 80px
    height: 340px    

    p
      text-align: left

    .buttons
      display: flex

      button
        margin-top: auto
        width: 180px

  .video
    height: 340px
    width: 600px

    iframe
      border: none

    &.small
      display: none

@media screen and (max-width: 1300px)
  .ctaBox
    .left
      margin-right: 0

      .ctaContainer
        align-items: center
        height: auto

        p
          text-align: justify

      div
        text-align: center

      .video.small
        display: inline
        margin-bottom: 60px

    .right
      display: none

.projectsContainer
  width: 100%
  background-color: white
  border-bottom: 1px solid $ui-line-grey

  &.myProjectsContainer
    flex-shrink: 0
    flex-grow: 1
    background-color: $landing-grey-background
    border-bottom: $ui-line-grey

  &.preloadedProjectsContainer
    background-color: $landing-grey-background
    border-bottom: $ui-line-grey
    flex-grow: 1
    flex-shrink: 0

  .secondaryCopy
    +landingHeader
    font-size: 16px

  .projectListTopbar
    display: flex
    flex-direction: row
    margin: 100px 50px 20px 50px

    .pageLabel
      color: black
      font-size: 24px
    .pullRight
      display: flex
      flex-direction: row
      margin-left: auto

      .createProjectButton
        margin-right: 10px

      > div
        margin-right: 10px

        &:last-child
          margin-right: 0px

      .sortTypeDropdownContainer
        width: 200px

  .projectListContainer
    // margin-top: 20px
    width: 100%
    display: flex
    flex-direction: column
    align-items: center
    max-height: calc(100% - 300px)
    overflow-y: auto

.watermark
  +watermark
  padding: 200px 0 260px

.topRightControls
  display: flex
  flex-grow: 1
  flex-direction: row-reverse
  align-items: center
  font-size: 14px
  font-weight: 400

  .linkContainer
    display: flex
    margin-top: 3px

  div
    display: inline

  > div > div
    &:not(:first-of-type)
      margin-left: 15px

  .userOptions
    margin-top: -2px
    .usernameAndChevron
      display: flex
      cursor: pointer
      padding-bottom: 10px
      span.username
        &:after
          content: "︿"
          font-weight: bold
          padding-left: 4px
          position: relative
          top: -3px

    .userOptionsMenu
      position: absolute
      top: 50px
      min-width: 100px
      border-radius: 3px
      padding: 3px 0
      opacity: 0
      user-select: none
      pointer-events: none
      right: 35px
      display: flex
      flex-direction: column
      border: 1px solid $ui-line-grey
      background-color: $black

      > div
        padding: 8px 15px

        &:hover
          background-color: $primary-accent
          z-index: 10

    &:hover
      .userOptionsMenu
        opacity: 1
        pointer-events: auto
        user-select: text
      span.username:after
        content: "﹀"
        top: 3px

  .separater
    opacity: 0.5
    margin-left: 5px
    margin-right: 5px

.aboutContainer
  .textBox
    +storyCopy
    display: flex
    flex-direction: column

  .citationButton
    +linkStyle(16px)

  .citation
    border: 1px solid $ui-line-grey
    white-space: pre-wrap
    padding: 8px 16px
    font-family: monospace
    font-size: 14px
    margin-bottom: 10px

  .mugshotBox
    .mugshots
      display: flex
      flex-wrap: wrap
      justify-content: center

      .mugshotContainer
        margin: 10px
        width: 140px
        display: flex
        flex-direction: column

        .mugCaption
          display: flex
          flex-direction: column
          text-align: center

          .mugCaptionName
            font-weight: 600

          .mugCaptionRole
            margin-top: 2px

        img.mugshot
          border-radius: 100px
          width: 140px
          height: 140px
          overflow: hidden

.footer
  display: flex
  align-items: center
  background-color: white
  width: 100%
  flex-direction: column
  padding: 30px 0

  .logos
    display: flex
    .collectiveLearningLogo, .mediaLabLogo
      max-height: 70px
      width: auto

    .collectiveLearningLogo
      max-height: 74px
      padding-right: 40px

.sections
  width: 100%

  .section
    +storyCopy
    display: flex
    flex-grow: 1
    flex-direction: column
    align-items: center
    width: 100%
    flex-shrink: 0
    border: none

    .sectionHeader
      +headerText
      font-family: 'Roboto Condensed', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif
      font-weight: 600
      text-transform: uppercase
      text-align: start
      width: 700px
      padding-bottom: 8px
      border-bottom: 1px solid black

    .sectionContent
      width: 600px
      max-width: 600px
      text-align: justify

      img.gif
        margin-top: 30px
        border: 1px solid black

      .textBox
        padding-top: 15px

  .contentSection
    padding: 60px 0
    background-color: $white

    &:nth-child(even)
      background-color: $landing-grey-background

      .sectionHeader
        text-align: end
