File: D:/HostingSpaces/SBogers10/douven.komma.pro/resources/assets/sass/site/pages/_home.sass
/* ==========================================================================
Home page
========================================================================== */
.content
.afspraakblok
padding-top: 40px
.leftborder
width: column(0.5)
margin: 115px 0
border-left: solid 30px $douvBlue
height: 320px
position: absolute
left: 0
.left
width: column(5, 12)
margin: 115px 0
vertical-align: top
padding: 0 column(0.5, 12)
color: $douvPurple
a.button
margin-top: 75px
.right
width: column(6.5)
height: 320px
background-color: white
margin: 115px 0
position: relative
overflow: visible
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.05)
border-bottom: solid 5px $douvYellow
.img-holder
display: block
width: 100%
height: 145%
top: -45%
left: -3%
position: relative
overflow: hidden
.inner-right
min-width: column(2.5, 6)
background-color: $douvDarkBlue
height: 240px
border-bottom: solid 5px $douvYellow
margin-right: column(-0.5, 6)
position: absolute
right: 0
bottom: -50px
padding: 30px
color: white
font-size: 18px
line-height: 26px
font-weight: 600
letter-spacing: 0.08px
text-align: center
+respond-to-width(1150)
bottom: -120px
a
text-decoration: none
color: white
transition: color 0.3s
&:hover
color: $douvYellow
.waaromDouven
position: relative
clear: both
.leftFill
background: $douvBlue url('/img/bg_repeat.png')
background-image: url('/img/bg_repeat.png'), linear-gradient(90deg, $douvBlue, $douvDarkBlueGrad)
position: absolute
left: column(-6.5)
width: column(13)
height: 100%
.left
width: column(4.5,12)
padding: 40px 0 40px column(0.5, 12)
color: white
a.button
margin-top: 30px
.right
width: column(5, 12)
margin-left: column(2.5, 12)
padding: 40px 0
color: $douvBlue
+respond-to-width(1100)
width: column(5.5, 12)
margin-left: column(2, 12)
+respond-to-width(980)
width: column(6, 12)
margin-left: column(1.5, 12)
ul
font-weight: bold
font-size: 22px
line-height: 50px
margin: 0
padding: 0 0 0 15px
li
padding-left: 75px
list-style: none
position: relative
margin: 0
font-weight: 600
&:before
content: ''
width: 24px
height: 100%
position: absolute
left: 0
top: -2px
background: url('/img/svg/list-check.svg') no-repeat left 15px
background-size: 24px
+respond-to-width(1100)
padding-left: 50px
.catBlock
padding: 30px 0 30px 0
margin-top: 90px
margin-bottom: 120px
background-color: white
color: $douvPurple
box-shadow: 15px 15px 40px 10px rgba(0, 0, 0, 0.05)
.left, .right
width: column(5, 12)
margin-left: column(1, 12)
margin-bottom: 60px
.left
margin-bottom: 30px
.catItem
width: column(4.5, 12)
margin-left: column(1, 12)
position: relative
overflow: visible
margin-bottom: 60px
&:before
content: " "
display: block
height: 80%
position: absolute
left: -30px
top: 10%
width: 30px
background-color: $douvYellow
&:nth-child(even)
margin-left: column(1.5, 12)
a
text-decoration: none
&:hover
.imgHolder
background-size: 105%
&:after
opacity: 0.2
background-color: $douvDarkBlue
.yellow-block-overlay
&:after
width: 72px
height: 72px
.imgHolder
position: relative
width: 100%
height: 300px
background-repeat: no-repeat
background-size: 100%
background-position: center 65%
transition: background-size 0.3s
&:after
content: ''
position: absolute
width: 100%
height: 100%
left: 0
top: 0
background-color: $douvBlue
opacity: 0.2
transition: opacity 0.3s, background-color 0.3s
.yellow-block-overlay
position: absolute
+flex(center, center)
width: 100%
height: 100%
top: 0
left: 0
margin: 0
z-index: 4
&:after
content: ''
width: 64px
height: 64px
border-radius: 3px
background: $douvDemiDarkYellow url('/img/svg/arrow_right.svg') no-repeat 50% 50%
background-size: 35%
transition: width 0.3s, height 0.3s
h4
background: linear-gradient(90deg, $douvBlue, $douvDarkBlueGrad)
color: white
margin: 0
padding: 10px 24px 10px 80px
font-size: 26px
font-weight: 600
letter-spacing: -0.13px
transition: background 0.3s
span
width: 30px
height: 30px
position: absolute
background-size: 150px
margin: 17px 0 17px 40px
&.cooling
background-position: -5px -107px
&.events
background-position: -45px -107px
&.mobility
background-position: -81px -107px
&.transportservice
background-position: -120px -107px
figure
background-position: center center
.referencesblock
padding-bottom: 45px
position: relative
background-color: white
box-shadow: 0px -20px 20px -10px rgba(0, 0, 0, 0.03)
.main
width: column(14)
padding-top: 30px
h3
color: $douvBlue
font-size: 28px
margin-bottom: 2em
ul
+flex(space-between, center)
list-style: none
padding-left: 0
a
text-decoration: none
li
width: 125px
font-size: 16px
padding-top: 74px
background: url('/img/svg/refs.svg') no-repeat left top
background-size: 370px
text-align: center
color: #CED5D9
&:hover
background: url('/img/svg/refs_blue.svg') no-repeat left top
background-size: 370px
&.ref-0
background-position: 27.5px top
&.ref-1
background-position: -115.5px top
&.ref-2
background-position: -259.5px top
&.ref-3
background-position: 27.5px -111px
&.ref-4
background-position: -110.5px -111px
&:hover
background-position: -110.5px -191px
&.ref-5
background-position: -250px -111px
&.ref-6
background: url('/img/svg/referenties/bavaria.svg') no-repeat left top
background-size: 290px
background-position: -85px 0px
&:hover
background-position: 20px 0px
&.ref-7
background: url('/img/svg/referenties/fresh-grooves.svg') no-repeat left top
background-size: 370px
background-position: -128px 0px
&:hover
background-position: 10px 0px
.buttonsblock
height: 300px
&:before
content: " "
background: $douvBlue url('/img/bg_repeat.png') repeat
background-image: url('/img/bg_repeat.png'), linear-gradient(90deg, $douvBlue, $douvDarkBlueGrad)
height: 300px
position: absolute
left: 0
width: 100%
.left, .right
width: column(6, 12)
padding: 100px 0
text-align: center
.button
width: 75%
min-width: 410px
max-width: 480px
height: 80px
padding: 20px
font-size: 24px
letter-spacing: -0.12px
background-color: $douvBlue
&:hover
background-color: lighten($douvBlue, 5%)
+respond-to-width(1050)
width: 95%
font-size: 20px
padding: 24px
min-width: unset
span
width: 50px
html.ie
.content
.waaromDouven
.right
ul
li:before
height: 120%
top: -20px
.referencesblock
.main
ul
li
&.ref-0
background-position: 27.5px -55px
&:hover
background-position: 27.5px -15px
&.ref-1
background-position: -115.5px -55px
&:hover
background-position: -115.5px -15px
&.ref-2
background-position: -259.5px -55px
&:hover
background-position: -259.5px -15px
&.ref-3
background-position: 27.5px -166px
&:hover
background-position: 27.5px -126px
&.ref-4
background-position: -110.5px -166px
&:hover
background-position: -110.5px -206px
&.ref-5
background-position: -250px -166px
&:hover
background-position: -250px -126px
+respond-to-width(840)
.content
.grid-row
width: 100%
padding-left: column(1, 12)
padding-right: column(1, 12)
.grid-col
width: 100%
.afspraakblok
padding: 0
padding-top: 15px
.leftborder
display: none
.left
margin: 0
padding-left: column(1, 12)
padding-right: column(1, 12)
a.button
margin-top: 30px
.right
margin: 60px 0 90px 0
.inner-right
width: column(2.5, 6)
margin-right: 0
bottom: -50px
.waaromDouven
padding: 0
.leftFill
display: none
.left
padding: 20px column(1, 12) 60px column(1, 12)
background: $douvBlue url('/img/bg_repeat.png') repeat
.right
padding: 10px column(1, 12) 40px column(1, 12)
margin-left: 0
ul
padding: 0
+flex(space-between, flex-start)
flex-wrap: wrap
li
width: 49%
.catBlock
margin-top: 0
margin-bottom: 0
padding-bottom: 0
.left, .right
margin: 0
padding: 0
.catItem
margin-left: 0
//margin-bottom: 0
&:nth-child(even)
margin-left: 0
.referencesblock
.main
ul
flex-wrap: wrap
li
margin-top: 30px
margin-right: 50px
.buttonsblock
.left, .right
padding: 40px 0 15px 0
+respond-to-width(760)
.content
.afspraakblok
.left
padding-bottom: 50px
.waaromDouven
.right
ul
li
width: 100%
+respond-to-width(660)
.content
.referencesblock
.main
ul
li
margin-right: 20px
+respond-to-width(570)
.content
.afspraakblok
.right
.inner-right
width: 55%
.waaromDouven
.leftFill
height: 51%
.catBlock
.catItem
.imgHolder
background-size: cover
+respond-to-width(435)
.content
.afspraakblok
.right
height: auto
margin: 0
background-color: transparent
.img-holder
height: 580px
width: 110%
left: -9%
.inner-right
width: 100%
position: relative
bottom: 124px
margin-bottom: -130px
.waaromDouven
.leftFill
height: 53%
.catBlock
padding: 0
.left
padding: 0 column(1, 12)
.catItem
margin-bottom: 0
.buttonsblock
.left, .right
.button
width: 100%
font-size: 16px
padding: 24px 14px
span
width: 42px
+respond-to-width(380)
.content
.waaromDouven
.leftFill
height: 48%
+respond-to-width(360)
.content
.referencesblock
.main
ul
li
margin-right: 0