jeunes-et-engages-d7/sites/all/themes/gui/jee/css/jee.scss

@charset "UTF-8";



@import "../bower_components/foundation/scss/normalize.scss";




@import "../bower_components/foundation/scss/foundation/functions";

$row-width: rem-calc(1250);
// $total-columns: 12;
$column-gutter: rem-calc(20);

//@import "../bower_components/foundation/scss/foundation/settings"; // this is not working, causing an error on compilation
@import "../bower_components/foundation/scss/foundation/components/global";
@import "../bower_components/foundation/scss/foundation/components/type";
@import "../bower_components/foundation/scss/foundation/components/clearing";
// @import "../bower_components/foundation/scss/foundation/components/inline-lists";
@import "../bower_components/foundation/scss/foundation/components/grid";
// @import "../bower_components/foundation/scss/foundation/components/top-bar";
@import "../bower_components/foundation/scss/foundation/components/block-grid";
// @import "../bower_components/foundation/scss/foundation.scss"; // without importing the whole foundation, the final css files is 75% less heavier

// @import "../bower_components/animate.scss/scss/animate.scss";

/*
* ESADHaR
*/
@import "communs.scss";
@import "fonts.scss";



html{
  position:relative;
}

body{
  position:relative;
  height:100%!important;


    /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);

  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);

  /* Opera */
  background-image: -o-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);

  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFDE9), color-stop(1, #BECFD9));

  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);

  /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to bottom, #FFFDE9 0%, #BECFD9 100%);

}

#root{
  position:relative;
  width:100%;
  height:100%;
  overflow: hidden;
  // width:1125px;
  // height:900px;
  // margin:-450px auto 0;
  // top:50%;
}

@keyframes introLogo{
  0%     {opacity:0;}
  35%   {opacity:1;}
  50%   {opacity:1;}
  75%   {opacity:0;}
  100% {opacity:0;}
}
@keyframes introLogoBlured{
  0%     {opacity:0;}
  50%   {opacity:0;}
  60%   {opacity:0.8;}
  100% {opacity:0.8;}
}
@keyframes introSlogan{
  0%      {opacity:0;}
  50%    {opacity:0;}
  70%    {opacity:1;}
  90%    {opacity:1;}
  100%  {opacity:0;}
}

$animeLogoDuration:12s;

#header{
  position:absolute;
  overflow:hidden;
  width:700px;
  height:310px;
  top:50%; left:50%;
  margin-left:-350px;
  margin-top:-155px;

  h1{
    position:absolute;
    width:100%; height:100%;
    a{display:block;margin-top:-500%;}
    // filter:url(#blur-effect);
    &:after, &:before{
      content:"";
      display:block;
      width:100%; height:100%;
      position:absolute;
      top:0; left:0;
      opacity:0;
    }
    &:before{
      background: transparent url('../assets/img/logo.svg') no-repeat center center;
      animation: introLogo $animeLogoDuration linear 0s;
      animation-fill-mode: forwards;
    }
    &:after{
      background: transparent url('../assets/img/logo-blured.svg') no-repeat center center;
      animation: introLogoBlured $animeLogoDuration linear 0s;
      animation-fill-mode: forwards;
    }
  }


  h2{
    background: transparent url('../assets/img/slogan.svg') no-repeat center center;
    position:absolute;
    width:100%; height:100%;
    a{display:block;margin-top:-500%;}
    opacity:0;
    animation: introSlogan $animeLogoDuration linear 0s;
    animation-fill-mode: forwards;
  }

}

#footer{
  position:fixed;
  bottom:0;
  .block{
    display:inline-block;
    vertical-align: top;
  }
}