styles.sass

---
---

// --------------------------------
// Imports
// --------------------------------

@import "normalize"
@import "fonts"

// --------------------------------
// Variables
// --------------------------------

$base                 : #333333 // gray
$accent               : #C0493D // red
$highlight            : #e5e1cf // beige
$secondary            : #28bbc6 // blue
$secondary            : #e5e1cf // beige
$tertiary             : #544f3b // dark beige

// --------------------------------
// Base
// --------------------------------

*, *:before, *:after
  box-sizing: inherit

html, body
  background: $accent
  box-sizing: border-box
  color: $base
  font-family: 'Open Sans', sans-serif
  font-size: 16px
  line-height: 200%
  overflow-x: hidden

strong
  font-weight: 600

h2, h3
  color: $accent
  font-weight: 400
  line-height: 160%
  margin: 1.5em 0 0.5em 0

  strong
    font-weight: 900

h2
  font-size: 32px
  padding: 0 0 0.5em 0
  border-bottom: 1px solid rgba($accent, 0.15)

  @media (screen and max-width: 800px)
    font-size: 24px

img
  max-width: 100%

p code
  display: inline-block
  background: $base
  color: white
  padding: 0 10px
  margin: 0 2px
  font-size: 1em

a
  &:link, &:visited
    color: $accent
    text-decoration: none

  &:hover, &:active
    color: $accent
    text-decoration: underline

::selection
  color: $base
  background: rgba($secondary, 0.15)
  text-shadow: none

// --------------------------------
// Classes
// --------------------------------

.ir
  font: 0/0 a
  text-shadow: none
  color: transparent

.cf:before
.cf:after
  content: ' '
  display: table

.cf:after
  clear: both

.cf
  *zoom: 1

.terminal
  position: relative
  background-color: $base
  color: white
  display: block
  margin: 0 auto 15px auto
  padding: 2em 0

  pre
    font-size: 1em
    line-height: 180%
    margin: 0
    padding-left: 2em

.divider
  color: rgba($base, 0.25)
  margin: 0 10px

.highlight
  padding: 0 0 1px 0
  border-bottom: 1px solid rgba(white, 0.35)

// --------------------------------
// Main
// --------------------------------

.main
  display: flex
  transform: translate3d(0,0,0)
  transition: transform 0.2s

  @media (screen and max-width: 800px)
    display: block

  .panel
    display: flex
    flex: 1 1 50%
    max-width: 50%

    @media (screen and max-width: 800px)
      display: block
      clear: both
      width: 100%
      max-width: 100%
      flex: none
      float: left
      height: auto

  // --------------------------------
  // Right Side
  // --------------------------------

  .side
    background: $accent
    position: relative
    color: $highlight

    p
      a
        color: $highlight
        padding-bottom: 2px
        border-bottom: 1px solid rgba($highlight, 0.35)
        transition: border-color 0.2s

        &:hover
          text-decoration: none
          border-color: $highlight

    .container
      width: 100%
      height: 100vh
      position: absolute

      .inner
        width: 80%
        position: absolute
        z-index: 9999
        left: 10%
        top: 10%

        @media (screen and max-width: 800px)
          width: 90%
          left: 5%
          top: 5%

      .logo

        img
          width: 80%
          max-width: 480px
          height: auto
          margin: 0 auto 40px
          display: block

        &:hover
          text-decoration: none

        .about
          margin: 0 auto 60px
          text-align: center
          color: $highlight
          font-size: 20px
          font-weight: 300
          line-height: 200%

      h2
        color: $highlight
        border-color: rgba($highlight, 0.35)

  // --------------------------------
  // Left Side
  // --------------------------------

  .text

    .container
      width: 100%
      background: white
      padding: 60px 80px 60px 160px

      @media (screen and max-width: 800px)
        padding: 40px 20px

      .header
        margin: 0 0 40px

        .logo
          display: block
          position: relative
          width: 40%
          max-width: 400px
          margin: 0 auto 20px

          img
            width: 100%
            height: auto
        h1
          font-size: 50px
          line-height: 140%
          text-align: center
          font-weight: 300
          margin: 0 auto 60px
          letter-spacing: -1px
          color: $accent

          @media (screen and max-width: 800px)
            font-size: 32px
            margin: 0 auto 20px

// --------------------------------
// Event Badge
// --------------------------------

.event
  margin: 0
  box-shadow: 0 0 30px darken($accent,15%)
  background: $secondary
  color: $tertiary

  a, a:link, a:visited, a:active,
  p a, p a:link, p a:visited, p a:active
    color: $tertiary
    padding: 0 0 1px 0
    border-bottom: 1px solid rgba($tertiary, 0.35)

  .register
    display: inline-block
    width: 100%
    font-size: 20px
    line-height: 180%
    font-weight: 100
    padding: 0 25px
    transition: all ease-in-out 0.2s
    position: relative

    strong
      display: inline-block
      font-weight: 600

    @media (screen and max-width: 800px)
      padding-left: 20px

    &:before, &:after
      font-family: 'icon'

    &:before
      content: '\e6b6'
      font-size: 24px
      display: inline-block
      padding: 0 25px 0 8px
      margin: 0

  .additional
    padding: 20px 20px 30px 100px
    margin: 0
    position: relative
    font-weight: 100
    line-height: 200%

    &:before
      content: '\e6c5'
      font-family: 'icon'
      display: block
      position: absolute
      top: 50px
      left: 35px
      font-size: 32px

  .schedule, .location
    line-height: 100%
    padding: 30px 20px 20px 90px
    margin: 0 0 10px 0
    position: relative
    font-size: 18px
    font-weight: 100

    &:before
      content: '\e693'
      font-family: 'icon'
      font-size: 24px
      display: block
      position: absolute
      top: 30px
      left: 35px

  .schedule
    border-top: 1px solid rgba($tertiary, 0.35)
    border-bottom: 1px solid rgba($tertiary, 0.35)
    padding-bottom: 30px
    margin: 0

    &:before
      content: '\e702'

  .timeline
    margin: 0
    padding: 0
    width: 100%
    display: block

    .row
      @extend .cf
      list-style: none
      display: block
      width: 100%
      margin: 0
      padding: 0
      line-height: 100%
      border-bottom: 1px solid rgba($tertiary, 0.35)

      .time, .name
        display: block
        float: left
        padding: 20px
        text-align: left

      .time
        width: 30%
        padding: 20px 10px 20px 30px
        font-weight: 600
        border-right: 1px solid rgba($tertiary, 0.35)

      .name
        width: 70%
        font-size: 100

  .map
    width: 100%
    height: 0
    padding: 52.26% 0 0 0
    position: relative
    background: darken($secondary, 5%)
    transition: border-color ease-in-out 0.2s

    iframe
      width: 100%
      height: 100%
      position: absolute
      top: 0
      left: 0

// --------------------------------
// Mentors
// --------------------------------

.list-mentors
  width: 100%
  z-index: 900
  margin: 50px 0 0 0

  &:hover

    .mentor
      opacity: 0.25

      &:hover
        opacity: 1
        transform: scale(1.5)
        z-index: 9999

  .photos
    height: 0
    width: 0

  .mentor
    display: block
    float: left
    position: relative
    text-align: center
    width: 20%
    height: 0
    padding: 20% 0 0 0
    margin: 0 0 20px 0
    transition: opacity 0.3s, transform 0.2s

    @media (screen and max-width: 1200px)
      width: 25%
      padding: 25% 0 0 0

    svg
      top: 0
      left: 0
      position: absolute
      width: 100%
      height: 100%

// --------------------------------
// Photo Gallery
// --------------------------------

.gallery
  position: relative
  width: 100%
  margin: 50px auto 0

  &:hover

    .image-wrapper
      opacity: 0.25

    .image-wrapper:hover
      opacity: 1
      transform: scale(1.5)
      z-index: 9999

  .image-wrapper
    float: left
    width: 20%
    height: 0
    padding: 20% 0 0 0
    display: block
    position: relative
    transition: opacity 0.3s, transform 0.2s

    @media (screen and max-width: 1200px)
      width: 25%
      padding: 25% 0 0 0

    .image
      width: 100%
      height: 100%
      position: absolute
      top: 0
      left: 0
      display: block
      background-color: $accent
      background-size: cover
      background-position: center center

// --------------------------------
// Navigation
// --------------------------------

.nav
  height: 100%
  position: fixed
  background: $accent
  z-index: 9999
  width: 80px
  transition: width 0.2s
  overflow: hidden

  &:hover
    width: 280px

    & + main
      transform: translate3d(200px, 0, 0)

  @media (screen and max-width: 800px)
    display: none

  ul, li
    margin: 0
    padding: 0

  li
    list-style: none

    a
      width: 280px
      height: 80px
      display: block
      position: relative
      transition: background ease-in-out 0.2s
      border-bottom: 1px solid rgba($highlight,0.15)

      &:hover
        background: $highlight

        &:before, &:after
          color: $accent

      &:before
        content: ''
        font-family: 'icon'
        font-size: 20px
        padding: 28px 0 0 0
        line-height: 100%
        text-align: center
        left: 0
        top: 0
        position: absolute
        display: block
        height: 80px
        width: 80px
        color: $highlight
        transition: color ease-in-out 0.2s

      &.home:before
        content: '\e69b'

      &.community:before
        content: '\e665'

      &.events:before
        content: '\e66f'

      &.faq:before
        content: '\e69c'

      &.mentors:before
        content: '\e602'

      &.photos:before
        content: '\e633'

      &.code:before
        content: '\e618' // e63b - flag // shield e67b

      &:after
        content: attr(data-text)
        color: $highlight
        position: absolute
        top: 0
        left: 80px
        padding: 38px 0 0
        display: block
        font-family: 'Open Sans', sans-serif
        font-size: 18px
        font-weight: 400
        white-space: nowrap
        transition: color ease-in-out 0.2s

// --------------------------------
// Tito Ticket Listing
// --------------------------------

.tito-ticket-list
  border-top: 1px solid rgba($tertiary, 0.35)
  margin: 0
  padding: 0

.tito-ticket
  @extend .cf
  display: block
  padding: 0
  margin: 0
  list-style: none
  border-bottom: 1px solid rgba($tertiary, 0.35)

.tito-badge-link,
.tito-notch
  display: none !important

.tito-ticket-name-wrapper,
.tito-ticket-price-quantity-wrapper,
.tito-ticket-price,
.tito-ticket-quantity
  display: block
  float: left

.tito-ticket-name-wrapper
  width: 60%
  padding: 20px 0 20px 90px
  position: relative

  @media (screen and max-width: 800px)
    width: 100%

  &:before
    content: '\e66f'
    font-family: 'icon'
    font-size: 32px
    font-weight: 100
    line-height: 100%
    position: absolute
    display: block
    top: 50%
    left: 0
    margin: -16px 0 0 0
    padding: 0 0 0 30px

.tito-ticket-price-quantity-wrapper
  width: 40%

  @media (screen and max-width: 800px)
    width: 100%

.tito-ticket-price,
.tito-ticket-quantity
  text-align: right

.tito-ticket-price
  padding: 25px 0 0
  width: 40%

  @media (screen and max-width: 800px)
    padding: 20px
    width: 50%

.tito-ticket-quantity
  padding: 25px 20px 0 0
  width: 60%

  @media (screen and max-width: 800px)
    padding: 20px
    width: 50%

.tito-ticket-price span,
.tito-ticket-quantity .tito-submit
  display: inline-block
  line-height: 100%
  padding: 15px 25px

.tito-submit
  color: $tertiary
  background: darken($secondary, 10%)
  border: none
  border-radius: 3px
  font-weight: 600
  transition: background 0.2s, color 0.2s

  &:hover
    color: $secondary
    background: $tertiary

.tito-ticket-price
  font-weight: 600

.tito-ticket-name,
.tito-ticket-description
  display: block

.tito-ticket-name
  font-weight: 600
  font-size: 18px

.tito-ticket-description
  font-size: 14px
  line-height: 160%
  font-weight: 100

.tito-badge-link
  display: block
  clear: both
  width: 100%
  padding: 15px 20px
  text-align: right