From 06cf495479a1672d39c628f9766c5e8ccc92aa06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 3 May 2026 20:03:21 +0200
Subject: [PATCH] Add gradient overlay to front cover for text legibility over
 artwork

Inserts a .front-overlay div (shown only when frontImage is present)
with a radial vignette + linear tint that darkens the image behind the
title/subtitle/author without obscuring the artwork. Also strengthens
text-shadow on all three text elements and bumps their opacity slightly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 templates/cover.html | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/templates/cover.html b/templates/cover.html
index 4792f8c..6299182 100644
--- a/templates/cover.html
+++ b/templates/cover.html
@@ -260,6 +260,25 @@
       object-fit: cover;
     }
 
+    /* Gradient vignette over front artwork — ensures text legibility */
+    .front-overlay {
+      position: absolute;
+      top: 0; left: 0;
+      width: var(--trim-w);
+      height: var(--total-h);
+      background:
+        /* deep vignette around all edges */
+        radial-gradient(ellipse 90% 90% at 50% 50%,
+          transparent 30%,
+          rgba(6, 6, 24, 0.55) 100%),
+        /* uniform dark tint to lift text off the image */
+        linear-gradient(to bottom,
+          rgba(6, 6, 24, 0.35) 0%,
+          rgba(6, 6, 24, 0.20) 40%,
+          rgba(6, 6, 24, 0.20) 60%,
+          rgba(6, 6, 24, 0.40) 100%);
+    }
+
     .front-content {
       position: absolute;
       top:    calc(var(--bleed) + var(--safe));
@@ -287,7 +306,10 @@
       font-size: 0.54in;
       line-height: 1.18;
       color: var(--color-gold2);
-      text-shadow: 0 0 0.18in rgba(184,154,78,0.45), 0 2px 10px rgba(0,0,0,0.9);
+      text-shadow:
+        0 0 0.22in rgba(184,154,78,0.6),
+        0 2px 8px rgba(0,0,0,1),
+        0 4px 24px rgba(0,0,0,0.9);
       letter-spacing: 0.01em;
     }
 
@@ -303,8 +325,8 @@
       font-weight: 300;
       font-size: 0.17in;
       letter-spacing: 0.1em;
-      color: rgba(232, 228, 216, 0.75);
-      text-shadow: 0 1px 4px rgba(0,0,0,0.8);
+      color: rgba(232, 228, 216, 0.92);
+      text-shadow: 0 1px 6px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,0.8);
     }
 
     /* Placeholder box shown when no front artwork is provided */
@@ -336,8 +358,8 @@
       font-weight: 300;
       font-size: 0.15in;
       letter-spacing: 0.12em;
-      color: rgba(184,154,78,0.65);
-      text-shadow: 0 1px 4px rgba(0,0,0,0.8);
+      color: rgba(184,154,78,0.85);
+      text-shadow: 0 1px 6px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,0.8);
     }
 
     .front-ornament {
@@ -448,6 +470,7 @@
 
     {% if frontImage %}
       <img class="front-artwork" src="{{ frontImage }}" alt="Front cover artwork">
+      <div class="front-overlay"></div>
     {% else %}
       <div class="front-art-placeholder">
         <span>Cover-Illustration<br>→ images/cover/front.png</span>