1007 lines
26 KiB
SCSS
Executable File
1007 lines
26 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;
|
|
// 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;}
|
|
}
|
|
@keyframes introNodes{
|
|
0% {opacity:0;}
|
|
100% {opacity:1;}
|
|
}
|
|
|
|
$animeLogoDuration:6s;
|
|
$animeNodesDuration:3s;
|
|
|
|
#header{
|
|
z-index:0;
|
|
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;
|
|
z-index: 2;
|
|
|
|
.block-system{
|
|
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;}
|
|
&.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'); width:180px; height:80px;}
|
|
}
|
|
.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'); width:200px; height:35px;}
|
|
}
|
|
.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'); width:120px; height:45px;}
|
|
}
|
|
.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'); width:245px; height:95px;}
|
|
}
|
|
.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'); width:195px; height:65px;}
|
|
}
|
|
.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'); width:200px; height:65px; }
|
|
}
|
|
.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 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: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;
|
|
}
|
|
}
|
|
}
|
|
.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; 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%;
|
|
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;
|
|
}
|
|
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;
|
|
}
|
|
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;
|
|
}
|
|
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;
|
|
}
|
|
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;
|
|
}
|
|
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;
|
|
}
|
|
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;
|
|
}
|
|
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, .node>.block{
|
|
position:absolute;
|
|
}
|
|
|
|
.field-type-text-long, .field-type-text{
|
|
background-color: rgba(255,255,255,0.9);
|
|
min-height:5em; width:19em; padding:1em;
|
|
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";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.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: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;
|
|
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;
|
|
top:20px; right:20px;
|
|
z-index: 500;
|
|
width:25px; height:25px;
|
|
cursor:pointer;
|
|
@include bg-svg-png('close');
|
|
}
|
|
|
|
>.inner{
|
|
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{
|
|
margin:0 1em 0 0; padding:0;
|
|
display:inline-block;
|
|
list-style: none;
|
|
a{
|
|
font-family: "epflulb";
|
|
color:#000;
|
|
text-transform: uppercase;
|
|
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');
|
|
}
|
|
/* ____ __________ __ ________
|
|
/ __ \/ ____/ __ )/ / / / ____/
|
|
/ / / / __/ / __ / / / / / __
|
|
/ /_/ / /___/ /_/ / /_/ / /_/ /
|
|
/_____/_____/_____/\____/\____/
|
|
*/
|
|
|
|
#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;
|
|
}
|