From 429c8820e958cb2b7e1b24ff54336f3a127c893a Mon Sep 17 00:00:00 2001 From: Devin Willis Date: Wed, 26 Aug 2026 14:55:18 -0400 Subject: [PATCH] Blueprint scroll animation, bigger QR, mobile rhythm pass --- public/css/style.css | 140 ++++++++++++++++++++++++++++++++++++++++--- views/index.ejs | 38 +++++++++++- 2 files changed, 168 insertions(+), 10 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 460894e..8445fa3 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -32,10 +32,13 @@ html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 84px; + /* Background lives on html so the z-index:-1 blueprint layer has something to + sit in front of. A background on body would paint over it. */ + background: var(--bg); } body { - background: var(--bg); + background: transparent; color: var(--text); font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 16px; @@ -61,6 +64,87 @@ a { color: var(--accent2); } } .skip:focus { left: 0; } +/* ── Blueprint background ───────────────────────────────────── + A fixed decorative layer: a pool table that draws itself as you scroll, a + cue ball that rolls across, and a cue that strokes through the break. All of + it runs on CSS scroll-driven animation, so there is no scroll listener and no + JavaScript, and it degrades to a still drawing where that is unsupported. */ + +.bp { + position: fixed; inset: 0; z-index: -1; + pointer-events: none; overflow: hidden; + color: var(--accent); + /* Faint enough that body copy keeps its contrast at every scroll position. */ + opacity: 0.16; +} + +.bp-table { + position: absolute; top: 50%; left: 50%; + width: min(150vw, 1500px); height: auto; + transform: translate(-50%, -50%); +} + +.bp-draw { + /* Every shape carries pathLength="1", so one pair of values draws them all + at the same rate whatever their real geometry. */ + stroke-dasharray: 1; + stroke-dashoffset: 1; +} + +.bp-ball { + position: absolute; top: 62%; left: 0; + width: clamp(48px, 7vw, 92px); height: auto; + transform: translate(-25vw, -50%); + will-change: transform; +} + +.bp-cue { + position: absolute; top: 62%; left: 0; + width: min(60vw, 620px); height: auto; + transform: translate(-120%, -50%); + opacity: 0; +} + +@supports (animation-timeline: scroll()) { + @media (prefers-reduced-motion: no-preference) { + .bp-draw { + animation: bp-ink linear both; + animation-timeline: scroll(root block); + animation-range: 0% 55%; + } + /* Staggered so the table assembles rail, cushion, pockets, lines, rack. */ + .bp-d2 { animation-range: 4% 60%; } + .bp-d3 { animation-range: 10% 66%; } + .bp-d4 { animation-range: 18% 74%; } + .bp-d5 { animation-range: 26% 82%; } + + .bp-ball { + animation: bp-roll linear both; + animation-timeline: scroll(root block); + } + .bp-cue { + animation: bp-strike linear both; + animation-timeline: scroll(root block); + animation-range: 0% 30%; + } + } +} + +@keyframes bp-ink { to { stroke-dashoffset: 0; } } + +/* Rotation matches the distance travelled closely enough to read as rolling + rather than spinning in place. */ +@keyframes bp-roll { + from { transform: translate(-25vw, -50%) rotate(0deg); } + to { transform: translate(115vw, -50%) rotate(1440deg); } +} + +@keyframes bp-strike { + 0% { transform: translate(-120%, -50%); opacity: 0; } + 55% { transform: translate(-14%, -50%); opacity: 1; } + 100% { transform: translate(6%, -50%); opacity: 0; } +} + /* ── Navigation ───────────────────────────────────────────── */ .nav { @@ -362,18 +446,19 @@ form { margin-top: 2rem; } .fine { margin-top: 0.9rem; font-size: 0.78rem; color: var(--fine); text-align: center; } .qr { - display: flex; align-items: center; gap: 1.4rem; + display: flex; align-items: center; gap: 1.6rem; margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--hairline); } +/* Sized so a phone locks on from a comfortable arm's length, and left + dark-on-white because inverted codes are unreliable on older scanners. */ .qr-card { - flex: none; width: 108px; height: 108px; padding: 8px; + flex: none; width: 176px; height: 176px; padding: 10px; background: #fff; border-radius: var(--r-control); display: block; } .qr-card img { width: 100%; height: 100%; } .qr-title { font-family: "Space Grotesk", sans-serif; font-weight: 600; color: var(--text); margin-bottom: 0.3rem; } -.qr-copy p { font-size: 0.88rem; color: var(--muted); } -.qr-copy a { color: var(--accent2); text-decoration: none; border-bottom: 1px solid var(--border-hover); } +.qr-copy p { font-size: 0.9rem; color: var(--muted); } .rsvp-done h3 { font-size: 1.4rem; font-weight: 700; } .rsvp-done p { margin: 0.8rem 0 1.2rem; color: var(--muted); } @@ -423,9 +508,42 @@ form { margin-top: 2rem; } @media (max-width: 760px) { :root { --gut: 1.25rem; } .nav-link { display: none; } - .countdown { padding: 2rem 1rem; } - .countdown-clock { gap: 0.9rem; } - .venue { padding-bottom: 5rem; } + body { font-size: 15px; } + + /* Tighter vertical rhythm: the desktop 7rem gaps read as dead space on a + phone and push the RSVP several extra swipes away. */ + .details { padding-bottom: 3.5rem; } + .countdown-band { padding-bottom: 3rem; } + .countdown { padding: 1.8rem 1rem; } + .countdown-clock { gap: 0.75rem; margin: 1.2rem 0 1rem; } + .countdown-clock .num { font-size: clamp(2rem, 11vw, 2.6rem); } + .countdown-clock .cap { font-size: 0.62rem; letter-spacing: 0.1em; } + .countdown-when { font-size: 0.88rem; } + + .hero h1 { font-size: clamp(2.4rem, 12vw, 3.2rem); } + .hero-actions { gap: 0.6rem; } + .hero-actions .btn { flex: 1 1 auto; padding-inline: 1.1rem; } + + .detail-grid { grid-template-columns: 1fr 1fr; } + .detail { padding: 1.2rem 0.9rem; } + .detail dd { font-size: 1rem; } + + .pitch { padding: 4rem var(--gut); } + .expect { padding: 4rem var(--gut); } + .section-title { margin-bottom: 1.8rem; } + .cell-text { padding: 1.5rem 1.3rem; } + .venue { padding-bottom: 4rem; } + .venue-logo { height: 84px; margin-bottom: 1.2rem; } + .rsvp { padding-bottom: 4rem; } + + /* Bigger tap targets and no iOS zoom-on-focus (which needs >=16px). */ + .field input { font-size: 16px; padding: 0.85rem 0.9rem; } + .btn { padding: 0.9rem 1.5rem; } + + /* The table drawing is mostly off-screen on a narrow viewport, so lean on + the ball and cue instead and keep the layer cheap to paint. */ + .bp { opacity: 0.13; } + .bp-table { width: 240vw; } .detail-grid { grid-template-columns: 1fr 1fr; } .detail { padding: 1.4rem 1.1rem; } .detail:nth-child(odd) { border-left: 0; } @@ -435,12 +553,16 @@ form { margin-top: 2rem; } .pitch { padding: 5rem var(--gut); } .expect { padding: 5rem var(--gut); } .rsvp-panel { padding: 1.9rem 1.4rem; } - .qr { flex-direction: column; align-items: flex-start; gap: 1rem; } + .qr { flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; } + .qr-card { width: min(212px, 62vw); height: min(212px, 62vw); } .foot { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } + /* The blueprint layer stays as a still drawing rather than disappearing. */ + .bp-draw { stroke-dashoffset: 0; } + .bp-cue { opacity: 1; transform: translate(-14%, -50%); } .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } diff --git a/views/index.ejs b/views/index.ejs index f4193e9..ceede7c 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -113,6 +113,42 @@ + + +