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{
    &::after{ @include bg-svg-png('bgd-sol');}
    &, a{color:$SOL-col-txt;}
    h2.node-title{&,a{color:$SOL-color;}}
    .field-name-field-vignette{@include bg-svg-png('shadow-sol');}
    .line{background-color:$SOL-col-active;}
  }
  //DPH
  #node-3{
    &::after{ @include bg-svg-png('bgd-dph');}
    &, a{color:$DPH-col-txt;}
    h2.node-title{&,a{color:$DPH-color;}}
    .field-name-field-vignette{@include bg-svg-png('shadow-dph');}
    .line{background-color:$DPH-col-active;}
  }
  // SUB
  #node-4{
    &::after{ @include bg-svg-png('bgd-sub');}
    &, a{color:$SUB-col-txt;}
    h2.node-title{&,a{color:$SUB-color;}}
    .field-name-field-vignette{@include bg-svg-png('shadow-sub');}
    .line{background-color:$SUB-col-active;}
  }
  // BC
  #node-5{
    &::after{ @include bg-svg-png('bgd-bc');}
    &, a{color:$BC-col-txt;}
    h2.node-title{&,a{color:$BC-color;}}
    .field-name-field-vignette{@include bg-svg-png('shadow-bc');}
    .line{background-color:$BC-col-active;}
  }
  //OPP
  #node-6{
    &::after{ @include bg-svg-png('bgd-opp');}
    &, a{color:$OPP-col-txt;}
    h2.node-title{&,a{color:$OPP-color;}}
    .field-name-field-vignette{@include bg-svg-png('shadow-opp');}
    .line{background-color:$OPP-col-active;}
  }
  //DUB
  #node-7{
    &::after{ @include bg-svg-png('bgd-dub');}
    &, a{color:$DUB-col-txt;}
    h2.node-title{&,a{color:$DUB-color;}}
    .field-name-field-vignette{@include bg-svg-png('shadow-dub');}
    .line{background-color:$DUB-col-active;}
  }
  // JUSO
  #node-8{
    &::after{ @include bg-svg-png('bgd-juso');}
    &, a{color:$JUSO-col-txt;}
    h2.node-title{&,a{color:$JUSO-color;}}
    .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{
        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;}
          }
      }
      &: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{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;}
        }
      }

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


      /*
         _____________   ____________  ___    __   _____     __                     _       __                       __  _            _
        / ____/ ____/ | / / ____/ __ \/   |  / /  / ___/   _/_/___  ____  ____     (_)___  / /____  _________ ______/ /_(_)   _____  | |
       / / __/ __/ /  |/ / __/ / /_/ / /| | / /   \__ \   / // __ \/ __ \/ __ \   / / __ \/ __/ _ \/ ___/ __ `/ ___/ __/ / | / / _ \ / /
      / /_/ / /___/ /|  / /___/ _, _/ ___ |/ /______/ /  / // / / / /_/ / / / /  / / / / / /_/  __/ /  / /_/ / /__/ /_/ /| |/ /  __// /
      \____/_____/_/ |_/_____/_/ |_/_/  |_/_____/____/  / //_/ /_/\____/_/ /_/  /_/_/ /_/\__/\___/_/   \__,_/\___/\__/_/ |___/\___//_/
                                                        |_|                                                                      /_/
      */
      &: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;
      }

      .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;
        $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;
      }

      .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; bottom:0; right:0;
  }
} // main

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

#footer{
  position:fixed;
  bottom:0; right:0;
  .block{
    display:inline-block;
    vertical-align: top;
  }
}
/*
    __  ____________ ______
   /  |/  /  _/ ___// ____/
  / /|_/ // / \__ \/ /
 / /  / // / ___/ / /___
/_/  /_/___//____/\____/
*/
#fullscreen-btn{
  position:fixed;
  top: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;
}