Files
dev-epau.archi.fr/user/themes/epau-antimatter/scss/template/_custom.scss
T
2021-10-05 11:04:06 +02:00

1072 lines
20 KiB
SCSS

// Your custom SCSS should be written here...
.grav-lightslider {
.lSSlideOuter {
.lSPager.lSpg {
> li a {
z-index: 1;
}
}
}
}
.padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer {
padding-left: 3rem;
padding-right: 3rem;
}
#body > script:first-child + .grav-lightslider {
margin-top: -3rem;
}
#sb-site{
background: none !important;
#body{
background: none !important;
// padding-bottom: 2rem !important;
font-family: "Sarabun", sans-serif !important;
p:empty { display:none; }
@media (max-width: 442px) {
padding-top: 2rem;
}
}
}
body#top.modular.fullwidth.title-center.title-h1h2 {
overflow-y:hidden;
}
#header.scrolled {
padding-left: 2rem;
padding-right: 2rem;
img {
@include transform(scale(0.75));
@extend .default-animation;
padding-bottom: 1rem;
}
}
#header #navbar ul.navigation li a {
font-family: "Sarabun", sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: 1rem;
display: inline-block;
padding: 0.3rem 0.8rem;
-webkit-backface-visibility: hidden;
// float: left;
}
#header #navbar ul.navigation li:after {
display: inline;
content: "|";
padding: 0 .1em;
vertical-align: top;
}
#header #navbar ul.navigation li:last-child:after {
content: "" !important;
}
#header #navbar ul.navigation li a:hover {
font-weight: 900;
}
#header #navbar ul.navigation {
}
#logo {
position: relative;
display: flex;
flex-direction: row;
img {
padding: 0.75rem;
height: 4rem;
margin:auto;
@media (max-width: 442px) {
height: 3rem;
}
@media (max-width: 1024px) {
height: 3.5rem;
}
#gouv {
padding-left: 1rem;
padding-right: 2rem;
padding: 0.5rem;
min-height: 4rem;
// margin:auto;
}
}
}
@media (max-width: 442px) {
#header #navbar {
position: absolute;
right: 1rem;
}
.padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer {
padding-left: 0!important;
padding-right: 0rem !important;
}
#header #logo {
position: absolute;
// left: -2rem;
}
#logo img {
height: 3rem;
margin-left: 1rem;
}
}
@media (max-width: 1024px) {
.padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer {
padding-left: 0!important;
padding-right: 0rem !important;
}
#header #navbar {
padding-right: 2rem;
}
}
.parallax-window {
background: transparent;
// background-position: center;
// background-size: cover;
// position: relative;
// top: -500px;
width: 100%;
}
.parallax-mirror {
top: -80px;
// height: auto;
}
.callout {
filter:opacity(0.75);
position: relative;
z-index: 1;
padding-top: 0.5rem;
padding-right: 0rem !important;
padding-left: 0rem !important;
h1, h2, h3, p {
text-align: left !important;
}
h2 {
text-transform: capitalize;
font-weight: 300;
font-size: 1rem;
}
}
.ressources {
background-color: white;
padding-top: 1rem;
}
.titre_nsb {
// position: relative;
// top: -440px;
display: block;
margin-right: 45%;
h1 {
margin-bottom: 0rem !important;
text-align: right;
padding-right: 0rem !important;
padding-left: 2rem;
}
@media (max-width: 442px) {
margin-right: 42%;
h1 {
font-size: 1.6rem;
}
}
}
.titre_bsn {
display: block;
margin-left: 45%;
// padding-right: 15%;
h1 {
text-align: left;
margin-bottom: 0rem !important;
// padding-bottom: 3rem;
}
p {
text-transform: uppercase;
padding-right: 15%;
}
@media (max-width: 442px) {
h1 {
font-size: 1.6rem;
}
}
}
@keyframes animate {
0% {width: 0%;}
100% {width: 100%;}
}
@keyframes glissement {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
.after-h1 {
.in-view-right {
animation: animate 1.2s 1 normal ease-in-out forwards;
}
.in-view {
animation: glissement 1.2s 1 normal ease-in-out forwards;
}
}
.programmes {
// position: relative;
// min-height:cover;
//
// // background-size: contain;
// top: -440px;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-left: 15%;
padding-right: 15%;
padding-top: 8rem;
// padding-bottom: 40rem;
padding-bottom: 8rem;
}
.programme {
// position: relative;
// top: 440px;
z-index: 1;
max-width: 35%;
min-width: 26rem;
padding: 1.5rem;
background-color: white;
margin: 0.4rem;
h4 {
text-transform: uppercase;
line-height: 1.2;
}
img {
max-height: 4rem;
}
p {
font-family: $font-family-default;
font-weight: 500;
font-style: italic;
padding-bottom: 1.5rem;
}
@media (max-width: 442px) {
min-width: 20rem;
}
}
.programme:hover {
background-color: #000;
transition:0.2s ease-in-out;
p {
color: #fff;
}
h4 {
color: #fff;
}
}
// #ressources {
// position: relative;
// top: -440px;
// }
/*CSS pour afficher/masquer un texte via un bouton*/
/*Style du module TEXTE*/
.texte-cache {
position: relative;
max-height: 400px; /*Hauteur du texte visible avant le clic*/
overflow: hidden; /*On cache tout ce qui dépasse des 400px*/
transition: max-height 1s ease; /* Transition CSS entre l'ouverture et la fermeture*/
@media (max-width: 1024px) {
max-height: 445px;
}
@media (max-width:442px) {
max-height: 400px;
}
}
/*Style du module TEXTE lorsqu'il est ouvert*/
.texte-cache.ouvert {
max-height: 300vh; /* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/
}
/*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/
.texte-cache:not(.ouvert)::after {
content: '';
position: absolute;
top: 400px;
bottom: 0;
left: 0;
right: 0;
// background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /*Couleur de notre effet*/
}
.modular .features {
@media (max-width: 1024px) {
width: 80% !important;
margin: auto !important;
}
}
.modular .features .feature {
// margin-bottom: 10rem;
@media (max-width: 442px) {width: 80% ;}
@media (max-width: 1024px) {width: 24% ;}
}
.bouton-ouverture {
position: relative;
justify-content: center;
cursor: pointer;
border: solid;
border-radius: 0px !important;
background-color: transparent;
text-transform: uppercase;
left: 45%;
// margin-top: 3rem;
margin-bottom: 2rem !important;
// @media (min-width: 768px) {display: none ;}
}
.gouvernance {
background-color: #000;
// filter:opacity(0.75);
color: #ffffff;
text-transform: uppercase;
padding-bottom: 6rem;
padding-top: 2rem;
}
.mozaique_personnes {
background-color: #d9d9d9;
padding-bottom: 6rem;
.equipe {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
// margin-left: 15%;
// padding-right: 15%;
width: 100%;
padding-left: 22%;
padding-right: 15%;
margin: auto;
justify-items: center;
@media (max-width: 442px) {
width: 100%;
padding-left: 3%;
padding-right: 2%;
}
h3 {
// display: flex;
// flex-grow: 1;
padding-top: 3rem;
// padding-left: 15%;
min-width: 100%;
font-family: "Sarabun", sans-serif;
font-weight: 800;
font-size: 1rem;
line-height: 20px;
text-align: left;
@media (max-width: 442px) {
font-size: 0.9rem;
padding-right: 0.5rem;
}
}
.personne {
display: flex;
flex-direction: row;
flex-wrap: wrap;
// width: 50%;
padding-right: 0.5rem;
padding-bottom: 0.5rem;
.mozaique {
display: flex;
flex-direction: row;
justify-content: flex-end;
max-width: 30rem;
min-width: 30rem;
@media (max-width: 442px) {
max-width: 21rem;
min-width: 21rem;
}
.photo {
// min-width: 10rem;
// min-height: 10rem;
// max-width:50% !important;
overflow: hidden;
width: 15rem !important;
height: 15rem !important;
// object-fit: cover;
// background-size: cover;
img {
// maxwidth: 15rem !important;
// height: 15rem !important;
object-fit: cover;
width: 100%;
height: 100%;
}
}
.info {
background-color: #fff;
display:flex;
flex-direction: column;
font-family: $font-family-default;
width: 50%;
height: 15rem;
min-width: 15rem;
@media (max-width: 442px) {
max-width: 11rem;
min-width: 11rem;
}
h5 {
font-weight: 900;
font-size: 1.1rem;
margin: 0;
padding-top: 0.8rem;
padding-right: 1rem;
padding-left: 1.3rem;
@media (max-width: 442px) {
font-size: 0.9rem;
padding-left: 0.8rem;
padding-right: 0.6rem;
}
}
h6 {
font-weight: 300;
font-size: 0.9rem;
font-style: italic;
line-height: 1.3;
margin: 0;
padding-right: 1.2rem;
// padding-bottom: 1rem;
padding-left: 1.3rem;
@media (max-width: 442px) {
padding-left: 0.8rem;
font-size: 0.75rem;
padding-right: 0.6rem;
}
}
&:hover {
background-color: #000;
color: #fff;
transition:0.2s ease-in-out;
}
}
}
}
}
}
// .mozaique :hover {
// background-color: #000;
// color: #fff;
// }
.bouton {
border: solid !important;
background-color: transparent;
border-radius: 0px !important;
text-transform: uppercase;
align-self: flex-end;
margin:auto;
margin-bottom: 0.8rem !important;
font-size: 0.7rem;
}
//
// .bouton :hover {
// background-color: #000;
// }
// pop in biographie
.modal {
position: fixed;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
}
.modal.open{
display: block;
// .bouton {
// border: solid !important;
// background-color: transparent;
// text-transform: uppercase;
// align-self: flex-end;
// margin:auto;
// margin-bottom: 2rem;
// }
}
// #modal .mask{
// background: none !important;
// opacity: 1;
// position: absolute;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
//
// }
// #body .grey {
// opacity: 0.5;
// }
.modal .container{
position: absolute;
background: white !important;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 50%;
height: content;
min-height: 50px;
border: solid;
color: black;
.message{
padding: 5% 10% 5% 5%;
}
a.close{
position: absolute;
right: 5%;
top:5%;
color: black;
font-size: 30px;
}
a.close:hover{
color: black;
}
@media (max-width: 442px) {
transform: translateX(-50%) translateY(-50%);
width: 85%;
height: 80%;
overflow-y: scroll;
a.close {
font-size: 0.8rem;
position: absolute;
right: 2%;
top:0.8%;
}
p {
font-size: 0.8rem;
margin-top: 0;
}
.message{
padding: 5% 5% 5% 5%;
}
}
@media (max-width: 1024px) {
transform: translateX(-50%) translateY(-50%);
width: 75%;
height: 65%;
overflow-y: scroll;
a.close {
font-size: 0.8rem;
position: absolute;
right: 2%;
top:0.8%;
}
p {
font-size: 0.8rem;
margin-top: 0;
}
.message{
padding: 5% 5% 5% 5%;
}
}
}
#new-footer {
// position:absolute;
display: flex;
flex-direction: column;
background-color: white;
padding-bottom: 3rem;
.tothetop {
position: relative;
// align-self: center;
height: 1rem;
bottom: 3rem;
text-align: center;
left: 0;
right: 0;
span {
font-size: 1.7rem;
line-height: 2,5rem;
background: #fff;
width: 4rem;
height: 6rem;
border-radius: $border-radius;
display: inline-block;
text-align: top;
}
}
.footer {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
.footer-logos {
display: flex;
flex-direction: row;
width: 65%;
align-items: center;
justify-content: center;
p {
// display: inline-flex;
}
img {
max-height: 4rem;
padding-right: 2rem;
// &:last-of-type {
// // height: 3.25rem;
// padding-top: 0.30rem;
// padding-bottom: 0.30rem;
// }
}
}
.contact {
display: flex;
flex-direction: column;
min-width: 288px;
width: 35%;
padding-left: 1.5rem;
margin-right: 2rem;
margin-top: 1.5rem;
align-items: flex-start;
img {
margin-bottom: 1rem;
max-height: 2rem;
}
svg {
margin-bottom: 1rem;
}
h6 {
margin: 0 !important;
font-weight: 600;
}
p {
margin: 0;
}
}
}
@media (max-width: 442px) {
.footer {
width: 100%;
flex-direction: column-reverse;
align-items: center;
margin:auto;
.contact {
padding-top: 1rem;
width: 80%;
}
.footer-logos {
// width: 90%;
margin-top: 1.5rem;
margin-left: 0.5rem;
flex-direction: column;
justify-content: space-between;
img {
padding:0.5rem;
}
}
}
}
@media (max-width: 1024px) {
.footer {
.contact {
img {max-height: 1.5rem;}
h6 {font-size:0.8rem;}
p {font-size: 0.8rem;}
svg {margin-bottom: 0.6rem;}
}
.footer-logos {
img {
padding: 0.5rem;
}
}
}
}
}
button:focus {
border: solid !important;
background-color: transparent;
border-radius: 0px !important;
text-transform: uppercase;
align-self: flex-end;
margin:auto;
// margin-bottom: 2rem;
outline: -webkit-focus-ring-color auto 0px;
outline-color: -webkit-focus-ring-color;
outline-style: auto;
outline-width: 0px;
}
// CSS page evenement
.event{
.callout{
filter:opacity(1);
h2 {
font-family: "Sarabun Light";
font-weight: 100 !important;
font-size:1.8rem;
line-height: 1.2;
text-transform: uppercase;
margin:0 ;
}
.titre_bsn {
position: relative;
#explog{
position: absolute;
right: 100%;
top: 25%;
max-width:30%;
}
.text-titre-event{
h1{
text-transform: uppercase;
line-height:1 !important;
margin-bottom: 0.5rem !important;
}
.sous-titre{
margin-top: 1rem;
}
}
}
}
}
h1{
text-transform: uppercase;
line-height:1 !important;
margin-bottom: 0.5rem !important;
}
.presentation-event{
display: flex;
flex-direction: column;
margin: auto;
width: 60%;
height:auto;
background-color: white;
color: #000;
padding-top: 1.5rem;
padding-left: 2em;
padding-right: 2em;
margin-top: 6rem;
margin-bottom: 6rem;
text-align: left;
p{
font-size: 1.2rem;
line-height: 1.5;
margin: 1rem;
}
.boutons-event {
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
.bouton {
border: solid !important;
background-color: transparent;
border-radius: 0px !important;
text-transform: uppercase;
align-self: flex-end;
margin:auto;
margin-bottom: 0.8rem !important;
font-size: 0.7rem;
padding: 2px 10px;
}
}
}
.intervenant{
background-color: #d9d9d9;
color: #000;
text-transform: uppercase;
padding-bottom: 2rem;
padding-top: 2rem;
}
// .event .equipe .info{
// background-color: red;
// }
.equipe-event {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
// margin-left: 15%;
// padding-right: 15%;
width: 100%;
padding-left: 10%;
padding-right: 10%;
margin: auto;
justify-items: center;
@media (max-width: 442px) {
width: 100%;
padding-left: 3%;
padding-right: 2%;
}
h3 {
// display: flex;
// flex-grow: 1;
// padding-top: 2rem;
// padding-left: 15%;
margin-bottom: 3rem;
min-width: 100%;
font-family: "Sarabun Light", sans-serif;
text-transform: uppercase;
font-weight: 200;
font-size: 1rem;
line-height: 20px;
text-align: left;
@media (max-width: 442px) {
font-size: 0.9rem;
padding-right: 0.5rem;
}
}
.personne {
display: flex;
flex-direction: row;
flex-wrap: wrap;
// width: 50%;
padding-right: 0.5rem;
padding-bottom: 0.5rem;
.mozaique {
display: flex;
flex-direction: row;
// justify-content: flex-end;
max-width: 30rem;
min-width: 30rem;
@media (max-width: 442px) {
max-width: 21rem;
min-width: 21rem;
}
.photo {
// min-width: 10rem;
// min-height: 10rem;
// max-width:50% !important;
overflow: hidden;
width: 10rem !important;
height: 10rem !important;
// object-fit: cover;
// background-size: cover;
img {
// maxwidth: 15rem !important;
// height: 15rem !important;
object-fit: cover;
width: 100%;
height: 100%;
}
}
.info {
// background-color: #fff;
display:flex;
flex-direction: column;
font-family: $font-family-default;
width: 50%;
height: 15rem;
min-width: 15rem;
padding-left: 1.3rem;
@media (max-width: 442px) {
max-width: 11rem;
min-width: 11rem;
}
.nom {
display: flex;
direction: row;
h5{
padding-right: 0.4em !important;
}
}
h5 {
font-weight: 900;
font-size: 1.1rem;
margin: 0;
padding-top: 0.8rem;
padding-right: 1rem;
// padding-left: 1.3rem;
@media (max-width: 442px) {
font-size: 0.9rem;
padding-left: 0.8rem;
padding-right: 0.6rem;
}
}
h6 {
font-weight: 300;
font-size: 0.9rem;
font-style: italic;
line-height: 1.3;
margin: 0;
padding-right: 1.2rem;
// padding-bottom: 1rem;
// padding-left: 1.3rem;
@media (max-width: 442px) {
padding-left: 0.8rem;
font-size: 0.75rem;
padding-right: 0.6rem;
}
}
}
}
}
}
.partenaires{
background-color: #fff;
height: auto;
padding-top: 2rem;
padding-bottom: 3rem;
margin-top: 0 !important;
h1{
margin-top: 0 !important;
}
}
.grille{
background-color: #fff;
padding-bottom: 6rem;
.tous-logos{
display: flex;
margin: auto;
max-width: 80%;
}
p{
justify-content: center;
display: flex;
margin: auto;
flex-wrap: wrap;
}
img{
height: 9rem;
display: flex;
padding: 2rem;
}
}
.event #new-footer{
border-top:solid 5px #d9d9d9;
span {
height: 2rem;
}
}