File: D:/HostingSpaces/ASmits/kemi.nl/resources/assets/sass/site/partials/_production-header.sass
.production-header, .project-detail-header
background-color: $neutral-200
z-index: 1
position: relative
> .grid-col
width: 100%
height: 100%
overflow: visible
> .grid-row
display: flex
height: 100%
overflow: visible
.left, .right
width: 50%
overflow: visible
margin-top: -150px
.left
padding-right: 120px
position: relative
h4, .back-to-overview
color: $neutral-200
font-size: 0.75rem
font-weight: bold
letter-spacing: 1px
line-height: 1rem
text-transform: uppercase
margin-top: 96px
margin-bottom: 120px
position: relative
z-index: 30
&:before
content: ''
position: absolute
display: block
width: 50px
left: -5px
height: 0
opacity: 0.5
transform: rotate(-45deg)
border-top: solid 1px white
z-index: 20
&:after
content: ''
position: absolute
display: block
width: 65px
left: -18px
height: 0
opacity: 0.5
transform: rotate(-45deg)
border-top: solid 1px white
z-index: 20
.back-to-overview
display: block
p
color: $blue-700
font-size: 1.125rem
line-height: 2rem
margin-bottom: 60px
ul
list-style: none
margin: 0
margin-top: 100px
padding: 0 30px 65px 0
+flex(space-between, flex-start)
+flex-rows
li
position: relative
padding-left: 0
color: $pastelBlue
font-size: 1.125rem
line-height: 1.375rem
margin-bottom: 16px
width: calc(90% / 2)
&:first-child
margin-right: calc(90% / 2)
a
width: 100%
text-decoration: none
color: $pastelBlue
display: inline-block
transition: color 0.3s
&:hover
color: $blue
&:after
position: absolute
top: 0
right: 3px
width: 18px
height: 100%
//padding-top: 2rem
content: ""
background-position: center center
background-repeat: no-repeat
background-image: url("/img/svg/arrow_small_color.svg")
transition: background-position 0.2s
&.active
font-weight: bold
position: relative
&:before
content: ''
top: 7px
left: -30px
position: absolute
width: 0
height: 0
border-bottom: 10px solid $red-500
border-left: 10px solid transparent
a
color: $blue
&:after
display: none
.back-button
position: absolute
top: 150px
right: 0
width: column(1, 6)
height: 0
padding-top: column(0.5, 6)
padding-bottom: column(0.5, 6)
background-color: $red-500
+flex(center, center)
transition: background-color 0.3s
&:hover
background-color: lighten($red-500, 10%)
svg
transform: rotate(90deg) scale(1.2)
svg
transform: rotate(90deg)
width: 20px
height: 16px
.st0
fill: white
.text
display: none
color: white
margin-left: 10px
font-size: 1rem
line-height: 1.1rem
.right
width: column(7, 12)
margin-right: column(-1,12)
overflow: visible
background-color: white
box-shadow: 0 0 100px 0 rgba(0,40,105,0.12)
.white-block
width: 100%
position: relative
overflow: visible
z-index: 1
padding: 98px column(1, 12)
.header-content
position: relative
padding-bottom: 80px
&:before
content: ''
display: block
pointer-events: none
position: absolute
width: 190px
height: 175px
background-image: url('/img/circles_and_triangles.png')
top: -40px
left: -60px
opacity: 0.5
&.subpage
.header-content
padding-left: 150px
&:before
top: auto
left: auto
bottom: 20px
right: -40px
.production-subpage-icon
display: block
.lasercutting &
svg
width: 45px
max-height: 82px
.folding &
svg
width: 47px
max-height: 84px
.punching &
svg
width: 58px
max-height: 77px
.sheetwork &
svg
width: 43px
max-height: 76px
.welding &
svg
width: 66px
max-height: 77px
.montage &
svg
width: 76px
max-height: 67px
.punchlaser &
svg
width: 74px
max-height: 88px
.various-operations &
svg
width: 55px
max-height: 57px
.logistic &
margin-left: -8px
svg
width: 85px
max-height: 45px
.production-subpage-icon
display: none
position: absolute
+flex(center, center)
left: column(1, 12)
width: 150px
top: 100px
text-align: center
h1
margin-top: 0
color: $blue
font-size: 2rem
font-weight: 500
line-height: 2.875rem
position: relative
p
margin: 0
color: $pastelBlue
font-size: 1.125rem
line-height: 2rem
span
font-weight: bold
line-height: 2rem
margin-right: 15px
a
color: $blue-300
font-size: 1.125rem
font-weight: bold
line-height: 2rem
svg
.logistic &
width: 105px
.punchlaser &
width: 85px
+respond-to-width(1440)
.production-header
> .grid-col
> .grid-row
.left
h4
margin-bottom: 120px
ul
margin-top: 0
max-width: 300px
li
width: 100%
margin-right: 0
&:nth-child(even)
width: 100%
&:first-child
width: 100%
margin-right: 0
+respond-to-width(1240)
.production-header
> .grid-col
> .grid-row
.right
.white-block
&.subpage
padding-left: 0
.production-subpage-icon
left: 0
h1
display: inline-block
position: relative
margin-bottom: 30px
+respond-to-width(960)
.production-header, .project-detail-header
> .grid-col
> .grid-row
width: 100%
flex-wrap: wrap
.left
margin-top: 0
width: 100%
padding: 0
h4, ul
display: none
.back-button
position: relative
top: 0
+flex(flex-start, center)
width: 100%
height: auto
padding: 25px column(1)
.text
display: block
.projects &
display: none
.right
margin-top: 0
width: 100%
margin-right: 0
.white-block
padding: 60px column(1) 0
min-height: auto
max-width: 650px
.header-content
&:before
left: -35px
top: -30px
+respond-to-width(500)
&:before
display: none
&.subpage
padding: 60px column(1) 20px
.production-subpage-icon
left: column(1)
top: 60px
.header-content
&:before
left: auto
+respond-to-width(680)
.header-content
&:before
right: -20px
body.projects .content &
min-height: 0 !important
padding-bottom: 0 !important
+respond-to-width(505)
.production-header
> .grid-col
> .grid-row
.left
ul
margin-left: 5%
li
width: 95%
&:nth-child(even)
width: 95%
&:first-child
width: 95%
margin-right: 0
+respond-to-width(425)
.production-header
> .grid-col
> .grid-row
.right
.white-block
&.subpage
padding: 60px column(0.5, 6)
.header-content
padding-top: 40px
padding-left: 0
.production-subpage-icon
position: relative
top: 0
left: auto
display: block
margin: 0 auto
h1
left: 0
width: 100%
text-align: center