Image overlay improvements. WIP #4893 @1

diff --git a/resources/styles/common/global.styl b/resources/styles/common/global.styl
index eeb9dca680eed6c0517e9973ba65883baaa963f4..f22a69a75e67fc570d3c071dcff7ea2c48e8e503 100644 (file)
--- a/resources/styles/common/global.styl
+++ b/resources/styles/common/global.styl
@@ -16,18 +16,17 @@ p:not(:last-child)
   width: 100%
 
 .bgimg
-  width 100%
-  height 100%
-  display inline
-  object-fit contain
-  object-position 50% 50%
+  width: 100%
+  height: 100%
+  display: inline
+  object-fit: contain
+  object-position: 50% 50%
 
   &.cover
-    object-fit cover
-  
+    object-fit: cover
 
   .no-objectfit & {
-    height auto
+    height: auto
   }
 
 
@@ -51,6 +50,20 @@ $overlap-amount = 10vw
       constrain(margin-bottom, -5vw)
       z-index: 10
 
+// Image overlay: radial gradient to provide better readability for overlapping text
+.image-overlay-radial
+  position: relative
+  overflow: hidden
+
+  &:after
+    content: ''
+    position: absolute
+    width: 100%
+    height: 100%
+    top: 0
+    background: radial-gradient(circle at 85% 30%, rgba(255,255,255,0.9) 0%, rgba(0,0,0,0) 60%)
+
+
 // VueJS styling to hide elements until they're ready
 [v-cloak]
   visibility: hidden

diff --git a/resources/styles/components/solutions.styl b/resources/styles/components/solutions.styl
index 364fda13c373cac88c36164af42fcb986a9c00e6..6ed0c11eee3340ad5963566201aa1152740a0084 100644 (file)
--- a/resources/styles/components/solutions.styl
+++ b/resources/styles/components/solutions.styl
@@ -25,16 +25,17 @@
     &:before
       content: ''
       position: absolute
-      left: 0
+      left: -5%
       bottom: -5px // Avoid small gaps at some resolutions when bottom: 0
       width: 110% // A bit wider to get rid of small gaps at some resolutions
-      height: 50%
-      background-image: linear-gradient(to top, rgba(#000, 0.6), transparent)
+      height: 100%
+      background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 20%, rgba(0, 0, 0, 0.75) 30%, transparent)
 
 
   &-text
     @apply absolute text-2xl text-white font-display
-    constrain(left, 2.5vw)
+    constrain(left, 1.75vw)
+    constrain(right, 1.75vw)
     constrain(bottom, 2.5vw)
 
     +below(900px)

diff --git a/resources/views/partials/intro.blade.php b/resources/views/partials/intro.blade.php
index 1ba51cf2f0432e3ab4f1515e07765bb6ff240eab..af3631d0122167a2fd0c2e2699ab794ea272144a 100644 (file)
--- a/resources/views/partials/intro.blade.php
+++ b/resources/views/partials/intro.blade.php
@@ -19,7 +19,9 @@
             {{-- Image sticks to sides on medium and small screens --}}
             <column class="md:-ml-2v sm:-mr-2v sm:mb-0">
                 @if ($image)
-                    <img src="{{ $image }}" alt="{{ $alt }}">
+                    <div class="image-overlay-radial">
+                        <img src="{{ $image }}" alt="{{ $alt }}">
+                    </div>
                 @endif
             </column>