File: /var/www/vhosts/creativefellows.nl/test.creativefellows.nl/liez/public/scss/_lease.scss
.liez-intro{
position:relative;
//min-height:10rem;
background: url(../images/lease-blur.jpg) no-repeat 50% 40%;
background-size:100% auto;
margin-bottom:3rem;
&::before{
content:"";
position:absolute;
bottom:0rem;
left:0;
right:0;
height:10rem;
background:$white;
}
&::after{
content:"";
position:absolute;
bottom:7rem;
left:0;
right:0;
height:3rem;
z-index:0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
h1{@include font-for-header(900);margin-top:1.5rem;color:$white;font-size:3rem;text-shadow: 0.25rem 0.25rem 0.75rem rgba(0,0,0,0.75);}
h3{font-size:1.25rem;color:$black;margin:1.5rem 0;}
.object-image{
position:relative;
z-index:10;
img{transition: transform 1.5s;}
&:hover img{transform: scale(1.25);}
}
a.button::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;}
}
.liez-calculate-form{
.grid-container{
background-color:rgba($light-gray,0.35);
padding:2.25rem;
border:solid 1px $light-gray;
}
h2{margin-bottom:2.25rem;}
p.lead{margin:0;}
fieldset .button{background-color:$black;}
.input-form{
margin-bottom:$global-margin;
label{position:relative;}
input{border:none;box-shadow:none;border:solid 1px $light-gray;padding:0.75em 0.75em 0.75em 1.5em;height:3rem;}
input:focus{position:relative;box-shadow:none;border:none;z-index:10;border-bottom:solid 1px $medium-gray;}
span{position:absolute;top:0.55em;left:1.5em;color:$dark-gray;z-index:0;width:100%;font-size:1rem;}
span::after{content:"";width:2px;position:absolute;display:block;height:50%;left:-0.5em;top:25%;background:$primary-color;}
input:not([value=""]) + span{display:none;}
input:not([value=""]) + span.eur{display:block;color:transparent;}
input:not([value=""]) + span.eur::before{content:"€";position:absolute;left:-0.75em;color:$medium-gray;}
input:not([value=""]) + span.eur::after{display:none;}
select{appearance: none;border:none;height:3em;border:solid 1px $light-gray;padding-left:6em;}
select + span{width:auto;}
i.fa{position:absolute;z-index:100;top:1.125em;right:0.625rem;color:$black;border:none !important;}
.error{border-bottom-color:$primary-color;}
.button{border:none;}
}
}
.liez-calculator fieldset .button{background-color:$primary-color !important;}
.liez-calculator #page-cta-form{padding-top:1.5rem;display:none;}
.liez-calculator #page-cta-form .button{margin-top:1.5rem;}
#page-cta-form.visible{display:block;}
.show-form-response #page-cta-form{display:block !important;text-align:center;}
.panel-image{
position:relative;
z-index:0;
background: url(../images/lease-blur.jpg) no-repeat 50% 100%;
background-size:100% auto;
.logo-liez{background-image: url(../images/liez-no-payoff-white.svg);}
*{color:#fff;}
&::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:black;z-index:-1;opacity:0.25;}
}
.lease-blog{
h4{color:$primary-color;}
.image-wrapper{height:18rem;margin-bottom:1.5rem;overflow:hidden;}
}
.list-items-lease{
hr{margin-top:0;}
.list-items{border-top:solid 1px $light-gray;}
.item{
text-align:center;
position:relative;
margin-bottom:1.5rem;
h3{margin:0;}
.image{
height:12rem;
margin:1.5rem 0;
img{max-height:100%;transition: transform 1.5s;}
}
.lease-cta{
color:$dark-gray;float:right;padding-top:0.75rem;
@include breakpoint(medium down){
display:block;
float:none;
}
&.block{float:none;padding-top:0.75rem;display:block;}
}
a.button::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;}
&:hover img{transform: scale(1.125);}
}
.item.anders{
span{display:none;}
}
}
.masthead{
position:relative;
background: url(../images/lease-blur.jpg) no-repeat 50% 25%;
background-size:100% auto;
//adding-bottom:1.5rem;
margin-bottom:6rem;
//height:18rem;
.grid-x{
//padding:0.75rem 0 3rem 0;
}
.object-image{
position:relative;
z-index:100;
//border:solid 1px red;
img{
// position:absolute;
// top:0;
// right:0;
// z-index:10;
// transform: translateY(-6rem);
margin-bottom:-6rem;
}
}
.object-text{
padding-bottom:3rem;
h1{color:$white;@include font-for-header(900);text-shadow: 0.25rem 0.25rem 1rem rgba(0,0,0,0.75);margin:3rem 0 0rem 0;}
h2{color:$white;@include font-for-header(900);text-shadow: 0.25rem 0.25rem 1rem rgba(0,0,0,0.75);}
h3{color:$white;@include font-for-header(900);text-shadow: 0.25rem 0.25rem 1rem rgba(0,0,0,0.75);margin-bottom:0;}
p{color:$white;margin:1.5rem 0;}
a:not(.button){color:$white;text-decoration:underline;padding: 0.75rem 0.75rem 0.75rem 1rem;border:solid 1px transparent;border-left:solid 1px rgba($white,0.25);margin-left:1rem;display:inline-block;}
span{padding: 0.75em 0.75rem;margin-left:0.75rem;}
}
&::after{
content:"";
position:absolute;
bottom:-3rem;
left:0;
right:0;
height:3rem;
z-index:0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
@include breakpoint(medium down)
{
background-position: 75% 0%;
background-size:auto 85%;
text-align:center;
margin-bottom:0;
.object-text{
padding-top:1.5rem;
}
.object-image{
top:1.5rem;
}
&::after{display:none;}
}
//h3 small{color:$white;font-size:1rem;display:block;line-height:1.5rem;}
}
.contact-row .cell{
padding-top:1.5rem;
border-top:solid 1px $light-gray;
border-bottom:solid 1px $light-gray;
margin-bottom:3rem;
text-align:center;
h3{color:$black;}
a{color:$primary-color;padding:0 1rem;}
a.call{border-right:solid 1px $light-gray;margin-left:1.5rem;}
a i{font-size:1.125rem;}
@include breakpoint(medium down)
{
span{display:block;margin-top:1.5rem;}
}
}
.technical-details{
h3{color:$black;}
table{margin-bottom:3rem;}
@include breakpoint(medium up)
{
tr:nth-child(2n) {
border-bottom: 0;
background-color: rgba($light-gray,0.5);
}
}
@include breakpoint(small only){
table.stack td{
width:50%;
display:inline-block !important;
border-bottom: solid 1px rgba($light-gray,0.5);
background-color:$white;
}
table.stack tr{
border:0;
}
}
}