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

.fullwidth__wrap
  width: 90vw
  max-width: 800px
  margin: auto
  margin-top: $navbar-height + $secondary-navbar-height + 5vh
  & > 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%

.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

  & > *
    padding-top: 12px


.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)


// Block colors and sizes
.strap--opd-trust
  @include opd-blue-trust


.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: $font-size * .8

.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


$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
  animation: pulse-ring 2s $bezier-pulse infinite
  fill: $led

@keyframes pulse-ring
  0%
    opacity: .5
    r: .1

  50%
    opacity: .2

  100%
    opacity: 0
    r: 2


// Social icons wraped in <a's
.social
  color: $grey
  text-decoration: none

.yaml--link
  color: inherit
  text-decoration: none
  &:hover
    color: $opd-blue-trust


@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--Facebook
    &:hover
      color: $facebook-primary

  .social--Twitter
    &:hover
      color: $twitter-primary

  .social--LinkedIn
    &:hover
      color: $linkedin-primary

  .social--Instagram
    &:hover
      color: $instagram-primary

  .social--Website,
  .social--Email
    &:hover
      color: $opd-blue-trust


// This is basically a button and should to be centralised
.action__call
  bottom: 0
  font-size: $font-size * .8
  margin: -100px auto
  padding: 2rem
  position: relative
  text-decoration: none
  transition: .2s ease

  &:before
    border-radius: 3rem
    content: ''
    display: block
    height: 6rem
    left: 0
    position: absolute
    top: 0
    transition: .2s ease
    width: 6rem

  span
    font-weight: 900
    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