/* Last full read through 29/12/2020
* *############################################## *# about /_sass/about.sass *############################################## * */
.hero
overflow: hidden
.hero__image–fixed
position: fixed
@keyframes fadeInOpacity
0% opacity: 0 100% opacity: 1
.about__copy
align-items: center color: $white display: flex flex-direction: column justify-content: center padding: 5rem 2rem text-align: center
.about–copy
padding: 3rem 0
.about–video
width: 100vw //background-color: $opd-grey display: flex flex-direction: column padding: 5rem 0 padding: 0 justify-content: space-between & > h2 color: $env-primary text-align: center padding: 1rem
.video__container
display: block position: relative width: 100% padding-top: 56.25% iframe position: absolute top: 0 left: 0 bottom: 0 right: 0 width: 100% height: 100%
.about__team
display: flex flex-direction: column background-color: $pure-white border-top: solid 1px $opd-blue
.about__team–title
padding-top: 3rem text-align: center color: $pure-white
.team__head
align-items: flex-end border-bottom: solid 1px $opd-blue display: flex height: 10rem justify-content: space-around width: 100vw
.team__title
color: $opd-blue padding-bottom: 2rem transition: .4s ease-out cursor: pointer i font-size: $font-size * 1.2 transition: .4s ease-out
.team__title–active
color: $env-primary padding-bottom: 2.3rem i @include text-shadow font-size: $font-size * 1.5
.team__title.team__title–active
transition: .4s ease-out
.title__title–text
display: none
.team__title–active
.title__title--text display: block position: absolute margin-top: 4rem left: 2rem
.team__members
background-color: $white color: $opd-blue padding-top: 10rem
.single__member
display: none flex-direction: column width: 90% margin: auto
.single__member–active
display: flex
.single__member__image
display: flex justify-content: center width: 100% padding-bottom: 3rem
.member–image
width: 200px height: 200px object-fit: cover border-radius: 12px padding: 3px border: solid 1px $light-grey transition: .3s ease-in-out &:hover border: solid 1px $white box-shadow: 1px 1px 5px $light-grey
.single__member__text
width: 90% margin: auto
.member__position
display: flex align-items: center color: $grey font-size: $font-size
.member__socials
align-items: center list-style: none margin: 0 padding: 0 li display: inline
.social
color: $env-primary font-size: $font-size * .7
.member__info
height: $font-size * 4 max-height: $font-size * 4 overflow: hidden transition: .8s cubic-bezier(0,.98,.48,.92)
.member__info–reveal
height: 100% max-height: 1000px transition: .6s cubic-bezier(.51,.38,1,.42)
.info__conceal
align-items: flex-end // NOTE: when linear-gradient(rgba(0,0,0,0) ...) we get a shadow on safari background-image: linear-gradient(rgba($pure-white,0), $white, $white) color: $black cursor: pointer display: flex font-size: $font-size * .8 height: $font-size * 3 transform: translateY(-100%) transition: .4s ease-in-out width: 100% &::before content: 'more \00a0 ' i font-size: $font-size * .6
.info__reveal
align-items: baseline height: $font-size * 1 padding-bottom: $font-size * 2 transform: translateY(0) transition: .4s ease-in-out &::before content: 'less \00a0 ' i transform: rotate(180deg)