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:
+23
-24
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user