Blueprint scroll animation, bigger QR, mobile rhythm pass
This commit is contained in:
parent
149a6eaa71
commit
429c8820e9
2 changed files with 168 additions and 10 deletions
|
|
@ -32,10 +32,13 @@ html {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
scroll-padding-top: 84px;
|
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 {
|
body {
|
||||||
background: var(--bg);
|
background: transparent;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
@ -61,6 +64,87 @@ a { color: var(--accent2); }
|
||||||
}
|
}
|
||||||
.skip:focus { left: 0; }
|
.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 ───────────────────────────────────────────── */
|
/* ── Navigation ───────────────────────────────────────────── */
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
|
|
@ -362,18 +446,19 @@ form { margin-top: 2rem; }
|
||||||
.fine { margin-top: 0.9rem; font-size: 0.78rem; color: var(--fine); text-align: center; }
|
.fine { margin-top: 0.9rem; font-size: 0.78rem; color: var(--fine); text-align: center; }
|
||||||
|
|
||||||
.qr {
|
.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;
|
margin-top: 2.2rem; padding-top: 1.8rem;
|
||||||
border-top: 1px solid var(--hairline);
|
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 {
|
.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;
|
background: #fff; border-radius: var(--r-control); display: block;
|
||||||
}
|
}
|
||||||
.qr-card img { width: 100%; height: 100%; }
|
.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-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 p { font-size: 0.9rem; color: var(--muted); }
|
||||||
.qr-copy a { color: var(--accent2); text-decoration: none; border-bottom: 1px solid var(--border-hover); }
|
|
||||||
|
|
||||||
.rsvp-done h3 { font-size: 1.4rem; font-weight: 700; }
|
.rsvp-done h3 { font-size: 1.4rem; font-weight: 700; }
|
||||||
.rsvp-done p { margin: 0.8rem 0 1.2rem; color: var(--muted); }
|
.rsvp-done p { margin: 0.8rem 0 1.2rem; color: var(--muted); }
|
||||||
|
|
@ -423,9 +508,42 @@ form { margin-top: 2rem; }
|
||||||
@media (max-width: 760px) {
|
@media (max-width: 760px) {
|
||||||
:root { --gut: 1.25rem; }
|
:root { --gut: 1.25rem; }
|
||||||
.nav-link { display: none; }
|
.nav-link { display: none; }
|
||||||
.countdown { padding: 2rem 1rem; }
|
body { font-size: 15px; }
|
||||||
.countdown-clock { gap: 0.9rem; }
|
|
||||||
.venue { padding-bottom: 5rem; }
|
/* 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-grid { grid-template-columns: 1fr 1fr; }
|
||||||
.detail { padding: 1.4rem 1.1rem; }
|
.detail { padding: 1.4rem 1.1rem; }
|
||||||
.detail:nth-child(odd) { border-left: 0; }
|
.detail:nth-child(odd) { border-left: 0; }
|
||||||
|
|
@ -435,12 +553,16 @@ form { margin-top: 2rem; }
|
||||||
.pitch { padding: 5rem var(--gut); }
|
.pitch { padding: 5rem var(--gut); }
|
||||||
.expect { padding: 5rem var(--gut); }
|
.expect { padding: 5rem var(--gut); }
|
||||||
.rsvp-panel { padding: 1.9rem 1.4rem; }
|
.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; }
|
.foot { flex-direction: column; align-items: flex-start; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
html { scroll-behavior: auto; }
|
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; }
|
.js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
|
||||||
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
|
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -113,6 +113,42 @@
|
||||||
|
|
||||||
<a class="skip" href="#main">Skip to content</a>
|
<a class="skip" href="#main">Skip to content</a>
|
||||||
|
|
||||||
|
<!-- Decorative blueprint layer. Everything here is driven by CSS scroll-driven
|
||||||
|
animation, so it costs no JavaScript and no scroll listener; where the
|
||||||
|
browser has no support it simply sits still. Hidden from assistive tech and
|
||||||
|
frozen under prefers-reduced-motion. -->
|
||||||
|
<div class="bp" aria-hidden="true">
|
||||||
|
<svg class="bp-table" viewBox="0 0 1200 640" fill="none" preserveAspectRatio="xMidYMid meet">
|
||||||
|
<rect class="bp-draw" x="24" y="24" width="1152" height="592" rx="40" pathLength="1" stroke="currentColor" stroke-width="3"/>
|
||||||
|
<rect class="bp-draw bp-d2" x="86" y="86" width="1028" height="468" rx="14" pathLength="1" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle class="bp-draw bp-d3" cx="86" cy="86" r="30" pathLength="1" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle class="bp-draw bp-d3" cx="600" cy="70" r="26" pathLength="1" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle class="bp-draw bp-d3" cx="1114" cy="86" r="30" pathLength="1" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle class="bp-draw bp-d3" cx="86" cy="554" r="30" pathLength="1" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle class="bp-draw bp-d3" cx="600" cy="570" r="26" pathLength="1" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle class="bp-draw bp-d3" cx="1114" cy="554" r="30" pathLength="1" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<line class="bp-draw bp-d4" x1="330" y1="86" x2="330" y2="554" pathLength="1" stroke="currentColor" stroke-width="1.5" stroke-dasharray="6 10"/>
|
||||||
|
<path class="bp-draw bp-d4" d="M330 320 L980 320" pathLength="1" stroke="currentColor" stroke-width="1.5" stroke-dasharray="6 10"/>
|
||||||
|
<g stroke="currentColor" stroke-width="2">
|
||||||
|
<circle class="bp-draw bp-d5" pathLength="1" cx="900" cy="320" r="18"/>
|
||||||
|
<circle class="bp-draw bp-d5" pathLength="1" cx="936" cy="299" r="18"/><circle class="bp-draw bp-d5" pathLength="1" cx="936" cy="341" r="18"/>
|
||||||
|
<circle class="bp-draw bp-d5" pathLength="1" cx="972" cy="278" r="18"/><circle class="bp-draw bp-d5" pathLength="1" cx="972" cy="320" r="18"/><circle class="bp-draw bp-d5" pathLength="1" cx="972" cy="362" r="18"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="bp-ball" viewBox="0 0 64 64" fill="none">
|
||||||
|
<circle cx="32" cy="32" r="29" stroke="currentColor" stroke-width="3"/>
|
||||||
|
<ellipse cx="32" cy="32" rx="12" ry="29" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M6 22 h52 M6 42 h52" stroke="currentColor" stroke-width="1.6"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="bp-cue" viewBox="0 0 600 40" fill="none">
|
||||||
|
<path d="M4 20 L596 20" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
|
||||||
|
<path d="M560 14 L596 14 M560 26 L596 26" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="14" cy="20" r="7" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
<header class="nav" id="nav">
|
<header class="nav" id="nav">
|
||||||
<a class="brand" href="/">
|
<a class="brand" href="/">
|
||||||
<img class="brand-mark" src="/images/onetouch-studio.svg" alt="" width="26" height="26">
|
<img class="brand-mark" src="/images/onetouch-studio.svg" alt="" width="26" height="26">
|
||||||
|
|
@ -281,7 +317,7 @@
|
||||||
</a>
|
</a>
|
||||||
<div class="qr-copy">
|
<div class="qr-copy">
|
||||||
<p class="qr-title">Point a phone at this.</p>
|
<p class="qr-title">Point a phone at this.</p>
|
||||||
<p>It opens this page straight at the RSVP. Screenshot it for a story, or <a href="/assets/rsvp-qr.svg" download>grab the print version</a> for flyers.</p>
|
<p>It opens straight to the RSVP. Screenshot it and send it to whoever should be there.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue