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);}
}
}