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

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


html{
  position:relative;
  // overflow:hidden;
  // height:100%;
}

body{
  position:relative;
  user-select:none;
  height:100%!important;
  // min-height:1000px;
  width:100%;;
  overflow:hidden;
}

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

  /* 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%);

}

@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:8s;

#header{
  position:absolute;
  overflow:hidden;
  width:700px;
  height:310px;
  top:50%; left:50%;
  margin-left:-350px;
  margin-top:-155px;
  // transition-property: "transform";
  // transition-duration: 0.2s;
  // transition-timing-function:ease-out;
  animation-fill-mode: forwards;

  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;
  }
} // #header

div.messages{
  position:absolute;
  top:20px; right:20px;
  width:250px; max-height:30%;
  overflow-y:auto;
}

#main{
  position:absolute;
  width:100%; height:100%;
  overflow:hidden;

  &>.region, &>.region>.block-system, &>.region>.block-system>.content{
    position:relative;
    width:100%; height:100%;
    overflow:hidden;
  }

  .node-chapitre.node-teaser{
      position:absolute;
      // transition:0.1s ease-out;
      // transition-property:transform;
      // animation-fill-mode: forwards;

      // INTERACTIVITÉ - - - - - - - - - - - --
      // ----- DEFAULT MODE ----
      h2.node-title{
        transform:none;
        transform-origin:bottom center;
        transition:1s ease-out;
        transition-property:transform;
      }
      .field-name-field-comprendre{
        opacity:0; height:1px; overflow:hidden;
        transition:1s ease-out;
        transition-property:opacity height;
      }
      .field-name-field-partie{
          opacity:0;
          position:absolute;
          transition:1s ease-out 0.5s;
          transition-property: opacity transform;
          // just let see the field vignette of first partie
          &:nth-child(3){
            z-index:2;
            opacity:1;
            transition-delay:0;
            >.field-type-text{
              opacity:0;
              transition:1s ease-out 0.5s;
              transition-property: opacity;
            }
            >.field-name-field-vignette{cursor:pointer;z-index:2;}
          }
      }
      // &.closed .field-name-field-partie{
      //     transform:none!important;
      // }
      .links{
        opacity:0;>*{display:none;}
        transition:1s ease-out 1s;
        transition-property:opacity;
      }
      &:after{
        opacity:0;
        // display:none;
        transition: 3s ease-out;
        transition-property:opacity;
      }
      .line{
        // transition: 0.5s ease-out;
        // transition-property:height transform;
      }

       // ----- PREVIEW MODE ------
      &.previewed{
        &:after{opacity:1;}
        h2.node-title{transform:scale(2,2);}
        .field-name-field-comprendre{opacity:1; height:6em;}
        .links{opacity:1;>*{display:block;}}
        .field-name-field-partie{
          opacity:1; z-index:0;
          // display all fields inside each parties
          >.field{opacity:1; z-index:-1; cursor:default;}
        }
      }

      // ------- GENERALS (non interactive) - - - - - - - - - - - - - - - - - -
      &:after{ // background
        content:" ";
        background-size:contain;
        // background-clip: content-box;
        background-repeat: no-repeat;
        position:absolute;
        $pad:-2em;
        top:-$pad;
        left:$pad*6; right:$pad*6;
        bottom:$pad*15;
        // border: 1px solid blue;
        z-index:-1;
      }

      h2.node-title{
        font-family: "epflulb";
        font-weight:normal;
        text-transform: uppercase;
        text-align: center;
        max-width: 8.5em;
        line-height: 0.85;
        @media #{$large-up} {
          font-size: 1.3em;
        }
        @media #{$xlarge-up} {
          font-size:1.8em;
        }
        z-index: 5;
      }

      .field-name-field-comprendre{
        h1,h2,h3,h4,h5,h6{display:none!important;}
        max-width:15em;
        p{margin:0;}
      }

      .field-name-field-partie{clear:both; padding-top:1em;}


      $shadow-size:3.5em;
      .field-name-field-vignette{
        position:relative;
        float:left;
        $shadow-size:3.5em;
        padding:$shadow-size;
        margin-top:-$shadow-size*1.15;
        margin-right:-$shadow-size+1.5em;
        margin-bottom:0;
        margin-left:0;
        background-size: contain;
        background-repeat: no-repeat;
        background-origin: center center;
      }
      .field-type-text{ min-width:16em; }
      .field-name-field-titre{
        font-family: "epflul";
        font-size:1.6em;
        line-height:1.1;
      }
      .field-name-field-sous-titre{
        font-family: "epflul";
        font-size:1.4em;
        line-height:1.2;
      }
      .field-name-field-description{
        // font-family: "epf-lul";
        font-size:0.88em;
        line-height:1.2;
      }

      ul.links{
        margin:0; text-align: right; z-index:5; position:relative;
        li.node-readmore{
          padding:0;
          a{
            display:inline-block;
            height:25px;
            font-family: "open_sans";
            font-weight: 900;
            color:#000!important;
            width:8em; text-align: left;
            background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
          }
        }
      }

      .line{
        z-index:-1;
        position:absolute;
        top:$shadow-size - 0.5em; left:$shadow-size+2.5em;
        transform-origin:top left;
        width:2px; background-color:red;
        opacity:0.4;
      }

  } // node-chapitre

  // COLORS BY NODE - - - - - - - - - - - - - - - - - - - - -
  //SOL
  #node-2{
    &::after{ background-image : url(../assets/img/bgd-sol.svg); }
    &, a{color:$SOL-col-txt;}
    h2.node-title{&,a{color:$SOL-color;}}
    .field-name-field-vignette{ background-image:url(../assets/img/shadow-sol.svg); }
    .line{background-color:$SOL-col-active;}
  }
  //DPH
  #node-3{
    &::after{ background-image : url(../assets/img/bgd-dph.svg); }
    &, a{color:$DPH-col-txt;}
    h2.node-title{&,a{color:$DPH-color;}}
    .field-name-field-vignette{ background-image:url(../assets/img/shadow-dph.svg); }
    .line{background-color:$DPH-col-active;}
  }
  // SUB
  #node-4{
    &::after{ background-image : url(../assets/img/bgd-sub.svg); }
    &, a{color:$SUB-col-txt;}
    h2.node-title{&,a{color:$SUB-color;}}
    .field-name-field-vignette{ background-image:url(../assets/img/shadow-sub.svg); }
    .line{background-color:$SUB-col-active;}
  }
  // BC
  #node-5{
    &::after{ background-image : url(../assets/img/bgd-bc.svg); }
    &, a{color:$BC-col-txt;}
    h2.node-title{&,a{color:$BC-color;}}
    .field-name-field-vignette{ background-image:url(../assets/img/shadow-bc.svg); }
    .line{background-color:$BC-col-active;}
  }
  //OPP
  #node-6{
    &::after{ background-image : url(../assets/img/bgd-opp.svg); }
    &, a{color:$OPP-col-txt;}
    h2.node-title{&,a{color:$OPP-color;}}
    .field-name-field-vignette{ background-image:url(../assets/img/shadow-opp.svg); }
    .line{background-color:$OPP-col-active;}
  }
  //DUB
  #node-7{
    &::after{ background-image : url(../assets/img/bgd-dub.svg); }
    &, a{color:$DUB-col-txt;}
    h2.node-title{&,a{color:$DUB-color;}}
    .field-name-field-vignette{ background-image:url(../assets/img/shadow-dub.svg); }
    .line{background-color:$DUB-col-active;}
  }
  // JUSO
  #node-8{
    &::after{ background-image : url(../assets/img/bgd-juso.svg); }
    &, a{color:$JUSO-col-txt;}
    h2.node-title{&,a{color:$JUSO-color;}}
    .field-name-field-vignette{ background-image:url(../assets/img/shadow-juso.svg); }
    .line{background-color:$JUSO-col-active;}
  }

  .chapter-wrapper{
    position:absolute;
    top:0; left:0; bottom:0; right:0;
  }
} // main

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

.backdom{
  display:none;
}

#fullscreen-btn{
  position:fixed;
  top:20px; left:20px;
  z-index: 1000;
}

// DEBUG
#fps{
  position:fixed;
  top:20px; right:20px;
  z-index: 1000;
}

#nav-cursor{
  position:absolute;
  width:6px; height:6px;
  margin-top: -3px; margin-left: -3px;
  background-color: red;
  z-index:1000;
}