slow-steps 0.1.3 → 0.1.8

data/_sass/footer_full.sass

@@ -1,105 +1,83 @@
 .ft__wrapper
-  background-color: $opd-blue-confidence
-  background-image: url('/assets/img/content/footer-bg.svg')
-  background-position: center
-  background-size: cover
+  @include footer-bg($opd-blue-confidence)
+  border-top: solid 1px $white
   color: $white
   display: flex
   flex-wrap: wrap
-  //margin-top: 10vh
   padding: 5vh 5vw
 
 .ft__head
   display: flex
-  //height: 10vh
-  //min-height: 10vh
-  //min-width: 100%
-  width: 100%
   margin: 5vh 5vw
+  width: 100%
 
 .ft__body
   display: flex
+  flex-direction: column-reverse
   flex-wrap: wrap
   margin: 5vh 0
   width: 90vw
 
-.ft__col-3
-  width: 30vw
-  padding: 0 5vw
-  border-left: solid 1px rgba($opd-blue-trust, .05)
+.ft__col
+  //border-left: solid 1px rgba($opd-blue-trust, .05)
   box-sizing: border-box
-
-.ft__col-3.ft__sitemap
-  width: 60vw
+  padding: 0 5vw
+  width: 90vw
 
 .ft__contact--list
-
   display: block
+  font-size: $font-size * .8
   list-style: none
   padding: 0
   text-decoration: none
-  font-size: $font-size * .7
   li
-    line-height: 4rem
+    line-height: 5rem
   .address
-    line-height: 2rem
+    line-height: 2.5rem
 
 .ft__contact
-
   .site__logo
-    width: 10vw
     @include logo-color($opd-blue-trust)
+    width: 40vw
 
 .ft__sitemap
-  //min-width: 100%
   .ft__sitemap--env-header
-    font-size: $font-size * .8
+    font-size: $font-size * 1
     font-weight: 600
   .ft__sitemap--submenu
-    font-size: $font-size * .6
+    font-size: $font-size * .8
 
 .ft__base
-  min-width: 100%
-  width: 100%
+  align-items: center
+  border-top: solid 1px $opd-blue-trust
   display: flex
   flex-wrap: nowrap
   justify-content: space-between
-  //align-items: center
-  border-top: solid 1px $opd-blue-trust
-
-  a, p
-    padding: 1rem .1rem
+  min-width: 100%
+  width: 100%
+  a,
+  p
+    color: inherit
+    font-size: $font-size * .7
     margin: 0
-    font-size: $font-size *.6
+    padding: .5rem .1rem
     text-decoration: none
-    color: inherit
 
 .legal-links
   display: flex
-  flex-direction: row
+  flex-direction: column
   justify-content: space-between
-  a
-    &::after
-      content: " |"
-
-    &:last-child
-      &::after
-        content: ""
-
 
 .ft__sitemap--header
-  font-size: 1.8rem
-  font-weight: 600
   border-bottom: 1px solid $opd-blue-trust
-  margin-bottom: 3rem
   color: $pure-white
+  font-size: 2rem
+  font-weight: 600
+  margin-bottom: 3rem
   width: 100%
 
-.ft__sitemap--menu
-  //display: flex
-  //flex-direction: row
-
-.ft__sitemap--menu, .ft__sitemap--submenu
+.ft__sitemap--menu,
+.ft__sitemap--submenu
   padding: 0
   width: 100%
 
@@ -107,20 +85,89 @@
   padding-bottom: 2rem
   li
     display: block
-    list-style: none
     line-height: 3rem
-    //padding: .8rem 1.2rem
-    text-decoration: none
+    list-style: none
 
 .ft__sitemap--submenu li a
   color: $pure-white
-  text-decoration: none
 
 .ft__sitemap--env-wrap
   display: flex
+  flex-direction: column
   flex-wrap: wrap
-  flex-direction: row
 
 .ft__sitemap--env
+  width: 100%
+
+@media screen and ( min-width: 768px )
+
+  .ft__wrapper
+    border: none
+
+  .ft__body
+    flex-direction: row
+
+  .ft__col
+    width: 30vw
+
+  .ft__col.ft__sitemap
+    width: 60vw
+
+  .ft__contact--list
+    font-size: $font-size * .7
+    li
+      line-height: 4rem
+    .address
+      line-height: 2rem
+
+  .ft__contact
+    .site__logo
+      width: 10vw
+
+  .ft__sitemap
+    .ft__sitemap--env-header
+      font-size: $font-size * .8
+    .ft__sitemap--submenu
+      font-size: $font-size * .7
+
+  .ft__base
+    a,
+    p
+      font-size: $font-size * .6
+
+  .legal-links
+    flex-direction: row
+    a
+      &::after
+        content: " |"
+
+      &:last-child
+        &::after
+          content: ""
+
+  .copyright
+    &::after
+      content: ' Limited'
+
+  .ft__sitemap--header
+    font-size: 1.8rem
+
+  .ft__sitemap--submenu li a
+    text-decoration: none
+
+  .ft__sitemap--submenu
+    li
+      transition: .2s ease-in-out
+
+    &:hover > li
+      opacity: .5
+
+    li
+      &:hover
+        opacity: 1
+
+  .ft__sitemap--env-wrap
+    flex-direction: row
 
-  width: 50%
+  .ft__sitemap--env
+    width: 50%

data/_sass/global.sass

@@ -1,3 +1,11 @@
+/*  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
@@ -7,8 +15,36 @@
   -ms-transition: none !important
   -o-transition: none !important
 
+body
+  background-color: $white
+
 .fullwidth__wrap
-  width: 100vw
+  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
@@ -16,9 +52,6 @@
 .d-block
   display: block
 
-.bg--dark
-  background-color: $opd-grey-neutral
-
 .bg--light
   background-color: $white
 
@@ -31,24 +64,56 @@
   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
-  height: 100%
   object-fit: cover
   object-position: center
   width: 100%
 
-.hero__filter
-  @include image-filter
+.image__filter--mix
+  @include image-filter--mix
 
 .hero__strap
-  padding-top: $navbar-height
+  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
@@ -189,20 +254,41 @@ $svg-text-offset: 60px
   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
@@ -219,3 +305,51 @@ $svg-text-offset: 60px
   .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

data/_sass/navigation/breakpoints/{768.sass → 1024.sass}

@@ -5,7 +5,9 @@
 
 // Everything here will be included in EVERY .html
 
-@media screen and ( min-width: 768px )
+$brand-height: 55%
+
+@media screen and ( min-width: 1024px )
 
   .navbar
     height: $navbar-height
@@ -18,11 +20,12 @@
     height: 10vh
     z-index: 999
     top: 7.5vh
+    //align-items: center
 
     .site__logo
       position: absolute
-      top: 30%
-      height: 40%
+      top: (100% - $brand-height) / 2
+      height: $brand-height
 
   .nav-list
     display: flex