fix(cover): improve readability and brightness based on test print feedback

- Strengthen front overlay tint so subtitle and author text read clearly
  against the artwork (was 20% centre tint, now 30%; bottom band 40%→60%)
- Set front subtitle to white and front author to gold2, both with
  triple-layer text-shadow for maximum contrast
- Increase back content padding from 0.125 in to 0.25 in on all trim edges
- Change back tagline colour from 50%-opacity gold to full --color-text
  with solid black shadow so the quote is legible
- Raise back artwork opacity 0.35→0.55 and reduce overlay darkness so
  the back image is no longer too dark

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-12 21:09:39 +02:00
parent 564a70494e
commit 3537baa230
+23 -24
View File
@@ -138,11 +138,10 @@
/* ── Back cover content ─────────────────────────────────── */ /* ── Back cover content ─────────────────────────────────── */
.back-content { .back-content {
position: absolute; position: absolute;
/* safe zone: bleed + safe from left, safe from right, bleed+safe from top/bottom */ top: calc(var(--bleed) + 0.25in);
top: calc(var(--bleed) + var(--safe)); left: calc(var(--bleed) + 0.25in);
left: calc(var(--bleed) + var(--safe)); right: 0.25in;
right: var(--safe); bottom: calc(var(--bleed) + 0.25in);
bottom: calc(var(--bleed) + var(--safe));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@@ -205,10 +204,10 @@
font-style: italic; font-style: italic;
font-weight: 300; font-weight: 300;
font-size: 0.118in; font-size: 0.118in;
color: var(--color-muted); color: var(--color-text);
max-width: 60%; max-width: 60%;
line-height: 1.6; line-height: 1.6;
text-shadow: 0 1px 4px rgba(0,0,0,0.8); text-shadow: 0 1px 6px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,1);
} }
@@ -219,7 +218,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
opacity: 0.35; opacity: 0.55;
} }
/* Gradient vignette — mirrors front-overlay for depth and legibility */ /* Gradient vignette — mirrors front-overlay for depth and legibility */
@@ -231,12 +230,12 @@
background: background:
radial-gradient(ellipse 90% 90% at 50% 50%, radial-gradient(ellipse 90% 90% at 50% 50%,
transparent 30%, transparent 30%,
rgba(6, 6, 24, 0.55) 100%), rgba(6, 6, 24, 0.45) 100%),
linear-gradient(to bottom, linear-gradient(to bottom,
rgba(6, 6, 24, 0.40) 0%, rgba(6, 6, 24, 0.30) 0%,
rgba(6, 6, 24, 0.15) 35%, rgba(6, 6, 24, 0.10) 35%,
rgba(6, 6, 24, 0.15) 65%, rgba(6, 6, 24, 0.10) 65%,
rgba(6, 6, 24, 0.50) 100%); rgba(6, 6, 24, 0.35) 100%);
} }
/* ── Spine content ──────────────────────────────────────── */ /* ── Spine content ──────────────────────────────────────── */
@@ -307,14 +306,14 @@
background: background:
/* deep vignette around all edges */ /* deep vignette around all edges */
radial-gradient(ellipse 90% 90% at 50% 50%, radial-gradient(ellipse 90% 90% at 50% 50%,
transparent 30%, transparent 20%,
rgba(6, 6, 24, 0.55) 100%), rgba(6, 6, 24, 0.65) 100%),
/* uniform dark tint to lift text off the image */ /* stronger tint in the text bands (top + bottom) */
linear-gradient(to bottom, linear-gradient(to bottom,
rgba(6, 6, 24, 0.35) 0%, rgba(6, 6, 24, 0.50) 0%,
rgba(6, 6, 24, 0.20) 40%, rgba(6, 6, 24, 0.30) 35%,
rgba(6, 6, 24, 0.20) 60%, rgba(6, 6, 24, 0.30) 55%,
rgba(6, 6, 24, 0.40) 100%); rgba(6, 6, 24, 0.60) 100%);
} }
.front-content { .front-content {
@@ -363,8 +362,8 @@
font-weight: 300; font-weight: 300;
font-size: 0.17in; font-size: 0.17in;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: rgba(232, 228, 216, 0.92); color: #ffffff;
text-shadow: 0 1px 6px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,0.8); text-shadow: 0 1px 8px rgba(0,0,0,1), 0 2px 24px rgba(0,0,0,1), 0 0 0.3in rgba(0,0,0,0.9);
} }
/* Placeholder box shown when no front artwork is provided */ /* Placeholder box shown when no front artwork is provided */
@@ -396,8 +395,8 @@
font-weight: 300; font-weight: 300;
font-size: 0.15in; font-size: 0.15in;
letter-spacing: 0.12em; letter-spacing: 0.12em;
color: rgba(184,154,78,0.85); color: var(--color-gold2);
text-shadow: 0 1px 6px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,0.8); text-shadow: 0 1px 8px rgba(0,0,0,1), 0 2px 24px rgba(0,0,0,1), 0 0 0.3in rgba(0,0,0,0.9);
} }
.front-ornament { .front-ornament {