From 625c75935eea62eaa9eebff3697c2390d9e8bb53 Mon Sep 17 00:00:00 2001
From: vickydotbat <vickydotbat@tutamail.com>
Date: Wed, 15 Jul 2026 10:08:52 +0200
Subject: [PATCH] feat: banner strips + article page styling with shared velvet
 gradient

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 scss/westgate/_pages.scss    | 57 ++++++++++++++++++++++++++++++++++++
 scss/westgate/_surfaces.scss | 11 +++++--
 2 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/scss/westgate/_pages.scss b/scss/westgate/_pages.scss
index c2546f4..455a896 100644
--- a/scss/westgate/_pages.scss
+++ b/scss/westgate/_pages.scss
@@ -542,3 +542,60 @@ a.sow-card:hover {
 		grid-template-columns: 1fr;
 	}
 }
+
+// Banners: first post image, or the shared velvet gradient
+.sow-banner {
+	height: 140px;
+	background-size: cover;
+	background-position: center;
+}
+
+.sow-banner-gradient {
+	@include wg-velvet-cover;
+}
+
+.sow-list-item .sow-banner {
+	grid-column: 1 / -1;
+	height: 110px;
+	margin: calc(var(--wg-space-sm) * -1) calc(var(--wg-space-md) * -1) 0;
+	border-radius: 8px 8px 0 0;
+}
+
+// Article page
+.sow-article-banner {
+	height: clamp(180px, 32vw, 340px);
+	background-size: cover;
+	background-position: center;
+	border: 1px solid var(--wg-border);
+	border-radius: 8px;
+}
+
+.sow-article {
+	max-width: 760px;
+	margin: 0 auto;
+	padding: var(--wg-space-lg) 0;
+
+	header h1 {
+		margin: 0 0 6px;
+	}
+}
+
+.sow-article-date {
+	font-family: var(--wg-font-code);
+	font-size: 0.75rem;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--wg-text-muted);
+	margin-bottom: var(--wg-space-md);
+}
+
+.sow-article-body {
+	color: var(--wg-text-soft);
+
+	img,
+	video {
+		display: block;
+		max-width: 100%;
+		border-radius: 8px;
+	}
+}
diff --git a/scss/westgate/_surfaces.scss b/scss/westgate/_surfaces.scss
index 8ae0edf..b4e0bb2 100644
--- a/scss/westgate/_surfaces.scss
+++ b/scss/westgate/_surfaces.scss
@@ -251,13 +251,18 @@ li[component="category/topic"] .user-icon {
   }
 }
 
+// shared velvet gradient: groups/profile default covers + sow banner fallback
+@mixin wg-velvet-cover {
+  background-image:
+    radial-gradient(120% 90% at 18% 0%, rgba(58, 24, 48, 0.6), transparent 60%),
+    linear-gradient(100deg, #2a1222, #110f15 55%, #09080b) !important;
+}
+
 // replace core's grey-triangle default cover with the velvet material
 // (.cover on profiles, .list-cover on the groups list)
 .cover[style*="cover-default.png"],
 .list-cover[style*="cover-default.png"] {
-  background-image:
-    radial-gradient(120% 90% at 18% 0%, rgba(58, 24, 48, 0.6), transparent 60%),
-    linear-gradient(100deg, #2a1222, #110f15 55%, #09080b) !important;
+  @include wg-velvet-cover;
 }
 
 .account,