/* Last full read through 27/12/2020
* *############################################## *# Global mixins /_sass/_mixins.sass *############################################## * */
@import '_functions'
// ##############################################
// Image filters
// Applied to the actual image with background-color: $env-primary @mixin image-filter–mix
filter: grayscale(1) contrast(.2) brightness(1.8) opacity: .6
@mixin image-filter-rotate
mix-blend-mode: screen filter: grayscale(1) brightness(1.3) //contrast(.5) brightness(1.3) sepia(.6) hue-rotate(180deg) opacity(.5)
// Applied to an overlaying div @mixin image-filter–blur
backdrop-filter: blur(8px) background-color: rgba($env-primary, .5)
// ##############################################
// Landing page animations - hover and focus
@mixin reveal-landing-strap
height: auto max-height: 400px
// Snappy build function, see /_sass/_variables.sass for $bezier-snap @mixin build-in($name)
animation: .8s $bezier-snap 0s 1 $name
@mixin default-trans
transition: all .4s ease-in-out
// Keyframes @mixin slide-from-left
@keyframes slide-from-left 0% opacity: 0 transform: translateX(-50vw) 100% opacity: 1 transform: translateX(0)
@mixin slide-from-right
@keyframes slide-from-right 0% opacity: 0 transform: translateX(50vw) 100% opacity: 1 transform: translateX(0)
// Logo using the OPD primary colors @mixin logo-primary-colors
.site__logo--group .site__logo--curve fill: $opd-coral .site__logo--legvert fill: $opd-blue .site__logo--leg45 fill: $opd-light-blue .site__logo--g, .site__logo--a, .site__logo__i, .site__logo--t fill: $opd-blue .site__logo--Q fill: $opd-coral
// Logo single color function @mixin logo-color($color)
.site__logo--group, .site__logo--curve, .site__logo--legvert, .site__logo--leg45, .site__logo--g, .site__logo--a, .site__logo__i, .site__logo--t, .site__logo--Q fill: $color
@mixin footer-bg($footer-bg-color)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='1278' height='600' %3E%3Cpath d='M1019,600 C1019,600 1019,600 1019,600 C1019,600 1279,600 1279,600 C1279,600 1279,0 1279,0 C1279,0 413,0 413,0 C413,0 413,0 413,0' fill= '#{url-friendly-colour($footer-bg-color)}' fill-opacity='0.99'/%3E%3Cpath d='M1220,600 C1220,600 0,600 0,600 C0,600 0,0 0,0 C0,0 414,0 414,0 C414,0 1020,600 1020,600' fill= '#{url-friendly-colour($footer-bg-color)}' /%3E%3C/svg%3E") background-position: center background-size: cover
@mixin text-shadow
text-shadow: 3px 3px 6px rgba($pure-black, .2)
@mixin navbar-color
backdrop-filter: blur(20px) background-color: $secondary-navbar-color