pwp.sass in slow-steps-0.1.2

- old
+ new

@@ -1,37 +1,41 @@
 
 
-.pwp__mast
+.hero-image
   display: flex
   justify-content: center
   align-items: center
+
+.hero__pwp
   height: 90vh
-  height: calc( var(--vh, 1vh) * 90 )
+  height: calc(var(--vh, 1vh) * 90)
 
-.pwp__bg
-  position: relative
-  height: 100%
+.hero__overlay
   width: 100%
-  background-image: url($baseurl + 'assets/img/landing__pwp-mobile.jpg')
-  background-size: cover
-  opacity: .7
-  filter: grayscale(1) contrast(.2) brightness(1.6)
+  height: 100%
+  z-index: -1
 
-.pwp__overlay
-  position: relative
+.hero__overlay--pwp
+  background-color: $opd-orange-confidence
+
+.hero__image
   height: 100%
   width: 100%
-  background-color: $env-primary
+  object-fit: cover
+  object-position: center
 
-.pwp--strap
+.hero__image--pwp
+  opacity: .7
+  filter: grayscale(.2) contrast(.2) brightness(1.6)
+
+.hero__strap
   position: absolute
   color: $env-secondary
   text-align: center
   padding-top: $navbar-height
 
-
-.pwp--strap-start
+.hero__strap--start
   color: $env-primary
 
 .pwp__follow
   display: flex
   position: absolute
@@ -47,54 +51,56 @@
   &::after
     content: "\2193"
     font-size: 20px
     transform: scaleY(2)
 
-.pwp__device--img
-  background-size: cover
-  background-repeat: no-repeat
-  width: 100%
-  height: 0
-  padding-top: 62.5%
-  z-index: 99999
 
-.pwp__device--docked
-  background-image: url($baseurl + 'assets/img/pwp_device_group_docked.png')
-  svg
-    position: absolute
-    transform: translateY(-100%)
+.augmented-image
+  position: relative
+  display: flex
 
-.pwp__device--group
-  background-image: url($baseurl + 'assets/img/pwp_device_group.png')
-  svg
-    position: absolute
-    transform: translateY(-100%)
-    //-height: 100vh
+.svg__augment
+  position: absolute
+  top: 0
+  left: 0
 
-.pwp__straps
+.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
+  animation: pulse-ring 2s cubic-bezier(.1,.74,.53,.91) infinite
+
+.strapline
   text-align: center
-  //padding: 5rem 2rem
-  background-position: center
-  color: $env-secondary
 
-.pwp__device--strap
+.pwp--strap
+  color: $env-secondary
   background-color: $opd-blue-trust
-  padding: 5rem 2rem
+  padding: 5rem 1rem
   & > h2
-    padding: 2rem 0
+    padding: 1rem 0
 
-.pwp__grid-wrap
+.segment-wrap
   display: flex
   flex-direction: column-reverse
   width: 100vw
 
-.pwp__grid-col-r
-  svg
-    display: none
-    position: absolute
+.augment--gaurentee
+  width: 100%
+  height: 100%
 
-.pwp__grid__text
+.segment__gaurentee
   display: flex
   align-items: center
   justify-content: center
   flex-direction: column
   width: 100%
@@ -111,71 +117,96 @@
   .site__logo__i,
   .site__logo--t,
   .site__logo--Q
     fill: $white
 
-.pwp__grid_img
-  background-image: url($baseurl + 'assets/img/pwp__grid_img.png')
-  background-size: cover
-  background-repeat: no-repeat
-  padding-top: 150%
+.image--guarantee
   filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)
 
 .pwp--guarantee
   border-top: solid 1px $soft-white
   width: 80%
   margin: 3rem 0
 
-.pwp__grid_keywords
+.segment__keywords
   display: flex
   flex-direction: row
   flex-wrap: wrap
   background-color: $opd-blue-trust
+  color: $env-secondary
   & > *
     padding: 3rem 0
     width: 50%
 
+.svg__labels
 
-.pulsating-circle
-  position: absolute
-  left: 75.5%
-  top: 52.5%
-  transform: translateX(-50%) translateY(-50%)
-  width: 8px
-  height: 8px
+  & > *
+    fill: $white
 
-  &::before
-    content: ''
-    position: relative
-    display: block
-    width: 300%
-    height: 300%
-    box-sizing: border-box
-    margin-left: -100%
-    margin-top: -100%
-    border-radius: 100px
-    background-color: rgb(252, 133, 133)
-    animation: pulse-ring 2s cubic-bezier(.01,.56,.2,.2) infinite
+  & > .svg--elem
+    transition: .4s ease-in-out
 
-  &::after
-    content: ''
-    position: absolute
-    left: 0
-    top: 0
-    display: block
-    width: 100%
-    height: 100%
-    background: radial-gradient(rgb(255, 176, 176), rgb(255, 107, 107))
-    border-radius: 100px
+  & > .svg--circle
+    stroke: rgba($pure-black, .2)
+    stroke-width: 1
 
+  & > .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)
+
 @keyframes pulse-ring
   0%
     opacity: 1
-    transform: scale(.3)
+    r: .1
 
-  80%
-    opacity: 0
+  50%
+    opacity: .1
 
   100%
     opacity: 0
-    transform: scale(1)
+    r: 3