1197 lines
30 KiB
SCSS
Executable File
1197 lines
30 KiB
SCSS
Executable File
@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";
|
||
|
||
|
||
/*
|
||
__ ________ __ _____ _______
|
||
/ |/ / _/ |/ // _/ | / / ___/
|
||
/ /|_/ // / | / / // |/ /\__ \
|
||
/ / / // / / |_/ // /| /___/ /
|
||
/_/ /_/___//_/|_/___/_/ |_//____/
|
||
*/
|
||
@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;
|
||
height:100%; width:100%;
|
||
overflow:hidden;
|
||
}
|
||
|
||
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;}
|
||
}
|
||
@keyframes introNodes{
|
||
0% {opacity:0;}
|
||
100% {opacity:1;}
|
||
}
|
||
|
||
$animeLogoDuration:6s;
|
||
$animeNodesDuration:3s;
|
||
|
||
#header{
|
||
z-index:0;
|
||
position:absolute;
|
||
overflow:hidden;
|
||
@media #{$small-only}{
|
||
width:200px;
|
||
height:88px;
|
||
top:50%; left:50%;
|
||
margin-left:-100px;
|
||
margin-top:-44px;
|
||
}
|
||
@media #{$medium-up} {
|
||
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');
|
||
background-size: contain;
|
||
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');
|
||
background-size: contain;
|
||
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');
|
||
background-size: contain;
|
||
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;
|
||
z-index: 2;
|
||
|
||
.block-system{
|
||
position:relative;
|
||
width:100%; height:100%;
|
||
overflow:hidden;
|
||
}
|
||
|
||
|
||
/*
|
||
_____ _____ __ _____ _____ _____ _____ __ __ _____ _____ ____ _____
|
||
| | | | | | __ | __| | __ | | | | | | | \| __|
|
||
| --| | | |__| | | -|__ | | __ -|_ _| | | | | | | | | __|
|
||
|_____|_____|_____|_____|__|__|_____| |_____| |_| |_|___|_____|____/|_____|
|
||
*/
|
||
|
||
@mixin title-size($w, $h) {
|
||
$factor: 0.5;
|
||
@media #{$small-only} {
|
||
width:$w*$factor; height:$h*$factor;
|
||
margin:0 $w*(1-$factor)*0.4;
|
||
}
|
||
@media #{$medium-up} {
|
||
width:$w; height:$h;
|
||
}
|
||
}
|
||
|
||
//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');
|
||
@include title-size(170px, 35px);
|
||
background-size: contain;
|
||
}
|
||
}
|
||
.field-name-field-vignette{@include bg-svg-png('shadow-sol');}
|
||
.line{background-color:$SOL-col-active;}
|
||
&.previewed{
|
||
h2.node-title{
|
||
&,a{color:$SOL-col-active;}
|
||
a{@include bg-svg-png('title-SOL-activ');}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
//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');
|
||
@include title-size(180px, 80px);
|
||
background-size: contain;
|
||
}
|
||
}
|
||
.field-name-field-vignette{@include bg-svg-png('shadow-dph');}
|
||
.line{background-color:$DPH-col-active;}
|
||
&.previewed{
|
||
h2.node-title{
|
||
&,a{color:$DPH-col-active;}
|
||
a{@include bg-svg-png('title-DPH-activ');}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 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');
|
||
@include title-size(200px, 35px);
|
||
background-size: contain;
|
||
}
|
||
}
|
||
.field-name-field-vignette{@include bg-svg-png('shadow-sub');}
|
||
.line{background-color:$SUB-col-active;}
|
||
&.previewed{
|
||
h2.node-title{
|
||
&,a{color:$SUB-col-active;}
|
||
a{@include bg-svg-png('title-SUB-activ');}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 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');
|
||
@include title-size(120px, 45px);
|
||
background-size: contain;
|
||
}
|
||
}
|
||
.field-name-field-vignette{@include bg-svg-png('shadow-bc');}
|
||
.line{background-color:$BC-col-active;}
|
||
&.previewed{
|
||
h2.node-title{
|
||
&,a{color:$BC-col-active;}
|
||
a{@include bg-svg-png('title-BC-activ');}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
//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');
|
||
@include title-size(245px, 95px);
|
||
background-size: contain;
|
||
}
|
||
}
|
||
.field-name-field-vignette{@include bg-svg-png('shadow-opp');}
|
||
.line{background-color:$OPP-col-active;}
|
||
&.previewed{
|
||
h2.node-title{
|
||
&,a{color:$OPP-col-active;}
|
||
a{@include bg-svg-png('title-OPP-activ');}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
//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');
|
||
@include title-size(195px, 65px);
|
||
background-size: contain;
|
||
}
|
||
}
|
||
.field-name-field-vignette{@include bg-svg-png('shadow-dub');}
|
||
.line{background-color:$DUB-col-active;}
|
||
&.previewed{
|
||
h2.node-title{
|
||
&,a{color:$DUB-col-active;}
|
||
a{@include bg-svg-png('title-DUB-activ');}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 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');
|
||
@include title-size(200px, 65px);
|
||
background-size: contain;
|
||
}
|
||
}
|
||
.field-name-field-vignette{@include bg-svg-png('shadow-juso');}
|
||
.line{background-color:$JUSO-col-active;}
|
||
&.previewed{
|
||
h2.node-title{
|
||
&,a{color:$JUSO-col-active;}
|
||
a{@include bg-svg-png('title-JUSO-activ');}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/*
|
||
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
|
||
| | | | _ | _ |_ _| __| __ | __| | __| __| | | __| __ | | | | | __|
|
||
| --| | | __| | | | __| -|__ | | | | __| | | | __| -|- -| | | | | __|
|
||
|_____|__|__|__|__|__| |_| |_____|__|__|_____| |_____|_____|_|___|_____|__|__|_____|__ _|_____|_____|
|
||
|__|
|
||
*/
|
||
|
||
|
||
.node-chapitre.node-teaser{
|
||
z-index: 2;
|
||
position:absolute;
|
||
|
||
/*
|
||
_____ __________________ ___ _________________ __________________
|
||
/ _/ | / /_ __/ ____/ __ \/ | / ____/_ __/ _/ | / / _/_ __/ ____/
|
||
/ // |/ / / / / __/ / /_/ / /| |/ / / / / / | | / // / / / / __/
|
||
_/ // /| / / / / /___/ _, _/ ___ / /___ / / _/ / | |/ // / / / / /___
|
||
/___/_/ |_/ /_/ /_____/_/ |_/_/ |_\____/ /_/ /___/ |___/___/ /_/ /_____/
|
||
*/
|
||
|
||
/*
|
||
____ _____ _____ _____ _____ __ _____ _____ _____ ____ _____
|
||
| \| __| __| _ | | | ||_ _| | | | \| __|
|
||
| | | __| __| | | | |__| | | | | | | | | | __|
|
||
|____/|_____|__| |__|__|_____|_____|_| |_|_|_|_____|____/|_____|
|
||
|
||
*/
|
||
transition:1s ease-out;
|
||
transition-property:opacity;
|
||
|
||
opacity:0;
|
||
|
||
&.enabled{
|
||
opacity:1;
|
||
}
|
||
|
||
h2.node-title{
|
||
cursor:pointer;
|
||
a{
|
||
transform:none;
|
||
transform-origin:bottom center;
|
||
transition:1s ease-out;
|
||
transition-property:transform;
|
||
z-index:5;
|
||
}
|
||
}
|
||
>.content{position:relative; left:0;}
|
||
.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:0.7s 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.4s ease-out;
|
||
// transition-property:opacity;
|
||
opacity:0;
|
||
}
|
||
|
||
/*
|
||
_____ _____ _____ _____ _____ _____ _ _ _ _____ _____ ____ _____
|
||
| _ | __ | __| | | | __| | | | | | | \| __|
|
||
| __| -| __| | |- -| __| | | | | | | | | | | | __|
|
||
|__| |__|__|_____|\___/|_____|_____|_____| |_|_|_|_____|____/|_____|
|
||
|
||
*/
|
||
&.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;
|
||
}
|
||
}
|
||
.field-name-field-vignette{
|
||
z-index:2; cursor:pointer;
|
||
}
|
||
}
|
||
.line{
|
||
// opacity:1;
|
||
}
|
||
}
|
||
|
||
/*
|
||
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ ____ _____
|
||
| | |_ _| | __| _ |_ _| __| | | | \| __|
|
||
| | | |- -| | | |- -| | | | | | | __| | | | | | | | | __|
|
||
|_|_|_|_____| |_| |_____|_____|__|__| |_| |_____| |_|_|_|_____|____/|_____|
|
||
*/
|
||
&.mitigated{
|
||
opacity:0.2;
|
||
}
|
||
|
||
/*
|
||
_____ _____ _____ _____ _____ _____ _____ ____ _____ _____ _____ __ _____ __ __ _____ ____
|
||
| | | | _ | _ |_ _| __| __ | | \| | __| _ | | | _ | | | __| \
|
||
| --| | | __| | | | __| -| | | |- -|__ | __| |__| |_ _| __| | |
|
||
|_____|__|__|__|__|__| |_| |_____|__|__| |____/|_____|_____|__| |_____|__|__| |_| |_____|____/
|
||
|
||
*/
|
||
.chapter-displayed & {
|
||
opacity:0.05;
|
||
}
|
||
|
||
/*
|
||
_____________ ____________ ___ __ _____ __ _ __ __ _ _
|
||
/ ____/ ____/ | / / ____/ __ \/ | / / / ___/ _/_/___ ____ ____ (_)___ / /____ _________ ______/ /_(_) _____ | |
|
||
/ / __/ __/ / |/ / __/ / /_/ / /| | / / \__ \ / // __ \/ __ \/ __ \ / / __ \/ __/ _ \/ ___/ __ `/ ___/ __/ / | / / _ \ / /
|
||
/ /_/ / /___/ /| / /___/ _, _/ ___ |/ /______/ / / // / / / /_/ / / / / / / / / / /_/ __/ / / /_/ / /__/ /_/ /| |/ / __// /
|
||
\____/_____/_/ |_/_____/_/ |_/_/ |_/_____/____/ / //_/ /_/\____/_/ /_/ /_/_/ /_/\__/\___/_/ \__,_/\___/\__/_/ |___/\___//_/
|
||
|_| /_/
|
||
*/
|
||
&: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
|
||
.field-name-field-accroche{
|
||
h1,h2,h3,h4,h5,h6{display:none!important;}
|
||
// max-width:15em;
|
||
p{margin:0;}
|
||
min-width:19em;
|
||
}
|
||
|
||
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:10em; 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;
|
||
@media #{$medium-up} {
|
||
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;
|
||
img{
|
||
width:65px; height:65px;
|
||
}
|
||
}
|
||
.field-type-text{ min-width:16em; }
|
||
.field-name-field-titre{
|
||
font-family: "epflul";
|
||
font-size:1.4em;
|
||
line-height:1.1;
|
||
}
|
||
.field-name-field-sous-titre{
|
||
font-family: "epflul";
|
||
font-size:1.2em;
|
||
line-height:1.2;
|
||
}
|
||
.field-name-field-description{
|
||
// font-family: "epf-lul";
|
||
font-size:0.88em;
|
||
line-height:1;
|
||
}
|
||
|
||
.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%;
|
||
overflow:hidden;
|
||
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,
|
||
.field-name-field-partager .field-label{
|
||
color:$SOL-col-active;
|
||
}
|
||
@media #{$small-only} {
|
||
h2.node-title{
|
||
@include bg-svg-png('title-SOL-activ');
|
||
height:1.5em;
|
||
}
|
||
}
|
||
@media #{$medium-up} {
|
||
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,
|
||
.field-name-field-partager .field-label{
|
||
color:$DPH-col-active;
|
||
}
|
||
@media #{$small-only} {
|
||
h2.node-title{
|
||
@include bg-svg-png('title-DPH-activ');
|
||
height:5em;
|
||
}
|
||
}
|
||
@media #{$medium-up} {
|
||
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,
|
||
.field-name-field-partager .field-label{
|
||
color:$SUB-col-active;
|
||
}
|
||
@media #{$small-only} {
|
||
h2.node-title{
|
||
@include bg-svg-png('title-SUB-activ');
|
||
height:1.5em;
|
||
}
|
||
}
|
||
@media #{$medium-up} {
|
||
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,
|
||
.field-name-field-partager .field-label{
|
||
color:$BC-col-active;
|
||
}
|
||
@media #{$small-only} {
|
||
h2.node-title{
|
||
@include bg-svg-png('title-BC-activ');
|
||
height:4em;
|
||
}
|
||
}
|
||
@media #{$medium-up} {
|
||
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,
|
||
.field-name-field-partager .field-label{
|
||
color:$OPP-col-active;
|
||
}
|
||
@media #{$small-only} {
|
||
h2.node-title{
|
||
@include bg-svg-png('title-OPP-activ');
|
||
height:6em;
|
||
}
|
||
}
|
||
@media #{$medium-up} {
|
||
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,
|
||
.field-name-field-partager .field-label{
|
||
color:$DUB-col-active;
|
||
}
|
||
@media #{$small-only} {
|
||
h2.node-title{
|
||
@include bg-svg-png('title-DUB-activ');
|
||
height:5em;
|
||
}
|
||
}
|
||
@media #{$medium-up} {
|
||
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,
|
||
.field-name-field-partager .field-label{
|
||
color:$JUSO-col-active;
|
||
}
|
||
@media #{$small-only} {
|
||
h2.node-title{
|
||
@include bg-svg-png('title-JUSO-activ');
|
||
height:3em;
|
||
}
|
||
}
|
||
@media #{$medium-up} {
|
||
h2.node-title{@include bg-svg-png('title-JUSO-blur');}
|
||
}
|
||
}
|
||
|
||
/*
|
||
_____ _____ _____ _____ _____ _____ _____ _____ _____
|
||
| __| __| | | __| __ | | | | | __|
|
||
| | | __| | | | __| -|- -| | | | | __|
|
||
|_____|_____|_|___|_____|__|__|_____|__ _|_____|_____|
|
||
|__|
|
||
*/
|
||
|
||
.node{
|
||
position:relative;
|
||
height:100%; width:100%;
|
||
a{color:inherit;}
|
||
|
||
@media #{$small-only} {
|
||
overflow-y:auto;
|
||
}
|
||
}
|
||
|
||
.node-title{
|
||
font-family: "epflulb";
|
||
font-weight:normal;
|
||
text-transform: uppercase;
|
||
text-align: center;
|
||
// max-width: 8.5em;
|
||
line-height: 0.85;
|
||
|
||
@media #{$small-only} {
|
||
width:80%;
|
||
margin:2em auto 1em;
|
||
background-size: contain!important;
|
||
background-position: center center;
|
||
text-indent: -5000px;
|
||
}
|
||
|
||
@media #{$medium-up} {
|
||
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;
|
||
}
|
||
|
||
}
|
||
|
||
@media #{$medium-up} {
|
||
.node>.field, .node>.block{
|
||
position:absolute;
|
||
}
|
||
}
|
||
|
||
.field-type-text-long, .field-type-text{
|
||
background-color: rgba(255,255,255,0.9);
|
||
min-height:5em; padding:1em;
|
||
|
||
@media #{$small-only} {
|
||
width:80%;
|
||
margin:1em auto;
|
||
}
|
||
|
||
@media #{$medium-up} {
|
||
width:19em;
|
||
z-index:10;
|
||
cursor:move;
|
||
}
|
||
|
||
.field-label{
|
||
text-transform: uppercase;
|
||
font-family: "epflulb";
|
||
font-size:1.2em;
|
||
}
|
||
|
||
h2{
|
||
font-size:0.80em;
|
||
}
|
||
p{
|
||
font-size: 0.80em;
|
||
margin-bottom:0.5em;
|
||
}
|
||
|
||
a{
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
.field-name-field-dbatre{
|
||
left:60em;
|
||
ul{
|
||
margin:1em 0 1em 1em;
|
||
li{
|
||
list-style: none;
|
||
line-height:1;
|
||
margin-bottom: 1em;
|
||
position:relative;
|
||
font-size: 0.80em;
|
||
&:before{
|
||
content:"?";
|
||
position:absolute;
|
||
top:0; left:-1em;
|
||
font-family: "epflul";
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media #{$medium-up}{
|
||
.field-name-field-partie{
|
||
// position:absolute;
|
||
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:85%;
|
||
top:0; left:0;
|
||
z-index:10;
|
||
cursor:move;
|
||
// background-color: rgba(150,250,250,0.2);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} // #chapter-wrapper
|
||
} // #main
|
||
|
||
|
||
/* ______________ ________________ _ ______ ___ ____ ____ __________
|
||
/ ___/_ __/ |/_ __/ _/ ____/ | | / / __ \/ | / __ \/ __ \/ ____/ __ \
|
||
\__ \ / / / /| | / / / // / | | /| / / /_/ / /| | / /_/ / /_/ / __/ / /_/ /
|
||
___/ // / / ___ |/ / _/ // /___ | |/ |/ / _, _/ ___ |/ ____/ ____/ /___/ _, _/
|
||
/____//_/ /_/ |_/_/ /___/\____/ |__/|__/_/ |_/_/ |_/_/ /_/ /_____/_/ |_|
|
||
*/
|
||
#static-wrapper{
|
||
position:absolute;
|
||
|
||
@media #{$small-only} {
|
||
top:10%;
|
||
bottom:0; right:0;
|
||
width:100%;
|
||
z-index: -1;
|
||
}
|
||
@media #{$medium-up} {
|
||
top:15%; bottom:0; right:20px;
|
||
width:80%; max-width:55em;
|
||
z-index: -1;
|
||
}
|
||
|
||
background-color: #fff;
|
||
|
||
opacity:0;
|
||
transition:0.5s ease-out;
|
||
transition-property:opacity;
|
||
|
||
&.visible{
|
||
opacity:0.9;
|
||
transition:1.5s ease-out;
|
||
z-index: 500;
|
||
}
|
||
|
||
>.close{
|
||
position:absolute;
|
||
@media #{$small-only} {
|
||
top:10px; right:10px;
|
||
z-index: 500;
|
||
width:15px; height:15px;
|
||
}
|
||
@media #{$medium-up} {
|
||
top:20px; right:20px;
|
||
z-index: 500;
|
||
width:25px; height:25px;
|
||
}
|
||
cursor:pointer;
|
||
@include bg-svg-png('close');
|
||
}
|
||
|
||
>.inner{
|
||
@media #{$small-only} {
|
||
padding:1em 1em 1.5em;
|
||
width:100%; height:100%; overflow:hidden;
|
||
}
|
||
@media #{$medium-up} {
|
||
padding:5em 7em;
|
||
width:100%; height:100%; overflow:hidden;
|
||
}
|
||
|
||
>.node{
|
||
width:100%; height:100%; overflow-y:auto; overflow-x:hidden;
|
||
padding-right:1.5em;
|
||
}
|
||
}
|
||
|
||
|
||
h2.node-title{
|
||
font-family: "epflulb";
|
||
text-transform: uppercase!important;
|
||
font-size:3em;
|
||
color:#000;
|
||
}
|
||
|
||
.content{
|
||
h3{
|
||
font-family: "epflulb";
|
||
font-size:2em;
|
||
text-transform: uppercase!important;
|
||
color:$static-col;
|
||
}
|
||
|
||
h4{
|
||
// font-family: "epflulb";
|
||
font-size: 1em;
|
||
// // color:$static-col;
|
||
font-weight: 700;
|
||
}
|
||
|
||
p{
|
||
font-family: "open_sans", sans-serif;
|
||
font-weight:600;
|
||
font-size:0.85em;
|
||
line-height:1.5em;
|
||
}
|
||
|
||
a{
|
||
text-decoration:underline;
|
||
}
|
||
img.floatleft{float:left; margin-right:1em;}
|
||
img.floatright{float:right; margin-left:1em;}
|
||
}
|
||
}
|
||
|
||
|
||
/* __________ ____ ________________
|
||
/ ____/ __ \/ __ \/_ __/ ____/ __ \
|
||
/ /_ / / / / / / / / / / __/ / /_/ /
|
||
/ __/ / /_/ / /_/ / / / / /___/ _, _/
|
||
/_/ \____/\____/ /_/ /_____/_/ |_|
|
||
*/
|
||
|
||
#footer{
|
||
position:fixed;
|
||
bottom:0; right:20px;
|
||
z-index:900;
|
||
|
||
body.chapter-displayed &{
|
||
display:none;
|
||
}
|
||
|
||
.block{
|
||
display:inline-block;
|
||
vertical-align: top;
|
||
font-size:0.5em;
|
||
p{font-size: inherit;}
|
||
a{color:#000;}
|
||
}
|
||
|
||
.block-menu{
|
||
display:block;
|
||
font-size:inherit;
|
||
ul{
|
||
margin:0; padding:0;
|
||
li{
|
||
@media #{$small-only} {
|
||
margin:0 0.1em 0.5em 0;
|
||
}
|
||
@media #{$medium-up} {
|
||
margin:0 1em 0 0;
|
||
}
|
||
padding:0;
|
||
display:inline-block;
|
||
list-style: none;
|
||
a{
|
||
font-family: "epflulb";
|
||
color:#000;
|
||
text-transform: uppercase;
|
||
@media #{$small-only} {
|
||
font-size:0.4em;
|
||
}
|
||
@media #{$medium-up} {
|
||
font-size:0.6em;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
p{
|
||
margin:0;
|
||
}
|
||
|
||
#block-block-1{display:none;}
|
||
}
|
||
/*
|
||
__ ____________ ______
|
||
/ |/ / _/ ___// ____/
|
||
/ /|_/ // / \__ \/ /
|
||
/ / / // / ___/ / /___
|
||
/_/ /_/___//____/\____/
|
||
*/
|
||
#loader{
|
||
position:absolute;
|
||
top:50%; left:50%;
|
||
width:120px; height:4px;
|
||
margin-left:-60px; margin-top:-5px;
|
||
|
||
background: transparent url(../assets/img/loader.gif) no-repeat center center;
|
||
z-index:-1; opacity:0;
|
||
transition:0.5s ease-out;
|
||
transition-property:opacity;
|
||
|
||
body.loading &{
|
||
z-index: 1000;
|
||
opacity:1;
|
||
}
|
||
}
|
||
|
||
#fullscreen-btn{
|
||
position:fixed;
|
||
right:20px; top:20px;
|
||
z-index: 1000;
|
||
width:25px; height:20px;
|
||
text-indent: 200px; overflow:hidden;
|
||
cursor:pointer;
|
||
|
||
@include bg-svg-png('fullscreen-on');
|
||
.fullscreen &{
|
||
@include bg-svg-png('fullscreen-off');
|
||
}
|
||
}
|
||
|
||
@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');
|
||
}
|
||
|
||
|
||
/*Remove Mozilla Firefox Border – Remove Dotted Line Around Link */
|
||
*{outline:0!important;}
|
||
|
||
/* ____ __________ __ ________
|
||
/ __ \/ ____/ __ )/ / / / ____/
|
||
/ / / / __/ / __ / / / / / __
|
||
/ /_/ / /___/ /_/ / /_/ / /_/ /
|
||
/_____/_____/_____/\____/\____/
|
||
*/
|
||
|
||
#fps{
|
||
position:fixed;
|
||
bottom:40px; left:20px;
|
||
z-index: 1000;
|
||
}
|
||
|
||
#nav-cursor{
|
||
position:absolute;
|
||
width:6px; height:6px;
|
||
margin-top: -3px; margin-left: -3px;
|
||
background-color: red;
|
||
z-index:1000;
|
||
}
|
||
|