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";


/*
    __  ________  __ _____   _______
   /  |/  /  _/ |/ //  _/ | / / ___/
  / /|_/ // / |   / / //  |/ /\__ \
 / /  / // / /   |_/ // /|  /___/ /
/_/  /_/___//_/|_/___/_/ |_//____/
*/
@mixin bg-svg-png($img, $r:no-repeat, $x:center, $y:center) {
 background: transparent url('../assets/img/#{$img}.png') $r $x $y;
 background: none, url('../assets/img/#{$img}.svg') $r $x $y;
}
/*
    ___    ____  ____
   /   |  / __ \/ __ \
  / /| | / /_/ / /_/ /
 / ___ |/ ____/ ____/
/_/  |_/_/   /_/
*/
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{
  z-index:1;
  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{
      @include bg-svg-png('logo');
      animation: introLogo $animeLogoDuration linear 0s;
      animation-fill-mode: forwards;
    }
    &:after{
      // background: transparent url('../assets/img/logo-blured.svg') no-repeat center center;
      @include bg-svg-png('logo-blured');
      animation: introLogoBlured $animeLogoDuration linear 0s;
      animation-fill-mode: forwards;
    }
  }

  h2{
    // background: transparent url('../assets/img/slogan.svg') no-repeat center center;
    @include bg-svg-png('slogan');
    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:500px; max-height:60%;
  overflow-y:auto;
  z-index: 1000;
}

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


  /*
   _____ _____ __    _____ _____ _____    _____ __ __    _____ _____ ____  _____
  |     |     |  |  |     | __  |   __|  | __  |  |  |  |   | |     |    \|   __|
  |   --|  |  |  |__|  |  |    -|__   |  | __ -|_   _|  | | | |  |  |  |  |   __|
  |_____|_____|_____|_____|__|__|_____|  |_____| |_|    |_|___|_____|____/|_____|
  */
  //SOL
  #node-2{
    &.node-teaser{
      &::after{ @include bg-svg-png('bgd-sol');}
      &, a{color:$SOL-col-txt;}
      h2.node-title{
        &,a{color:$SOL-color;}
        a{@include bg-svg-png('title-SOL'); width:170px; height:35px;}
      }
      .field-name-field-vignette{@include bg-svg-png('shadow-sol');}
      .line{background-color:$SOL-col-active;}
    }
  }
  //DPH
  #node-3{
    &.node-teaser{
      &::after{ @include bg-svg-png('bgd-dph');}
      &, a{color:$DPH-col-txt;}
      h2.node-title{
        &,a{color:$DPH-color;}
        a{@include bg-svg-png('title-DPH'); width:180px; height:80px;}
      }
      .field-name-field-vignette{@include bg-svg-png('shadow-dph');}
      .line{background-color:$DPH-col-active;}
    }
  }
  // SUB
  #node-4{
    &.node-teaser{
      &::after{ @include bg-svg-png('bgd-sub');}
      &, a{color:$SUB-col-txt;}
      h2.node-title{
        &,a{color:$SUB-color;}
        a{@include bg-svg-png('title-SUB'); width:200px; height:35px;}
      }
      .field-name-field-vignette{@include bg-svg-png('shadow-sub');}
      .line{background-color:$SUB-col-active;}
    }
  }
  // BC
  #node-5{
    &.node-teaser{
      &::after{ @include bg-svg-png('bgd-bc');}
      &, a{color:$BC-col-txt;}
      h2.node-title{
        &,a{color:$BC-color;}
        a{@include bg-svg-png('title-BC'); width:120px; height:45px;}
       }
      .field-name-field-vignette{@include bg-svg-png('shadow-bc');}
      .line{background-color:$BC-col-active;}
    }
  }
  //OPP
  #node-6{
    &.node-teaser{
      &::after{ @include bg-svg-png('bgd-opp');}
      &, a{color:$OPP-col-txt;}
      h2.node-title{
        &,a{color:$OPP-color;}
        a{@include bg-svg-png('title-OPP'); width:245px; height:95px;}
      }
      .field-name-field-vignette{@include bg-svg-png('shadow-opp');}
      .line{background-color:$OPP-col-active;}
    }
  }
  //DUB
  #node-7{
    &.node-teaser{
      &::after{ @include bg-svg-png('bgd-dub');}
      &, a{color:$DUB-col-txt;}
      h2.node-title{
        &,a{color:$DUB-color;}
        a{@include bg-svg-png('title-DUB'); width:195px; height:65px;}
      }
      .field-name-field-vignette{@include bg-svg-png('shadow-dub');}
      .line{background-color:$DUB-col-active;}
    }
  }
  // JUSO
  #node-8{
    &.node-teaser{
      &::after{ @include bg-svg-png('bgd-juso');}
      &, a{color:$JUSO-col-txt;}
      h2.node-title{
        &,a{color:$JUSO-color;}
        a{@include bg-svg-png('title-JUSO'); width:200px; height:65px; }
      }
      .field-name-field-vignette{@include bg-svg-png('shadow-juso');}
      .line{background-color:$JUSO-col-active;}
    }
  }

/*
   _____ _____ _____ _____ _____ _____ _____ _____    _____ _____ _____ _____ _____ _____ _____ _____ _____
  |     |  |  |  _  |  _  |_   _|   __| __  |   __|  |   __|   __|   | |   __| __  |     |     |  |  |   __|
  |   --|     |     |   __| | | |   __|    -|__   |  |  |  |   __| | | |   __|    -|-   -|  |  |  |  |   __|
  |_____|__|__|__|__|__|    |_| |_____|__|__|_____|  |_____|_____|_|___|_____|__|__|_____|__  _|_____|_____|
                                                                                            |__|
*/
  .node-chapitre.node-teaser{
    z-index: 2;
    position:absolute;

    /*
        _____   __________________  ___   _________________    __________________
       /  _/ | / /_  __/ ____/ __ \/   | / ____/_  __/  _/ |  / /  _/_  __/ ____/
       / //  |/ / / / / __/ / /_/ / /| |/ /     / /  / / | | / // /  / / / __/
     _/ // /|  / / / / /___/ _, _/ ___ / /___  / / _/ /  | |/ // /  / / / /___
    /___/_/ |_/ /_/ /_____/_/ |_/_/  |_\____/ /_/ /___/  |___/___/ /_/ /_____/
    */

    /*
     ____  _____ _____ _____ _____ __  _____    _____ _____ ____  _____
    |    \|   __|   __|  _  |  |  |  ||_   _|  |     |     |    \|   __|
    |  |  |   __|   __|     |  |  |  |__| |    | | | |  |  |  |  |   __|
    |____/|_____|__|  |__|__|_____|_____|_|    |_|_|_|_____|____/|_____|

    */
    opacity:1;
    transition:1s ease-out;
    transition-property:opacity;

    h2.node-title a{
      transform:none;
      transform-origin:bottom center;
      transition:1s ease-out;
      transition-property:transform;
      z-index:5;
    }
    >.content{position:relative;}
    .texts{
      opacity:0; height:1px; overflow:hidden;
      transition:1s ease-out;
      transition-property:opacity height;
      position:absolute;
    }
    .field-name-field-partie{
        opacity:0;
        position:absolute;
        transition:1s ease-in-out 0.1s;
        transition-property: opacity transform;
        // just let see the field vignette of first partie
        &:nth-child(2){
          z-index:2;
          opacity:1;
          // transition-delay:0;
          >.field-type-text{
            opacity:0;
            transition:1s ease-out 0.9s;
            transition-property: opacity;
          }
          >.field-name-field-vignette{
            cursor:pointer;z-index:2;
            transform:scale(0.5);
            transition:1s ease-out; transition-property:transform;
         }
        }
    }
    &:after{
      opacity:0;
      transition: 2s ease-in;
      transition-property:opacity;
      top:1px; left:1px; bottom:2px; right:2px;
    }
    .line{
      // transition: 0.1s ease-out;
      // transition-property:height transform;
    }

    /*
     _____ _____ _____ _____ _____ _____ _ _ _    _____ _____ ____  _____
    |  _  | __  |   __|  |  |     |   __| | | |  |     |     |    \|   __|
    |   __|    -|   __|  |  |-   -|   __| | | |  | | | |  |  |  |  |   __|
    |__|  |__|__|_____|\___/|_____|_____|_____|  |_|_|_|_____|____/|_____|

    */
    &.previewed{
      z-index:100;
      &:after{
        opacity:1;
        $pad:-2em;
        top:-$pad;
        left:$pad*6; right:$pad*6;
        bottom:$pad*15;
      }
      h2.node-title a{transform:scale(2,2);}
      .texts{opacity:1; height:8em;}
      .field-name-field-partie{
        opacity:1; z-index:0;
        // display all fields inside each parties
        >.field{opacity:1; z-index:-1; cursor:default;}
        &:nth-child(2){
          >.field-name-field-vignette{
            transform:scale(1.3);
            // transition:1s ease-out 0.5s; transition-property:transform;
          }
        }
      }
    }

    /*
     _____ _____ _____ _____ _____ _____ _____ _____    _____ _____ ____  _____
    |     |     |_   _|     |   __|  _  |_   _|   __|  |     |     |    \|   __|
    | | | |-   -| | | |-   -|  |  |     | | | |   __|  | | | |  |  |  |  |   __|
    |_|_|_|_____| |_| |_____|_____|__|__| |_| |_____|  |_|_|_|_____|____/|_____|
    */
    &.mitigated{
      opacity:0.3;
    }

    /*
     _____ _____ _____ _____ _____ _____ _____    ____  _____ _____ _____ __    _____ __ __ _____ ____
    |     |  |  |  _  |  _  |_   _|   __| __  |  |    \|     |   __|  _  |  |  |  _  |  |  |   __|    \
    |   --|     |     |   __| | | |   __|    -|  |  |  |-   -|__   |   __|  |__|     |_   _|   __|  |  |
    |_____|__|__|__|__|__|    |_| |_____|__|__|  |____/|_____|_____|__|  |_____|__|__| |_| |_____|____/

    */
    .chapter-displayed & {
      opacity:0.1;
    }

    /*
       _____________   ____________  ___    __   _____     __                     _       __                       __  _            _
      / ____/ ____/ | / / ____/ __ \/   |  / /  / ___/   _/_/___  ____  ____     (_)___  / /____  _________ ______/ /_(_)   _____  | |
     / / __/ __/ /  |/ / __/ / /_/ / /| | / /   \__ \   / // __ \/ __ \/ __ \   / / __ \/ __/ _ \/ ___/ __ `/ ___/ __/ / | / / _ \ / /
    / /_/ / /___/ /|  / /___/ _, _/ ___ |/ /______/ /  / // / / / /_/ / / / /  / / / / / /_/  __/ /  / /_/ / /__/ /_/ /| |/ /  __// /
    \____/_____/_/ |_/_____/_/ |_/_/  |_/_____/____/  / //_/ /_/\____/_/ /_/  /_/_/ /_/\__/\___/_/   \__,_/\___/\__/_/ |___/\___//_/
                                                      |_|                                                                      /_/
    */
    &:after{ // background
      content:" ";
      background-size:contain!important;
      position:absolute;
      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;
      a{
        display:block;
        text-indent: -1000px;
        overflow:hidden;
      }
    }

    .texts{
      // position:relative;
    }

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

    ul.links{
      display:block; margin:0; text-align:right; z-index:5; position:relative; width:100%;
      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;
          @include bg-svg-png('readmore-btn', no-repeat, right, center);
        }
      }
    }

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


    $shadow-size:3.5em;
    .field-name-field-vignette{
      position:relative;
      float:left;
      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;
    }

    .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


/* ____  ____  _______   ____________     ________  _____    ____  ________________  _____
  / __ \/ __ \/ ____/ | / / ____/ __ \   / ____/ / / /   |  / __ \/_  __/ ____/ __ \/ ___/
 / / / / /_/ / __/ /  |/ / __/ / / / /  / /   / /_/ / /| | / /_/ / / / / __/ / /_/ /\__ \
/ /_/ / ____/ /___/ /|  / /___/ /_/ /  / /___/ __  / ___ |/ ____/ / / / /___/ _, _/___/ /
\____/_/   /_____/_/ |_/_____/_____/   \____/_/ /_/_/  |_/_/     /_/ /_____/_/ |_|/____/
*/

  #chapter-wrapper{
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    z-index: -1;
    opacity:0;
    transition:2s ease-out;
    transition-property:opacity;

    &.visible{
      opacity:1;
      z-index: 500;
    }

    #home-btn{
      @include bg-svg-png('home-btn');
      position:absolute;
      z-index:100; top:20px; left:20px;
      width:25px; height:20px; cursor:pointer;
    }

    /*
     _____ _____ __    _____ _____ _____    _____ __ __    _____ _____ ____  _____
    |     |     |  |  |     | __  |   __|  | __  |  |  |  |   | |     |    \|   __|
    |   --|  |  |  |__|  |  |    -|__   |  | __ -|_   _|  | | | |  |  |  |  |   __|
    |_____|_____|_____|_____|__|__|_____|  |_____| |_|    |_|___|_____|____/|_____|
    */

    // SOL
    #node-2{
      @include bg-svg-png('bgd-sol');
      .field-type-text-long .field-label,
      h2.node-title,
      .field-name-field-dbatre li:before{
        color:$SOL-col-active;
      }
      h2.node-title{@include bg-svg-png('title-SOL-blur');}
    }
    // DPH
    #node-3{
      @include bg-svg-png('bgd-dph');
      .field-type-text-long .field-label,
      h2.node-title,
      .field-name-field-dbatre li:before{
        color:$DPH-col-active;
      }
      h2.node-title{@include bg-svg-png('title-DPH-blur');}
    }
    // SUB
    #node-4{
      @include bg-svg-png('bgd-sub');
      .field-type-text-long .field-label,
      h2.node-title,
      .field-name-field-dbatre li:before{
        color:$SUB-col-active;
      }
      h2.node-title{@include bg-svg-png('title-SUB-blur');}
    }
    // BC
    #node-5{
      @include bg-svg-png('bgd-bc');
      .field-type-text-long .field-label,
      h2.node-title,
      .field-name-field-dbatre li:before{
        color:$BC-col-active;
      }
      h2.node-title{@include bg-svg-png('title-BC-blur');}
    }
    // OPP
    #node-6{
      @include bg-svg-png('bgd-opp');
      .field-type-text-long .field-label,
      h2.node-title,
      .field-name-field-dbatre li:before{
        color:$OPP-col-active;
      }
      h2.node-title{@include bg-svg-png('title-OPP-blur');}
    }
    // DUB
    #node-7{
      @include bg-svg-png('bgd-bub');
      .field-type-text-long .field-label,
      h2.node-title,
      .field-name-field-dbatre li:before{
        color:$DUB-col-active;
      }
      h2.node-title{@include bg-svg-png('title-DUB-blur');}
    }
    // JUSO
    #node-8{
      @include bg-svg-png('bgd-juso');
      .field-type-text-long .field-label,
      h2.node-title,
      .field-name-field-dbatre li:before{
        color:$JUSO-col-active;
      }
      h2.node-title{@include bg-svg-png('title-JUSO-blur');}
    }

    /*
     _____ _____ _____ _____ _____ _____ _____ _____ _____
    |   __|   __|   | |   __| __  |     |     |  |  |   __|
    |  |  |   __| | | |   __|    -|-   -|  |  |  |  |   __|
    |_____|_____|_|___|_____|__|__|_____|__  _|_____|_____|
                                           |__|
    */

    .node{
      position:relative;
      height:100%; width:100%;
      a{color:inherit;}
    }

    .node-title{
      font-family: "epflulb";
      font-weight:normal;
      text-transform: uppercase;
      text-align: center;
      // max-width: 8.5em;
      line-height: 0.85;
      font-size: 2.268em;
      position:absolute; display:block;
      top:0; left:0; width:100%; height:100%;
      background-size: contain!important;
      text-indent: -5000px;
      z-index:-1;
      opacity:0.4;
    }

    .node>.field{
      position:absolute;
    }

    .field-type-text-long{
      background-color: rgba(255,255,255,0.9);
      width:23em; padding:1em;
      z-index:10;
      cursor:move;
      .field-label{
        text-transform: uppercase;
        font-family: "epflulb";
        font-size:1.5em;
      }

      h2{
        font-size:0.88em;
      }
      p{
        font-size: 0.88em;
        margin-bottom:0.5em;
      }
    }
    .field-name-field-dbatre{
      left:60em;
      ul{
        margin-left:1em;
        li{
          list-style: none;
          line-height:1;
          margin-bottom: 1em;
          position:relative;
          &:before{
            content:"?";
            position:absolute;
            top:0; left:-1em;
            font-family: "epflul";
          }
        }
      }
    }


    .field-name-field-partie{
      height:60%; width:100%;
      top:20%; left:0;
      .field-items{
       position:relative;
       top:0; left:0;
       height:100%; width:auto;
       // overflow:hidden;
        .field{
          position:relative;
          display:inline-block;
          .mask{
            position:absolute;
            width:100%; height:100%;
            top:0; left:0;
            z-index:10;
            cursor:move;
          }
        }
      }
    }
  } // #chapter-wrapper
} // #main


/*  __________  ____  ________________
   / ____/ __ \/ __ \/_  __/ ____/ __ \
  / /_  / / / / / / / / / / __/ / /_/ /
 / __/ / /_/ / /_/ / / / / /___/ _, _/
/_/    \____/\____/ /_/ /_____/_/ |_|
*/

#footer{
  position:fixed;
  bottom:0; right:0;
  .block{
    display:inline-block;
    vertical-align: top;
  }
}
/*
    __  ____________ ______
   /  |/  /  _/ ___// ____/
  / /|_/ // / \__ \/ /
 / /  / // / ___/ / /___
/_/  /_/___//____/\____/
*/
#fullscreen-btn{
  position:fixed;
  bottom:20px; left:20px;
  z-index: 1000;
}

@mixin bubble($w,$h,$bg){
  position:absolute;
  z-index:0;
  display:block;
  width:$w; height:$h;
  // border:1px solid blue;
  @include bg-svg-png($bg);
}
.bubble-1{
  @include bubble(425px, 425px, 'bubble-01');
  top:-200px; left:-200px;
}
.bubble-2{
  @include bubble(885px, 885px, 'bubble-02');
  bottom:-400px; right:-400px;
}

.star{
  position:absolute;
  z-index: 0; display:block;
  width:10px; height:10px;
  opacity:1;
  @include bg-svg-png('star');
}
/*    ____  __________  __  ________
   / __ \/ ____/ __ )/ / / / ____/
  / / / / __/ / __  / / / / / __
 / /_/ / /___/ /_/ / /_/ / /_/ /
/_____/_____/_____/\____/\____/
*/

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