wait #7127 @5:00

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
index dd4f4149df43fc0d215b023c85e46f602a25a34a..6ea1c573cc0997a6b848f35a674b2be1454f2b88 100644 (file)
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
@@ -255,11 +255,10 @@ class HeaderSlideshow extends _Base {
                         <h1 class="header-slideshow-content elementor-element elementor-invisible <?= $index === 0 ? ' showing' : '' ?>"
                             data-settings='{"animation":"fadeInRight","animation_delay":0}'
                             data-element_type="section">
-                            <div class="header-slideshow-content-wrapper">
-                                <div class="header-slideshow-title"><?= $items[$index]['title'] ?></div>
-                                <div class="header-slideshow-body"><?= $items[$index]['body'] ?></div>
-                            </div>
-
+                            <span class="header-slideshow-title"><?= $items[$index]['title'] ?></span>
+                            <?php if(!empty($items[$index]['body'])) { ?>
+                                <span class="header-slideshow-body"><?= $items[$index]['body'] ?></span>
+                            <?php } ?>
                         <?php if (!empty($cta_text) || !empty($cta_text_2)) { ?>
                             <div class="header-slideshow-buttons flex items-center">
                                 <?php if (!empty($cta_text)) { ?>

diff --git a/wp-content/themes/CCV/dist/styles/app.css b/wp-content/themes/CCV/dist/styles/app.css
index 7862385d22c841c80da309dff7997489b2db80f5..1b459aa5762f06b48c379456a6a2ce085ea36616 100644 (file)
--- a/wp-content/themes/CCV/dist/styles/app.css
+++ b/wp-content/themes/CCV/dist/styles/app.css
@@ -2836,14 +2836,6 @@ body .elementor-section:not(#slideshow-section) {
   }
 }
 
-@media only screen and (min-width: 1000px) and (min-width: 1920px) {
-  .header-slideshow-sizer:before {
-    background-color: #031236;
-    transform: translateX(calc( ((100% - 1920px ) / 2 - 100%)) );
-    border-right: 5px solid #031236;
-  }
-}
-
 .header-slideshow-image {
   position: absolute;
   top: 0;
@@ -2916,29 +2908,24 @@ body .elementor-section:not(#slideshow-section) {
 }
 
 .header-slideshow .header-slideshow-content {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: flex-end;
-  padding: 0 2em 0 2.5em;
   --text-opacity: 1;
   color: #FFF;
   color: rgba(255, 255, 255, var(--text-opacity));
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: #031236;
+  background: rgba(26,46,93,0.91);
   text-transform: none;
-  margin: 0 !important;
+  padding: 1.5em 1.5em;
+  margin-bottom: 0;
+  z-index: 10;
   position: absolute;
   bottom: 9.2vw;
-  left: 0;
-  top: 0;
-  width: 50%;
-  height: 100%;
+  left: 6.4vw;
   font-size: 2.1875vw;
   font-size: 2.1875vw;
-  z-index: 1;
-  opacity: 0;
+  max-width: 968px;
+  width: 60vw;
+  opacity: 1;
 }
 
 @media only screen and (min-width: 1920px) {
@@ -2953,32 +2940,23 @@ body .elementor-section:not(#slideshow-section) {
   }
 }
 
-.header-slideshow .header-slideshow-content.showing {
-  z-index: 10;
-  opacity: 1;
-}
-
-.header-slideshow .header-slideshow-content:before {
-  content: none;
+@media only screen and (min-width: 2128px) {
+  .header-slideshow .header-slideshow-content {
+    left: calc((100% - 1920px ) / 2);
+  }
 }
 
 @media only screen and (min-width: 1920px) {
   .header-slideshow .header-slideshow-content {
-    font-size: 42px;
-    font-size: 42px;
-    max-width: calc(1920px / 2);
-    left: calc((100% - 1920px ) / 2);
+    font-size: 31px;
+    font-size: 31px;
   }
 }
 
 @media only screen and (max-width: 999px) {
   .header-slideshow .header-slideshow-content {
-    top: initial;
-    bottom: 0;
-    padding: 1.75em 1em 3.75em 5em;
-    width: 100%;
-    height: auto;
-    display: block;
+    bottom: 4em;
+    padding: 0.75em 1em;
   }
 }
 
@@ -2986,7 +2964,9 @@ body .elementor-section:not(#slideshow-section) {
   .header-slideshow .header-slideshow-content {
     font-size: 3.75vw;
     font-size: 3.75vw;
-    padding-right: 1em;
+    margin: 0 52px;
+    left: 0;
+    width: auto;
   }
 }
 
@@ -2995,34 +2975,47 @@ body .elementor-section:not(#slideshow-section) {
   font-size: 31px;
 }
 
-.header-slideshow-content:before {
-  content: none;
+.header-slideshow .header-slideshow-content:not(.showing) {
+  opacity: 0 !important;
 }
 
-.elementor-editor-active .header-slideshow-content,
-.elementor-editor-preview .header-slideshow-content {
-  visibility: visible;
+.header-slideshow .header-slideshow-content:before {
+  top: 2.5em;
+  left: -0.6em;
+  width: 1.2em;
+  height: 5px;
 }
 
-.header-slideshow-title,
-.header-slideshow-body p,
-.header-slideshow-body li {
-  opacity: 0;
-  transition: opacity 1.5s;
+@media only screen and (max-width: 1199px) {
+  .header-slideshow .header-slideshow-content:before {
+    height: 4px;
+  }
 }
 
-.header-slideshow-title.showing,
-.header-slideshow-body p.showing,
-.header-slideshow-body li.showing {
-  opacity: 1;
+@media only screen and (max-width: 899px) {
+  .header-slideshow .header-slideshow-content:before {
+    height: 3px;
+  }
+}
+
+@media only screen and (max-width: 599px) {
+  .header-slideshow .header-slideshow-content:before {
+    top: 1.9em;
+  }
+}
+
+.elementor-editor-active .header-slideshow .header-slideshow-content,
+.elementor-editor-preview .header-slideshow .header-slideshow-content {
+  visibility: visible;
 }
 
 .header-slideshow-title {
   display: block;
   font-size: 1.333em;
   font-size: 1.333em;
-  margin-bottom: 1em;
   position: relative;
+  text-transform: uppercase;
+  line-height: 1.5em;
 }
 
 .header-slideshow-title:before {
@@ -3057,10 +3050,14 @@ body .elementor-section:not(#slideshow-section) {
 }
 
 .header-slideshow-body {
-  font-size: 0.63em;
-  font-size: 0.63em;
+  font-size: 0.85em;
+  font-size: 0.85em;
   white-space: pre-line;
   font-family: Roboto Condensed, sans-serif;
+  line-height: 1.5em;
+  margin-top: 1em;
+  display: inline-block;
+  font-weight: 100;
 }
 
 .header-slideshow-body li {

diff --git a/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js b/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js
index e3ad5190b4f9d95c152082a9694ad3d13412be8f..79315201d8d9bde626be89fc59ddaa300c37754f 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js
+++ b/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js
@@ -8,7 +8,7 @@ import debounce from 'lodash.debounce';
       // Inspired by: https://www.sitepoint.com/make-a-simple-javascript-slideshow-without-jquery/
       const slides = $scope.find('.header-slideshow-image');
       const slidesText = $scope.find('.header-slideshow-content');
-      //const slideInterval = setInterval(nextSlide, 14000);
+      const slideInterval = setInterval(nextSlide, 14000);
       let currentSlide = 0;
       let headerHeight = $("header.site").get(0).getBoundingClientRect().height
 
@@ -37,9 +37,6 @@ import debounce from 'lodash.debounce';
           let index = $(this).data('slide')
           showSlide(index);
         });
-        setTimeout(function() {
-          revealText(slidesText)
-        }, 1000)
 
         revealLastText(slidesText);
       }
@@ -62,13 +59,12 @@ import debounce from 'lodash.debounce';
         $(slides[currentSlide]).removeClass('showing');
         $scope.find(`[data-slide="${currentSlide}"]`).removeClass('active');
 
-        $(slides[currentSlide]).not(':last-child').find(".header-slideshow-title, .header-slideshow-body p,.header-slideshow-body li").removeClass("showing")
+        //$(slides[currentSlide]).not(':last-child').find(".header-slideshow-title, .header-slideshow-body p,.header-slideshow-body li").removeClass("showing")
       }
 
       function addBySlides(slides) {
         $(slides[currentSlide]).addClass('showing');
         $scope.find(`[data-slide="${currentSlide}"]`).addClass('active');
-        revealText(slidesText)
       }
 
       function nextSlide() {

diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl
index a4bf72eff02d42fe4d49c72147ea130af11bcfd5..8f58afdadc8c017117abd5ba355884957f358793 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl
@@ -1,5 +1,5 @@
 $breakpoint-slideshow-images = 600px
-$title_bg = #031236
+$title_bg = rgba(#1A2E5D,0.91)
 
 .header-slideshow
   position: relative
@@ -19,11 +19,6 @@ $title_bg = #031236
         //background-image: linear-gradient(180deg, rgba(255,255,255,1) -5%,rgba(255,255,255,0.9) 17%, transparent 55%)
         z-index: 5
 
-        +above($content-max-width)
-          background-color: $title_bg
-          transform: 'translateX(calc( ((100% - %s ) / 2 - 100%)) )' % ($content-max-width)
-          border-right: 5px solid $title_bg
-
     // Change to portrait oriented images for small screens
     +below($breakpoint-slideshow-images)
       padding-bottom: 140% !important // Based off mockup: 525px / 375px
@@ -89,72 +84,68 @@ $title_bg = #031236
 
   &-content
     .header-slideshow & // Need some extra specificity to override H1 CSS
-      display: flex
-      justify-content: center
-      flex-direction: column
-      align-items: flex-end
-      padding: 0 2em 0 2.5em
       @apply text-white
       font-smoothing()
       background: $title_bg
       text-transform: none
-      margin: 0 !important
+      padding: 1.5em 1.5em
+      margin-bottom: 0
+      z-index: 10
       position: absolute
       constrain(bottom, 9.2vw)
-      left: 0 // Not using constrain because this shouldn't be capped on lower limits
-      top: 0
-      width: 50%
-      height: 100%
+      left: 6.4vw // Not using constrain because this shouldn't be capped on lower limits
       font-size: 2.1875vw // 42px in vw based on 1920px width
-      z-index: 1
-      opacity: 0
-
-      &.showing
-        z-index: 10
-        opacity: 1
+      max-width: 968px
+      width: 60vw
+      opacity: 1
 
-      &:before
-        content: none
+      +above(2128px)
+        left: 'calc((100% - %s ) / 2)' % ($content-max-width)
 
       +above($content-max-width)
-        font-size: 42px // Base font size
-        max-width: 'calc(%s / 2)' % ($content-max-width)
-        left: 'calc((100% - %s ) / 2)' % ($content-max-width)
+        font-size: 31px // Base font size
 
       +below($breakpoint-slideshow)
-        top: initial
-        bottom: 0
-        padding: 1.75em 1em 3.75em 5em
-        width: 100%
-        height: auto
-        display: block
+        bottom: 4em
+        padding: 0.75em 1em
 
       +below($breakpoint-slideshow-images)
         font-size: 3.75vw
-        padding-right: 1em
+        margin: 0 52px
+        left: 0
+        width: auto
 
       &.small-height
         font-size: 31px
 
-    &:before
-        content: none
+      &:not(.showing)
+        opacity: 0 !important
+
+
+      // Pink dash
+      &:before
+        top: 2.5em //1.2em
+        left: -0.6em
+        width: 1.2em
+        height: 5px
+
+        +below(1200px)
+          height: 4px
+        +below(900px)
+          height: 3px
+
+        +below($breakpoint-slideshow-images)
+          top: 1.9em
 
       .elementor-editor-active &, .elementor-editor-preview &
         visibility: visible // Animation doesn't trigger in the editor for some reason so just show it
 
-  &-title,
-  &-body p,
-  &-body li
-    opacity: 0
-    transition: opacity 1.5s
-    &.showing
-      opacity: 1
-
   &-title
     display: block
     font-size: 1.333em // Inherits from parent element so both bits of text can be scaled together
-    margin-bottom: 1em
     position relative
+    text-transform: uppercase
+    line-height: 1.5em
 
     // Pink dash
     &:before
@@ -176,9 +167,13 @@ $title_bg = #031236
         height: 3px
 
   &-body
-    font-size: .63em
+    font-size: .85em
     white-space: pre-line
     @apply font-body
+    line-height: 1.5em
+    margin-top: 1em
+    display: inline-block
+    font-weight: 100
 
     li
       list-style-type: none
@@ -186,7 +181,7 @@ $title_bg = #031236
       position: relative
       padding-left: 1.5em
       font-weight: 100
-      
+
       &:before
         content: ""
         width: .6em