/* 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