File: /var/www/vhosts/creativefellows.nl/test.creativefellows.nl/e-pact/public/scss/_epact.scss
html,body{@include font-for-body(400);}
/*
* Headings
*/
h1,h2,h3,h4,h5,h6{@include font-for-header(700);color:$primary-color;}
h4,h5,h6{color:$black;}
/*
* buttons
*/
button.button{@include font-for-header(400);font-size:1.5rem;}
/*
* Showcase
*/
#video-intro,
.image-showcase{
position:relative;height:600px;overflow:hidden;z-index:0;
> div{height:100%;position:absolute;top:0;left:0;right:0;bottom:0;}
.case-foreground{
height:100%;position:relative;position:relative;top:0;width:100%;z-index:100;height:100%;text-align:center;
.grid-x{height:100%;align-items: center;}
h1{color:$white;font-size:4.5rem;line-height:1.125em;text-shadow: 2px 2px $black;}
p{font-size:1.25em;line-height:1.5em;margin-bottom:1.5em;}
.button{border-color:$white;color:$white;margin:0 0.75rem;text-transform:uppercase;@include font-for-header(400);font-size:1.5rem;}
.button:hover{background: rgba($white,1);border-color:$white;}
.case-image{position:absolute;top:0;right:3em !important;}
}
.case-background{
/*position:absolute;top:0;left:-50%;width:200%;height:100%;z-index:90;overflow:hidden;
img{position:absolute;top:0;left:0;right:0;margin:auto;min-width:50%;min-height:50%;z-index:90;}*/
position:absolute;height:100%;top:0;left:0;width:100%;
img,
video{
min-height:100%;
min-width:100%;
position: absolute;
left: 0%;
top: 0%;
max-width:none;
transition: all 0.5s
}
}
&.image-showcase::after {
content:"";
width:100%;
height:10rem;
position:absolute;
top:0;
left:0;
z-index:90;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.75+0,0+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
}
/*
* 4 CTA buttons home
.call-to-action-buttons{
border:solid 1px $light-gray;
background: rgba($light-gray,0.25);
margin:1.5rem 0;
h4{margin-top:0;}
.column-wrapper{padding-top:1.5rem;position:relative;}
.column-wrapper::after{content:"";border-left:solid 1px $light-gray;position:absolute;top:1.5rem;right:-1.25rem;bottom:0;}
.cell:last-child() .column-wrapper::after{display:none;}
.column-wrapper::before{
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 0.5rem 0.5rem 0 0.5rem;
border-color: rgba($secondary-color,0.25) transparent transparent transparent;
}
@media screen and #{breakpoint(small only)}
{
.column-wrapper::before,
.column-wrapper::after{display:none;}
.column-wrapper{padding:0.75em 0;}
p{margin-bottom:0;}
}
} */
.reveal{
.close-button{z-index:100;font-size:3rem;}
.grid-default{padding:0;}
}
/*
* Loopback cards
*/
.loopback-cards{
background:$white;
padding:0 0 1.5rem 0;
h2{margin:3rem 0 !important;}
.card{
border:none;
height:0 !important;padding-bottom:100%;
margin-bottom:1.5rem;position:relative;text-align:center;z-index:0;
&:hover{}//@include has-shadow();
&:hover img{transform:scale(1.1);}
&::before{
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 0.75rem 0.75rem 0 0.75rem;
border-color: rgba($white,1) transparent transparent transparent;
z-index:100;
}
}
.card-image{
height:100%;width:100%;position:absolute;z-index:0;
img{@include amimate-element(2s);height:100%;max-width:none;}
&::after{content:"";background: rgba($black,0.75);position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;}
}
.card-section{
@include absolute-center;width:100%;padding:0;
h4{color:$white;text-shadow: 2px 2px $black;margin-bottom:0.75rem;}
.button{color:$white;border:solid 1px $white;text-transform:uppercase;}
.button::after{content:"";position:absolute;width:100%;height:250%;top:-75%;left:0;}
.button:hover{background: rgba($white,1);border-color:$white;color:$black;}
}
}
/*
* Panel contact
*/
.panel-contact{
margin-bottom:3em;
background-color: $light-gray;
h2{color:$black;margin:0 !important;}
h3{border-top:solid 1px $light-gray;padding-top: 0.75rem;}
p{margin-bottom:0;}
.panel-gray-outer{background-color: $light-gray;overflow:hidden;}
.panel-gray-outer > div{padding-bottom:3em;}
.grid-default {
padding: 1.5em 0 1.5em 0 !important;
}
&.white-background{padding-bottom:1.5em;}
}
/*
* Panal gray
*/
.panel-gray{
padding:1.5rem 0;
margin:0;
background-color: $secondary-color;
p{margin:0;}
*{color:$white;}
}
/*
* Panal lightgray
*/
.panel-lightgray{
padding:0;
background-color: rgba($secondary-color,0.2);
text-align:center;
h1,h2,h3,h4,h5,h6,p,ul,ol{color:$white;}
.grid-container{position:relative;}
//.grid-container::before{content:"";position:absolute;top:-5em;left:0;height:12em;width:3em;clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% calc(100% - 1em), 1em calc(100% - 1em), 1em 0);background:$white;}
//.grid-container::after{content:"";position:absolute;bottom:-5.5em;right:0;height:12em;width:3em;clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% calc(100% - 1em), 1em calc(100% - 1em), 1em 0);background:$primary-color;transform:rotate(180deg);}
@media screen and #{breakpoint(medium down)}{
padding:1.5em 0 3em 0;
.grid-container::before,
.grid-container::after{display:none;}
}
}
/*
* About
*/
.panel-about{
padding:3em 0;
.grid-x{
@include has-shadow();
}
.column-wrapper{padding-top:1.5rem;position:relative;}
.column-wrapper::after{content:"";border-left:solid 1px $light-gray;position:absolute;top:1.5rem;right:-1.25rem;bottom:0;}
.cell:last-child() .column-wrapper::after{display:none;}
h3{margin-bottom:0;}
@media screen and #{breakpoint(small only)}{
padding-bottom:1.5em;
.grid-x{box-shadow:none;}
.column-wrapper{padding:0;}
.column-wrapper::after{display:none;}
}
}
/*
* form
*/
.form{
label{position:relative;@include font-for-header(400);}
.form-error{position:absolute;top:1rem;right:1rem;}
input[type="text"],
textarea{margin-bottom:1.5rem;}
fieldset:nth-child(2n-1){};
fieldset:nth-child(2n){};
}
/*
* View specific classes
*/
.site.details{
background-color:$secondary-color;
h1{color:$white;margin-top:3rem;}
h2,h3{margin:0;}
h3{margin-bottom:0.75rem;color:$secondary-color;}
.white-background{background-color:$white;padding-top:1.5rem;margin-bottom:3rem;}
/*.white-background.medium-9{position:relative;padding-right:2.5rem;}
.white-background.medium-9::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1.25rem;background:$secondary-color;}*/
.fit-image-to-height{
width:100%;
height:100%;
position:relative;
overflow:hidden;
padding-bottom:1.5rem;
div{position:relative;height:100%;margin-bottom:1.5rem;overflow:hidden;}
img{position:absolute;min-height:100%;max-height:100%;min-width:100%;max-width:none;left:50%;transform:translateX(-50%);}
@media screen and #{breakpoint(small only)}{
height:0;
padding-bottom:50%;
margin-bottom:1em;
div{position:absolute;height:100%;width:100%;}
}
}
.page-item{position:relative;}
.overlay-button::after{content:"";display:block;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;}
@media screen and #{breakpoint(large)}
{
.cell.image{padding-right:0.625em;}
.cell.text{padding-left:0.625em;}
}
.details h2{margin-bottom:1.5rem;}
.grid-default{padding:0;}
.view-epact{
position:relative;
margin-bottom:1.5rem;
h3{margin:0;}
h5{margin:0 0 0.75rem 0;}
p{margin:0;}
&::after{content:"";position:absolute;top:0;right:0;bottom:0;border-right:solid 1px $light-gray;}
}
}
.square-image{
width:100%;
padding-bottom:100%;
height:0;
position:relative;
overflow:hidden;
margin-bottom:1.5rem;
img{position:absolute;min-height:100%;max-height:100%;min-width:100%;max-width:none;left:50%;transform:translateX(-50%);}
}