tabbit

Tue Jun 13 2017
Copied to clipboard! Copy reply
/*
 * This is mobile-first. When you see styles for
 * a section, it's for mobile. You'll see the desktop
 * adjustments if you scroll down and see `@media $desktop`
*/

$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)"


$lightblue = #43475A
$darkblue = #2D3436
$grey = #F2F2F2

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

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

h1
  text-align center
  @media $desktop
    font-size 40px
h2
  @media $desktop
    font-size 31px
h3
  font-size 1em
  text-align center
  @media $desktop
    font-size 21px


/* Header Section
 --------------------------------------*/
.header-wrapper
  background $grey
  text-align center
  
  
  div.nav
    text-align right
    position relative
    display table
    width 100%
    padding 0 0.5em
    margin-bottom 2em
    box-sizing border-box
    & > div
      display table-cell
      vertical-align middle
      &:first-of-type
        width 10%
    div#lp-chat-header-demo
      display inline-block
      border-right 1px solid $brown
    div[id^="LPMcontainer"] > span
      display block
      font-size 14px
      border-radius 4px
      margin-right 1em
      font-weight bold
      &:before
        content "CHATEA"
    a.tel:before
      color #3E3D3F
      font-weight bold
      content "8006162134"
      font-size 14px      
      padding-left 1em
    a.logo
      img
        height 50px
  h1, p
    
    color #3E3D3F
  p
    font-size 18px
    margin 0.4em 0 2.5em 0
  h1
    margin-top 1em
    font-family 'Gotham HTF Medium'
  div.devices
    width 100%
    height 231px
    background url(http://www.rosettastone.com/assets/catalog_mar_2017/online-lockup.png) no-repeat
    background-size contain
    background-position center
    margin 0 auto 1em
    position relative
    bottom 0em
  p
    font-size 1.2em
  
    
      

  @media $desktop    
    padding-top 0
    box-shadow 0 320px 0 #fff inset
    b
    div.nav
      padding 0 1em
      box-sizing border-box
      font-family 'Gotham HTF Bold'
      a.logo
        border none
        img
          display block
          height 60px
          border none
      div[id^="LPMcontainer"] > span
        background #3E3D3F
        color $white
        padding 1em 2em
        color #fff
        font-size 13px
        margin-right 0
        &:before
          content 'CHATEA EN VIVO'
      a.tel:before
        border none
        font-size 1.2em
        content "800-616-2134"
    p
      font-size 21px
      margin 0
    div.devices
      height 300px
    div.headline
      margin 2em 0
      




/* Select Languag Section
 --------------------------------------*/
// This is how much we're offsetting the rectangle 'ready for demo'
// div. We will give the div a negative $offset margin-bottom,
// and the #how-it-works div bellow it a padding-top of $offset 
$offset = 200px
.select-language-wrapper
  
  background $white  
  padding-bottom 2em
  
  h1
    text-align center
    font-weight lighter
    margin-top 1em
  form
    margin 0.5em auto 0
    text-align center
    div.languages
      
      text-align center
      a
        display inline-block
        color #4195D3
        font-weight bold
        font-size 14px
        border 2px solid #4195D3
        width 25.1vw
        height 40px
        line-height 40px
        border-radius 6px
        margin 0 1em 1em 0
        transition background 0.18s, color 0.18s
        &:nth-of-type(3)
          margin 0
        &.selected
        &:hover
          background #4195D3
          color $white

      input[type=email]
        color blue
        padding 0.8em
        font-size 18px
        display block
        width 100%
        border-radius 6px
        border 1px solid #979797
        color $brown
        box-sizing border-box
        text-align center
        &.invalid
          background lighten(red, 85%)
          border 1px solid #f62828

      div.notify-error
        color #f62828
        border 1px solid red
        letter-spacing 1px
        font-weight bold
        margin -3px auto 0
        padding 0.8em 0.3em
        box-sizing border-box
        border-top 1px dotted lighten(red, 50%)
        background lighten(red, 80%)
        border-bottom-left-radius 6px
        border-bottom-right-radius 6px
        display none
    small
      color #9B9B9B
      font-size 15px
      margin 1em
      display block
      text-align center
      font-weight 500
      &:last-of-type
        margin-bottom 0
    .newsletter
      text-align left
      color #9B9B9B
      font-size 110%

  @media $tablet
    form
      width 535px
      div.languages
        a
          width 156px
          height 55px
          line-height 55px
    

  @media $desktop
    &
      margin-bottom - $offset
    .content      
      background $lightblue
      color $white
      z-index 10
      position relative


.demo-wrapper
  height 89vh
  width 100%
  display none
  position relative
  a.close
    position: absolute;
    right 10px
    top -80px
    font-size 2em
    color $brown
    cursor pointer
    padding 30px 0 0

  #demo
    display none
    height 100%
    width 100%




/* How it works section
 --------------------------------------*/
.hiw-wrapper
  background $darkblue
  color $white
  text-align center  
  position relative
  
  p
    line-height 19px
    font-size 14px
    max-width 772px
    margin 0 auto
    line-height 21px
  div.cards
    margin-top 2em
    width 100%
    display flex
    flex-direction column
    align-items center
    div.card-container
      width 219px
      height 230px
      margin 0 auto 2em auto
      position relative
      colors = $white #C6C6C6 #00C1A5 #00C473
      for color, i in colors
        &:nth-of-type({i+1})
          left-border-color = darken(color, 20%)
          .front
            background color            
            box-shadow inset 8px 0 0 0 left-border-color
    div.card
      height 100%
      width 100%
      line-height 23px
    div.front, div.back
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      display flex
      align-items center
      background $white
      color $brown
      border-radius 6px
    div.front
      z-index 2      
      div.front-text

        width 100%
        // This is the number in the circle
        & > span:first-of-type
          width 40px
          height 40px
          border-radius 20px
          line-height 40px
          font-weight bold
          background $brown
          color $white
          display inline-block
        // Text below the circle
        & > span:last-of-type
          display block
          font-size 22px
          margin-top 0.5em
    
    div.back
      padding 1em 2em 2em
      box-sizing border-box
      display flex
      flex-direction column
      font-size 0.9em
      div
        margin-bottom 1em
        font-weight bold
        width 100%
        text-align left
      img
        display block
        width 100%
        height 100%



  @media $tablet
    border none
    div.cards
      display flex
      flex-direction row
      justify-content space-between
      div.card-container
        width auto
        div.front-text
          & > span:last-of-type
            font-size 18px

  @media $desktop
    &
      padding-top $offset
      border 1px solid red
    div.cards
      div.card-container
        width 219px
        display inline-block // ie
        vertical-align top // ie
        overflow hidden // here for IE but slightly affects chromium too (cropped when flipping)
        div.front-text
          & > span:last-of-type
            font-size 1.5em












 /* Reviews section
 --------------------------------------*/
.reviews-wrapper
    background $grey
    //font-weight bold
    //font-family 'Gotham HTF Medium'
  h2 + div
    text-align center
    margin 1.2em 0 2em
    font-size 18px
      


div.reviews
  padding-bottom 2em
  display flex   

  // The 3 columns
  & > div      
    h5
      font-family 'Gotham HTF Bold'      
    div.ratings
      margin-top 8px      
    div.company-quote    
      padding 0 2em
      flex-grow 1
      text-align center
      display flex
      flex-direction column
      justify-content center
      font-size 16px
      color #fff
      img
        margin-top 2em
      for color, i in #009BD0 #00A400 #DA0000
        &:nth-of-type({i+1})
          background color 

   


@media $desktop
  div.reviews-wrapper
    font-weight normal
  div.reviews    
    position relative
    h2 + div
      text-align  center
      margin 1.5em 0 1em 0
      
    // The 3 columns
    & > div      
      
      //display inline-block // ie
      //vertical-align top // ie
      display flex
      flex-direction column      
      line-height 20px
      font-size 15px
      &.col-1
      &.col-3
        width 29%
      &.col-2        
        width 45%
        
      div.user-review
        background #fff
        color $brown
        padding 1.5em
        position relative
        &:first-of-type
          padding-bottom 2em
        &.darkblue
          background $darkblue
          color $white
        h5
          font-size 1.1em
          margin-bottom 1em
          text-align center
        .ratings
          margin 1em 0 1em
          text-align  center
        div.author
          padding 1em 0    

      




/* Stats section
 --------------------------------------*/
.stats-wrapper
  background $darkblue
  text-align center
  color $white
  p
    font-size 18px
    padding 0
    margin 0
  .content
    a.button
      margin-top 1em

.stat-icons
  margin 0 auto
  width 100%
  & > div
    display inline-block
    vertical-align top
    width 80%
    max-width 160px
    margin 2em auto 0
    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

@media $tablet
  .stat-icons
    & > div
      display inline-block
      vertical-align top
      margin-right 1em
      &:last-of-type
        margin-right 0



/* Footer section
 --------------------------------------*/
.footer-wrapper
  background $white
  padding 0 0
  text-align center
  @media $desktop
    padding 3em 0

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

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

h1  
  text-align center
  font-weight 500

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



.content
  padding 1em 1.5em
  @media $dekstop
    padding 35px 1.5em
  & > h1
    padding 0 0 25px
  @media $desktop
    width 978px
    margin 0 auto
    padding 30px 0
    & > h1
      font-weight normal





.button
  background #3E3D3F
  color $white
  display block
  width 100%
  font-size 14px
  border-radius 6px
  font-weight bold
  margin-bottom 1em
  border none
  cursor pointer
  outline none
  -webkit-appearance none

  // Green buttons are a submit button
  &.regular-button
    padding 1em 0
    box-sizing border-box
    &.green
      // pricing details button
      background #00B331
      width 90%
      margin 0 auto
      border-radius 4px
      margin-top 1.5em

  &.submit-button
    background #C626B6
    display inline-block
    margin 1em auto 0
    width auto
    min-width 300px
    height 50px
    line-height 50px
    padding 0
    input[type=submit]
      width 100%
      height 50px
      padding 0em 2.3em
      display block
      border 0
      font-weight inherit
      font-size inherit
      background #C626B6
      color inherit
      border-radius inherit
      -webkit-appearance none

  @media $desktop
    font-size 20px
    padding 0.8em
    border-radius 8px
    color #fff
    &.regular-button

      &.green
        // pricing details button
        background #C626B6
        width 50%
        margin 0 auto
        border-radius 8px
        margin-top 0
      &.submit-button
        min-width 367px





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

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

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

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




  /* Button Loading */
.sk-fading-circle {
  margin: 0 auto;
  width: 28px;
  height: 28px;
  position: relative;
  display: none;
  margin-top: 10px;
}

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg);
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg);
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}




// Putting these here to avoid nesting and increasing filesize
.arrow-up
.arrow-down
  display none

@media $desktop
  .arrow-up
    display block
    width 0
    height 0
    position absolute
    top -11px
    left 45%
    border-left 11px solid transparent
    border-right 11px solid transparent
    border-bottom 11px solid $white
    
  .arrow-down
    display block
    width 0
    height 0
    position absolute
    bottom -11px
    left 45%
    border-left 11px solid transparent
    border-right 11px solid transparent
    border-top 11px solid $white
    z-index 4