From 33f4822564f307e7c50a158cdf5194b70bcf835c Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Fri, 28 Jan 2022 21:54:28 +0100
Subject: [PATCH] Image overlay improvements. WIP #4893 @1

---
 resources/styles/common/global.styl        | 29 ++++++++++++++++------
 resources/styles/components/solutions.styl |  9 ++++---
 resources/views/partials/intro.blade.php   |  4 ++-
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/resources/styles/common/global.styl b/resources/styles/common/global.styl
index eeb9dca..f22a69a 100644
--- 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 364fda1..6ed0c11 100644
--- 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 1ba51cf..af3631d 100644
--- 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>
 
-- 
2.39.5