File: /var/www/vhosts/creativefellows.nl/comtel.creativefellows.nl/public/scss/_home_v2.scss
$orange : #ed5c01;
$light-blue:#3893c7;
$nec-blue:#004f9f;
$green :#97bd31;
@mixin shadow-bottom(){
&::after {
content:"";
position:absolute;
bottom:0;
left:0;
right:0;
z-index:-1;
transform:scale(.9);
box-shadow: 0 -0.25rem 1.5rem 0.25rem #000000;
}
}
#hide{display:none;}
.grid-container__larger{
// position:relative;
//max-width: 95rem;
// z-index:10;
}
.section__showcase-animation{
transition: background-color 1000ms linear;
overflow:hidden;
height:45rem;
background-color:$black;
position:relative;
padding-bottom:3rem;
&::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3rem;background:$white;}
.grid-x{
position:relative;
@include breakpoint(small only) {
.cell{padding:0 1rem;}
}
}
.animate__delay-1-5s{
animation-delay: 1.5s !important;
}
.animate__delay-2-5s{
animation-delay: 2.5s !important;
}
.animate__delay-3-5s{
animation-delay:3.5s !important;
}
.case-slide{
position:absolute;
top:0;left:0;right:0;bottom:0;
//display:none;
.case-slide-wrapper{
display:flex;
flex-flow: row wrap;
align-items: center;
height:100%;
}
.vertical-center{
width:100%;padding:4.5rem 0;
//margin-top: 1.5rem;
}
.grid-container__larger::before,
.grid-container__larger::after{
content:"";
background:$secondary-color;
background: linear-gradient(360deg,rgba(0, 17, 61, 1) 0%, rgba(0, 17, 61, 0) 50%);
width:125%;height:0;padding-bottom:125%;position:absolute;bottom:0;transform:translateX(-25%);
z-index:10;
opacity:0.8;
z-index:9;
clip-path: polygon(100% 0, 100% 82%, 25% 100%, 0 0);
}
.grid-container__larger::after{
opacity:1;
background: linear-gradient(360deg,rgba(0, 17, 61, 1) 4.5rem, rgba(0, 17, 61, 0) 10rem);
mix-blend-mode: normal;
}
.grid-x{position:relative;z-index:10;}
}
.case-slide__active{display: block;}
.no-margin{margin:0;}
/*
* CHOICE
*/
.case-slide[data-slide="choice"]{
background: url(/images/home/choice-background.webp) no-repeat 50% 50%;
background-size:cover;
.choice-models{
@include breakpoint(medium up) {
padding:0 1.5rem;
}
@include breakpoint(small only) {
.icon-model{
padding:0 1.5rem;
.label__on-premises{right:0;}
.label__cloud{left:0;}
.label__hybrid{right:0;}
}
}
svg{
max-width:50%;
@include breakpoint(small only) {
max-width:40%;
}
}
p{
position:relative;margin:3rem 0;
@include breakpoint(medium down) {
margin:1.5rem 0;
}
}
.label{
font-size:1.5rem;font-weight:bold;background-color:$nec-blue;position:absolute;bottom:-1.5rem;padding:0.5rem 1.5rem;
@include breakpoint(medium down) {
font-size:1rem;
bottom:-1rem;
}
}
.label__on-premises{right:-1rem;}
.label__cloud{left:-1rem;}
.label__hybrid{right:-1rem;}
.label__symbol{
@include animate();
padding-left:2.5rem;
background-color:$primary-color;
cursor:pointer;
&:hover{background-color:darken($primary-color,10%);color:$white;}
&::before{
content: "";
position:absolute;
left:0;
top:0;
width:1.75rem;
height:1.75rem;
left:0.375rem;
top:0.375rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 0C14.33 0 0 14.33 0 32s14.33 32 32 32 32-14.33 32-32S49.67 0 32 0Zm14.53 34.58L26.2 46.32c-2.79 1.62-5.08.29-5.08-2.93V19.92c0-3.23 2.29-4.55 5.08-2.94l20.33 11.74c2.79 1.61 2.79 4.26 0 5.87Z' style='fill:%23fff'/%3E%3C/svg%3E");
@include breakpoint(medium down) {
width:2rem;
height:2rem;
left:0.25rem;
top:0.25rem;
}
}
}
}
}
/*
* DRIVERS
*/
.case-slide[data-slide="drivers"]{
background: url(/images/comtel-ifv.jpg) no-repeat 50% 50%;
background-size:cover;
@include breakpoint(small only){
background-position:80% 0%;
}
.cell__right{
position:static;
@include breakpoint(small only){
.button__symbol{margin-top:12rem;}
}
}
.hexagon-bagde{
position:absolute;
top:3rem;
right:3rem;
width:14rem;
color:$white;
text-align:center;
padding:0 0.75rem;
font-size:2rem;
line-height:2.5rem;
margin:auto;
@include breakpoint(medium down){
font-size:1rem;
width:7rem;
line-height:1.25rem;
}
@include breakpoint(small only){
position:relative;
top:auto;
right:auto;
margin:3rem 1.5rem 1.5rem 0;
float:right;
}
&::before{
content:"";
display:block;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 175.42 195.11'%3E%3Cpath d='M164.41 154.55c6.08-3.51 11.01-12.04 11.01-19.06V59.63c0-7.02-4.93-15.55-11.01-19.06L98.71 2.63c-6.08-3.51-15.93-3.51-22.01 0L11.01 40.56C4.93 44.07 0 52.61 0 59.63v75.86c0 7.02 4.93 15.55 11.01 19.06l65.7 37.93c6.08 3.51 15.93 3.51 22.01 0l65.7-37.93Z' style='fill:%23004f9f'/%3E%3C/svg%3E");
background-position:50% 50%;
background-repeat:no-repeat;
width:14rem;
height:14rem;
@include absolute-center();
z-index:-1;
@include breakpoint(medium down){
font-size:1rem;
width:7rem;
&::before{
width:7rem;
height:7rem;
}
}
}
}
}
/*
* BLUE
*/
.case-slide[data-slide="blue"]{
background: url(/images/home/blue-background.webp) repeat-x 50% 0%;
background-size:auto 150%;
p.lead{
margin-bottom:3rem;
padding-left:3rem;
padding-right:3rem;
@include breakpoint(small only){
margin-bottom:1.5rem;
padding-left:0rem;
padding-right:0rem;
font-size:1rem;
}
}
.cell__right{
img{
margin:auto;
display:block;
max-width:74%;
}
@include breakpoint(small only){
.button__symbol{margin-top:1.5rem;}
}
}
}
// CTA button
.button__symbol{
position:relative;
padding-left:3.5rem;
font-size:1.25rem;
clear:both;
@include breakpoint(medium down) {
font-size:1rem;
line-height:1.5rem;
margin-bottom:1.5rem;
padding:0.5rem 1rem 0.5rem 3rem;
}
@include breakpoint(small only) {
margin-top:3rem;
}
&::before{
content: "";
position:absolute;
left:0;
top:0;
width:2.25rem;
height:2.25rem;
left:0.375rem;
top:0.375rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 0C14.33 0 0 14.33 0 32s14.33 32 32 32 32-14.33 32-32S49.67 0 32 0Zm14.53 34.58L26.2 46.32c-2.79 1.62-5.08.29-5.08-2.93V19.92c0-3.23 2.29-4.55 5.08-2.94l20.33 11.74c2.79 1.61 2.79 4.26 0 5.87Z' style='fill:%23fff'/%3E%3C/svg%3E");
@include breakpoint(medium down) {
width:2rem;
height:2rem;
left:0.25rem;
top:0.25rem;
}
}
}
h2{
color: $primary-color;
margin-bottom:3rem;
@include breakpoint(medium down) {
margin-bottom:1.5rem;
}
}
h3{
color:$white;
font-size:3rem;
line-height:4rem;
margin-bottom:1.5rem;
@include breakpoint(medium down) {
font-size:2rem;
line-height:2rem;
margin-bottom:1.5rem;
}
strong{display:block;font-weight:700;}
}
p{
color:$white;text-transform:uppercase;font-size:$lead-font-size;margin-bottom:2rem;
strong{display:block;}
}
}
.page-section__trending-topics{
background: #f6f6f6;
padding-bottom:3rem;
.cell:nth-child(1) .text-wrapper{background:get-color-nec(0);}
.cell:nth-child(2) .text-wrapper{background:get-color-nec(2);}
.cell:nth-child(3) .text-wrapper{background:get-color-nec(3);}
.cell:nth-child(4) .text-wrapper{background:get-color-nec(4);}
.cell:nth-child(5) .text-wrapper{background:get-color-nec(5);}
.cell:nth-child(6) .text-wrapper{background:get-color-nec(6);}
}
.page-section__latest-news{
h3{color:$primary-color;}
ul{position:relative;min-height:1.5em;margin-top:0.75em;}
li{position:absolute;top:0;left:0;list-style:none;background-color:#fff;height:1.5em;overflow:hidden;display:block;width:100%;text-align:center;}
li::after{content:"";position:absolute;top:0;right:0;width:1.5em;height:1.5em;}
strong{font-weight:500;;}
strong::after{content:"-";padding-left:0.25em;}
a{color:#082c5c;}
a:hover{color:#000;}
.dots{text-align:center;}
.dots > span{display:inline-block;width:0.75rem;height:0.75rem;padding:0.5rem;border-radius:0.75rem;background-color:#ddd;margin:0 0.375rem;cursor:pointer;}
.dots > span:hover,
.dots span.active{background-color:#082c5c;}
}