/* 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 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: $opd-coral stroke: $opd-coral!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