@import 'mixins.less';

// Global variables
@green: #97C458;
@orange: #ff8236;
@black: #575766;
@siteWidth: 1200px;

// Elements
body{ margin: 0; background: #F7F7F7; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; font-size: 18px; line-height: 1.666666667; }
a{ color: @green; text-decoration: none; }
p{ margin: 0 0 1em 0; }
ul{ margin: 0; padding: 0; list-style: none; }
section{  position: relative ; width: 100%; }
strong{ font-weight: 400; }
h1, h2{ margin: 1.363636364em 0 .681818182em 0; color: @green; font-size: 1.222222222em; font-weight: 300; text-transform: uppercase; letter-spacing: .1em; line-height: 1; white-space: nowrap; }
h2.large{ margin: 0 0 2em 0; font-size: 1.666666667em; text-transform: uppercase; line-height: 1; white-space: nowrap; letter-spacing: .1em; }

// Main classes
.center{ position: relative; margin: 0 auto; width: @siteWidth; }
.clear{ display: block; clear: both; }

// Header
header{ position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 600px; background: #212121;
  nav{ position: absolute; right: 0; top: 5px; font-size: 12px; font-weight: 600; text-transform: uppercase;
    ul{ float: left;
      li{ float: left; margin-left: 30px;
        a{ color: #fff; }
      }
      li.active a{ color: @green; }
    }
  }
  .logo{ margin: 15px 0; width: 130px; height:30px;background: url('/public/images/structure/yoda_sprite.png') -10px -10px; }
}

// Footer
footer{
  .call_to_action{ padding: 60px 0; background: @green; text-align: center;
    .streamer{ display: block; margin-bottom: 30px; color: #fff; font-size: 1.666666667em; }
    .btn{ padding: 0 20px;height: 50px; background: #fff; color: @black; font-size: 1.111111111em; line-height: 50px; }
  }
  .footer{ padding: 60px 0; background: #575C5C; color: #ABAEAE; font-size: .888888889em;
    .col{ width: @siteWidth/4; float: left;
      .title{ display: block; margin: 0 0 30px 0; color: #DDDEDE; font-size: .875em; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; line-height: 1; white-space: nowrap;  }
      ul{
        li a{ color: #ABAEAE; }
        .active a{ color: #fff; font-weight: 400; }
        ul{ padding: 0 0 0 20px; font-style: italic; }
      }
    }
  }
}

// Introduction
@introGutter: 60px;

.introduction{
  .bg{ position: absolute; width: 50%; height: 100%; background: #F3F3F3; }
  .col{ position: relative; z-index: 10; width: 50%; float: left;
    article{ padding: 120px 0; width: (@siteWidth/2)-@introGutter; }
    article h1:first-child, .introduction article h2:first-child{ margin-top: 0; }
  }
  .col.left article{ margin-right: @introGutter; }
  .col.right article{ margin-left: @introGutter; }
}

// Call to action
.call_to_action{
  .title{ display: block; margin-bottom: .666666667em; color: @green; font-size: 1.666666667em; line-height: 1.5; }
  p{ display: block; margin-bottom: 1.666666667em; font-style: italic; }
  .frans{ margin-bottom: 60px; }
  .image{ display: block; position: relative; float: left; margin-bottom: 30px;
    .mask{ display: block; position: absolute; top: -10px; left: -10px; z-index: 10; width: 160px; height: 160px; background: url('/public/images/structure/yoda_sprite.png') -10px -140px; }
  }
  .data{ display: block; margin: 20px 0 0 30px; float: left;
    .data_title{ display: inline-block; font-weight: 400; width: 70px; }
  }
}

// Button
.btn{ display: inline-block; position: relative; overflow: hidden; padding: 0 10px; height: 40px; font-weight: 600; text-transform: uppercase; line-height: 40px; letter-spacing: 0.05em;
  .text{ position: relative; z-index: 10; color: #fff; }
  .up{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: @orange; }
}

// Services
@colW: 285px;
@gutter: 20px;

.services{ padding-top: 60px; text-align: center;
  ul{ float: left;
    li{ position: relative; float: left; margin: 0 @gutter 120px 0; width: @colW; height: 430px; background: #fff;
      &:last-child{ margin-right: 0; }

      .title{ font-weight: 600; text-transform: uppercase;  line-height: 60px;}
      p{ padding: 0 (@gutter/2); color: @black; }
      .image img{ width: 100%; }
      .btn{ display: block; position: absolute; left: 50%; bottom: 30px; margin-left: -50px; width: 100px; height: 30px; background: @green; color: #fff; line-height: 30px; }
      .shadow{ position: absolute; bottom: -35px; left: 0; width: 100%; height: 35px; }
    }
  }
}

// Home - Banner
#home .banner{ position: relative; overflow: hidden; width: 100%; height: 600px; background: #DDD;
  img{ position: absolute; top: 50%; left: 50%; width: 100%; margin-left: -50%; margin-top: -360px; }
}

// Home - Why Yoda
@tableWidth: 800px;

#home .why_yoda{ padding-top: 60px; width: 100%; height: 570px; background: @green; text-align: center;
  h2{ color: #fff; }
  ul{ margin: 0 auto; width: @tableWidth; border-top: 1px solid #fff; color: #fff; text-align: left;
    li{ position: relative; line-height: 60px; border-bottom: 1px solid #fff;
      .core_value{ font-size: 1.111111111em; font-weight: 400; text-transform: uppercase;  }
      .description{ float: right; font-size: 1.222222222em; }
      .circle{ display: block; position: absolute; top: 21px; left: -40px; width: 20px; height: 20px; background: url('/public/images/structure/yoda_sprite.png') -160px -10px; color: @green; font-size: .722222222em; font-weight: 600; text-align: center; line-height: 20px; }
    }
  }
}

// Home - Reference quotes
#home .references{ padding-top: 60px; height: 750px; background: #EFEFEF;
  .quotes{ float: left; margin-left: (@colW+@gutter); width: (2*@colW+@gutter);
    ul{ width: 350px;
      li{ position: relative; margin-bottom: 30px; font-size: 1.166666667em;
        .name{ display: block; position: relative; margin: 15px 0 0 30px; color: @green; font-size: 1.142857143em; font-weight: 400;
          .mDash{ display: block; position: absolute; top: 0px; left: -30px; }
        }
        .function{ display: block; margin-left: 30px; color: @green; }
        .image{ display: block; position: absolute; top: 5px; left: -170px;
          .mask{ display: block; position: absolute; top: -10px; left: -10px; z-index: 10; width: 160px; height: 160px; background: url('/public/images/structure/yoda_sprite.png') -180px -140px; }
        }
      }
    }
  }

  // Home - Clients
  @clientRatio: 285 / 140;
  .clients{ position: relative; float: right; width: @colW; font-size: .777777778em; font-weight: 600; overflow: hidden; text-transform: uppercase;
    .show_all{ display: block; margin-top: 9px; }
    .slider{ position: relative; margin-top: 55px; width: 100%; height: (@colW / @clientRatio) * 3 + 40px;
      li{ position: relative; margin-bottom: 20px; width: 100% - 2px; height: (@colW / @clientRatio)-2px; border: 1px solid #E2E2E4;
        .bg{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; .opacity(0.6); }
        .logo{ position: relative; z-index: 10;}
      }
      .next, .prev{ display: block; position: absolute; left: 0; height: 30px; width: 100%; cursor: pointer;
        .arrow{ display: block; position: absolute; left: 50%; margin-left: -4px; width: 8px; height: 6px; background: url('/public/images/structure/yoda_sprite.png'); }
      }
      .next{ bottom: -30px;
        .arrow{ bottom: 0; background-position: -210px -20px; }
      }
      .prev{ top: -30px;
        .arrow{ top: 0; background-position: -200px -20px; }
      }
    }
  }
}

// Responsive class
#responsive
{
    // Set all main elements
  .set_main(@siteWidth)
  {
    // Main structure
    .center{ width: @siteWidth; }
    footer .footer .col{ width: @siteWidth/4; }
  }

    // Set responsive introduction elements
    .set_introduction(@siteWidth, @introGutter)
    {
      // Introduction
      .introduction{
        .col{
          article{ width: (@siteWidth/2)-@introGutter; }
          &.left article{ margin-right: @introGutter; }
          &.right article{ margin-left: @introGutter; }
        }
      }
    }

    // Set responsive "why yoda" elements
    .set_why_yoda(@tableWidth)
    {
       #home .why_yoda ul{ width: @tableWidth; }
    }

    .set_services(@colW, @gutter)
    {
        .services ul li{ margin: 0 @gutter 120px 0; width: @colW;
          p{ padding: 0 (@gutter/2); }
        }
    }

    .set_home_references(@colW, @gutter)
    {
        @clientRatio: 285 / 140;

        #home .references .quotes{ margin-left: (@colW+@gutter); width: (2*@colW+@gutter); }
        #home .references .clients{ width: @colW;
          .slider{ height: (@colW / @clientRatio) * 3 + 42px;
            li{ height: (@colW / @clientRatio)-2px; }
          }
        }
    }
}

// Media queries
@media screen and (max-width: 1300px)
{
    @siteWidth: 960px;

    // Set responsive elements
    #responsive > .set_main(@siteWidth);

    // Introduction
    @introGutter: 40px;
    #responsive > .set_introduction(@siteWidth,@introGutter);

    // Why Yoda
    @tableWidth: 730px;
    #responsive > .set_why_yoda(@tableWidth);

    // Services
    @colW: 225px;
    @gutter: 15px;
    #responsive > .set_services(@colW, @gutter);
    #responsive > .set_home_references(@colW, @gutter);
}