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/comtel.creativefellows.nl/public/scss/_sections.scss
.page-section{
	
	padding:1.5rem 0;
	
	h1,h2,h3,h4,h5,h6{
		font-variation-settings: "slnt" 0, "wght" 700;
	}
	h2{color:$primary-color;}
	h3{color:$secondary-color;}	
	p,ul,ol{font-size:1.125rem;}
	
}


.page-section__showcase{
	padding:0;
}


.page-section__expertise{
	padding:0 0 3rem 0;
	h2{margin:0;}
}


.page-section__related{
	
//	&::before{content:"";position:absolute;top:0;left:0;right:0;height:3rem;background:$white;}
//	&::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3rem;background:$white;}
//	position:relative;
 
	padding:0 0 1.5rem 0;
	margin-top:0;
		
	.scroller-outer{
		display: grid;
		grid-template-columns: 
	       [full-start] 1fr
	       [content-start]
	       min(auto, 100% - 3rem)
	       [content-end]
	       1fr [full-end];
	   z-index:10;
	   position:relative;
   

	}

	.scroller{
		grid-column: full;
		display: grid;
		grid-template-columns: inherit;
		overflow-x: scroll;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.scroller-wrapper{
		grid-column: content;
		display: flex;
		align-items: center;
		gap: 1.5rem;
		
		&::before{
			content: "";
			align-self: stretch;
			padding-start:1.5rem;
		}
		
		&::after{
			content: "";
			align-self: stretch;
			padding-end: max( 1.5rem, (100vw - 75rem) / 2 - 3rem );
			padding-inline-end: max( 1.5rem, (100vw - 75rem) / 2 - 3rem );
		}
	}

	.scroller-item{
		flex-shrink: 0;
		display: flex;
		align-items: center;
		scroll-snap-align: center;
		inline-size: 100%;
		max-inline-size: 16rem;
		position:relative;
	
	}
	
	.card{
		margin:0;
		border:none;
		background:#ebf1ff;
		
		.card-image img{height:12rem;max-width:none;display:block;margin-left:50%;transform:translateX(-50%);}
		.card-section{padding:1.5rem;}
		h3{font-size:1.25rem;}
		.button{
			float:right;
			padding-right:0;
			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37.44 31.03'%3E%3Cpath d='m21.92 0-2.89 2.89 10.68 10.55H0v4.15h29.71L19.03 28.14l2.89 2.89 15.52-15.51z' style='fill:%2300113d'/%3E%3C/svg%3E") no-repeat 50% 50%;background-size:2rem auto;text-indent:-5000px;
		}
	}
	.card-image-inner{
		clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 4rem 90%, 1.5rem 100%, 1rem 90%, 0% 90%);
	}
	
}


.page-section__contact-us{
	padding:4.5rem 0;
	position:relative;
	background: $primary-color; 
	&::after{
		content:"";
		position:absolute;
		top:0;
		opacity:0.15;
		z-index:0;
		width:100%;
		height:100%;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath d='m307.92 260.09 23.81 51.04-87.49 40.8-75.96-162.84 87.5-40.8 23.8 51.04.01-.01-.08-.17 120.48-72.61.08.18L340.98 0 0 159.01 159.01 500 500 340.99l-59.01-126.53z' style='fill:%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%;
		background-size:auto 200%;
		
	}
	
	
	h1,h2,h3,h4,h5,h6,p,ul{color:$white;}
	p{margin:0;}
	
	.button{background:$white;color:$primary-color;}
}










/* OLD NEC */



.page-section__hex-icons{
	padding-top:0;
	padding-bottom:3rem;
}

.page-section__has-devider-after{
	padding-bottom:1.5rem;
	 .grid-x::after{clear:both;content:"";display:block;margin-left:0.5em;margin-right:0.5em;border-bottom:solid 1px $light-gray;width:100%;margin-top:1.5rem;}
}

.page-section__panel-grey10,
.page-section__background-gray{
	background: #f6f6f6;
}


.page-section__text-center{
	text-align:center;
}


.page-section__not-found{
	padding:3rem 0 3rem 0;
}

.page-section__flipping-cards{
	
	background: #f6f6f6;
	
}

.button-group__filter-results{
	margin:0 auto 0 auto;
	display:inline-block;
	background:none;
	&:hover{background:none;}
	
	.button{padding:$global-padding/2 $global-padding;border-radius:1.5rem;text-transform:uppercase;font-size:0.875rem;background:none;color:$primary-color;}
	.button:hover{background:$light-gray;}
	.button__active,
	.button__active:hover{background:$primary-color;color:$white;font-weight:400;}

}

.page-section__sitemap{

	padding:1.5rem 0 0 0;
	
	.column-header{
		font-size:1.125rem;
		margin-top:0;
		position:relative;
		&::before{content:"";position:absolute;top:0;left:-0.75rem;bottom:0;border-left:solid 1px $primary-color;}
	}
	
	.group-header{
		margin:0;
		text-transform:none;
	}	
	
	&.page-section__sitemap-partners{
		hr{border-color:transparent;}
	}
	
}

.page-section__related-content{

	background:#f6f6f6;
	margin-bottom:0;
	padding:3rem 0;
		
	.related-item{
		padding:1rem;
		min-height:9rem;
		margin-top:0;
		h4{margin-bottom:0;}
		h4+p{font-size:0.875rem;margin:0;}
		*{color:$white;}
	}
	
	.grid-x .cell{
		&:nth-child(1) .related-item{background:get-color-nec(0);}
		&:nth-child(2) .related-item{background:get-color-nec(1);}
		&:nth-child(3) .related-item{background:get-color-nec(2);}
		&:nth-child(4) .related-item{background:get-color-nec(3);}
	}
	
}