marty/rm-circle-team-router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Image-based half-sheet handouts: vibrant gradient backgrounds with dynamic QR overlay

Browse Source 
Replaces text-heavy card design with eye-catching image backgrounds (pocket/two/phone/graveyard/stop-waiting angles, 1700x1100px, half-sheet 2-per-page format). QR code + link overlaid dynamically via Canvas in bottom-right with semi-dark fade for readability. Print layout: two copies per letter page with cut line between. Visual impact first, clean overlay on top.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-08-27 07:47:52 -05:00
parent 3761fab3c6
commit b019becebe
7 changed files with 145 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/flyers.html
+6 -35
View File
@@ -37,45 +37,16 @@
.t-blue h2 .k{color:#2947c9}
.t-navy .fl-hd{background:linear-gradient(135deg,#0b1d2e,#071421)}
.t-navy h2 .k{color:#c98a12}
/* ---- half-sheet handouts (2 per letter page, cut in half) ---- */
/* ---- half-sheet handouts (2 per letter page, cut in half, image-based) ---- */
.hs-page{margin:0 auto 26px;max-width:680px}
.hs{position:relative;aspect-ratio:8.5/5.5;border-radius:14px;overflow:hidden;color:#fff;display:flex;flex-direction:column;
box-shadow:0 10px 30px rgba(0,0,0,.35);font-family:Inter,system-ui,sans-serif;
.hs{position:relative;aspect-ratio:8.5/5.5;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35);
display:flex;align-items:flex-end;justify-content:flex-end;font-family:Inter,system-ui,sans-serif;
-webkit-print-color-adjust:exact;print-color-adjust:exact}
.hs-top{display:flex;align-items:center;gap:10px;padding:14px 22px 0}
.hs-ring{width:34px;height:34px;border:3px solid #f3be43;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.hs-ring span{font-family:Georgia,serif;font-weight:700;font-size:13px;color:#f3be43}
.hs-brand{font-weight:900;font-size:13px;letter-spacing:1.5px}
.hs-eye{margin-left:auto;font-weight:800;font-size:9.5px;letter-spacing:2px;opacity:.85;text-align:right}
.hs-main{flex:1;display:flex;gap:16px;padding:8px 22px 10px;align-items:center}
.hs-left{flex:1;min-width:0}
.hs-left h2{font-size:29px;line-height:1.04;font-weight:900;margin:0 0 8px;letter-spacing:-.5px;text-transform:uppercase}
.hs-left h2 .k{-webkit-text-fill-color:currentColor}
.hs-left .pitch{font-size:12px;line-height:1.45;margin:0 0 10px;opacity:.92}
.hs-chips{display:flex;flex-wrap:wrap;gap:6px}
.hs-chip{font-size:9.5px;font-weight:800;letter-spacing:.6px;padding:4px 9px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);background:rgba(0,0,0,.25)}
.hs-chip.gold{border-color:#f3be43;color:#ffd977}
.hs-qrbox{flex:0 0 auto;background:#fff;border-radius:12px;padding:10px 12px 8px;text-align:center;color:#10151b;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.hs-qrbox .q{width:118px;height:118px;line-height:0;margin:0 auto}
.hs-qrbox .q svg{width:100%;height:100%}
.hs-qrbox .scan{font-size:9.5px;font-weight:800;letter-spacing:1.5px;margin-top:4px}
.hs-link{font-size:11px;font-weight:800;word-break:break-all;margin-top:2px}
.hs-foot{display:flex;align-items:center;gap:10px;padding:0 22px 10px}
.hs-disc{font-size:8.5px;line-height:1.35;opacity:.75}
.hs-print{position:absolute;top:10px;right:10px;z-index:5}
.hs-img-bg{background-size:cover;background-position:center}
.hs-canvas{display:block}
.hs-print{position:absolute;top:10px;right:10px;z-index:10;cursor:pointer}
.hs-copy{display:none}
.hs-cut{display:none}
/* vibrant themes (match the banner kit looks) */
.h-volt{background:linear-gradient(120deg,#1b0733 0%,#3d0d7a 45%,#6a14b8 100%)}
.h-volt h2 .k{color:#ffcf3f}
.h-ember{background:linear-gradient(120deg,#160406 0%,#4a0a12 55%,#8a1020 100%)}
.h-ember h2 .k{color:#ff9d2e}
.h-aqua{background:linear-gradient(120deg,#02201f 0%,#04544d 55%,#0a8f7d 100%)}
.h-aqua h2 .k{color:#ffd977}
.h-royal{background:linear-gradient(120deg,#060d2b 0%,#12246e 55%,#2140c0 100%)}
.h-royal h2 .k{color:#68d6ff}
.h-noir{background:linear-gradient(120deg,#05090f 0%,#0b1d2e 60%,#14314d 100%)}
.h-noir h2 .k{color:#f3be43}
@media (max-width:560px){.hs{aspect-ratio:auto}.hs-main{flex-direction:column;align-items:stretch}.hs-qrbox{align-self:center}}
@media print{
@page{size:letter;margin:0}