/* Last full read through 30/12/2020
* *############################################## *# Global /_sass/global.sass *############################################## * */
// Global CSS that doesnt fall into any of the categories set out by the _sass dir structure
// Stop any CSS animations on load. We remove this class from the body tag after load, using assets/js/animate_after_load.js .preload *
-webkit-transition: none !important -moz-transition: none !important -ms-transition: none !important -o-transition: none !important
*
box-sizing: border-box
body
background-color: $white color: $opd-blue
.fullwidth__wrap
background-color: $white width: 100vw padding-top: $navbar-height + $secondary-navbar-height + 5vh & > * margin: auto max-width: 800px & > p padding: 3rem 0 & > ol li, ul li padding: 1rem 0 .two__col display: flex flex-wrap: wrap width: 100% .two__col--elem padding: 1rem 0 .two__col--left, .two__col--right width: 100% .no--mobile display: none
.h-100
height: 100%
.d-none
display: none
.d-block
display: block
.bg–light
background-color: $white
.no-touch__wrap
padding: 18vh 0 10vh 0
// Hero div at the top of most pages .hero
align-items: center display: flex justify-content: center
.hero-65
height: 65vh height: calc(var(--vh, 1vh) * 65)
.hero-90
height: 90vh height: calc(var(--vh, 1vh) * 90)
.hero__overlay
width: 100% height: 100% z-index: -1
.hero__image
object-fit: cover object-position: center width: 100% display: inherit
.image__filter–mix
@include image-filter--mix
.hero__strap
align-items: center color: $white display: flex justify-content: center margin: 0 position: absolute text-align: center width: 100vw & > p opacity: 0 padding-top: 12px animation: fadeInAnimation ease 1s animation-delay: .8s animation-iteration-count: 1 animation-fill-mode: forwards & > h1, h2, h3, h4, h5 animation: zoomInAnimation ease .6s animation-iteration-count: 1 animation-fill-mode: forwards
@keyframes zoomInAnimation
0% transform: scale(0) opacity: 0 100% transform: scale(1) opacity: 1
@keyframes fadeInAnimation
0% opacity: 0 100% opacity: 1
.hero__strap–center
//padding-top: $navbar-height span animation-duration: .1s animation-fill-mode: forwards animation-iteration-count: 1 animation-name: fadeInOpacity opacity: 0
.hero__strap–baseline
align-self: flex-end flex-direction: column padding-bottom: 5.5vh padding-top: 2rem
.hero__follow
align-items: center border-radius: 30px color: $white display: flex height: 11vh justify-content: center position: absolute width: 30px z-index: 2 &::after content: '\2193' font-size: 20px transform: scaleY(2)
.image–caption
font-size: $font-size * .7 color: $grey padding: 1rem 0 text-align: center
// Block colors and sizes .strap–opd-trust
@include opd-light-blue
.strap__100
padding: 5rem 1rem & > h2 padding: 1rem 0
@media screen and ( min-width: 768px )
.strap__100 padding: 10rem 5rem & > h2 padding-bottom: 5rem & > p max-width: 800px margin: 0 auto
// SVG augmenting text labels
.svg__labels
& > * fill: $white & > .svg--elem transition: .4s ease-in-out & > .svg--line stroke: $white stroke-width: 1 & > .svg--text font-size: $lg-font-size font-weight: $heavy-font
.svg__labels.hidden
& > .svg--circle opacity: 0 & > .svg--text opacity: 0
.svg__labels.not-hidden
& > .svg--circle opacity: 1 & > .svg--text transform: translateX(0) opacity: 1 & > .svg--line stroke-dashoffset: 0!important & > .trans-left animation: trans-in-left .6s ease-in-out & > .trans-right animation: trans-in-right .6s ease-in-out
// This is digusting! We need to tweak the actual html so we can readilly access these elements. .svg__labels–red
& > svg > * > * fill: darken($opd-coral, 10) & > svg > * > line stroke: darken($opd-coral,10)!important
$svg-text-offset: 60px
@keyframes trans-in-left
0% transform: translateX(-$svg-text-offset) 100% transform: translateX(0)
@keyframes trans-in-right
0% transform: translateX($svg-text-offset) 100% transform: translateX(0)
// SVG flashing LED used on env landing pages
.augmented-image
position: relative display: flex
.svg__augment
position: absolute top: 0 left: 0
.svg__augment–led
fill: url(#augmentLED)
augmentLED
stop:first-child stop-color: $pure-white stop-opacity: 1 stop:last-child stop-color: $led stop-opacity: 1
.svg__augment–pulse
fill: $led
// Social icons wraped in <a's
.social-media
display: flex padding: 0 margin: 0 line-height: 0
.social-media-item
list-style: none
.social-media-link
@include default-trans color: $white
.yaml–link
color: inherit text-decoration: none &:hover color: $opd-light-blue
@media screen and ( min-width: 768px )
.fullwidth__wrap .two__col--left width: 30% .two__col--right width: 70% .no--mobile display: block .narrow__wrap width: 80vw max-width: 600px margin: 0 auto .social-media-item &:hover .social--Facebook color: $facebook-primary .social--Twitter color: $twitter-primary .social--LinkedIn color: $linkedin-primary .social--Instagram color: $instagram-primary .social--Website, .social--Email color: $opd-light-blue
// This is basically a button and should to be centralised .action__call
font-size: $font-size margin: 0 auto padding: 2rem position: relative text-decoration: none transition: .2s ease &:before border-radius: 3rem content: '' display: block height: 6rem left: -1rem position: absolute top: .5rem transition: .2s ease width: 6rem span font-weight: $heavy-font position: relative svg fill: none margin-left: 10px position: relative stroke-linecap: round stroke-linejoin: round stroke-width: 2 top: 0 transform: translateX(-10px) transition: .2s ease &:hover &::before width: 100% svg stroke: $white transform: translateX(0) span color: $white
.cc-window
background-color: $opd-blue display: flex align-items: center position: fixed
.cc-message
width: 80vw padding: 3rem 2rem color: $pure-white
.cc-compliance
width: 20vw border-style: none height: 100%
.cc-dismiss
display: flex flex-wrap: nowrap background-color: $opd-coral border-style: none color: $pure-white border-radius: 6px &:hover background-color: lighten($opd-coral, 10)
.cc-link
text-decoration: none color: lighten($opd-coral, 10) &:hover color: $opd-coral
.skip-link
margin: 0 position: absolute padding: 0 width: 1px height: 1px overflow: hidden