tabbit

Tue Feb 21 2017
Copied to clipboard! Copy reply

$phone-screen-xs = 20em
$phone-screen    = 34em
$tablet-screen    = 48em
$desktop-screen   = 62em

$screen     = "only screen";
$phone-xs   = "only screen and (max-width: " + $phone-screen-xs + ")"
$phone      = "only screen and (min-width: " + $phone-screen + ")"
$tablet     = "only screen and (min-width: " + $tablet-screen + ")"
$desktop    = "only screen and (min-width: " + $desktop-screen + ")"
$landscape  = "only screen and (orientation: landscape)"
$portrait   = "only screen and (orientation: portrait)"


$yellow = #fbc000
$white = #f0f0f0
$brown = #392E07

body
  background #fff
  margin 0
  padidng 0
  font-size 14px
  font-family 'Gotham HTF Book'
  color #3E3D3F

.content
  width 978px
  margin 0 auto
  padding 3em 0 3em


/* Header Section
 --------------------------------------*/
.header-wrapper
  background $yellow
  padding-top 2em
  height 547px
  .nav
    text-align right
    position relative
    display table
    width 100%
    & > div
      display table-cell
      vertical-align middle
      &:first-of-type
        width 10%
    a.livechat:before
      background #3E3D3F
      color $white
      padding 1em 2em
      border-radius 4px
      margin-right 1em
      font-weight bold
      content "CHAT"
    a.tel
      color #3E3D3F
      font-weight bold

  h1, p
    text-align center
    color #3E3D3F
  p
    font-size 26px

    margin 0.4em 0 2.5em 0
  h1
    margin-top 1em
    font-size 36px
    font-family 'Gotham HTF Medium'
  .devices
    width 693px
    height 444px
    background url(../assets/devices.png)
    background-size contain
    margin 0 auto
    position relative
    bottom 0em

  @media $desktop
    // This is .header-wrapper rules
    padding-top 0
    .nav
      padding 0 1em
      box-sizing border-box
      height 200px
      a.logo
        img
          display block
          height 130px
      a.livechat:before
        content "LIVE CHAT"




/* Select Languag Section
 --------------------------------------*/
.select-language-wrapper
  background $white
  padding-top 155px
  padding-bottom 2em
  h1
    text-align center
    font-weight lighter
    font-family 'Gotham HTF Book'
  form
    width 535px
    margin 2.5em auto 0
    text-align center



    div.languages
      text-align center
      a
        display inline-block
        color #4195D3
        font-weight bold
        font-size 18px
        border 3px solid #4195D3
        width 156px
        height 55px
        line-height 55px
        border-radius 8px
        margin 0 1em 1em 0
        transition background 0.18s, color 0.18s
        &:nth-of-type(3)
          margin 0
        &:hover
          background #4195D3
          color $white

    input[type=text]
      color blue
      padding 0.8em
      font-size 18px
      display block
      width 100%
      border-radius 8px
      border 1px solid #979797
      color $brown

    small
      color #9B9B9B
      font-size 15px
      margin 1em
      display block
      text-align center
      font-weight 500
      &:last-of-type
        margin-bottom 0


/* How it works section
 --------------------------------------*/
 .hiw-wrapper
    background $brown
    color $white
    text-align center

    h1
      margin-bottom 0.5em
    p
      line-height 19px
      font-size 18px
      max-width 772px
      margin 0 auto
      line-height 23px
    .cards

      display table
      border-spacing 23px

    .card
      display table-cell
      vertical-align middle
      background $white
      color $brown
      border-radius 8px
      width 219px
      height 235px
      margin-right 28px
      padding 0 1em
      box-sizing border-box
      &:last-of-type
        margin-right 0
      // First card's number (1) needs a bit of top margin
      // since the text below is in 2 lines
      &:first-of-type
        & > span:first-of-type
          margin-top 2em

      & > span:first-of-type
        width 40px
        height 40px
        background $brown
        color $white
        display inline-block
        line-height 40px
        border-radius 20px
        font-weight bolder
        font-size 18px
      & > span:last-of-type
        display block
        font-size 26px
        margin-top 0.5em





/* Reviews section (this is awful i know)
 --------------------------------------*/
.reviews-wrapper
  background $yellow


  h1 + div
    text-align center
    margin-bottom 2em
    font-size 18px

.desktop-reviews
  display table
  height 400px
  padding-bottom 2em
  .cell-content
    padding 1em 1em 0.5em

  & > div
    display table-cell
    vertical-align top
    font-size 18px
    color $white

    & > div
      padding 0em

  .col-1
    width 249px
    font-size 16px

  .col-2
    width 480px

    text-align center
  .col-3
    width 249px
    font-size 16px
    background #009BD0

  .review-1, .review-2
    color $white
    background $brown
    font-size 15px
    h3
      font-size 16px
    .ratings
      margin 10px 0
  .quote-1
    background #009BD0
  .quote-2
    background #00A400
  .quote-3
    background #DA0000
  .quote-1, .quote-2, .quote-3
    padding 37px 0
    p
      width 346px
      margin 0 auto
    img
      display block
      margin 1.2em auto 0



  .story-1, .story-2
    background #fff
    color $brown
    font-size 14px
    p
      font-style italic
    h5
      font-weight bold
      font-size 16px
    .video-thumb
      img
        display block
  .story-1
    line-height 14px


/* Stats section
 --------------------------------------*/
.stats-wrapper
  background $brown
  text-align center
  color $white
  h1 + p
    font-size 18px
    padding 0
    margin 0
.stat-icons
  display table
  margin 0 auto
  width 100%
  & > div
    display table-cell
    width 20%
    max-width 120px
    padding 5%
    box-sizing border-box
    text-align center
    .img
      width 100%
      height 100px
      background-repeat no-repeat
      background-position center

    &:nth-of-type(1)
      .img
        background-image url(../assets/corporations.svg)
    &:nth-of-type(2)
      .img
        background-image url(../assets/organizations.svg)
    &:nth-of-type(3)
      .img
        background-image url(../assets/educational.svg)
    &:nth-of-type(4)
      .img
        background-image url(../assets/worldwide.svg)

    span
      display block
      &:first-of-type
        margin-top 1em
        font-size 20px
        font-weight bold
        margin-bottom 0.2em


/* Footer section
 --------------------------------------*/
.footer-wrapper
  background $white
  padding 4em 0
  text-align center

.social-icons
  margin-bottom 2em
  a
    display inline-block
    margin-right 1em
.legalese
  color #8F8F8F
  a
    color #0065BD

/* Globals
 --------------------------------------*/
a
  text-decoration none

h1
  font-size 40px
  text-align center
  font-weight 500

h1, h2, h3, h4, h5
  padding 0
  margin 0

.content > h1
  padding 0 0 0.5em
  margin 0


  /*
    Dark Gray Buttons (Chat, Select a Language):Resting: 3E3D3F
    Hover: 302F31


    Language Ghost Button: Resting Ghost: 4195D3
    Resting Text color: 4195D3
    Hover Solid Button: 4195D3
    Hover Text color: FFFFFF
    Green Button:Resting: 00B03F
    Hover: 00A13A
    */















.button
  background #3E3D3F
  color $white
  padding 0.8em
  display block
  width 100%
  font-size 20px
  border-radius 8px
  font-weight bold
  margin-bottom 1em
  border none
  border-bottom 2px solid #fff
  &.green
    background #00B331
    display inline-block
    margin 1em auto 0
    width auto
    padding 1em 2.3em






@font-face
  font-family 'Gotham HTF Book'
  font-style normal
  src url(../assets/fonts/gotham/gothamhtf-book.ttf)

@font-face
  font-family 'Gotham HTF Light'
  font-style light
  src url(../assets/fonts/gotham/gothamhtf-light.ttf)

@font-face
  font-family 'Gotham HTF Medium'
  font-style normal
  src url(../assets/fonts/gotham/gothamhtf-medium.ttf)

@font-face
  font-family 'Gotham HTF Bold'
  font-style bold
  src url(../assets/fonts/gotham/gothamhtf-bold.ttf)