WeOwnAi/aibook-fun
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(marketing-site): American Dream cover band + narrative weave

Browse Source 
- Cover: publisher-style belly band across the lower book cover using a
  compressed banner (2.2MB screenshot -> 60KB WebP, resized to display
  needs), cropped via a width-locked <img> + percentage offset so the
  wordmark stays legible rather than getting zoomed/cropped sideways.
  Compass + wordmark compacted into a row to make room.
- Copy: the theme woven through Field Notes, Contents, the Founding
  Sponsor tier, and one direct FAQ entry -- mostly oblique, since the
  cover already states it explicitly. Hero/Recipe/Capture/Footer left
  untouched on purpose.
This commit is contained in:
SinachPat
2026-08-28 10:49:57 +01:00
parent 9340a0a972
commit 89a3d76122
8 changed files with 43 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
marketing-site/styles/globals.css
+19 -6
View File
@@ -191,7 +191,7 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
.hero-visual { display: flex; justify-content: center; order: 2; } /* book on the right */
.hero-copy { min-width: 0; order: 1; } /* text on the left */
.book3d { --bw: 300px; --bh: 420px; --bt: 54px; position: relative; perspective: 2000px; flex: none; padding: 6px 0 40px; }
.book3d { --bw: 300px; --bh: 420px; --bt: 54px; --band-h: 58px; position: relative; perspective: 2000px; flex: none; padding: 6px 0 40px; }
.book3d__inner {
position: relative; width: var(--bw); height: var(--bh); margin: 0 auto;
transform-style: preserve-3d; transform: rotateX(7deg) rotateY(-34deg);
@@ -208,7 +208,7 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
transform: translateZ(calc(var(--bt) / 2)); border-radius: 3px 8px 8px 3px; overflow: hidden;
background: linear-gradient(125deg, #23745f, #1a5748 48%, #123f34);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 8px 0 16px -8px rgba(0, 0, 0, 0.5), 0 32px 46px -22px rgba(18, 63, 52, 0.55);
padding: 32px 27px 27px; display: flex; flex-direction: column;
padding: 32px 27px calc(var(--band-h) * 1.48); display: flex; flex-direction: column;
}
.book3d__back { transform: rotateY(180deg) translateZ(calc(var(--bt) / 2)); border-radius: 8px 3px 3px 8px; background: #0f3b30; }
.book3d__pages {
@@ -235,8 +235,21 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
.book3d__title { font-family: var(--font-display); font-weight: 600; font-size: 2.25rem; line-height: 1.02; letter-spacing: -0.02em; color: #f3eee2; margin-top: 16px; }
.book3d__line { width: 34px; height: 2px; background: rgba(239, 233, 219, 0.5); margin: 15px 0; }
.book3d__sub { font-family: var(--font-body); font-size: 13px; color: rgba(239, 233, 219, 0.68); line-height: 1.45; max-width: 16ch; }
.book3d__mark { width: 44px; height: 44px; margin-top: auto; }
.book3d__brand { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(239, 233, 219, 0.85); margin-top: 12px; }
.book3d__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.book3d__mark { width: 30px; height: 30px; flex: none; }
/* Belly band: a promotional strip wrapped across the lower cover, publisher-
style, rather than redesigning the whole face around the source graphic.
The <img> is width-locked to the band and shifted up so the crop stays
full-width (legible "AMERICAN" wordmark) and only trims top/bottom. */
.book3d__band {
position: absolute; left: 0; right: 0; bottom: calc(var(--band-h) * 0.31);
height: var(--band-h); overflow: hidden;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset, 0 3px 10px rgba(0, 0, 0, 0.3);
}
.book3d__band img {
position: absolute; left: 0; top: -78%; width: 100%; height: auto; display: block;
}
.book3d__brand { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(239, 233, 219, 0.85); }
.book3d::after {
content: ""; position: absolute; left: 50%; bottom: 6px; width: 60%; height: 24px; transform: translateX(-50%);
background: radial-gradient(ellipse, rgba(18, 60, 50, 0.3), transparent 70%); filter: blur(7px); z-index: -1;
@@ -245,9 +258,9 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
.hero-grid { grid-template-columns: 1fr; gap: 44px; }
.hero-visual { order: 2; }
.hero-copy { order: 1; }
.book3d { --bw: 256px; --bh: 358px; --bt: 48px; }
.book3d { --bw: 256px; --bh: 358px; --bt: 48px; --band-h: 50px; }
}
@media (max-width: 420px) { .book3d { --bw: 210px; --bh: 294px; --bt: 40px; } }
@media (max-width: 420px) { .book3d { --bw: 210px; --bh: 294px; --bt: 40px; --band-h: 40px; } }
@media (prefers-reduced-motion: reduce) { .book3d__inner { animation: none; } }
/* ============ FIELD NOTES (even gutters, aligned to container edges) ============ */