From 4a9a54f750911818cdaa1795a2077aad3c039111 Mon Sep 17 00:00:00 2001
From: Chris Swithinbank <swithinbank@gmail.com>
Date: Fri, 11 Aug 2023 11:46:42 +0200
Subject: [PATCH] Smooth transition from hero to page background

---
 src/styles/custom.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/styles/custom.css b/src/styles/custom.css
index b3e8f6e823..e87cb66785 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -165,6 +165,14 @@
 		256px 256px;
 }
 
+/* Transition hero background grid smoothly to page background color. */
+.hero-bg::after {
+	content: '';
+	position: absolute;
+	inset: 70% 0 0;
+	background: linear-gradient(transparent, var(--sl-color-bg));
+}
+
 .hero > img {
 	opacity: 0.3;
 	animation: 3s intro;