File: /var/www/vhosts/creativefellows.nl/hermitage.creativefellows.nl/public/scss/_section.scss
.page-section{
padding:3rem 0;
@include breakpoint(small only){
padding:0;
}
h1,h2,h3,h4,h5{
text-transform:uppercase;
}
h1{margin:0;}
h2{margin:0;}
h3{color:$primary-color;}
h4{line-height:1.5rem;}
.row__mask-images{
.grid-container{
// max-width:70rem;
}
.grid-x{
//position:relative;
background-color:$light-gray;
border-radius:$global-radius;
overflow:hidden;
margin:0 0.75rem;
@include breakpoint(small only){
border-radius:0;
.cell__text-left{padding:1.5rem;text-align:center;}
.cell__image-right{}
}
}
.cell__text-left{padding:4.5rem;}
.cell__image-right{
padding:0;
/*height:100%;
position:absolute;
top:0;bottom:0;right:0;
width:50%;*/
div{height:100%;overflow:hidden;position:relative;}
div.shape{
position:absolute;
top: -5%;
left: -5%;
width: 110%;
height: 110%;
}
div.shape img{
/*max-width:none;width:auto;height:100%;position:absolute;object-fit:cover;*/
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
@include breakpoint(small only){
img{
position:relative;
height:auto;
width:100%;
}
}
}
h2{color:$primary-color;margin-bottom:1.5rem;}
p:last-child{margin:0;}
}
.button{
font-weight:500;
text-transform:uppercase;
background:none;
padding-top:0.875rem;
color:$black;
}
img{width:100%;}
.card{
.card-section{
position:relative;
padding-bottom:5.5rem;
.button{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);width:80%;}
.button__coming-soon{
//position:absolute;
&::after{content:"Nog even een verrassing, binnenkort online";display:block;font-size:0.75rem;font-style:italic;padding-top:0.5rem;}
}
}
}
h2 + h3{
display:inline-block;
position:relative;
&::before{content:"";border-top:solid 1px $primary-color;width:2rem;position:absolute;left:-2.5rem;top:50%;}
&::after{content:"";border-top:solid 1px $primary-color;width:2rem;position:absolute;right:-2.5rem;top:50%;}
}
}
.page-section__showcase{
padding:0;
position:relative;
height:100vh;
&::after{
content:"";
position:absolute;
top:0;right:0;bottom:0;left:0;
background: rgb(37,47,44);
background: linear-gradient(90deg, rgba(37,47,44,0) 0%, rgba(37,47,44,0.75) 45%, rgba(37,47,44,0.75) 55%, rgba(37,47,44,0) 99%);
opacity:0.25;
}
.showcase-text{
position:absolute;z-index:10;
left:0;right:0;
width:100%;
text-align:center;
@include absolute-center();
h1{text-transform:uppercase;color:$white;font-size:3rem;line-height:3.5rem;margin-bottom:1.5rem;}
h1 +p{color:$white;text-transform:uppercase;}
.button{color:$white;}
}
.lead-gradient-background{
content:"";
width:1000px;
height:100%;
position:absolute;
background: rgb(0,0,0);
background: radial-gradient(circle, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 75%);
z-index:1;
@include absolute-center();
@include breakpoint(small only){
margin-left:0;
width:400px;
height:400px;
}
}
.poster-background{
position: relative;
z-index: 0;
height:100vh;
&::after{
content:"";
position:absolute;
top:0;right:0;bottom:0;left:0;
background:$black;
opacity:0;
@include animate(1s);
}
.background-image {
position: absolute;
object-fit: cover;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
}
}
.page-section__lead-text{
padding-bottom:0;
h1{line-height:3.5rem;}
p{font-size:115%;}
p:last-child{margin:0;}
@include breakpoint(small only){
margin:1.5rem 0 2.25rem;
}
}
.page-section__image-full-width{
padding:0;
margin:0;
height:100vh;
//padding-bottom:45%;
overflow:hidden;
.grid-container{
width:100%;
max-width: 100%;
padding:0;
margin:0;
.grid-x{
padding:0;
margin:0;
}
.cell{padding:0;}
.cell img{
width:100%;
transform: translateY(-10%);
}
}
}
.page-section__no-padding{
padding:0;
}
.page-section__background-green{
background-color:$secondary-color;
h1{color:$white;}
h2{color:$white;margin:0;}
h2+h3{color:$primary-color;}
h3{color:$white;}
h4{color:$primary-color;}
p{color:$white;margin-top:1.5rem;}
.button{color:$white;}
@include breakpoint(small only){
padding:3rem 0;
}
.card p{color:$black;}
}
.page-section__parallax-image{
padding:0;
.column-wrapper{
overflow:hidden;
height:60vh;
position: relative;
z-index: 0;
}
}
.page-section__not-found{
border-bottom:solid 1px $light-gray;
@include breakpoint(small only){
padding-top:1.5rem;
}
}
.page-section__cookies{
position:fixed;
bottom:0;
left:0;
right:0;
background-color: rgba($black,0.95);//rgba(0,0,0,.875);
padding:0.75rem 0;
z-index:1000;
color:$white;
@include breakpoint(small only){
padding-bottom:0;
}
p{
font-size:0.75rem;margin:0;
@include breakpoint(small only){
margin-bottom:0.75rem;
a{display:block;}
}
}
.button{margin:0;padding:0.5rem 1rem;line-height:1rem;}
}
.card{
border:none;
margin:1.5rem 0.75rem 0 0.75rem;
.card-section{padding:2.25rem 1.5rem;}
p:last-child{margin:0;}
.button__marie{color:$black;}
}
.reveal__hermitage{
padding:0;
border:0;
box-shadow:0 0 1.5rem rgba($black,0.5);
.reveal-image{position:relative;}
.button__marie{
@include absolute-center();
top:auto;
bottom:3rem;
}
.close-button{color:$white;}
}