Add a one-page printable flyer, with its source

README.md

@@ -74,6 +74,14 @@ Both functions authenticate with a scoped `email + crm` key held by the paused
 agent runs nothing. It exists only because an API key cannot mint another API
 key. Deleting it revokes the key and breaks both functions.
 
+## The printable flyer
+
+`public/assets/founders-break-flyer.pdf` is a one-page US Letter flyer, linked
+from the footer and from the confirmation someone sees right after they RSVP,
+which is the moment they might think about bringing people. The source that
+generates it lives in `design/` with regeneration instructions; edit that, do not
+re-design the PDF.
+
 ## The QR code
 
 `public/images/rsvp-qr.png` and `public/assets/rsvp-qr.svg` both encode

design/README.md

@@ -0,0 +1,25 @@
+# Flyer source
+
+`flyer.html` is the source for `public/assets/founders-break-flyer.pdf`. It is
+not served by the site; it lives here so the flyer can be regenerated rather
+than re-designed when a detail changes.
+
+US Letter, one page, printed on white on purpose: a full-bleed dark flyer drinks
+toner and collapses to a solid block on the mono laser printers in most campus
+libraries. The blueprint line art carries the brand and survives a black-and-white
+print intact.
+
+Regenerate after editing (needs Chrome and playwright):
+
+```js
+const { chromium } = require('playwright');
+const b = await chromium.launch({ executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome' });
+const p = await b.newPage({ viewport: { width: 816, height: 1056 }, deviceScaleFactor: 2 });
+await p.goto('file:///abs/path/design/flyer.html', { waitUntil: 'networkidle' });
+await p.evaluate(() => document.fonts.ready);
+await p.pdf({ path: '../public/assets/founders-break-flyer.pdf', width: '8.5in', height: '11in',
+              printBackground: true, margin: { top: '0', right: '0', bottom: '0', left: '0' } });
+```
+
+Check `document.body.scrollHeight - 1056 === 0` before shipping: anything over
+spills onto a second page, and the QR is the first thing to fall off.

design/flyer.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>The Founder's Break - printable flyer</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
+<style>
+  /* US Letter. Paper-white on purpose: a full-bleed dark flyer drinks toner and
+     collapses to a solid block on the mono laser printers in most campus
+     libraries. The blueprint line art carries the brand instead, and it survives
+     a black-and-white print intact. */
+  @page { size: 8.5in 11in; margin: 0; }
+
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  :root {
+    --ink: #06060b;
+    --accent: #047857;      /* deeper than the screen emerald so it holds on paper */
+    --accent-soft: #ecfdf5;
+    --rule: #d9d8e0;
+    --muted: #55536a;
+  }
+
+  html, body { width: 8.5in; height: 11in; }
+  body {
+    font-family: "Inter", -apple-system, system-ui, sans-serif;
+    color: var(--ink);
+    background: #fff;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .sheet {
+    width: 8.5in; height: 11in;
+    padding: 0.62in 0.66in 0.5in;
+    display: flex; flex-direction: column;
+  }
+
+  /* ── Masthead ── */
+  .eyebrow {
+    font-size: 10.5pt; font-weight: 700; letter-spacing: 0.2em;
+    text-transform: uppercase; color: var(--accent);
+  }
+  h1 {
+    font-family: "Space Grotesk", sans-serif;
+    font-size: 54pt; font-weight: 700; line-height: 0.95;
+    letter-spacing: -0.03em; margin-top: 0.1in;
+  }
+  .strap {
+    font-size: 13pt; color: var(--muted); margin-top: 0.14in;
+    max-width: 6.2in; line-height: 1.45;
+  }
+
+  .rule { height: 3px; background: var(--accent); margin: 0.26in 0 0; width: 1.5in; border-radius: 2px; }
+
+  /* ── Diagram ── */
+  /* Height-capped, not width-driven: at full width the drawing is 3.9in tall
+     and pushes the QR off the page. */
+  .diagram { margin: 0.18in 0 0.12in; text-align: center; }
+  .diagram img { max-height: 2.3in; max-width: 100%; width: auto; height: auto; display: block; margin: 0 auto; }
+
+  /* ── Details ── */
+  .details {
+    display: grid; grid-template-columns: repeat(4, 1fr);
+    border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
+  }
+  .detail { padding: 0.17in 0.14in; }
+  .detail + .detail { border-left: 1px solid var(--rule); }
+  .detail dt {
+    font-size: 8pt; font-weight: 700; letter-spacing: 0.13em;
+    text-transform: uppercase; color: var(--muted); margin-bottom: 0.05in;
+  }
+  .detail dd {
+    font-family: "Space Grotesk", sans-serif;
+    font-size: 14pt; font-weight: 600; line-height: 1.2;
+  }
+  .detail dd small { display: block; font-size: 10pt; font-weight: 500; color: var(--muted); margin-top: 2px; }
+
+  /* ── Pitch + QR ── */
+  .lower {
+    flex: 1; display: grid; grid-template-columns: 1fr 2.15in;
+    gap: 0.34in; align-items: start; padding-top: 0.26in;
+  }
+  .kicker {
+    font-family: "Space Grotesk", sans-serif;
+    font-size: 19pt; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
+  }
+  .kicker em { font-style: normal; color: var(--accent); }
+  .points { margin-top: 0.2in; display: grid; gap: 0.11in; }
+  .point { display: flex; gap: 0.1in; font-size: 11pt; line-height: 1.45; }
+  .point b { font-weight: 700; }
+  .tick { color: var(--accent); font-weight: 700; }
+
+  .qr-block {
+    border: 1.5px solid var(--ink); border-radius: 10px;
+    padding: 0.16in; text-align: center; background: #fff;
+  }
+  .qr-block img { width: 100%; height: auto; display: block; }
+  .qr-label {
+    font-family: "Space Grotesk", sans-serif;
+    font-size: 12pt; font-weight: 700; margin-top: 0.1in;
+  }
+  .qr-url { font-size: 7.4pt; color: var(--muted); margin-top: 3px; white-space: nowrap; letter-spacing: -0.01em; }
+
+  /* ── Footer ── */
+  footer {
+    margin-top: 0.24in; padding-top: 0.14in;
+    border-top: 1px solid var(--rule);
+    display: flex; justify-content: space-between; align-items: center;
+    font-size: 9.5pt; color: var(--muted);
+  }
+  footer strong { color: var(--ink); font-weight: 600; }
+  .host { display: flex; align-items: center; gap: 0.08in; }
+  .host img { width: 15px; height: 15px; }
+</style>
+</head>
+<body>
+<div class="sheet">
+
+  <header>
+    <p class="eyebrow">UF Startup Pool Social</p>
+    <h1>The Founder&rsquo;s<br>Break</h1>
+    <p class="strap">Engineers, designers, business minds and anyone building something from the ground up. Same bar, same tables, every week.</p>
+    <div class="rule"></div>
+  </header>
+
+  <div class="diagram">
+    <img src="flyer-diagram.png" alt="">
+  </div>
+
+  <dl class="details">
+    <div class="detail"><dt>When</dt><dd>Every Thursday</dd></div>
+    <div class="detail"><dt>Time</dt><dd>7:00 to 9:00 PM</dd></div>
+    <div class="detail"><dt>Where</dt><dd>Silver Q<small>225 W University Ave</small></dd></div>
+    <div class="detail"><dt>Entry</dt><dd>Free<small>18 and over, bring ID</small></dd></div>
+  </dl>
+
+  <div class="lower">
+    <div>
+      <p class="kicker">We are building Gainesville&rsquo;s startup culture, <em>one terrible pool shot at a time.</em></p>
+      <div class="points">
+        <p class="point"><span class="tick">&#10003;</span><span><b>Zero pool skills required.</b> Most of us are not good at this.</span></p>
+        <p class="point"><span class="tick">&#10003;</span><span><b>No pitches, no entry fee, no name tags.</b> Grab a cue and talk shop.</span></p>
+        <p class="point"><span class="tick">&#10003;</span><span><b>Meet your next co-founder.</b> Technical, design and business people in one room.</span></p>
+      </div>
+    </div>
+
+    <div class="qr-block">
+      <img src="qr-print.png" alt="">
+      <p class="qr-label">Scan to RSVP</p>
+      <p class="qr-url">foundersbreak.onetouch.studio</p>
+    </div>
+  </div>
+
+  <footer>
+    <span class="host">
+      <img src="onetouch-flyer-mark.svg" alt="">
+      Hosted by <strong>OneTouch Studio</strong>
+    </span>
+    <span>Bring your ideas and a valid ID.</span>
+  </footer>
+
+</div>
+</body>
+</html>

design/onetouch-flyer-mark.svg

@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 672" width="672" height="672">
+  <g transform="translate(336 336)">
+    <!-- target rings -->
+    <circle cx="0" cy="0" r="160" fill="none" stroke="#06060b" stroke-width="5.5"/>
+    <circle cx="0" cy="0" r="223" fill="none" stroke="#06060b" stroke-width="7.5"/>
+    <circle cx="0" cy="0" r="279" fill="none" stroke="#06060b" stroke-width="5.5"/>
+
+    <!-- central wireframe cube -->
+    <g transform="scale(0.72)" fill="none" stroke="#06060b" stroke-width="8" stroke-linecap="round" stroke-linejoin="round">
+      <polygon points="0,-34 30,-14 0,6 -30,-14"/>
+      <polygon points="0,6 30,-14 30,20 0,40 -30,20 -30,-14"/>
+      <line x1="0" y1="-34" x2="0" y2="6"/>
+      <line x1="0" y1="6" x2="0" y2="40"/>
+      <line x1="-30" y1="-14" x2="-30" y2="20"/>
+      <line x1="30" y1="-14" x2="30" y2="20"/>
+    </g>
+
+    <!-- nodes aligned to circle tangents -->
+    <!-- top node on outer ring -->
+    <circle cx="0" cy="-279" r="9" fill="#06060b"/>
+    <!-- right node on middle ring -->
+    <circle cx="223" cy="0" r="9" fill="#06060b"/>
+    <!-- bottom node on middle ring -->
+    <circle cx="0" cy="223" r="9" fill="#06060b"/>
+    <!-- upper-left small node on outer ring -->
+    <circle cx="-197.28" cy="-197.28" r="6.5" fill="#06060b"/>
+    <!-- lower-right small node on inner ring -->
+    <circle cx="113.14" cy="113.14" r="5.5" fill="#06060b"/>
+
+    <!-- tiny tangent ticks to emphasize engineered orbital placement -->
+    <line x1="-12" y1="-279" x2="12" y2="-279" stroke="#06060b" stroke-width="3" stroke-linecap="round"/>
+    <line x1="223" y1="-12" x2="223" y2="12" stroke="#06060b" stroke-width="3" stroke-linecap="round"/>
+    <line x1="-12" y1="223" x2="12" y2="223" stroke="#06060b" stroke-width="3" stroke-linecap="round"/>
+    <line x1="-205.76" y1="-188.80" x2="-188.80" y2="-205.76" stroke="#06060b" stroke-width="2.5" stroke-linecap="round"/>
+    <line x1="108.19" y1="118.09" x2="118.09" y2="108.19" stroke="#06060b" stroke-width="2.5" stroke-linecap="round"/>
+  </g>
+</svg>

public/css/style.css

@@ -464,6 +464,8 @@ form { margin-top: 2rem; }
    control, so it should not paint a focus ring. */
 .rsvp-done:focus, .rsvp-done:focus-visible { outline: none; }
 .rsvp-done h3 { font-size: 1.4rem; font-weight: 700; }
+.done-extra { margin-top: 1rem; font-size: 0.88rem; color: var(--muted); }
+.done-extra a { color: var(--accent2); text-decoration: none; border-bottom: 1px solid var(--border-hover); }
 .rsvp-done p { margin: 0.8rem 0 1.2rem; color: var(--muted); }
 
 /* ── Footer ───────────────────────────────────────────────── */

views/index.ejs

@@ -330,6 +330,7 @@
         <h3>You are on the list.</h3>
         <p><%= isTonight ? "Tonight" : nextLong %> at <%= V.name %>, <%= V.street %>, <%= site.startTime %>. A confirmation is on its way to your inbox.</p>
         <a class="ics" href="/assets/founders-break.ics" data-track="add-to-calendar">Add the whole series to your calendar</a>
+        <p class="done-extra">Bringing people? <a href="/assets/founders-break-flyer.pdf" download data-track="flyer-after-rsvp">Printable flyer (PDF)</a></p>
       </div>
     </div>
   </section>
@@ -343,6 +344,7 @@
       <img src="/images/onetouch-studio.svg" alt="" width="20" height="20">
       <span>Hosted by <%= site.host.name %></span>
     </a>
+    <a href="/assets/founders-break-flyer.pdf" download data-track="flyer-footer">Printable flyer (PDF)</a>
     <a href="mailto:<%= site.host.email %>"><%= site.host.email %></a>
     <a href="<%= V.mapUrl %>" target="_blank" rel="noopener" data-track="venue-map"><%= V.name %>, <%= V.street %></a>
   </div>