HEX
Server: Apache
System: Linux v38079.2is.nl 3.10.0-1160.119.1.el7.x86_64 #1 SMP Tue Jun 4 14:43:51 UTC 2024 x86_64
User: democfellows (10015)
PHP: 8.1.34
Disabled: opcache_get_status
Upload Files
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;}
	
}