Setup wizard: a cover behind the avatar — twelve nature covers (self-hosted, Unsplash) cycled with arrows or a swipe, or upload your own; untouched, each pubkey gets its own default, published as the kind-0 banner beside the punk

Co-Authored-By: Claude Opus 5.5 <[email protected]>

1 files changed, 12 insertions, 0 deletions

diff --git a/src/style.css b/src/style.css
index c0edfac..5acd9ea 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1250,6 +1250,18 @@ body::after {
 .onb-punk:hover { transform: scale(1.08); }
 .onb-punk.sel { border-color: var(--accent); transform: scale(1.08); }
 .onb-avatar { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; align-self: center; box-shadow: var(--shadow); transition: opacity .15s; }
+/* the cover sits behind the avatar, which overlaps its bottom edge — the
+   profile page's own layout, so what they pick is what they'll see */
+.onb-look { display: flex; flex-direction: column; align-items: center; }
+.onb-look .onb-avatar { width: 120px; height: 120px; margin-top: -60px; border: 4px solid var(--bg); position: relative; }
+.onb-cover { position: relative; width: 100%; aspect-ratio: 3 / 1; border-radius: 14px; background: var(--surface2) center / cover no-repeat; touch-action: pan-y; user-select: none; transition: background-image .2s, opacity .15s; }
+.onb-cover-nav { position: absolute; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; border: none; padding: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+.onb-cover-nav:hover { background: rgba(0,0,0,.65); }
+.onb-cover-nav.prev { left: 8px; }
+.onb-cover-nav.next { right: 8px; }
+.onb-cover-count { position: absolute; left: 10px; top: 8px; font-size: 11px; color: #fff; background: rgba(0,0,0,.45); padding: 2px 8px; border-radius: 10px; }
+.onb-cover-upload { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border-radius: 50%; border: none; padding: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+.onb-cover-upload:hover { background: rgba(0,0,0,.65); }
 .onb-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
 .onb-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; opacity: .9; animation: confetti-fall 2.8s ease-in forwards; }
 .onb-confetti i:nth-child(4n) { background: #f7931a; }