From a7eeedaa8f3deb89ad391e3991c72882a015abd2 Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 08:13:35 -0500
Subject: [PATCH 01/20] Add feedback survey design doc

---
 .../2026-02-24-feedback-survey-design.md      | 150 ++++++++++++++++++
 1 file changed, 150 insertions(+)
 create mode 100644 docs/plans/2026-02-24-feedback-survey-design.md

diff --git a/docs/plans/2026-02-24-feedback-survey-design.md b/docs/plans/2026-02-24-feedback-survey-design.md
new file mode 100644
index 000000000..4ca7c7a80
--- /dev/null
+++ b/docs/plans/2026-02-24-feedback-survey-design.md
@@ -0,0 +1,150 @@
+# Feedback Survey Page — Design
+
+**Date:** 2026-02-24
+**Status:** Approved
+
+## Overview
+
+A post-meetup feedback survey at `civictech.ca/feedback`. Fully anonymous, no login required. Designed to be completable in ~30 seconds (core questions only) or in more depth via optional expanders. Responses are committed as JSON files to the public `CivicTechTO/feedback` GitHub repo.
+
+---
+
+## Architecture
+
+**New file:** `_pages/feedback.md` with `permalink: /feedback/`
+**Layout:** existing `page` layout
+**JS:** vanilla JavaScript (consistent with site conventions)
+
+### Submission Flow
+
+1. User fills out the form and clicks Submit
+2. JS assembles a JSON object from all field values
+3. JS calls the GitHub Contents API:
+   `PUT /repos/CivicTechTO/feedback/contents/submissions/<filename>.json`
+   using a fine-grained PAT scoped to Contents: write on that repo only
+4. File is committed directly to `CivicTechTO/feedback`
+5. Page replaces the form with a thank-you message
+
+### File Naming
+
+`submissions/YYYY-MM-DD-hacknight-NNN-<6-char-random>.json`
+
+Sortable by date, identifiable by meetup number, random suffix prevents collision.
+
+### PAT Handling
+
+Stored as a Jekyll config variable — set in `_config.yml` locally (gitignored) and as a GitHub Actions secret in CI. Rendered into the page at build time. Never committed in plaintext.
+
+The token is technically visible in rendered page source. This is acceptable: it is scoped so narrowly (write-only to one public repo) that the worst-case abuse is noise in the feedback repo.
+
+### Feedback Repo
+
+A new public repo `CivicTechTO/feedback` must be created. A `README.md` there should document the JSON schema. No CI or processing pipeline is needed at launch — the JSON files are the artifact.
+
+---
+
+## Meetup Dropdown
+
+Jekyll populates the last ~10 meetups at build time from `site.meetups`, rendered as `<option>` elements. No dynamic fetching. The site must be rebuilt after each meetup for the latest event to appear in the dropdown (this happens automatically via the existing weekly scheduled rebuild).
+
+---
+
+## Question Set
+
+### Always Visible (core — ~30 seconds)
+
+| # | Question | Input type |
+|---|---|---|
+| 1 | Which meetup are you giving feedback on? | Dropdown (required) |
+| 2 | Were you attending in person or online? | Toggle: In Person / Online |
+| 3 | Is this your first time at Civic Tech Toronto? | Yes / No |
+| 4 | How was tonight overall? | 1–5 scale |
+
+### Conditionally Shown
+
+**If first time = Yes:**
+
+| Question | Input type |
+|---|---|
+| Did you feel welcome tonight? | 1–5 scale |
+| Did you understand what was going on? | 1–5 scale |
+| Would you come back? | Yes / Maybe / No |
+
+**If attendance mode = Online:**
+
+| Question | Input type |
+|---|---|
+| Could you hear and see what was happening clearly? | 1–5 scale |
+| Did you feel like an equal participant, not just a viewer? | 1–5 scale |
+
+### "Tell us more" Expander (optional, for all)
+
+| Question | Input type |
+|---|---|
+| What worked well tonight? | Free text |
+| What could be better? | Free text |
+
+### "About you" Expander (optional, equity section)
+
+Labelled clearly as anonymous and entirely optional.
+
+| Question | Input type |
+|---|---|
+| How do you describe your gender identity? | Free text |
+| Age range | Select: Under 18 / 18–24 / 25–34 / 35–44 / 45–54 / 55+ |
+| Do you identify as a racialized person? | Yes / No / Prefer not to say |
+| Do you have a disability or chronic condition? | Yes / No / Prefer not to say |
+| Do you feel like someone like you belongs in this space? | 1–5 scale |
+| Were tonight's topics or speakers relevant to your community or experience? | 1–5 scale |
+
+---
+
+## Form UX
+
+- Single-column layout, narrow max-width, mobile-first
+- No required fields except the meetup dropdown
+- Conditional questions slide in when relevant toggles change
+- Optional sections use native `<details>`/`<summary>` (Pico CSS compatible)
+- Submit button disabled until meetup is selected
+
+**Submission states:**
+- **Submitting:** button shows "Sending…", disabled
+- **Success:** form replaced with "Thanks — your feedback helps us improve every week."
+- **Error:** inline message below button: "Something went wrong. You can try again or email hi@civictech.ca."
+
+---
+
+## JSON Schema
+
+```json
+{
+  "meetup_number": "519",
+  "submitted_at": "2026-02-24T20:15:00Z",
+  "attendance_mode": "in-person",
+  "first_time": true,
+  "overall_rating": 4,
+  "new_attendee": {
+    "felt_welcome": 5,
+    "understood_what_was_happening": 4,
+    "would_return": "yes"
+  },
+  "online": {
+    "av_quality": null,
+    "felt_included": null
+  },
+  "general": {
+    "liked": "The speaker was great",
+    "improve": "More breakout time"
+  },
+  "equity": {
+    "gender_identity": "non-binary",
+    "age_range": "25-34",
+    "racialized": "yes",
+    "disability": "no",
+    "belongs_here": 4,
+    "topics_relevant": 3
+  }
+}
+```
+
+Fields not applicable to a given respondent are omitted or `null`.

From f31739c84c3ee5b92835e511a3aeb5eec6b7afa4 Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 08:18:52 -0500
Subject: [PATCH 02/20] Add feedback survey implementation plan

---
 docs/plans/2026-02-24-feedback-survey.md | 688 +++++++++++++++++++++++
 1 file changed, 688 insertions(+)
 create mode 100644 docs/plans/2026-02-24-feedback-survey.md

diff --git a/docs/plans/2026-02-24-feedback-survey.md b/docs/plans/2026-02-24-feedback-survey.md
new file mode 100644
index 000000000..7fb070595
--- /dev/null
+++ b/docs/plans/2026-02-24-feedback-survey.md
@@ -0,0 +1,688 @@
+# Feedback Survey Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Add an anonymous post-meetup feedback form at `/feedback/` that commits JSON responses to a public `CivicTechTO/feedback` GitHub repo via the GitHub Contents API.
+
+**Architecture:** A new Jekyll page at `_pages/feedback.md` using vanilla JavaScript for conditional question logic and GitHub API submission. A scoped fine-grained PAT is injected at build time via a Jekyll config override (locally: `_config.local.yml`; in CI: a GitHub Actions secret appended to `_config.yml` before the build step).
+
+**Tech Stack:** Jekyll 4, Pico CSS (existing), vanilla JS (fetch API + btoa), GitHub Contents API v3
+
+---
+
+## Prerequisites (Manual — Do Before Any Code)
+
+### Step 1: Create the `CivicTechTO/feedback` repo
+
+Go to https://github.com/organizations/CivicTechTO/repositories/new and create a **public** repo named `feedback`. Initialize it with a README.
+
+### Step 2: Create a fine-grained PAT
+
+1. Go to https://github.com/settings/personal-access-tokens/new
+2. Name: `civictech-ca feedback form`
+3. Resource owner: `CivicTechTO`
+4. Repository access: **Only select repositories** → `CivicTechTO/feedback`
+5. Permissions: **Contents → Read and write**
+6. Generate token and copy it — you'll need it in Tasks 2 and 3
+
+---
+
+## Task 1: Configure token in Jekyll and CI
+
+**Files:**
+- Modify: `_config.yml`
+- Modify: `.gitignore`
+- Modify: `Makefile`
+- Modify: `.github/workflows/pages.yml`
+
+**Step 1: Add token placeholder to `_config.yml`**
+
+Add this line near the top of `_config.yml`, after the `description:` block:
+
+```yaml
+feedback_token: ""
+```
+
+**Step 2: Add `_config.local.yml` to `.gitignore`**
+
+Append to `.gitignore`:
+
+```
+# Local config override (contains secrets)
+_config.local.yml
+```
+
+**Step 3: Create `_config.local.yml` locally (do not commit)**
+
+Create a new file `_config.local.yml` in the project root:
+
+```yaml
+feedback_token: "YOUR_PAT_HERE"
+```
+
+Replace `YOUR_PAT_HERE` with the token from the prerequisite step.
+
+**Step 4: Update `Makefile` serve targets to use local config when present**
+
+Replace both `serve` and `serve-incremental` targets:
+
+```makefile
+# Start Jekyll server (uses _config.local.yml if present)
+serve:
+	@if [ -f _config.local.yml ]; then \
+		$(JEKYLL) serve --config _config.yml,_config.local.yml; \
+	else \
+		$(JEKYLL) serve; \
+	fi
+
+# Start Jekyll server with incremental regeneration
+serve-incremental:
+	@if [ -f _config.local.yml ]; then \
+		$(JEKYLL) serve --incremental --config _config.yml,_config.local.yml; \
+	else \
+		$(JEKYLL) serve --incremental; \
+	fi
+```
+
+**Step 5: Add secret injection step to `pages.yml`**
+
+In `.github/workflows/pages.yml`, add this step immediately **before** the "Build Jekyll site" step:
+
+```yaml
+      - name: Inject feedback token
+        run: echo "feedback_token: $FEEDBACK_TOKEN" >> _config.yml
+        env:
+          FEEDBACK_TOKEN: ${{ secrets.FEEDBACK_TOKEN }}
+```
+
+**Step 6: Add `FEEDBACK_TOKEN` secret to the GitHub repo**
+
+Go to https://github.com/CivicTechTO/civictech.ca/settings/secrets/actions and add a new secret:
+- Name: `FEEDBACK_TOKEN`
+- Value: the PAT from the prerequisite step
+
+**Step 7: Verify locally**
+
+```bash
+make serve
+```
+
+Open http://localhost:4000. Site should load normally. No errors about missing config.
+
+**Step 8: Commit**
+
+```bash
+git add _config.yml .gitignore Makefile .github/workflows/pages.yml
+git commit -m "Configure feedback form token injection for build"
+```
+
+---
+
+## Task 2: Create the feedback page — form structure and core questions
+
+**Files:**
+- Create: `_pages/feedback.md`
+
+**Step 1: Create `_pages/feedback.md` with core questions**
+
+```markdown
+---
+title: "Share Your Feedback"
+layout: page
+permalink: "/feedback/"
+---
+
+<p>Help us make Civic Tech Toronto better. This form is completely anonymous — we never collect names or email addresses.</p>
+
+<form id="feedback-form" novalidate>
+
+  <label for="meetup">Which meetup are you giving feedback on?</label>
+  <select id="meetup" name="meetup">
+    <option value="">Select a meetup…</option>
+    {% assign recent_meetups = site.meetups | sort: "date" | reverse %}
+    {% for meetup in recent_meetups limit:10 %}
+    <option value="{{ meetup.number }}">
+      Hacknight #{{ meetup.number }} – {{ meetup.date | date: "%B %d, %Y" }}{% if meetup.topic %} – {{ meetup.topic }}{% endif %}
+    </option>
+    {% endfor %}
+  </select>
+
+  <fieldset>
+    <legend>Were you attending in person or online?</legend>
+    <label><input type="radio" name="attendance_mode" value="in-person"> In Person</label>
+    <label><input type="radio" name="attendance_mode" value="online"> Online</label>
+  </fieldset>
+
+  <fieldset>
+    <legend>Is this your first time at Civic Tech Toronto?</legend>
+    <label><input type="radio" name="first_time" value="yes"> Yes</label>
+    <label><input type="radio" name="first_time" value="no"> No</label>
+  </fieldset>
+
+  <fieldset>
+    <legend>How was tonight overall?</legend>
+    <div class="rating-row">
+      <label><input type="radio" name="overall_rating" value="1"> 1</label>
+      <label><input type="radio" name="overall_rating" value="2"> 2</label>
+      <label><input type="radio" name="overall_rating" value="3"> 3</label>
+      <label><input type="radio" name="overall_rating" value="4"> 4</label>
+      <label><input type="radio" name="overall_rating" value="5"> 5</label>
+    </div>
+    <small>1 = poor, 5 = excellent</small>
+  </fieldset>
+
+  <!-- Conditional: new attendee questions -->
+  <section id="new-attendee-section" hidden>
+    <h3>As a first-timer…</h3>
+
+    <fieldset>
+      <legend>Did you feel welcome tonight?</legend>
+      <div class="rating-row">
+        <label><input type="radio" name="felt_welcome" value="1"> 1</label>
+        <label><input type="radio" name="felt_welcome" value="2"> 2</label>
+        <label><input type="radio" name="felt_welcome" value="3"> 3</label>
+        <label><input type="radio" name="felt_welcome" value="4"> 4</label>
+        <label><input type="radio" name="felt_welcome" value="5"> 5</label>
+      </div>
+      <small>1 = not at all, 5 = very welcome</small>
+    </fieldset>
+
+    <fieldset>
+      <legend>Did you understand what was going on?</legend>
+      <div class="rating-row">
+        <label><input type="radio" name="understood" value="1"> 1</label>
+        <label><input type="radio" name="understood" value="2"> 2</label>
+        <label><input type="radio" name="understood" value="3"> 3</label>
+        <label><input type="radio" name="understood" value="4"> 4</label>
+        <label><input type="radio" name="understood" value="5"> 5</label>
+      </div>
+      <small>1 = confused, 5 = totally clear</small>
+    </fieldset>
+
+    <fieldset>
+      <legend>Would you come back?</legend>
+      <label><input type="radio" name="would_return" value="yes"> Yes</label>
+      <label><input type="radio" name="would_return" value="maybe"> Maybe</label>
+      <label><input type="radio" name="would_return" value="no"> No</label>
+    </fieldset>
+  </section>
+
+  <!-- Conditional: online attendee questions -->
+  <section id="online-section" hidden>
+    <h3>Online experience</h3>
+
+    <fieldset>
+      <legend>Could you hear and see what was happening clearly?</legend>
+      <div class="rating-row">
+        <label><input type="radio" name="av_quality" value="1"> 1</label>
+        <label><input type="radio" name="av_quality" value="2"> 2</label>
+        <label><input type="radio" name="av_quality" value="3"> 3</label>
+        <label><input type="radio" name="av_quality" value="4"> 4</label>
+        <label><input type="radio" name="av_quality" value="5"> 5</label>
+      </div>
+      <small>1 = poor, 5 = excellent</small>
+    </fieldset>
+
+    <fieldset>
+      <legend>Did you feel like an equal participant, not just a viewer?</legend>
+      <div class="rating-row">
+        <label><input type="radio" name="felt_included" value="1"> 1</label>
+        <label><input type="radio" name="felt_included" value="2"> 2</label>
+        <label><input type="radio" name="felt_included" value="3"> 3</label>
+        <label><input type="radio" name="felt_included" value="4"> 4</label>
+        <label><input type="radio" name="felt_included" value="5"> 5</label>
+      </div>
+      <small>1 = not at all, 5 = fully included</small>
+    </fieldset>
+  </section>
+
+  <!-- Optional expander: general feedback -->
+  <details>
+    <summary>Tell us more (optional)</summary>
+
+    <label for="liked">What worked well tonight?</label>
+    <textarea id="liked" name="liked" rows="3"></textarea>
+
+    <label for="improve">What could be better?</label>
+    <textarea id="improve" name="improve" rows="3"></textarea>
+  </details>
+
+  <!-- Optional expander: equity questions -->
+  <details>
+    <summary>About you (optional)</summary>
+    <p><small>All fields in this section are completely optional and anonymous. This information helps us understand who is showing up and whether everyone feels included.</small></p>
+
+    <label for="gender_identity">How do you describe your gender identity?</label>
+    <input type="text" id="gender_identity" name="gender_identity" placeholder="Your own words">
+
+    <label for="age_range">Age range</label>
+    <select id="age_range" name="age_range">
+      <option value="">Prefer not to say</option>
+      <option value="under-18">Under 18</option>
+      <option value="18-24">18–24</option>
+      <option value="25-34">25–34</option>
+      <option value="35-44">35–44</option>
+      <option value="45-54">45–54</option>
+      <option value="55+">55+</option>
+    </select>
+
+    <fieldset>
+      <legend>Do you identify as a racialized person?</legend>
+      <label><input type="radio" name="racialized" value="yes"> Yes</label>
+      <label><input type="radio" name="racialized" value="no"> No</label>
+      <label><input type="radio" name="racialized" value="prefer-not-to-say"> Prefer not to say</label>
+    </fieldset>
+
+    <fieldset>
+      <legend>Do you have a disability or chronic condition?</legend>
+      <label><input type="radio" name="disability" value="yes"> Yes</label>
+      <label><input type="radio" name="disability" value="no"> No</label>
+      <label><input type="radio" name="disability" value="prefer-not-to-say"> Prefer not to say</label>
+    </fieldset>
+
+    <fieldset>
+      <legend>Do you feel like someone like you belongs in this space?</legend>
+      <div class="rating-row">
+        <label><input type="radio" name="belongs_here" value="1"> 1</label>
+        <label><input type="radio" name="belongs_here" value="2"> 2</label>
+        <label><input type="radio" name="belongs_here" value="3"> 3</label>
+        <label><input type="radio" name="belongs_here" value="4"> 4</label>
+        <label><input type="radio" name="belongs_here" value="5"> 5</label>
+      </div>
+      <small>1 = not at all, 5 = absolutely</small>
+    </fieldset>
+
+    <fieldset>
+      <legend>Were tonight's topics or speakers relevant to your community or experience?</legend>
+      <div class="rating-row">
+        <label><input type="radio" name="topics_relevant" value="1"> 1</label>
+        <label><input type="radio" name="topics_relevant" value="2"> 2</label>
+        <label><input type="radio" name="topics_relevant" value="3"> 3</label>
+        <label><input type="radio" name="topics_relevant" value="4"> 4</label>
+        <label><input type="radio" name="topics_relevant" value="5"> 5</label>
+      </div>
+      <small>1 = not relevant, 5 = very relevant</small>
+    </fieldset>
+  </details>
+
+  <button type="submit" id="submit-btn" disabled>Submit Feedback</button>
+
+</form>
+
+<div id="success-message" hidden>
+  <p>Thanks — your feedback helps us improve every week.</p>
+</div>
+
+<div id="error-message" hidden>
+  <p>Something went wrong. You can try again or email <a href="mailto:hi@civictech.ca">hi@civictech.ca</a>.</p>
+</div>
+```
+
+**Step 2: Verify locally**
+
+```bash
+make serve
+```
+
+Visit http://localhost:4000/feedback/ — the form should render with the meetup dropdown populated, all fieldsets visible, and the two `<details>` expanders collapsed. The submit button should be disabled. No JS yet so no interactivity.
+
+**Step 3: Commit**
+
+```bash
+git add _pages/feedback.md
+git commit -m "Add feedback page with form structure and all questions"
+```
+
+---
+
+## Task 3: Add a small CSS rule for inline rating rows
+
+**Files:**
+- Modify: `assets/css/custom.css`
+
+**Step 1: Read `assets/css/custom.css` first**, then append:
+
+```css
+/* Feedback form: inline rating scale */
+.rating-row {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.25rem;
+}
+.rating-row label {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+```
+
+**Step 2: Verify locally**
+
+```bash
+make serve
+```
+
+Visit http://localhost:4000/feedback/ — rating inputs should now appear side-by-side on one line rather than stacked.
+
+**Step 3: Commit**
+
+```bash
+git add assets/css/custom.css
+git commit -m "Add inline rating row style for feedback form"
+```
+
+---
+
+## Task 4: Add conditional question JS and submit-enable logic
+
+**Files:**
+- Modify: `_pages/feedback.md` — add `<script>` block at the bottom (before the closing of the file)
+
+**Step 1: Add the following `<script>` block at the very end of `_pages/feedback.md`**
+
+```html
+<script>
+(function () {
+  var form = document.getElementById('feedback-form');
+  var submitBtn = document.getElementById('submit-btn');
+  var meetupSelect = document.getElementById('meetup');
+  var newAttendeeSection = document.getElementById('new-attendee-section');
+  var onlineSection = document.getElementById('online-section');
+
+  // Enable submit button once a meetup is selected
+  meetupSelect.addEventListener('change', function () {
+    submitBtn.disabled = !meetupSelect.value;
+  });
+
+  // Show/hide new-attendee section based on first_time radio
+  form.querySelectorAll('input[name="first_time"]').forEach(function (input) {
+    input.addEventListener('change', function () {
+      newAttendeeSection.hidden = (input.value !== 'yes');
+    });
+  });
+
+  // Show/hide online section based on attendance_mode radio
+  form.querySelectorAll('input[name="attendance_mode"]').forEach(function (input) {
+    input.addEventListener('change', function () {
+      onlineSection.hidden = (input.value !== 'online');
+    });
+  });
+})();
+</script>
+```
+
+**Step 2: Verify locally**
+
+```bash
+make serve
+```
+
+Visit http://localhost:4000/feedback/ and confirm:
+- Submit button is disabled until you select a meetup from the dropdown
+- Selecting "Yes" for first-time reveals the new-attendee questions; selecting "No" hides them again
+- Selecting "Online" reveals the online section; "In Person" hides it
+
+**Step 3: Commit**
+
+```bash
+git add _pages/feedback.md
+git commit -m "Add conditional question visibility and submit-enable JS"
+```
+
+---
+
+## Task 5: Add GitHub API submission
+
+**Files:**
+- Modify: `_pages/feedback.md` — replace the `<script>` block with the full version below
+
+**Step 1: Replace the existing `<script>` block** (the one added in Task 4) with this complete version:
+
+```html
+<script>
+(function () {
+  var GITHUB_TOKEN = '{{ site.feedback_token }}';
+  var FEEDBACK_REPO = 'CivicTechTO/feedback';
+
+  var form = document.getElementById('feedback-form');
+  var submitBtn = document.getElementById('submit-btn');
+  var meetupSelect = document.getElementById('meetup');
+  var newAttendeeSection = document.getElementById('new-attendee-section');
+  var onlineSection = document.getElementById('online-section');
+  var successMessage = document.getElementById('success-message');
+  var errorMessage = document.getElementById('error-message');
+
+  // Enable submit button once a meetup is selected
+  meetupSelect.addEventListener('change', function () {
+    submitBtn.disabled = !meetupSelect.value;
+  });
+
+  // Show/hide new-attendee section
+  form.querySelectorAll('input[name="first_time"]').forEach(function (input) {
+    input.addEventListener('change', function () {
+      newAttendeeSection.hidden = (input.value !== 'yes');
+    });
+  });
+
+  // Show/hide online section
+  form.querySelectorAll('input[name="attendance_mode"]').forEach(function (input) {
+    input.addEventListener('change', function () {
+      onlineSection.hidden = (input.value !== 'online');
+    });
+  });
+
+  // Form submission
+  form.addEventListener('submit', function (e) {
+    e.preventDefault();
+    submitBtn.disabled = true;
+    submitBtn.textContent = 'Sending…';
+    errorMessage.hidden = true;
+
+    var data = buildFormData();
+    var meetupNumber = meetupSelect.value;
+    var now = new Date();
+    var dateStr = now.toISOString().slice(0, 10);
+    var randomSuffix = Math.random().toString(36).slice(2, 8);
+    var filename = 'submissions/' + dateStr + '-hacknight-' + meetupNumber + '-' + randomSuffix + '.json';
+    var jsonStr = JSON.stringify(data, null, 2);
+    // btoa with unicode support
+    var encoded = btoa(unescape(encodeURIComponent(jsonStr)));
+
+    fetch('https://api.github.com/repos/' + FEEDBACK_REPO + '/contents/' + filename, {
+      method: 'PUT',
+      headers: {
+        'Authorization': 'Bearer ' + GITHUB_TOKEN,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        message: 'Add feedback for hacknight #' + meetupNumber,
+        content: encoded
+      })
+    })
+    .then(function (response) {
+      if (!response.ok) throw new Error('GitHub API error: ' + response.status);
+      form.hidden = true;
+      successMessage.hidden = false;
+    })
+    .catch(function () {
+      submitBtn.disabled = false;
+      submitBtn.textContent = 'Submit Feedback';
+      errorMessage.hidden = false;
+    });
+  });
+
+  function getRadio(name) {
+    var el = form.querySelector('input[name="' + name + '"]:checked');
+    return el ? el.value : undefined;
+  }
+
+  function getText(id) {
+    var el = form.querySelector('#' + id);
+    return (el && el.value.trim()) ? el.value.trim() : undefined;
+  }
+
+  function getSelect(id) {
+    var el = form.querySelector('#' + id);
+    return (el && el.value) ? el.value : undefined;
+  }
+
+  function buildFormData() {
+    var firstTime = getRadio('first_time');
+    var attendanceMode = getRadio('attendance_mode');
+    var overallRating = getRadio('overall_rating');
+
+    var data = {
+      meetup_number: meetupSelect.value,
+      submitted_at: new Date().toISOString(),
+    };
+
+    if (attendanceMode) data.attendance_mode = attendanceMode;
+    if (firstTime !== undefined) data.first_time = firstTime === 'yes';
+    if (overallRating) data.overall_rating = parseInt(overallRating);
+
+    if (firstTime === 'yes') {
+      var newAttendee = {};
+      var fw = getRadio('felt_welcome');
+      var un = getRadio('understood');
+      var wr = getRadio('would_return');
+      if (fw) newAttendee.felt_welcome = parseInt(fw);
+      if (un) newAttendee.understood_what_was_happening = parseInt(un);
+      if (wr) newAttendee.would_return = wr;
+      if (Object.keys(newAttendee).length) data.new_attendee = newAttendee;
+    }
+
+    if (attendanceMode === 'online') {
+      var online = {};
+      var av = getRadio('av_quality');
+      var fi = getRadio('felt_included');
+      if (av) online.av_quality = parseInt(av);
+      if (fi) online.felt_included = parseInt(fi);
+      if (Object.keys(online).length) data.online = online;
+    }
+
+    var general = {};
+    var liked = getText('liked');
+    var improve = getText('improve');
+    if (liked) general.liked = liked;
+    if (improve) general.improve = improve;
+    if (Object.keys(general).length) data.general = general;
+
+    var equity = {};
+    var gi = getText('gender_identity');
+    var ar = getSelect('age_range');
+    var ra = getRadio('racialized');
+    var di = getRadio('disability');
+    var bh = getRadio('belongs_here');
+    var tr = getRadio('topics_relevant');
+    if (gi) equity.gender_identity = gi;
+    if (ar) equity.age_range = ar;
+    if (ra) equity.racialized = ra;
+    if (di) equity.disability = di;
+    if (bh) equity.belongs_here = parseInt(bh);
+    if (tr) equity.topics_relevant = parseInt(tr);
+    if (Object.keys(equity).length) data.equity = equity;
+
+    return data;
+  }
+})();
+</script>
+```
+
+**Step 2: Verify the happy path locally**
+
+```bash
+make serve
+```
+
+Visit http://localhost:4000/feedback/ and submit a test response (the local PAT in `_config.local.yml` must be set). After submitting:
+- The form disappears
+- "Thanks — your feedback helps us improve every week." appears
+- Check `https://github.com/CivicTechTO/feedback/tree/main/submissions` — a new JSON file should be there
+
+**Step 3: Verify the error path**
+
+Temporarily blank out `feedback_token` in `_config.local.yml`, rebuild (`make serve`), and submit. The error message should appear and the button should re-enable.
+
+Restore the real token when done.
+
+**Step 4: Commit**
+
+```bash
+git add _pages/feedback.md
+git commit -m "Add GitHub API submission to feedback form"
+```
+
+---
+
+## Task 6: Add README to the feedback repo
+
+This is done directly on GitHub, not in this repo.
+
+**Step 1:** Go to `https://github.com/CivicTechTO/feedback` and edit `README.md` to document the schema:
+
+```markdown
+# CivicTechTO Feedback
+
+Anonymous post-meetup feedback submitted via [civictech.ca/feedback](https://civictech.ca/feedback).
+
+Each submission is a JSON file in `submissions/` named:
+`YYYY-MM-DD-hacknight-NNN-RANDOM.json`
+
+## Schema
+
+| Field | Type | Description |
+|---|---|---|
+| `meetup_number` | string | Hacknight number |
+| `submitted_at` | ISO 8601 string | Submission timestamp (UTC) |
+| `attendance_mode` | `"in-person"` \| `"online"` | How they attended |
+| `first_time` | boolean | First visit to CivicTechTO |
+| `overall_rating` | 1–5 | Overall night rating |
+| `new_attendee.felt_welcome` | 1–5 | (first-timers only) |
+| `new_attendee.understood_what_was_happening` | 1–5 | (first-timers only) |
+| `new_attendee.would_return` | `"yes"` \| `"maybe"` \| `"no"` | (first-timers only) |
+| `online.av_quality` | 1–5 | (online attendees only) |
+| `online.felt_included` | 1–5 | (online attendees only) |
+| `general.liked` | string | Free text |
+| `general.improve` | string | Free text |
+| `equity.gender_identity` | string | Free text, self-described |
+| `equity.age_range` | string | Age bracket |
+| `equity.racialized` | `"yes"` \| `"no"` \| `"prefer-not-to-say"` | |
+| `equity.disability` | `"yes"` \| `"no"` \| `"prefer-not-to-say"` | |
+| `equity.belongs_here` | 1–5 | Sense of belonging |
+| `equity.topics_relevant` | 1–5 | Topic relevance to respondent |
+
+All fields except `meetup_number` and `submitted_at` are optional and may be absent.
+```
+
+---
+
+## Task 7: Create branch and open PR
+
+**Step 1: Check what branch you're on**
+
+```bash
+git status
+```
+
+If not already on a feature branch, create one now (or check if this was done at the start):
+
+```bash
+git checkout -b feature/feedback-survey
+```
+
+**Step 2: Push**
+
+```bash
+git push -u origin feature/feedback-survey
+```
+
+**Step 3: Open PR**
+
+```bash
+gh pr create \
+  --title "Add anonymous post-meetup feedback survey at /feedback/" \
+  --body "Adds a Jekyll page at civictech.ca/feedback for anonymous attendee feedback. Responses are committed as JSON files to the public CivicTechTO/feedback repo via the GitHub Contents API. Includes progressive disclosure (conditional questions for first-timers and online attendees, optional expanders for free text and equity questions). Closes #63... (add relevant issue number)"
+```
+
+**Note:** Before merging, confirm the `FEEDBACK_TOKEN` secret is set in the repo's Actions secrets (Settings → Secrets and variables → Actions).

From 26c1a6c49747f46273a55ed9246da0cfd0fc52dd Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 08:25:44 -0500
Subject: [PATCH 03/20] Configure feedback form token injection for build

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .github/workflows/pages.yml |  5 +++++
 .gitignore                  |  5 ++++-
 Makefile                    | 14 +++++++++++---
 _config.yml                 |  6 ++++--
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
index 67394e668..419168435 100644
--- a/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@@ -70,6 +70,11 @@ jobs:
       #     chmod +x _scripts/thumbnail_sizes.sh
       #     ./_scripts/thumbnail_sizes.sh
 
+      - name: Inject feedback token
+        run: echo "feedback_token: $FEEDBACK_TOKEN" >> _config.yml
+        env:
+          FEEDBACK_TOKEN: ${{ secrets.FEEDBACK_TOKEN }}
+
       # Outputs to the './_site' directory by default
       - name: Build Jekyll site
         run: |
diff --git a/.gitignore b/.gitignore
index 244b75f1c..67b463581 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,4 +14,7 @@ _site
 
 # Ruby vendor directory
 vendor/bundle
-.bundle
\ No newline at end of file
+.bundle
+
+# Local config override (contains secrets)
+_config.local.yml
\ No newline at end of file
diff --git a/Makefile b/Makefile
index 2c9a7b941..c11ce8e11 100644
--- a/Makefile
+++ b/Makefile
@@ -11,13 +11,21 @@ all: serve
 install:
 	bundle install
 
-# Start Jekyll server
+# Start Jekyll server (uses _config.local.yml if present)
 serve:
-	$(JEKYLL) serve
+	@if [ -f _config.local.yml ]; then \
+		$(JEKYLL) serve --config _config.yml,_config.local.yml; \
+	else \
+		$(JEKYLL) serve; \
+	fi
 
 # Start Jekyll server with incremental regeneration
 serve-incremental:
-	$(JEKYLL) serve --incremental
+	@if [ -f _config.local.yml ]; then \
+		$(JEKYLL) serve --incremental --config _config.yml,_config.local.yml; \
+	else \
+		$(JEKYLL) serve --incremental; \
+	fi
 
 # Generate category and tag data
 generate-data:
diff --git a/_config.yml b/_config.yml
index c58a10641..0d713f587 100644
--- a/_config.yml
+++ b/_config.yml
@@ -4,10 +4,12 @@ author:
   email: hi@civictech.ca
 
 description: >-
-  Civic Tech Toronto is a vibrant and diverse community of Torontonians engaged 
-  in understanding and creating solutions for civic challenges through technology, 
+  Civic Tech Toronto is a vibrant and diverse community of Torontonians engaged
+  in understanding and creating solutions for civic challenges through technology,
   design, and other innovative means.
 
+feedback_token: ""
+
 baseurl: ""
 github_username: civictechto
 

From 68fc4edf1f930b4e36a3423c81ab8103472b0b9c Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 08:31:38 -0500
Subject: [PATCH 04/20] Fix missing trailing newline in .gitignore and quote
 token in CI injection

---
 .github/workflows/pages.yml | 2 +-
 .gitignore                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
index 419168435..65905430c 100644
--- a/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@@ -71,7 +71,7 @@ jobs:
       #     ./_scripts/thumbnail_sizes.sh
 
       - name: Inject feedback token
-        run: echo "feedback_token: $FEEDBACK_TOKEN" >> _config.yml
+        run: echo "feedback_token: \"$FEEDBACK_TOKEN\"" >> _config.yml
         env:
           FEEDBACK_TOKEN: ${{ secrets.FEEDBACK_TOKEN }}
 
diff --git a/.gitignore b/.gitignore
index 67b463581..62d1eda29 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,4 +17,4 @@ vendor/bundle
 .bundle
 
 # Local config override (contains secrets)
-_config.local.yml
\ No newline at end of file
+_config.local.yml

From 636672db8f5fa6dc25edbda1defa2d84022ff981 Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 08:33:05 -0500
Subject: [PATCH 05/20] Add feedback page with form structure and all questions

---
 _pages/feedback.md | 190 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 190 insertions(+)
 create mode 100644 _pages/feedback.md

diff --git a/_pages/feedback.md b/_pages/feedback.md
new file mode 100644
index 000000000..8d85582d3
--- /dev/null
+++ b/_pages/feedback.md
@@ -0,0 +1,190 @@
+---
+title: "Share Your Feedback"
+layout: page
+permalink: "/feedback/"
+---
+
+<p>Help us make Civic Tech Toronto better. This form is completely anonymous — we never collect names or email addresses.</p>
+
+<form id="feedback-form" novalidate>
+
+  <label for="meetup">Which meetup are you giving feedback on?</label>
+  <select id="meetup" name="meetup">
+    <option value="">Select a meetup…</option>
+    {% assign recent_meetups = site.meetups | sort: "date" | reverse %}
+    {% for meetup in recent_meetups limit:10 %}
+    <option value="{{ meetup.number }}">
+      Hacknight #{{ meetup.number }} – {{ meetup.date | date: "%B %d, %Y" }}{% if meetup.topic %} – {{ meetup.topic }}{% endif %}
+    </option>
+    {% endfor %}
+  </select>
+
+  <fieldset>
+    <legend>Were you attending in person or online?</legend>
+    <label><input type="radio" name="attendance_mode" value="in-person"> In Person</label>
+    <label><input type="radio" name="attendance_mode" value="online"> Online</label>
+  </fieldset>
+
+  <fieldset>
+    <legend>Is this your first time at Civic Tech Toronto?</legend>
+    <label><input type="radio" name="first_time" value="yes"> Yes</label>
+    <label><input type="radio" name="first_time" value="no"> No</label>
+  </fieldset>
+
+  <fieldset>
+    <legend>How was tonight overall?</legend>
+    <div class="rating-row">
+      <label><input type="radio" name="overall_rating" value="1"> 1</label>
+      <label><input type="radio" name="overall_rating" value="2"> 2</label>
+      <label><input type="radio" name="overall_rating" value="3"> 3</label>
+      <label><input type="radio" name="overall_rating" value="4"> 4</label>
+      <label><input type="radio" name="overall_rating" value="5"> 5</label>
+    </div>
+    <small>1 = poor, 5 = excellent</small>
+  </fieldset>
+
+  <!-- Conditional: new attendee questions -->
+  <section id="new-attendee-section" hidden>
+    <h3>As a first-timer…</h3>
+
+    <fieldset>
+      <legend>Did you feel welcome tonight?</legend>
+      <div class="rating-row">
+        <label><input type="radio" name="felt_welcome" value="1"> 1</label>
+        <label><input type="radio" name="felt_welcome" value="2"> 2</label>
+        <label><input type="radio" name="felt_welcome" value="3"> 3</label>
+        <label><input type="radio" name="felt_welcome" value="4"> 4</label>
+        <label><input type="radio" name="felt_welcome" value="5"> 5</label>
+      </div>
+      <small>1 = not at all, 5 = very welcome</small>
+    </fieldset>
+
+    <fieldset>
+      <legend>Did you understand what was going on?</legend>
+      <div class="rating-row">
+        <label><input type="radio" name="understood" value="1"> 1</label>
+        <label><input type="radio" name="understood" value="2"> 2</label>
+        <label><input type="radio" name="understood" value="3"> 3</label>
+        <label><input type="radio" name="understood" value="4"> 4</label>
+        <label><input type="radio" name="understood" value="5"> 5</label>
+      </div>
+      <small>1 = confused, 5 = totally clear</small>
+    </fieldset>
+
+    <fieldset>
+      <legend>Would you come back?</legend>
+      <label><input type="radio" name="would_return" value="yes"> Yes</label>
+      <label><input type="radio" name="would_return" value="maybe"> Maybe</label>
+      <label><input type="radio" name="would_return" value="no"> No</label>
+    </fieldset>
+  </section>
+
+  <!-- Conditional: online attendee questions -->
+  <section id="online-section" hidden>
+    <h3>Online experience</h3>
+
+    <fieldset>
+      <legend>Could you hear and see what was happening clearly?</legend>
+      <div class="rating-row">
+        <label><input type="radio" name="av_quality" value="1"> 1</label>
+        <label><input type="radio" name="av_quality" value="2"> 2</label>
+        <label><input type="radio" name="av_quality" value="3"> 3</label>
+        <label><input type="radio" name="av_quality" value="4"> 4</label>
+        <label><input type="radio" name="av_quality" value="5"> 5</label>
+      </div>
+      <small>1 = poor, 5 = excellent</small>
+    </fieldset>
+
+    <fieldset>
+      <legend>Did you feel like an equal participant, not just a viewer?</legend>
+      <div class="rating-row">
+        <label><input type="radio" name="felt_included" value="1"> 1</label>
+        <label><input type="radio" name="felt_included" value="2"> 2</label>
+        <label><input type="radio" name="felt_included" value="3"> 3</label>
+        <label><input type="radio" name="felt_included" value="4"> 4</label>
+        <label><input type="radio" name="felt_included" value="5"> 5</label>
+      </div>
+      <small>1 = not at all, 5 = fully included</small>
+    </fieldset>
+  </section>
+
+  <!-- Optional expander: general feedback -->
+  <details>
+    <summary>Tell us more (optional)</summary>
+
+    <label for="liked">What worked well tonight?</label>
+    <textarea id="liked" name="liked" rows="3"></textarea>
+
+    <label for="improve">What could be better?</label>
+    <textarea id="improve" name="improve" rows="3"></textarea>
+  </details>
+
+  <!-- Optional expander: equity questions -->
+  <details>
+    <summary>About you (optional)</summary>
+    <p><small>All fields in this section are completely optional and anonymous. This information helps us understand who is showing up and whether everyone feels included.</small></p>
+
+    <label for="gender_identity">How do you describe your gender identity?</label>
+    <input type="text" id="gender_identity" name="gender_identity" placeholder="Your own words">
+
+    <label for="age_range">Age range</label>
+    <select id="age_range" name="age_range">
+      <option value="">Prefer not to say</option>
+      <option value="under-18">Under 18</option>
+      <option value="18-24">18–24</option>
+      <option value="25-34">25–34</option>
+      <option value="35-44">35–44</option>
+      <option value="45-54">45–54</option>
+      <option value="55+">55+</option>
+    </select>
+
+    <fieldset>
+      <legend>Do you identify as a racialized person?</legend>
+      <label><input type="radio" name="racialized" value="yes"> Yes</label>
+      <label><input type="radio" name="racialized" value="no"> No</label>
+      <label><input type="radio" name="racialized" value="prefer-not-to-say"> Prefer not to say</label>
+    </fieldset>
+
+    <fieldset>
+      <legend>Do you have a disability or chronic condition?</legend>
+      <label><input type="radio" name="disability" value="yes"> Yes</label>
+      <label><input type="radio" name="disability" value="no"> No</label>
+      <label><input type="radio" name="disability" value="prefer-not-to-say"> Prefer not to say</label>
+    </fieldset>
+
+    <fieldset>
+      <legend>Do you feel like someone like you belongs in this space?</legend>
+      <div class="rating-row">
+        <label><input type="radio" name="belongs_here" value="1"> 1</label>
+        <label><input type="radio" name="belongs_here" value="2"> 2</label>
+        <label><input type="radio" name="belongs_here" value="3"> 3</label>
+        <label><input type="radio" name="belongs_here" value="4"> 4</label>
+        <label><input type="radio" name="belongs_here" value="5"> 5</label>
+      </div>
+      <small>1 = not at all, 5 = absolutely</small>
+    </fieldset>
+
+    <fieldset>
+      <legend>Were tonight's topics or speakers relevant to your community or experience?</legend>
+      <div class="rating-row">
+        <label><input type="radio" name="topics_relevant" value="1"> 1</label>
+        <label><input type="radio" name="topics_relevant" value="2"> 2</label>
+        <label><input type="radio" name="topics_relevant" value="3"> 3</label>
+        <label><input type="radio" name="topics_relevant" value="4"> 4</label>
+        <label><input type="radio" name="topics_relevant" value="5"> 5</label>
+      </div>
+      <small>1 = not relevant, 5 = very relevant</small>
+    </fieldset>
+  </details>
+
+  <button type="submit" id="submit-btn" disabled>Submit Feedback</button>
+
+</form>
+
+<div id="success-message" hidden>
+  <p>Thanks — your feedback helps us improve every week.</p>
+</div>
+
+<div id="error-message" hidden>
+  <p>Something went wrong. You can try again or email <a href="mailto:hi@civictech.ca">hi@civictech.ca</a>.</p>
+</div>

From 9ee7628cdb2a4c301d18b4a78c5269ae8ac7ed89 Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 08:35:59 -0500
Subject: [PATCH 06/20] Fix rating fieldset semantics, option whitespace, and
 alert roles

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 _pages/feedback.md | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/_pages/feedback.md b/_pages/feedback.md
index 8d85582d3..a831ac4fe 100644
--- a/_pages/feedback.md
+++ b/_pages/feedback.md
@@ -13,9 +13,7 @@ permalink: "/feedback/"
     <option value="">Select a meetup…</option>
     {% assign recent_meetups = site.meetups | sort: "date" | reverse %}
     {% for meetup in recent_meetups limit:10 %}
-    <option value="{{ meetup.number }}">
-      Hacknight #{{ meetup.number }} – {{ meetup.date | date: "%B %d, %Y" }}{% if meetup.topic %} – {{ meetup.topic }}{% endif %}
-    </option>
+    <option value="{{ meetup.number }}">Hacknight #{{ meetup.number }} – {{ meetup.date | date: "%B %d, %Y" }}{% if meetup.topic %} – {{ meetup.topic }}{% endif %}</option>
     {% endfor %}
   </select>
 
@@ -181,10 +179,10 @@ permalink: "/feedback/"
 
 </form>
 
-<div id="success-message" hidden>
+<div id="success-message" role="alert" hidden>
   <p>Thanks — your feedback helps us improve every week.</p>
 </div>
 
-<div id="error-message" hidden>
+<div id="error-message" role="alert" hidden>
   <p>Something went wrong. You can try again or email <a href="mailto:hi@civictech.ca">hi@civictech.ca</a>.</p>
 </div>

From b3f91a5c08a77608de2c2815c48d81a39556212f Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 08:36:44 -0500
Subject: [PATCH 07/20] Add inline rating row style for feedback form

---
 assets/css/custom.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index 103465f6f..9d19ca234 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -529,3 +529,16 @@ aside .ogimage {
   gap: 0.5rem;
   padding-bottom: 1rem;
 }
+
+/* Feedback form: inline rating scale */
+.rating-row {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.25rem;
+}
+.rating-row label {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}

From cfa6fc6a86a3a91aa2c6492a0fd7769aca6b28be Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 08:37:52 -0500
Subject: [PATCH 08/20] Add conditional question visibility and submit-enable
 JS

---
 _pages/feedback.md | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/_pages/feedback.md b/_pages/feedback.md
index a831ac4fe..226f585db 100644
--- a/_pages/feedback.md
+++ b/_pages/feedback.md
@@ -186,3 +186,32 @@ permalink: "/feedback/"
 <div id="error-message" role="alert" hidden>
   <p>Something went wrong. You can try again or email <a href="mailto:hi@civictech.ca">hi@civictech.ca</a>.</p>
 </div>
+
+<script>
+(function () {
+  var form = document.getElementById('feedback-form');
+  var submitBtn = document.getElementById('submit-btn');
+  var meetupSelect = document.getElementById('meetup');
+  var newAttendeeSection = document.getElementById('new-attendee-section');
+  var onlineSection = document.getElementById('online-section');
+
+  // Enable submit button once a meetup is selected
+  meetupSelect.addEventListener('change', function () {
+    submitBtn.disabled = !meetupSelect.value;
+  });
+
+  // Show/hide new-attendee section based on first_time radio
+  form.querySelectorAll('input[name="first_time"]').forEach(function (input) {
+    input.addEventListener('change', function () {
+      newAttendeeSection.hidden = (input.value !== 'yes');
+    });
+  });
+
+  // Show/hide online section based on attendance_mode radio
+  form.querySelectorAll('input[name="attendance_mode"]').forEach(function (input) {
+    input.addEventListener('change', function () {
+      onlineSection.hidden = (input.value !== 'online');
+    });
+  });
+})();
+</script>

From 989770db75ffd55e817865aa05cf7988f253438c Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 08:39:44 -0500
Subject: [PATCH 09/20] Add GitHub API submission to feedback form

---
 _pages/feedback.md | 123 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 121 insertions(+), 2 deletions(-)

diff --git a/_pages/feedback.md b/_pages/feedback.md
index 226f585db..a9bd3bf00 100644
--- a/_pages/feedback.md
+++ b/_pages/feedback.md
@@ -189,29 +189,148 @@ permalink: "/feedback/"
 
 <script>
 (function () {
+  var GITHUB_TOKEN = '{{ site.feedback_token }}';
+  var FEEDBACK_REPO = 'CivicTechTO/feedback';
+
   var form = document.getElementById('feedback-form');
   var submitBtn = document.getElementById('submit-btn');
   var meetupSelect = document.getElementById('meetup');
   var newAttendeeSection = document.getElementById('new-attendee-section');
   var onlineSection = document.getElementById('online-section');
+  var successMessage = document.getElementById('success-message');
+  var errorMessage = document.getElementById('error-message');
 
   // Enable submit button once a meetup is selected
   meetupSelect.addEventListener('change', function () {
     submitBtn.disabled = !meetupSelect.value;
   });
 
-  // Show/hide new-attendee section based on first_time radio
+  // Show/hide new-attendee section
   form.querySelectorAll('input[name="first_time"]').forEach(function (input) {
     input.addEventListener('change', function () {
       newAttendeeSection.hidden = (input.value !== 'yes');
     });
   });
 
-  // Show/hide online section based on attendance_mode radio
+  // Show/hide online section
   form.querySelectorAll('input[name="attendance_mode"]').forEach(function (input) {
     input.addEventListener('change', function () {
       onlineSection.hidden = (input.value !== 'online');
     });
   });
+
+  // Form submission
+  form.addEventListener('submit', function (e) {
+    e.preventDefault();
+    submitBtn.disabled = true;
+    submitBtn.textContent = 'Sending…';
+    errorMessage.hidden = true;
+
+    var data = buildFormData();
+    var meetupNumber = meetupSelect.value;
+    var now = new Date();
+    var dateStr = now.toISOString().slice(0, 10);
+    var randomSuffix = Math.random().toString(36).slice(2, 8);
+    var filename = 'submissions/' + dateStr + '-hacknight-' + meetupNumber + '-' + randomSuffix + '.json';
+    var jsonStr = JSON.stringify(data, null, 2);
+    // btoa with unicode support
+    var encoded = btoa(unescape(encodeURIComponent(jsonStr)));
+
+    fetch('https://api.github.com/repos/' + FEEDBACK_REPO + '/contents/' + filename, {
+      method: 'PUT',
+      headers: {
+        'Authorization': 'Bearer ' + GITHUB_TOKEN,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        message: 'Add feedback for hacknight #' + meetupNumber,
+        content: encoded
+      })
+    })
+    .then(function (response) {
+      if (!response.ok) throw new Error('GitHub API error: ' + response.status);
+      form.hidden = true;
+      successMessage.hidden = false;
+    })
+    .catch(function () {
+      submitBtn.disabled = false;
+      submitBtn.textContent = 'Submit Feedback';
+      errorMessage.hidden = false;
+    });
+  });
+
+  function getRadio(name) {
+    var el = form.querySelector('input[name="' + name + '"]:checked');
+    return el ? el.value : undefined;
+  }
+
+  function getText(id) {
+    var el = form.querySelector('#' + id);
+    return (el && el.value.trim()) ? el.value.trim() : undefined;
+  }
+
+  function getSelect(id) {
+    var el = form.querySelector('#' + id);
+    return (el && el.value) ? el.value : undefined;
+  }
+
+  function buildFormData() {
+    var firstTime = getRadio('first_time');
+    var attendanceMode = getRadio('attendance_mode');
+    var overallRating = getRadio('overall_rating');
+
+    var data = {
+      meetup_number: meetupSelect.value,
+      submitted_at: new Date().toISOString(),
+    };
+
+    if (attendanceMode) data.attendance_mode = attendanceMode;
+    if (firstTime !== undefined) data.first_time = firstTime === 'yes';
+    if (overallRating) data.overall_rating = parseInt(overallRating);
+
+    if (firstTime === 'yes') {
+      var newAttendee = {};
+      var fw = getRadio('felt_welcome');
+      var un = getRadio('understood');
+      var wr = getRadio('would_return');
+      if (fw) newAttendee.felt_welcome = parseInt(fw);
+      if (un) newAttendee.understood_what_was_happening = parseInt(un);
+      if (wr) newAttendee.would_return = wr;
+      if (Object.keys(newAttendee).length) data.new_attendee = newAttendee;
+    }
+
+    if (attendanceMode === 'online') {
+      var online = {};
+      var av = getRadio('av_quality');
+      var fi = getRadio('felt_included');
+      if (av) online.av_quality = parseInt(av);
+      if (fi) online.felt_included = parseInt(fi);
+      if (Object.keys(online).length) data.online = online;
+    }
+
+    var general = {};
+    var liked = getText('liked');
+    var improve = getText('improve');
+    if (liked) general.liked = liked;
+    if (improve) general.improve = improve;
+    if (Object.keys(general).length) data.general = general;
+
+    var equity = {};
+    var gi = getText('gender_identity');
+    var ar = getSelect('age_range');
+    var ra = getRadio('racialized');
+    var di = getRadio('disability');
+    var bh = getRadio('belongs_here');
+    var tr = getRadio('topics_relevant');
+    if (gi) equity.gender_identity = gi;
+    if (ar) equity.age_range = ar;
+    if (ra) equity.racialized = ra;
+    if (di) equity.disability = di;
+    if (bh) equity.belongs_here = parseInt(bh);
+    if (tr) equity.topics_relevant = parseInt(tr);
+    if (Object.keys(equity).length) data.equity = equity;
+
+    return data;
+  }
 })();
 </script>

From b2a08fa2ea7eb1df4010f49b2243dcfd396c16a4 Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 08:42:45 -0500
Subject: [PATCH 10/20] Fix timestamp consistency and add parseInt radix in
 feedback form JS

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 _pages/feedback.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/_pages/feedback.md b/_pages/feedback.md
index a9bd3bf00..e1d722020 100644
--- a/_pages/feedback.md
+++ b/_pages/feedback.md
@@ -226,9 +226,9 @@ permalink: "/feedback/"
     submitBtn.textContent = 'Sending…';
     errorMessage.hidden = true;
 
-    var data = buildFormData();
-    var meetupNumber = meetupSelect.value;
     var now = new Date();
+    var data = buildFormData(now);
+    var meetupNumber = meetupSelect.value;
     var dateStr = now.toISOString().slice(0, 10);
     var randomSuffix = Math.random().toString(36).slice(2, 8);
     var filename = 'submissions/' + dateStr + '-hacknight-' + meetupNumber + '-' + randomSuffix + '.json';
@@ -274,27 +274,27 @@ permalink: "/feedback/"
     return (el && el.value) ? el.value : undefined;
   }
 
-  function buildFormData() {
+  function buildFormData(now) {
     var firstTime = getRadio('first_time');
     var attendanceMode = getRadio('attendance_mode');
     var overallRating = getRadio('overall_rating');
 
     var data = {
       meetup_number: meetupSelect.value,
-      submitted_at: new Date().toISOString(),
+      submitted_at: now.toISOString(),
     };
 
     if (attendanceMode) data.attendance_mode = attendanceMode;
     if (firstTime !== undefined) data.first_time = firstTime === 'yes';
-    if (overallRating) data.overall_rating = parseInt(overallRating);
+    if (overallRating) data.overall_rating = parseInt(overallRating, 10);
 
     if (firstTime === 'yes') {
       var newAttendee = {};
       var fw = getRadio('felt_welcome');
       var un = getRadio('understood');
       var wr = getRadio('would_return');
-      if (fw) newAttendee.felt_welcome = parseInt(fw);
-      if (un) newAttendee.understood_what_was_happening = parseInt(un);
+      if (fw) newAttendee.felt_welcome = parseInt(fw, 10);
+      if (un) newAttendee.understood_what_was_happening = parseInt(un, 10);
       if (wr) newAttendee.would_return = wr;
       if (Object.keys(newAttendee).length) data.new_attendee = newAttendee;
     }
@@ -303,8 +303,8 @@ permalink: "/feedback/"
       var online = {};
       var av = getRadio('av_quality');
       var fi = getRadio('felt_included');
-      if (av) online.av_quality = parseInt(av);
-      if (fi) online.felt_included = parseInt(fi);
+      if (av) online.av_quality = parseInt(av, 10);
+      if (fi) online.felt_included = parseInt(fi, 10);
       if (Object.keys(online).length) data.online = online;
     }
 
@@ -326,8 +326,8 @@ permalink: "/feedback/"
     if (ar) equity.age_range = ar;
     if (ra) equity.racialized = ra;
     if (di) equity.disability = di;
-    if (bh) equity.belongs_here = parseInt(bh);
-    if (tr) equity.topics_relevant = parseInt(tr);
+    if (bh) equity.belongs_here = parseInt(bh, 10);
+    if (tr) equity.topics_relevant = parseInt(tr, 10);
     if (Object.keys(equity).length) data.equity = equity;
 
     return data;

From 3c0bfeeba0fde5d5753f8608d4651f306f6631bc Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 08:45:29 -0500
Subject: [PATCH 11/20] Add aria-labelledby to conditional sections and update
 CSS header date

---
 _pages/feedback.md    | 8 ++++----
 assets/css/custom.css | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/_pages/feedback.md b/_pages/feedback.md
index e1d722020..43abd2620 100644
--- a/_pages/feedback.md
+++ b/_pages/feedback.md
@@ -42,8 +42,8 @@ permalink: "/feedback/"
   </fieldset>
 
   <!-- Conditional: new attendee questions -->
-  <section id="new-attendee-section" hidden>
-    <h3>As a first-timer…</h3>
+  <section id="new-attendee-section" aria-labelledby="new-attendee-heading" hidden>
+    <h3 id="new-attendee-heading">As a first-timer…</h3>
 
     <fieldset>
       <legend>Did you feel welcome tonight?</legend>
@@ -78,8 +78,8 @@ permalink: "/feedback/"
   </section>
 
   <!-- Conditional: online attendee questions -->
-  <section id="online-section" hidden>
-    <h3>Online experience</h3>
+  <section id="online-section" aria-labelledby="online-heading" hidden>
+    <h3 id="online-heading">Online experience</h3>
 
     <fieldset>
       <legend>Could you hear and see what was happening clearly?</legend>
diff --git a/assets/css/custom.css b/assets/css/custom.css
index 9d19ca234..6b8afd69a 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,6 +1,6 @@
 /* ==========================================================================
    CUSTOM.CSS
-   Last Updated: 2025-06-13
+   Last Updated: 2026-02-24
    Purpose: Extend Pico.css with custom responsive layouts and components
    --------------------------------------------------------------------------
    TABLE OF CONTENTS

From e9eff258141d9098d0f5c1aaadce977c6563e783 Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 08:57:30 -0500
Subject: [PATCH 12/20] Redesign feedback form with civic editorial aesthetic
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces default Pico styling with a custom "The Public Square" design:
- DM Serif Display + DM Sans typography via Google Fonts
- Warm cream/white card layout with Toronto red (#C8102E) accent
- Radio groups converted to pill toggle buttons
- Rating scales converted to square numbered buttons with serif numerals
- Conditional sections use CSS max-height transitions (replaces hidden attr)
- Custom details/summary expanders with +/− toggle
- Intro text moved to front matter excerpt for clean layout rendering

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 _pages/feedback.md | 748 ++++++++++++++++++++++++++++++++++++---------
 1 file changed, 599 insertions(+), 149 deletions(-)

diff --git a/_pages/feedback.md b/_pages/feedback.md
index 43abd2620..1ed3d44a0 100644
--- a/_pages/feedback.md
+++ b/_pages/feedback.md
@@ -2,180 +2,628 @@
 title: "Share Your Feedback"
 layout: page
 permalink: "/feedback/"
+excerpt: "Help us make Civic Tech Toronto better. This form is completely anonymous — we never collect names or email addresses."
 ---
 
-<p>Help us make Civic Tech Toronto better. This form is completely anonymous — we never collect names or email addresses.</p>
+<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=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet">
+
+<style>
+/* ================================================================
+   FEEDBACK PAGE — "The Public Square"
+   Warm editorial civic design: DM Serif Display + DM Sans
+   Toronto red (#C8102E) accent on cream ground
+   ================================================================ */
+
+/* Override layout h1 with display serif */
+article > header hgroup h1 {
+  font-family: 'DM Serif Display', Georgia, serif;
+  font-weight: 400;
+  line-height: 1.1;
+}
+
+/* ---- Wrapper + custom properties ---- */
+.feedback-wrapper {
+  --fb-cream:       #F7F3EE;
+  --fb-white:       #FFFFFF;
+  --fb-ink:         #1A1A2E;
+  --fb-muted:       #6B6B7A;
+  --fb-red:         #C8102E;
+  --fb-red-light:   #FFF5F5;
+  --fb-red-mid:     #FDDDE2;
+  --fb-border:      #E2DDD8;
+  --fb-green:       #2D6A4F;
+  --fb-green-light: #EDFAF4;
+  --fb-radius:      12px;
+  --fb-serif:       'DM Serif Display', Georgia, serif;
+  --fb-sans:        'DM Sans', system-ui, sans-serif;
+
+  font-family: var(--fb-sans);
+  color: var(--fb-ink);
+  max-width: 600px;
+}
+
+/* ---- Card base ---- */
+.fb-card {
+  background: var(--fb-white);
+  border: 1.5px solid var(--fb-border);
+  border-radius: var(--fb-radius);
+  padding: 1.5rem;
+  margin-bottom: 1rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.fb-card:focus-within {
+  border-color: var(--fb-red);
+  box-shadow: 0 0 0 3px var(--fb-red-mid);
+}
+.fb-card fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+.fb-card fieldset + fieldset {
+  margin-top: 1.25rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid var(--fb-border);
+}
+
+/* ---- Legend ---- */
+.fb-card legend,
+.fb-conditional legend,
+.fb-expander-body legend {
+  font-family: var(--fb-sans);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--fb-ink);
+  margin-bottom: 0.75rem;
+  padding: 0;
+  float: none;
+  width: 100%;
+}
+
+/* ---- Meetup select ---- */
+.fb-select-label {
+  display: block;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--fb-muted);
+  margin-bottom: 0.5rem;
+}
+#meetup {
+  width: 100%;
+  font-family: var(--fb-sans);
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 0.75rem 2.5rem 0.75rem 1rem;
+  border: 2px solid var(--fb-border);
+  border-radius: 8px;
+  background-color: var(--fb-cream);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A1A2E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  color: var(--fb-ink);
+  appearance: none;
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+  margin: 0;
+}
+#meetup:focus {
+  outline: none;
+  border-color: var(--fb-red);
+}
+
+/* ---- Pill radio toggles ---- */
+.pill-group {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.pill-group label {
+  position: relative;
+  cursor: pointer;
+  display: inline-flex;
+}
+.pill-group input[type="radio"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+.pill-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1.25rem;
+  border: 1.5px solid var(--fb-border);
+  border-radius: 100px;
+  font-family: var(--fb-sans);
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--fb-muted);
+  background: var(--fb-cream);
+  transition: all 0.15s ease;
+  user-select: none;
+  white-space: nowrap;
+}
+.pill-group input[type="radio"]:checked + .pill-btn {
+  background: var(--fb-red);
+  border-color: var(--fb-red);
+  color: #fff;
+}
+.pill-group label:hover .pill-btn {
+  border-color: var(--fb-red);
+  color: var(--fb-red);
+}
+.pill-group input[type="radio"]:checked + .pill-btn:hover {
+  background: var(--fb-red);
+  color: #fff;
+}
+.pill-group input[type="radio"]:focus-visible + .pill-btn {
+  outline: 2px solid var(--fb-red);
+  outline-offset: 2px;
+}
+
+/* ---- Rating scale ---- */
+.rating-scale {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.25rem;
+}
+.rating-scale label {
+  position: relative;
+  cursor: pointer;
+  display: inline-flex;
+}
+.rating-scale input[type="radio"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+.rating-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border: 1.5px solid var(--fb-border);
+  border-radius: 8px;
+  font-family: var(--fb-serif);
+  font-size: 1.1rem;
+  color: var(--fb-muted);
+  background: var(--fb-cream);
+  transition: all 0.15s ease;
+  user-select: none;
+}
+.rating-scale input[type="radio"]:checked + .rating-btn {
+  background: var(--fb-red);
+  border-color: var(--fb-red);
+  color: #fff;
+  transform: scale(1.1);
+}
+.rating-scale label:hover .rating-btn {
+  border-color: var(--fb-red);
+  color: var(--fb-red);
+  background: var(--fb-red-light);
+}
+.rating-scale input[type="radio"]:focus-visible + .rating-btn {
+  outline: 2px solid var(--fb-red);
+  outline-offset: 2px;
+}
+.rating-hint {
+  font-size: 0.75rem;
+  color: var(--fb-muted);
+  margin: 0;
+}
+
+/* ---- Conditional sections (CSS-driven show/hide) ---- */
+.fb-conditional {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  margin-bottom: 0;
+  transition: max-height 0.4s ease, opacity 0.3s ease, margin-bottom 0.3s ease;
+}
+.fb-conditional.is-visible {
+  max-height: 1400px;
+  opacity: 1;
+  margin-bottom: 1rem;
+}
+.fb-conditional-inner {
+  padding: 1.25rem 1.5rem;
+  background: var(--fb-white);
+  border: 1.5px solid var(--fb-border);
+  border-left: 3px solid var(--fb-red);
+  border-radius: var(--fb-radius);
+}
+.fb-conditional h3 {
+  font-family: var(--fb-serif);
+  font-size: 1.05rem;
+  font-weight: 400;
+  font-style: italic;
+  color: var(--fb-red);
+  margin: 0 0 1.25rem;
+}
+.fb-conditional fieldset {
+  border: none;
+  padding: 0;
+  margin: 0 0 1.25rem;
+}
+.fb-conditional fieldset:last-child {
+  margin-bottom: 0;
+}
+.fb-conditional fieldset + fieldset {
+  padding-top: 1.25rem;
+  border-top: 1px solid var(--fb-border);
+}
+
+/* ---- Expanders (details/summary) ---- */
+.fb-expander {
+  border: 1.5px solid var(--fb-border);
+  border-radius: var(--fb-radius);
+  margin-bottom: 1rem;
+  overflow: hidden;
+}
+.fb-expander summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  font-family: var(--fb-sans);
+  font-weight: 500;
+  font-size: 0.9rem;
+  cursor: pointer;
+  list-style: none;
+  background: var(--fb-cream);
+  color: var(--fb-ink);
+  user-select: none;
+  transition: background 0.15s ease;
+}
+.fb-expander summary::-webkit-details-marker { display: none; }
+.fb-expander summary:hover { background: var(--fb-red-mid); }
+.fb-expander summary::after {
+  content: '+';
+  font-size: 1.4rem;
+  color: var(--fb-red);
+  font-weight: 300;
+  line-height: 1;
+}
+.fb-expander[open] summary::after { content: '−'; }
+
+.fb-expander-body {
+  padding: 1.5rem;
+  background: var(--fb-white);
+  border-top: 1.5px solid var(--fb-border);
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+.fb-expander-body > label {
+  display: block;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--fb-muted);
+  margin-bottom: -0.85rem; /* tighten label–input gap within the flex column */
+}
+.fb-expander-body textarea,
+.fb-expander-body input[type="text"] {
+  width: 100%;
+  font-family: var(--fb-sans);
+  font-size: 0.95rem;
+  padding: 0.65rem 0.9rem;
+  border: 1.5px solid var(--fb-border);
+  border-radius: 8px;
+  background: var(--fb-cream);
+  color: var(--fb-ink);
+  transition: border-color 0.2s ease;
+  resize: vertical;
+  box-sizing: border-box;
+  margin: 0;
+}
+.fb-expander-body textarea:focus,
+.fb-expander-body input[type="text"]:focus {
+  outline: none;
+  border-color: var(--fb-red);
+}
+.fb-expander-body select {
+  width: 100%;
+  font-family: var(--fb-sans);
+  font-size: 0.95rem;
+  padding: 0.65rem 2.5rem 0.65rem 0.9rem;
+  border: 1.5px solid var(--fb-border);
+  border-radius: 8px;
+  background-color: var(--fb-cream);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A1A2E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  color: var(--fb-ink);
+  appearance: none;
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+  margin: 0;
+}
+.fb-expander-body select:focus {
+  outline: none;
+  border-color: var(--fb-red);
+}
+.fb-expander-body fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+.privacy-note {
+  font-size: 0.8rem;
+  color: var(--fb-muted);
+  line-height: 1.5;
+  margin: 0;
+  padding: 0.75rem;
+  background: var(--fb-cream);
+  border-radius: 6px;
+}
+
+/* ---- Submit button ---- */
+.fb-submit-row { margin-top: 1.5rem; }
+#submit-btn {
+  width: 100%;
+  font-family: var(--fb-sans);
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 1rem 2rem;
+  background: var(--fb-red);
+  color: #fff;
+  border: none;
+  border-radius: var(--fb-radius);
+  cursor: pointer;
+  letter-spacing: 0.03em;
+  transition: background 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
+  margin: 0;
+}
+#submit-btn:not(:disabled):hover {
+  background: #A60D26;
+  transform: translateY(-1px);
+}
+#submit-btn:not(:disabled):active { transform: translateY(0); }
+#submit-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ---- Status messages ---- */
+#success-message {
+  text-align: center;
+  padding: 3rem 2rem;
+  background: var(--fb-green-light);
+  border: 1.5px solid var(--fb-green);
+  border-radius: var(--fb-radius);
+}
+#success-message p {
+  color: var(--fb-green);
+  font-family: var(--fb-sans);
+  font-weight: 600;
+  font-size: 1.1rem;
+  margin: 0;
+}
+#success-message p::before { content: '✓  '; }
+
+#error-message {
+  padding: 1rem 1.25rem;
+  background: var(--fb-red-light);
+  border: 1.5px solid var(--fb-red);
+  border-radius: 8px;
+  margin-top: 0.75rem;
+}
+#error-message p {
+  color: var(--fb-red);
+  font-size: 0.9rem;
+  margin: 0;
+}
+#error-message a {
+  color: var(--fb-red);
+  font-weight: 600;
+}
+</style>
+
+<div class="feedback-wrapper">
 
 <form id="feedback-form" novalidate>
 
-  <label for="meetup">Which meetup are you giving feedback on?</label>
-  <select id="meetup" name="meetup">
-    <option value="">Select a meetup…</option>
-    {% assign recent_meetups = site.meetups | sort: "date" | reverse %}
-    {% for meetup in recent_meetups limit:10 %}
-    <option value="{{ meetup.number }}">Hacknight #{{ meetup.number }} – {{ meetup.date | date: "%B %d, %Y" }}{% if meetup.topic %} – {{ meetup.topic }}{% endif %}</option>
-    {% endfor %}
-  </select>
-
-  <fieldset>
-    <legend>Were you attending in person or online?</legend>
-    <label><input type="radio" name="attendance_mode" value="in-person"> In Person</label>
-    <label><input type="radio" name="attendance_mode" value="online"> Online</label>
-  </fieldset>
-
-  <fieldset>
-    <legend>Is this your first time at Civic Tech Toronto?</legend>
-    <label><input type="radio" name="first_time" value="yes"> Yes</label>
-    <label><input type="radio" name="first_time" value="no"> No</label>
-  </fieldset>
-
-  <fieldset>
-    <legend>How was tonight overall?</legend>
-    <div class="rating-row">
-      <label><input type="radio" name="overall_rating" value="1"> 1</label>
-      <label><input type="radio" name="overall_rating" value="2"> 2</label>
-      <label><input type="radio" name="overall_rating" value="3"> 3</label>
-      <label><input type="radio" name="overall_rating" value="4"> 4</label>
-      <label><input type="radio" name="overall_rating" value="5"> 5</label>
-    </div>
-    <small>1 = poor, 5 = excellent</small>
-  </fieldset>
-
-  <!-- Conditional: new attendee questions -->
-  <section id="new-attendee-section" aria-labelledby="new-attendee-heading" hidden>
-    <h3 id="new-attendee-heading">As a first-timer…</h3>
+  <div class="fb-card">
+    <label class="fb-select-label" for="meetup">Which meetup are you rating?</label>
+    <select id="meetup" name="meetup">
+      <option value="">Select a meetup…</option>
+      {% assign recent_meetups = site.meetups | sort: "date" | reverse %}
+      {% for meetup in recent_meetups limit:10 %}<option value="{{ meetup.number }}">Hacknight #{{ meetup.number }} – {{ meetup.date | date: "%B %d, %Y" }}{% if meetup.topic %} – {{ meetup.topic }}{% endif %}</option>{% endfor %}
+    </select>
+  </div>
 
+  <div class="fb-card">
     <fieldset>
-      <legend>Did you feel welcome tonight?</legend>
-      <div class="rating-row">
-        <label><input type="radio" name="felt_welcome" value="1"> 1</label>
-        <label><input type="radio" name="felt_welcome" value="2"> 2</label>
-        <label><input type="radio" name="felt_welcome" value="3"> 3</label>
-        <label><input type="radio" name="felt_welcome" value="4"> 4</label>
-        <label><input type="radio" name="felt_welcome" value="5"> 5</label>
+      <legend>Were you attending in person or online?</legend>
+      <div class="pill-group">
+        <label><input type="radio" name="attendance_mode" value="in-person"><span class="pill-btn">In Person</span></label>
+        <label><input type="radio" name="attendance_mode" value="online"><span class="pill-btn">Online</span></label>
       </div>
-      <small>1 = not at all, 5 = very welcome</small>
     </fieldset>
 
     <fieldset>
-      <legend>Did you understand what was going on?</legend>
-      <div class="rating-row">
-        <label><input type="radio" name="understood" value="1"> 1</label>
-        <label><input type="radio" name="understood" value="2"> 2</label>
-        <label><input type="radio" name="understood" value="3"> 3</label>
-        <label><input type="radio" name="understood" value="4"> 4</label>
-        <label><input type="radio" name="understood" value="5"> 5</label>
+      <legend>Is this your first time at Civic Tech Toronto?</legend>
+      <div class="pill-group">
+        <label><input type="radio" name="first_time" value="yes"><span class="pill-btn">Yes, first time</span></label>
+        <label><input type="radio" name="first_time" value="no"><span class="pill-btn">I've been before</span></label>
       </div>
-      <small>1 = confused, 5 = totally clear</small>
     </fieldset>
+  </div>
 
+  <div class="fb-card">
     <fieldset>
-      <legend>Would you come back?</legend>
-      <label><input type="radio" name="would_return" value="yes"> Yes</label>
-      <label><input type="radio" name="would_return" value="maybe"> Maybe</label>
-      <label><input type="radio" name="would_return" value="no"> No</label>
+      <legend>How was tonight overall?</legend>
+      <div class="rating-scale">
+        <label><input type="radio" name="overall_rating" value="1"><span class="rating-btn">1</span></label>
+        <label><input type="radio" name="overall_rating" value="2"><span class="rating-btn">2</span></label>
+        <label><input type="radio" name="overall_rating" value="3"><span class="rating-btn">3</span></label>
+        <label><input type="radio" name="overall_rating" value="4"><span class="rating-btn">4</span></label>
+        <label><input type="radio" name="overall_rating" value="5"><span class="rating-btn">5</span></label>
+      </div>
+      <p class="rating-hint">1 = poor &nbsp;&nbsp; 5 = excellent</p>
     </fieldset>
+  </div>
+
+  <!-- Conditional: new attendee questions -->
+  <section id="new-attendee-section" class="fb-conditional" aria-labelledby="new-attendee-heading">
+    <div class="fb-conditional-inner">
+      <h3 id="new-attendee-heading">As a first-timer…</h3>
+
+      <fieldset>
+        <legend>Did you feel welcome tonight?</legend>
+        <div class="rating-scale">
+          <label><input type="radio" name="felt_welcome" value="1"><span class="rating-btn">1</span></label>
+          <label><input type="radio" name="felt_welcome" value="2"><span class="rating-btn">2</span></label>
+          <label><input type="radio" name="felt_welcome" value="3"><span class="rating-btn">3</span></label>
+          <label><input type="radio" name="felt_welcome" value="4"><span class="rating-btn">4</span></label>
+          <label><input type="radio" name="felt_welcome" value="5"><span class="rating-btn">5</span></label>
+        </div>
+        <p class="rating-hint">1 = not at all &nbsp;&nbsp; 5 = very welcome</p>
+      </fieldset>
+
+      <fieldset>
+        <legend>Did you understand what was going on?</legend>
+        <div class="rating-scale">
+          <label><input type="radio" name="understood" value="1"><span class="rating-btn">1</span></label>
+          <label><input type="radio" name="understood" value="2"><span class="rating-btn">2</span></label>
+          <label><input type="radio" name="understood" value="3"><span class="rating-btn">3</span></label>
+          <label><input type="radio" name="understood" value="4"><span class="rating-btn">4</span></label>
+          <label><input type="radio" name="understood" value="5"><span class="rating-btn">5</span></label>
+        </div>
+        <p class="rating-hint">1 = confused &nbsp;&nbsp; 5 = totally clear</p>
+      </fieldset>
+
+      <fieldset>
+        <legend>Would you come back?</legend>
+        <div class="pill-group">
+          <label><input type="radio" name="would_return" value="yes"><span class="pill-btn">Yes</span></label>
+          <label><input type="radio" name="would_return" value="maybe"><span class="pill-btn">Maybe</span></label>
+          <label><input type="radio" name="would_return" value="no"><span class="pill-btn">No</span></label>
+        </div>
+      </fieldset>
+    </div>
   </section>
 
   <!-- Conditional: online attendee questions -->
-  <section id="online-section" aria-labelledby="online-heading" hidden>
-    <h3 id="online-heading">Online experience</h3>
-
-    <fieldset>
-      <legend>Could you hear and see what was happening clearly?</legend>
-      <div class="rating-row">
-        <label><input type="radio" name="av_quality" value="1"> 1</label>
-        <label><input type="radio" name="av_quality" value="2"> 2</label>
-        <label><input type="radio" name="av_quality" value="3"> 3</label>
-        <label><input type="radio" name="av_quality" value="4"> 4</label>
-        <label><input type="radio" name="av_quality" value="5"> 5</label>
-      </div>
-      <small>1 = poor, 5 = excellent</small>
-    </fieldset>
-
-    <fieldset>
-      <legend>Did you feel like an equal participant, not just a viewer?</legend>
-      <div class="rating-row">
-        <label><input type="radio" name="felt_included" value="1"> 1</label>
-        <label><input type="radio" name="felt_included" value="2"> 2</label>
-        <label><input type="radio" name="felt_included" value="3"> 3</label>
-        <label><input type="radio" name="felt_included" value="4"> 4</label>
-        <label><input type="radio" name="felt_included" value="5"> 5</label>
-      </div>
-      <small>1 = not at all, 5 = fully included</small>
-    </fieldset>
+  <section id="online-section" class="fb-conditional" aria-labelledby="online-heading">
+    <div class="fb-conditional-inner">
+      <h3 id="online-heading">Online experience</h3>
+
+      <fieldset>
+        <legend>Could you hear and see what was happening clearly?</legend>
+        <div class="rating-scale">
+          <label><input type="radio" name="av_quality" value="1"><span class="rating-btn">1</span></label>
+          <label><input type="radio" name="av_quality" value="2"><span class="rating-btn">2</span></label>
+          <label><input type="radio" name="av_quality" value="3"><span class="rating-btn">3</span></label>
+          <label><input type="radio" name="av_quality" value="4"><span class="rating-btn">4</span></label>
+          <label><input type="radio" name="av_quality" value="5"><span class="rating-btn">5</span></label>
+        </div>
+        <p class="rating-hint">1 = poor &nbsp;&nbsp; 5 = excellent</p>
+      </fieldset>
+
+      <fieldset>
+        <legend>Did you feel like an equal participant, not just a viewer?</legend>
+        <div class="rating-scale">
+          <label><input type="radio" name="felt_included" value="1"><span class="rating-btn">1</span></label>
+          <label><input type="radio" name="felt_included" value="2"><span class="rating-btn">2</span></label>
+          <label><input type="radio" name="felt_included" value="3"><span class="rating-btn">3</span></label>
+          <label><input type="radio" name="felt_included" value="4"><span class="rating-btn">4</span></label>
+          <label><input type="radio" name="felt_included" value="5"><span class="rating-btn">5</span></label>
+        </div>
+        <p class="rating-hint">1 = not at all &nbsp;&nbsp; 5 = fully included</p>
+      </fieldset>
+    </div>
   </section>
 
   <!-- Optional expander: general feedback -->
-  <details>
-    <summary>Tell us more (optional)</summary>
-
-    <label for="liked">What worked well tonight?</label>
-    <textarea id="liked" name="liked" rows="3"></textarea>
-
-    <label for="improve">What could be better?</label>
-    <textarea id="improve" name="improve" rows="3"></textarea>
+  <details class="fb-expander">
+    <summary>Tell us more <span style="font-size:0.8em;color:var(--fb-muted);font-weight:400;">(optional)</span></summary>
+    <div class="fb-expander-body">
+      <label for="liked">What worked well tonight?</label>
+      <textarea id="liked" name="liked" rows="3"></textarea>
+      <label for="improve">What could be better?</label>
+      <textarea id="improve" name="improve" rows="3"></textarea>
+    </div>
   </details>
 
   <!-- Optional expander: equity questions -->
-  <details>
-    <summary>About you (optional)</summary>
-    <p><small>All fields in this section are completely optional and anonymous. This information helps us understand who is showing up and whether everyone feels included.</small></p>
-
-    <label for="gender_identity">How do you describe your gender identity?</label>
-    <input type="text" id="gender_identity" name="gender_identity" placeholder="Your own words">
-
-    <label for="age_range">Age range</label>
-    <select id="age_range" name="age_range">
-      <option value="">Prefer not to say</option>
-      <option value="under-18">Under 18</option>
-      <option value="18-24">18–24</option>
-      <option value="25-34">25–34</option>
-      <option value="35-44">35–44</option>
-      <option value="45-54">45–54</option>
-      <option value="55+">55+</option>
-    </select>
-
-    <fieldset>
-      <legend>Do you identify as a racialized person?</legend>
-      <label><input type="radio" name="racialized" value="yes"> Yes</label>
-      <label><input type="radio" name="racialized" value="no"> No</label>
-      <label><input type="radio" name="racialized" value="prefer-not-to-say"> Prefer not to say</label>
-    </fieldset>
-
-    <fieldset>
-      <legend>Do you have a disability or chronic condition?</legend>
-      <label><input type="radio" name="disability" value="yes"> Yes</label>
-      <label><input type="radio" name="disability" value="no"> No</label>
-      <label><input type="radio" name="disability" value="prefer-not-to-say"> Prefer not to say</label>
-    </fieldset>
-
-    <fieldset>
-      <legend>Do you feel like someone like you belongs in this space?</legend>
-      <div class="rating-row">
-        <label><input type="radio" name="belongs_here" value="1"> 1</label>
-        <label><input type="radio" name="belongs_here" value="2"> 2</label>
-        <label><input type="radio" name="belongs_here" value="3"> 3</label>
-        <label><input type="radio" name="belongs_here" value="4"> 4</label>
-        <label><input type="radio" name="belongs_here" value="5"> 5</label>
-      </div>
-      <small>1 = not at all, 5 = absolutely</small>
-    </fieldset>
-
-    <fieldset>
-      <legend>Were tonight's topics or speakers relevant to your community or experience?</legend>
-      <div class="rating-row">
-        <label><input type="radio" name="topics_relevant" value="1"> 1</label>
-        <label><input type="radio" name="topics_relevant" value="2"> 2</label>
-        <label><input type="radio" name="topics_relevant" value="3"> 3</label>
-        <label><input type="radio" name="topics_relevant" value="4"> 4</label>
-        <label><input type="radio" name="topics_relevant" value="5"> 5</label>
-      </div>
-      <small>1 = not relevant, 5 = very relevant</small>
-    </fieldset>
+  <details class="fb-expander">
+    <summary>About you <span style="font-size:0.8em;color:var(--fb-muted);font-weight:400;">(optional)</span></summary>
+    <div class="fb-expander-body">
+      <p class="privacy-note">All fields in this section are completely optional and anonymous. This information helps us understand who is showing up and whether everyone feels included.</p>
+
+      <label for="gender_identity">How do you describe your gender identity?</label>
+      <input type="text" id="gender_identity" name="gender_identity" placeholder="Your own words">
+
+      <label for="age_range">Age range</label>
+      <select id="age_range" name="age_range">
+        <option value="">Prefer not to say</option>
+        <option value="under-18">Under 18</option>
+        <option value="18-24">18–24</option>
+        <option value="25-34">25–34</option>
+        <option value="35-44">35–44</option>
+        <option value="45-54">45–54</option>
+        <option value="55+">55+</option>
+      </select>
+
+      <fieldset>
+        <legend>Do you identify as a racialized person?</legend>
+        <div class="pill-group">
+          <label><input type="radio" name="racialized" value="yes"><span class="pill-btn">Yes</span></label>
+          <label><input type="radio" name="racialized" value="no"><span class="pill-btn">No</span></label>
+          <label><input type="radio" name="racialized" value="prefer-not-to-say"><span class="pill-btn">Prefer not to say</span></label>
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend>Do you have a disability or chronic condition?</legend>
+        <div class="pill-group">
+          <label><input type="radio" name="disability" value="yes"><span class="pill-btn">Yes</span></label>
+          <label><input type="radio" name="disability" value="no"><span class="pill-btn">No</span></label>
+          <label><input type="radio" name="disability" value="prefer-not-to-say"><span class="pill-btn">Prefer not to say</span></label>
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend>Do you feel like someone like you belongs in this space?</legend>
+        <div class="rating-scale">
+          <label><input type="radio" name="belongs_here" value="1"><span class="rating-btn">1</span></label>
+          <label><input type="radio" name="belongs_here" value="2"><span class="rating-btn">2</span></label>
+          <label><input type="radio" name="belongs_here" value="3"><span class="rating-btn">3</span></label>
+          <label><input type="radio" name="belongs_here" value="4"><span class="rating-btn">4</span></label>
+          <label><input type="radio" name="belongs_here" value="5"><span class="rating-btn">5</span></label>
+        </div>
+        <p class="rating-hint">1 = not at all &nbsp;&nbsp; 5 = absolutely</p>
+      </fieldset>
+
+      <fieldset>
+        <legend>Were tonight's topics or speakers relevant to your community or experience?</legend>
+        <div class="rating-scale">
+          <label><input type="radio" name="topics_relevant" value="1"><span class="rating-btn">1</span></label>
+          <label><input type="radio" name="topics_relevant" value="2"><span class="rating-btn">2</span></label>
+          <label><input type="radio" name="topics_relevant" value="3"><span class="rating-btn">3</span></label>
+          <label><input type="radio" name="topics_relevant" value="4"><span class="rating-btn">4</span></label>
+          <label><input type="radio" name="topics_relevant" value="5"><span class="rating-btn">5</span></label>
+        </div>
+        <p class="rating-hint">1 = not relevant &nbsp;&nbsp; 5 = very relevant</p>
+      </fieldset>
+    </div>
   </details>
 
-  <button type="submit" id="submit-btn" disabled>Submit Feedback</button>
+  <div class="fb-submit-row">
+    <button type="submit" id="submit-btn" disabled>Submit Feedback</button>
+  </div>
 
 </form>
 
@@ -187,6 +635,8 @@ permalink: "/feedback/"
   <p>Something went wrong. You can try again or email <a href="mailto:hi@civictech.ca">hi@civictech.ca</a>.</p>
 </div>
 
+</div><!-- /.feedback-wrapper -->
+
 <script>
 (function () {
   var GITHUB_TOKEN = '{{ site.feedback_token }}';
@@ -208,14 +658,14 @@ permalink: "/feedback/"
   // Show/hide new-attendee section
   form.querySelectorAll('input[name="first_time"]').forEach(function (input) {
     input.addEventListener('change', function () {
-      newAttendeeSection.hidden = (input.value !== 'yes');
+      newAttendeeSection.classList.toggle('is-visible', input.value === 'yes');
     });
   });
 
   // Show/hide online section
   form.querySelectorAll('input[name="attendance_mode"]').forEach(function (input) {
     input.addEventListener('change', function () {
-      onlineSection.hidden = (input.value !== 'online');
+      onlineSection.classList.toggle('is-visible', input.value === 'online');
     });
   });
 

From c4166e550d509ea7bec68b17712b3d2baddc4ca6 Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 09:24:15 -0500
Subject: [PATCH 13/20] Replace meetup dropdown with Tuesday-only date picker

Removes the dependency on the archives submodule for the feedback form.
Instead of a dropdown limited to meetups in the archives, uses a date
input defaulting to the most recent Tuesday. step=7 with a Tuesday min
restricts the browser calendar to Tuesdays; JS validates on change as a
fallback. Stores hacknight_date (ISO date string) instead of meetup_number
in the submitted JSON.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 _pages/feedback.md | 59 +++++++++++++++++++++++++++++-----------------
 1 file changed, 37 insertions(+), 22 deletions(-)

diff --git a/_pages/feedback.md b/_pages/feedback.md
index 1ed3d44a0..9b099f40d 100644
--- a/_pages/feedback.md
+++ b/_pages/feedback.md
@@ -82,7 +82,7 @@ article > header hgroup h1 {
   width: 100%;
 }
 
-/* ---- Meetup select ---- */
+/* ---- Hacknight date picker ---- */
 .fb-select-label {
   display: block;
   font-size: 0.7rem;
@@ -97,16 +97,11 @@ article > header hgroup h1 {
   font-family: var(--fb-sans);
   font-size: 1rem;
   font-weight: 500;
-  padding: 0.75rem 2.5rem 0.75rem 1rem;
+  padding: 0.75rem 1rem;
   border: 2px solid var(--fb-border);
   border-radius: 8px;
   background-color: var(--fb-cream);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A1A2E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 1rem center;
   color: var(--fb-ink);
-  appearance: none;
-  cursor: pointer;
   transition: border-color 0.2s ease;
   margin: 0;
 }
@@ -435,12 +430,8 @@ article > header hgroup h1 {
 <form id="feedback-form" novalidate>
 
   <div class="fb-card">
-    <label class="fb-select-label" for="meetup">Which meetup are you rating?</label>
-    <select id="meetup" name="meetup">
-      <option value="">Select a meetup…</option>
-      {% assign recent_meetups = site.meetups | sort: "date" | reverse %}
-      {% for meetup in recent_meetups limit:10 %}<option value="{{ meetup.number }}">Hacknight #{{ meetup.number }} – {{ meetup.date | date: "%B %d, %Y" }}{% if meetup.topic %} – {{ meetup.topic }}{% endif %}</option>{% endfor %}
-    </select>
+    <label class="fb-select-label" for="meetup">Which Tuesday are you giving feedback on?</label>
+    <input type="date" id="meetup" name="meetup">
   </div>
 
   <div class="fb-card">
@@ -644,15 +635,40 @@ article > header hgroup h1 {
 
   var form = document.getElementById('feedback-form');
   var submitBtn = document.getElementById('submit-btn');
-  var meetupSelect = document.getElementById('meetup');
+  var meetupInput = document.getElementById('meetup');
   var newAttendeeSection = document.getElementById('new-attendee-section');
   var onlineSection = document.getElementById('online-section');
   var successMessage = document.getElementById('success-message');
   var errorMessage = document.getElementById('error-message');
 
-  // Enable submit button once a meetup is selected
-  meetupSelect.addEventListener('change', function () {
-    submitBtn.disabled = !meetupSelect.value;
+  // Initialise date picker: default to most recent Tuesday, restrict to Tuesdays
+  function toLocalDateString(d) {
+    // Avoids UTC-offset errors that toISOString() causes for western timezones
+    var y = d.getFullYear();
+    var m = String(d.getMonth() + 1).padStart(2, '0');
+    var day = String(d.getDate()).padStart(2, '0');
+    return y + '-' + m + '-' + day;
+  }
+  function getMostRecentTuesday() {
+    var d = new Date();
+    var daysBack = (d.getDay() + 5) % 7; // days since last Tuesday (0 when today is Tue)
+    d.setDate(d.getDate() - daysBack);
+    return toLocalDateString(d);
+  }
+  var recentTuesday = getMostRecentTuesday();
+  meetupInput.value = recentTuesday;
+  // min is 10 weeks before the most recent Tuesday (still a Tuesday, so step=7 aligns)
+  var minDate = new Date(recentTuesday);
+  minDate.setDate(minDate.getDate() - 70);
+  meetupInput.setAttribute('min', toLocalDateString(minDate));
+  meetupInput.setAttribute('step', '7');
+  submitBtn.disabled = false;
+
+  // Validate selection is a Tuesday (fallback for browsers that ignore step)
+  meetupInput.addEventListener('change', function () {
+    var parts = meetupInput.value.split('-');
+    var dayOfWeek = new Date(parseInt(parts[0], 10), parseInt(parts[1], 10) - 1, parseInt(parts[2], 10)).getDay();
+    submitBtn.disabled = !meetupInput.value || dayOfWeek !== 2;
   });
 
   // Show/hide new-attendee section
@@ -678,10 +694,9 @@ article > header hgroup h1 {
 
     var now = new Date();
     var data = buildFormData(now);
-    var meetupNumber = meetupSelect.value;
-    var dateStr = now.toISOString().slice(0, 10);
+    var hacknightDate = meetupInput.value;
     var randomSuffix = Math.random().toString(36).slice(2, 8);
-    var filename = 'submissions/' + dateStr + '-hacknight-' + meetupNumber + '-' + randomSuffix + '.json';
+    var filename = 'submissions/' + hacknightDate + '-feedback-' + randomSuffix + '.json';
     var jsonStr = JSON.stringify(data, null, 2);
     // btoa with unicode support
     var encoded = btoa(unescape(encodeURIComponent(jsonStr)));
@@ -693,7 +708,7 @@ article > header hgroup h1 {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify({
-        message: 'Add feedback for hacknight #' + meetupNumber,
+        message: 'Add feedback for hacknight on ' + hacknightDate,
         content: encoded
       })
     })
@@ -730,7 +745,7 @@ article > header hgroup h1 {
     var overallRating = getRadio('overall_rating');
 
     var data = {
-      meetup_number: meetupSelect.value,
+      hacknight_date: meetupInput.value,
       submitted_at: now.toISOString(),
     };
 

From 8e965054b6daa61d45571e29683082d88ca22f90 Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 09:28:46 -0500
Subject: [PATCH 14/20] Use Pico CSS variables for feedback form colours and
 remove custom fonts

Removes Google Fonts (DM Serif Display, DM Sans) and all custom --fb-*
colour variables. Replaces them with --pico-primary, --pico-card-background-color,
--pico-muted-*, etc. so the form matches the site's pumpkin theme and
respects dark/light mode automatically. Success/error states keep hardcoded
semantic colours (green/red) as Pico has no equivalent variables for these.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 _pages/feedback.md | 204 ++++++++++++++++++---------------------------
 1 file changed, 82 insertions(+), 122 deletions(-)

diff --git a/_pages/feedback.md b/_pages/feedback.md
index 9b099f40d..099737c85 100644
--- a/_pages/feedback.md
+++ b/_pages/feedback.md
@@ -5,57 +5,29 @@ permalink: "/feedback/"
 excerpt: "Help us make Civic Tech Toronto better. This form is completely anonymous — we never collect names or email addresses."
 ---
 
-<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=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet">
-
 <style>
 /* ================================================================
-   FEEDBACK PAGE — "The Public Square"
-   Warm editorial civic design: DM Serif Display + DM Sans
-   Toronto red (#C8102E) accent on cream ground
+   FEEDBACK PAGE STYLES
+   Uses Pico CSS variables to match the rest of the site.
    ================================================================ */
 
-/* Override layout h1 with display serif */
-article > header hgroup h1 {
-  font-family: 'DM Serif Display', Georgia, serif;
-  font-weight: 400;
-  line-height: 1.1;
-}
-
-/* ---- Wrapper + custom properties ---- */
+/* ---- Wrapper ---- */
 .feedback-wrapper {
-  --fb-cream:       #F7F3EE;
-  --fb-white:       #FFFFFF;
-  --fb-ink:         #1A1A2E;
-  --fb-muted:       #6B6B7A;
-  --fb-red:         #C8102E;
-  --fb-red-light:   #FFF5F5;
-  --fb-red-mid:     #FDDDE2;
-  --fb-border:      #E2DDD8;
-  --fb-green:       #2D6A4F;
-  --fb-green-light: #EDFAF4;
-  --fb-radius:      12px;
-  --fb-serif:       'DM Serif Display', Georgia, serif;
-  --fb-sans:        'DM Sans', system-ui, sans-serif;
-
-  font-family: var(--fb-sans);
-  color: var(--fb-ink);
   max-width: 600px;
 }
 
 /* ---- Card base ---- */
 .fb-card {
-  background: var(--fb-white);
-  border: 1.5px solid var(--fb-border);
-  border-radius: var(--fb-radius);
+  background: var(--pico-card-background-color);
+  border: 1.5px solid var(--pico-muted-border-color);
+  border-radius: var(--pico-border-radius);
   padding: 1.5rem;
   margin-bottom: 1rem;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 .fb-card:focus-within {
-  border-color: var(--fb-red);
-  box-shadow: 0 0 0 3px var(--fb-red-mid);
+  border-color: var(--pico-primary);
+  box-shadow: 0 0 0 3px var(--pico-primary-background);
 }
 .fb-card fieldset {
   border: none;
@@ -65,17 +37,16 @@ article > header hgroup h1 {
 .fb-card fieldset + fieldset {
   margin-top: 1.25rem;
   padding-top: 1.25rem;
-  border-top: 1px solid var(--fb-border);
+  border-top: 1px solid var(--pico-muted-border-color);
 }
 
 /* ---- Legend ---- */
 .fb-card legend,
 .fb-conditional legend,
 .fb-expander-body legend {
-  font-family: var(--fb-sans);
   font-size: 0.875rem;
   font-weight: 600;
-  color: var(--fb-ink);
+  color: var(--pico-color);
   margin-bottom: 0.75rem;
   padding: 0;
   float: none;
@@ -89,25 +60,24 @@ article > header hgroup h1 {
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: var(--fb-muted);
+  color: var(--pico-muted-color);
   margin-bottom: 0.5rem;
 }
 #meetup {
   width: 100%;
-  font-family: var(--fb-sans);
   font-size: 1rem;
   font-weight: 500;
   padding: 0.75rem 1rem;
-  border: 2px solid var(--fb-border);
-  border-radius: 8px;
-  background-color: var(--fb-cream);
-  color: var(--fb-ink);
+  border: 2px solid var(--pico-muted-border-color);
+  border-radius: var(--pico-border-radius);
+  background-color: var(--pico-form-element-background-color);
+  color: var(--pico-color);
   transition: border-color 0.2s ease;
   margin: 0;
 }
 #meetup:focus {
   outline: none;
-  border-color: var(--fb-red);
+  border-color: var(--pico-primary);
 }
 
 /* ---- Pill radio toggles ---- */
@@ -132,32 +102,31 @@ article > header hgroup h1 {
   display: inline-flex;
   align-items: center;
   padding: 0.5rem 1.25rem;
-  border: 1.5px solid var(--fb-border);
+  border: 1.5px solid var(--pico-muted-border-color);
   border-radius: 100px;
-  font-family: var(--fb-sans);
   font-size: 0.9rem;
   font-weight: 500;
-  color: var(--fb-muted);
-  background: var(--fb-cream);
+  color: var(--pico-muted-color);
+  background: var(--pico-muted-background-color);
   transition: all 0.15s ease;
   user-select: none;
   white-space: nowrap;
 }
 .pill-group input[type="radio"]:checked + .pill-btn {
-  background: var(--fb-red);
-  border-color: var(--fb-red);
-  color: #fff;
+  background: var(--pico-primary);
+  border-color: var(--pico-primary);
+  color: var(--pico-primary-inverse);
 }
 .pill-group label:hover .pill-btn {
-  border-color: var(--fb-red);
-  color: var(--fb-red);
+  border-color: var(--pico-primary);
+  color: var(--pico-primary);
 }
 .pill-group input[type="radio"]:checked + .pill-btn:hover {
-  background: var(--fb-red);
-  color: #fff;
+  background: var(--pico-primary);
+  color: var(--pico-primary-inverse);
 }
 .pill-group input[type="radio"]:focus-visible + .pill-btn {
-  outline: 2px solid var(--fb-red);
+  outline: 2px solid var(--pico-primary);
   outline-offset: 2px;
 }
 
@@ -186,33 +155,32 @@ article > header hgroup h1 {
   justify-content: center;
   width: 2.75rem;
   height: 2.75rem;
-  border: 1.5px solid var(--fb-border);
-  border-radius: 8px;
-  font-family: var(--fb-serif);
+  border: 1.5px solid var(--pico-muted-border-color);
+  border-radius: var(--pico-border-radius);
   font-size: 1.1rem;
-  color: var(--fb-muted);
-  background: var(--fb-cream);
+  color: var(--pico-muted-color);
+  background: var(--pico-muted-background-color);
   transition: all 0.15s ease;
   user-select: none;
 }
 .rating-scale input[type="radio"]:checked + .rating-btn {
-  background: var(--fb-red);
-  border-color: var(--fb-red);
-  color: #fff;
+  background: var(--pico-primary);
+  border-color: var(--pico-primary);
+  color: var(--pico-primary-inverse);
   transform: scale(1.1);
 }
 .rating-scale label:hover .rating-btn {
-  border-color: var(--fb-red);
-  color: var(--fb-red);
-  background: var(--fb-red-light);
+  border-color: var(--pico-primary);
+  color: var(--pico-primary);
+  background: var(--pico-primary-background);
 }
 .rating-scale input[type="radio"]:focus-visible + .rating-btn {
-  outline: 2px solid var(--fb-red);
+  outline: 2px solid var(--pico-primary);
   outline-offset: 2px;
 }
 .rating-hint {
   font-size: 0.75rem;
-  color: var(--fb-muted);
+  color: var(--pico-muted-color);
   margin: 0;
 }
 
@@ -231,17 +199,15 @@ article > header hgroup h1 {
 }
 .fb-conditional-inner {
   padding: 1.25rem 1.5rem;
-  background: var(--fb-white);
-  border: 1.5px solid var(--fb-border);
-  border-left: 3px solid var(--fb-red);
-  border-radius: var(--fb-radius);
+  background: var(--pico-card-background-color);
+  border: 1.5px solid var(--pico-muted-border-color);
+  border-left: 3px solid var(--pico-primary);
+  border-radius: var(--pico-border-radius);
 }
 .fb-conditional h3 {
-  font-family: var(--fb-serif);
   font-size: 1.05rem;
-  font-weight: 400;
-  font-style: italic;
-  color: var(--fb-red);
+  font-weight: 600;
+  color: var(--pico-primary);
   margin: 0 0 1.25rem;
 }
 .fb-conditional fieldset {
@@ -254,13 +220,13 @@ article > header hgroup h1 {
 }
 .fb-conditional fieldset + fieldset {
   padding-top: 1.25rem;
-  border-top: 1px solid var(--fb-border);
+  border-top: 1px solid var(--pico-muted-border-color);
 }
 
 /* ---- Expanders (details/summary) ---- */
 .fb-expander {
-  border: 1.5px solid var(--fb-border);
-  border-radius: var(--fb-radius);
+  border: 1.5px solid var(--pico-muted-border-color);
+  border-radius: var(--pico-border-radius);
   margin-bottom: 1rem;
   overflow: hidden;
 }
@@ -269,22 +235,21 @@ article > header hgroup h1 {
   align-items: center;
   justify-content: space-between;
   padding: 1rem 1.5rem;
-  font-family: var(--fb-sans);
   font-weight: 500;
   font-size: 0.9rem;
   cursor: pointer;
   list-style: none;
-  background: var(--fb-cream);
-  color: var(--fb-ink);
+  background: var(--pico-muted-background-color);
+  color: var(--pico-color);
   user-select: none;
   transition: background 0.15s ease;
 }
 .fb-expander summary::-webkit-details-marker { display: none; }
-.fb-expander summary:hover { background: var(--fb-red-mid); }
+.fb-expander summary:hover { background: var(--pico-primary-background); }
 .fb-expander summary::after {
   content: '+';
   font-size: 1.4rem;
-  color: var(--fb-red);
+  color: var(--pico-primary);
   font-weight: 300;
   line-height: 1;
 }
@@ -292,8 +257,8 @@ article > header hgroup h1 {
 
 .fb-expander-body {
   padding: 1.5rem;
-  background: var(--fb-white);
-  border-top: 1.5px solid var(--fb-border);
+  background: var(--pico-card-background-color);
+  border-top: 1.5px solid var(--pico-muted-border-color);
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
@@ -304,19 +269,18 @@ article > header hgroup h1 {
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: var(--fb-muted);
+  color: var(--pico-muted-color);
   margin-bottom: -0.85rem; /* tighten label–input gap within the flex column */
 }
 .fb-expander-body textarea,
 .fb-expander-body input[type="text"] {
   width: 100%;
-  font-family: var(--fb-sans);
   font-size: 0.95rem;
   padding: 0.65rem 0.9rem;
-  border: 1.5px solid var(--fb-border);
-  border-radius: 8px;
-  background: var(--fb-cream);
-  color: var(--fb-ink);
+  border: 1.5px solid var(--pico-muted-border-color);
+  border-radius: var(--pico-border-radius);
+  background: var(--pico-form-element-background-color);
+  color: var(--pico-color);
   transition: border-color 0.2s ease;
   resize: vertical;
   box-sizing: border-box;
@@ -325,20 +289,19 @@ article > header hgroup h1 {
 .fb-expander-body textarea:focus,
 .fb-expander-body input[type="text"]:focus {
   outline: none;
-  border-color: var(--fb-red);
+  border-color: var(--pico-primary);
 }
 .fb-expander-body select {
   width: 100%;
-  font-family: var(--fb-sans);
   font-size: 0.95rem;
   padding: 0.65rem 2.5rem 0.65rem 0.9rem;
-  border: 1.5px solid var(--fb-border);
-  border-radius: 8px;
-  background-color: var(--fb-cream);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A1A2E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+  border: 1.5px solid var(--pico-muted-border-color);
+  border-radius: var(--pico-border-radius);
+  background-color: var(--pico-form-element-background-color);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 1rem center;
-  color: var(--fb-ink);
+  color: var(--pico-color);
   appearance: none;
   cursor: pointer;
   transition: border-color 0.2s ease;
@@ -346,7 +309,7 @@ article > header hgroup h1 {
 }
 .fb-expander-body select:focus {
   outline: none;
-  border-color: var(--fb-red);
+  border-color: var(--pico-primary);
 }
 .fb-expander-body fieldset {
   border: none;
@@ -355,33 +318,31 @@ article > header hgroup h1 {
 }
 .privacy-note {
   font-size: 0.8rem;
-  color: var(--fb-muted);
+  color: var(--pico-muted-color);
   line-height: 1.5;
   margin: 0;
   padding: 0.75rem;
-  background: var(--fb-cream);
-  border-radius: 6px;
+  background: var(--pico-muted-background-color);
+  border-radius: var(--pico-border-radius);
 }
 
 /* ---- Submit button ---- */
 .fb-submit-row { margin-top: 1.5rem; }
 #submit-btn {
   width: 100%;
-  font-family: var(--fb-sans);
   font-size: 1rem;
   font-weight: 600;
   padding: 1rem 2rem;
-  background: var(--fb-red);
-  color: #fff;
+  background: var(--pico-primary);
+  color: var(--pico-primary-inverse);
   border: none;
-  border-radius: var(--fb-radius);
+  border-radius: var(--pico-border-radius);
   cursor: pointer;
-  letter-spacing: 0.03em;
   transition: background 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
   margin: 0;
 }
 #submit-btn:not(:disabled):hover {
-  background: #A60D26;
+  background: var(--pico-primary-hover);
   transform: translateY(-1px);
 }
 #submit-btn:not(:disabled):active { transform: translateY(0); }
@@ -394,13 +355,12 @@ article > header hgroup h1 {
 #success-message {
   text-align: center;
   padding: 3rem 2rem;
-  background: var(--fb-green-light);
-  border: 1.5px solid var(--fb-green);
-  border-radius: var(--fb-radius);
+  background: #EDFAF4;
+  border: 1.5px solid #2D6A4F;
+  border-radius: var(--pico-border-radius);
 }
 #success-message p {
-  color: var(--fb-green);
-  font-family: var(--fb-sans);
+  color: #2D6A4F;
   font-weight: 600;
   font-size: 1.1rem;
   margin: 0;
@@ -409,18 +369,18 @@ article > header hgroup h1 {
 
 #error-message {
   padding: 1rem 1.25rem;
-  background: var(--fb-red-light);
-  border: 1.5px solid var(--fb-red);
-  border-radius: 8px;
+  background: #fff5f5;
+  border: 1.5px solid #c0392b;
+  border-radius: var(--pico-border-radius);
   margin-top: 0.75rem;
 }
 #error-message p {
-  color: var(--fb-red);
+  color: #c0392b;
   font-size: 0.9rem;
   margin: 0;
 }
 #error-message a {
-  color: var(--fb-red);
+  color: #c0392b;
   font-weight: 600;
 }
 </style>

From 747c8cd5274a9c0e98f5d71f2abfd3562f76f5cd Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 09:31:46 -0500
Subject: [PATCH 15/20] Add follow-up questions for maybe/no responses on
 would_return

When a first-timer selects Maybe, asks "What's giving you pause?".
When they select No, asks "What put you off?". Both slide in inline
below the pill buttons. Response stored as would_return_reason in
the new_attendee JSON object.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 _pages/feedback.md | 61 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/_pages/feedback.md b/_pages/feedback.md
index 099737c85..6c0fa536e 100644
--- a/_pages/feedback.md
+++ b/_pages/feedback.md
@@ -184,6 +184,42 @@ excerpt: "Help us make Civic Tech Toronto better. This form is completely anonym
   margin: 0;
 }
 
+/* ---- Inline follow-up fields (within a conditional section) ---- */
+.fb-followup {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  transition: max-height 0.3s ease, opacity 0.25s ease;
+}
+.fb-followup.is-visible {
+  max-height: 200px;
+  opacity: 1;
+}
+.fb-followup label {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--pico-muted-color);
+  margin: 0.75rem 0 0.35rem;
+}
+.fb-followup textarea {
+  width: 100%;
+  font-size: 0.9rem;
+  padding: 0.5rem 0.75rem;
+  border: 1.5px solid var(--pico-muted-border-color);
+  border-radius: var(--pico-border-radius);
+  background: var(--pico-form-element-background-color);
+  color: var(--pico-color);
+  resize: vertical;
+  box-sizing: border-box;
+  margin: 0;
+  transition: border-color 0.2s ease;
+}
+.fb-followup textarea:focus {
+  outline: none;
+  border-color: var(--pico-primary);
+}
+
 /* ---- Conditional sections (CSS-driven show/hide) ---- */
 .fb-conditional {
   overflow: hidden;
@@ -462,6 +498,14 @@ excerpt: "Help us make Civic Tech Toronto better. This form is completely anonym
           <label><input type="radio" name="would_return" value="maybe"><span class="pill-btn">Maybe</span></label>
           <label><input type="radio" name="would_return" value="no"><span class="pill-btn">No</span></label>
         </div>
+        <div id="return-maybe-followup" class="fb-followup">
+          <label for="return_maybe_reason">What's giving you pause?</label>
+          <textarea id="return_maybe_reason" name="return_maybe_reason" rows="2"></textarea>
+        </div>
+        <div id="return-no-followup" class="fb-followup">
+          <label for="return_no_reason">What put you off?</label>
+          <textarea id="return_no_reason" name="return_no_reason" rows="2"></textarea>
+        </div>
       </fieldset>
     </div>
   </section>
@@ -631,6 +675,16 @@ excerpt: "Help us make Civic Tech Toronto better. This form is completely anonym
     submitBtn.disabled = !meetupInput.value || dayOfWeek !== 2;
   });
 
+  // Show/hide would_return follow-up questions
+  var returnMaybeFollowup = document.getElementById('return-maybe-followup');
+  var returnNoFollowup = document.getElementById('return-no-followup');
+  form.querySelectorAll('input[name="would_return"]').forEach(function (input) {
+    input.addEventListener('change', function () {
+      returnMaybeFollowup.classList.toggle('is-visible', input.value === 'maybe');
+      returnNoFollowup.classList.toggle('is-visible', input.value === 'no');
+    });
+  });
+
   // Show/hide new-attendee section
   form.querySelectorAll('input[name="first_time"]').forEach(function (input) {
     input.addEventListener('change', function () {
@@ -721,6 +775,13 @@ excerpt: "Help us make Civic Tech Toronto better. This form is completely anonym
       if (fw) newAttendee.felt_welcome = parseInt(fw, 10);
       if (un) newAttendee.understood_what_was_happening = parseInt(un, 10);
       if (wr) newAttendee.would_return = wr;
+      if (wr === 'maybe') {
+        var maybeReason = getText('return_maybe_reason');
+        if (maybeReason) newAttendee.would_return_reason = maybeReason;
+      } else if (wr === 'no') {
+        var noReason = getText('return_no_reason');
+        if (noReason) newAttendee.would_return_reason = noReason;
+      }
       if (Object.keys(newAttendee).length) data.new_attendee = newAttendee;
     }
 

From c0e2708ddb3fca28fc28f39204da396efabcc65a Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 09:33:28 -0500
Subject: [PATCH 16/20] Tone down would_return follow-up question labels

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 _pages/feedback.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/_pages/feedback.md b/_pages/feedback.md
index 6c0fa536e..9d1ed88fc 100644
--- a/_pages/feedback.md
+++ b/_pages/feedback.md
@@ -499,11 +499,11 @@ excerpt: "Help us make Civic Tech Toronto better. This form is completely anonym
           <label><input type="radio" name="would_return" value="no"><span class="pill-btn">No</span></label>
         </div>
         <div id="return-maybe-followup" class="fb-followup">
-          <label for="return_maybe_reason">What's giving you pause?</label>
+          <label for="return_maybe_reason">What would need to be different?</label>
           <textarea id="return_maybe_reason" name="return_maybe_reason" rows="2"></textarea>
         </div>
         <div id="return-no-followup" class="fb-followup">
-          <label for="return_no_reason">What put you off?</label>
+          <label for="return_no_reason">Why not?</label>
           <textarea id="return_no_reason" name="return_no_reason" rows="2"></textarea>
         </div>
       </fieldset>

From 8b5612e6052d3922cca06ce5243c77c5f412eb73 Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 09:36:48 -0500
Subject: [PATCH 17/20] Unify form label typography for consistency

All question labels/legends now share the same style: 0.875rem, 600
weight, --pico-color. Removes all-caps and muted-color treatment from
the date picker label and expander body labels, normalises the followup
label size, drops primary colour from the conditional section heading,
and fixes two broken --fb-muted variable references.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 _pages/feedback.md | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/_pages/feedback.md b/_pages/feedback.md
index 9d1ed88fc..ce60ebae7 100644
--- a/_pages/feedback.md
+++ b/_pages/feedback.md
@@ -56,11 +56,9 @@ excerpt: "Help us make Civic Tech Toronto better. This form is completely anonym
 /* ---- Hacknight date picker ---- */
 .fb-select-label {
   display: block;
-  font-size: 0.7rem;
+  font-size: 0.875rem;
   font-weight: 600;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--pico-muted-color);
+  color: var(--pico-color);
   margin-bottom: 0.5rem;
 }
 #meetup {
@@ -197,9 +195,9 @@ excerpt: "Help us make Civic Tech Toronto better. This form is completely anonym
 }
 .fb-followup label {
   display: block;
-  font-size: 0.8rem;
+  font-size: 0.875rem;
   font-weight: 600;
-  color: var(--pico-muted-color);
+  color: var(--pico-color);
   margin: 0.75rem 0 0.35rem;
 }
 .fb-followup textarea {
@@ -243,7 +241,7 @@ excerpt: "Help us make Civic Tech Toronto better. This form is completely anonym
 .fb-conditional h3 {
   font-size: 1.05rem;
   font-weight: 600;
-  color: var(--pico-primary);
+  color: var(--pico-color);
   margin: 0 0 1.25rem;
 }
 .fb-conditional fieldset {
@@ -301,11 +299,9 @@ excerpt: "Help us make Civic Tech Toronto better. This form is completely anonym
 }
 .fb-expander-body > label {
   display: block;
-  font-size: 0.7rem;
+  font-size: 0.875rem;
   font-weight: 600;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--pico-muted-color);
+  color: var(--pico-color);
   margin-bottom: -0.85rem; /* tighten label–input gap within the flex column */
 }
 .fb-expander-body textarea,
@@ -543,7 +539,7 @@ excerpt: "Help us make Civic Tech Toronto better. This form is completely anonym
 
   <!-- Optional expander: general feedback -->
   <details class="fb-expander">
-    <summary>Tell us more <span style="font-size:0.8em;color:var(--fb-muted);font-weight:400;">(optional)</span></summary>
+    <summary>Tell us more <span style="font-size:0.8em;color:var(--pico-muted-color);font-weight:400;">(optional)</span></summary>
     <div class="fb-expander-body">
       <label for="liked">What worked well tonight?</label>
       <textarea id="liked" name="liked" rows="3"></textarea>
@@ -554,7 +550,7 @@ excerpt: "Help us make Civic Tech Toronto better. This form is completely anonym
 
   <!-- Optional expander: equity questions -->
   <details class="fb-expander">
-    <summary>About you <span style="font-size:0.8em;color:var(--fb-muted);font-weight:400;">(optional)</span></summary>
+    <summary>About you <span style="font-size:0.8em;color:var(--pico-muted-color);font-weight:400;">(optional)</span></summary>
     <div class="fb-expander-body">
       <p class="privacy-note">All fields in this section are completely optional and anonymous. This information helps us understand who is showing up and whether everyone feels included.</p>
 

From 863dd90aa22bbde6b82ead06c718270ad2e9a6fc Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 09:38:00 -0500
Subject: [PATCH 18/20] Make public storage of responses explicit and prominent

Adds a left-bordered notice banner at the top of the form and updates
the page excerpt subtitle to both state that responses are anonymous
but stored in a public GitHub repository.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 _pages/feedback.md | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/_pages/feedback.md b/_pages/feedback.md
index ce60ebae7..8d93ded52 100644
--- a/_pages/feedback.md
+++ b/_pages/feedback.md
@@ -2,7 +2,7 @@
 title: "Share Your Feedback"
 layout: page
 permalink: "/feedback/"
-excerpt: "Help us make Civic Tech Toronto better. This form is completely anonymous — we never collect names or email addresses."
+excerpt: "Help us make Civic Tech Toronto better. Responses are anonymous — we never collect names or email addresses — but are stored in a public repository."
 ---
 
 <style>
@@ -358,6 +358,21 @@ excerpt: "Help us make Civic Tech Toronto better. This form is completely anonym
   border-radius: var(--pico-border-radius);
 }
 
+/* ---- Public notice banner ---- */
+.fb-public-notice {
+  font-size: 0.875rem;
+  color: var(--pico-color);
+  line-height: 1.5;
+  margin: 0 0 1.25rem;
+  padding: 0.75rem 1rem;
+  background: var(--pico-muted-background-color);
+  border-left: 3px solid var(--pico-primary);
+  border-radius: var(--pico-border-radius);
+}
+.fb-public-notice a {
+  color: var(--pico-primary);
+}
+
 /* ---- Submit button ---- */
 .fb-submit-row { margin-top: 1.5rem; }
 #submit-btn {
@@ -419,6 +434,8 @@ excerpt: "Help us make Civic Tech Toronto better. This form is completely anonym
 
 <div class="feedback-wrapper">
 
+<p class="fb-public-notice"><strong>Public notice:</strong> Responses are anonymous but stored openly in a <a href="https://github.com/CivicTechTO/feedback" target="_blank" rel="noopener">public GitHub repository</a>. Do not include any personal information.</p>
+
 <form id="feedback-form" novalidate>
 
   <div class="fb-card">

From af76c22e34cf96895bc7cb89c272a05a6e5eab3a Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 19:19:59 -0500
Subject: [PATCH 19/20] Replace 5-point ratings with labelled 3-point scale,
 remove optional labels, centre form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Swap all seven 1–5 numeric rating scales for 3-option pill buttons with
  descriptive text labels (e.g. Not great / Good / Great), removing the
  need for hint text and making stored responses self-explanatory
- Fix button hover behaviour so rating buttons match pill buttons
- Fix grammatically awkward "Poor" option for AV quality question
- Remove "(optional)" labels from expander headings and privacy note —
  every field on the form is optional
- Centre the form wrapper on wider screens with margin: 0 auto

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 _pages/feedback.md | 117 ++++++++++++++++++---------------------------
 1 file changed, 47 insertions(+), 70 deletions(-)

diff --git a/_pages/feedback.md b/_pages/feedback.md
index 8d93ded52..56d275b1c 100644
--- a/_pages/feedback.md
+++ b/_pages/feedback.md
@@ -2,7 +2,7 @@
 title: "Share Your Feedback"
 layout: page
 permalink: "/feedback/"
-excerpt: "Help us make Civic Tech Toronto better. Responses are anonymous — we never collect names or email addresses — but are stored in a public repository."
+excerpt: "🔓 Help us make Civic Tech Toronto better. Responses are anonymous — we never collect names or emails — and are stored openly in a public GitHub repository."
 ---
 
 <style>
@@ -14,6 +14,7 @@ excerpt: "Help us make Civic Tech Toronto better. Responses are anonymous — we
 /* ---- Wrapper ---- */
 .feedback-wrapper {
   max-width: 600px;
+  margin: 0 auto;
 }
 
 /* ---- Card base ---- */
@@ -128,14 +129,13 @@ excerpt: "Help us make Civic Tech Toronto better. Responses are anonymous — we
   outline-offset: 2px;
 }
 
-/* ---- Rating scale ---- */
+/* ---- Rating scale (3-point) ---- */
 .rating-scale {
   display: flex;
-  gap: 0.4rem;
-  flex-wrap: wrap;
-  margin-bottom: 0.25rem;
+  gap: 0.5rem;
 }
 .rating-scale label {
+  flex: 1;
   position: relative;
   cursor: pointer;
   display: inline-flex;
@@ -151,36 +151,36 @@ excerpt: "Help us make Civic Tech Toronto better. Responses are anonymous — we
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 2.75rem;
-  height: 2.75rem;
+  width: 100%;
+  padding: 0.5rem 0.5rem;
   border: 1.5px solid var(--pico-muted-border-color);
-  border-radius: var(--pico-border-radius);
-  font-size: 1.1rem;
+  border-radius: 100px;
+  font-size: 0.875rem;
+  font-weight: 500;
   color: var(--pico-muted-color);
   background: var(--pico-muted-background-color);
   transition: all 0.15s ease;
   user-select: none;
+  text-align: center;
+  white-space: nowrap;
 }
 .rating-scale input[type="radio"]:checked + .rating-btn {
   background: var(--pico-primary);
   border-color: var(--pico-primary);
   color: var(--pico-primary-inverse);
-  transform: scale(1.1);
 }
 .rating-scale label:hover .rating-btn {
   border-color: var(--pico-primary);
   color: var(--pico-primary);
-  background: var(--pico-primary-background);
+}
+.rating-scale input[type="radio"]:checked + .rating-btn:hover {
+  background: var(--pico-primary);
+  color: var(--pico-primary-inverse);
 }
 .rating-scale input[type="radio"]:focus-visible + .rating-btn {
   outline: 2px solid var(--pico-primary);
   outline-offset: 2px;
 }
-.rating-hint {
-  font-size: 0.75rem;
-  color: var(--pico-muted-color);
-  margin: 0;
-}
 
 /* ---- Inline follow-up fields (within a conditional section) ---- */
 .fb-followup {
@@ -434,8 +434,6 @@ excerpt: "Help us make Civic Tech Toronto better. Responses are anonymous — we
 
 <div class="feedback-wrapper">
 
-<p class="fb-public-notice"><strong>Public notice:</strong> Responses are anonymous but stored openly in a <a href="https://github.com/CivicTechTO/feedback" target="_blank" rel="noopener">public GitHub repository</a>. Do not include any personal information.</p>
-
 <form id="feedback-form" novalidate>
 
   <div class="fb-card">
@@ -465,13 +463,10 @@ excerpt: "Help us make Civic Tech Toronto better. Responses are anonymous — we
     <fieldset>
       <legend>How was tonight overall?</legend>
       <div class="rating-scale">
-        <label><input type="radio" name="overall_rating" value="1"><span class="rating-btn">1</span></label>
-        <label><input type="radio" name="overall_rating" value="2"><span class="rating-btn">2</span></label>
-        <label><input type="radio" name="overall_rating" value="3"><span class="rating-btn">3</span></label>
-        <label><input type="radio" name="overall_rating" value="4"><span class="rating-btn">4</span></label>
-        <label><input type="radio" name="overall_rating" value="5"><span class="rating-btn">5</span></label>
+        <label><input type="radio" name="overall_rating" value="not-great"><span class="rating-btn">Not great</span></label>
+        <label><input type="radio" name="overall_rating" value="good"><span class="rating-btn">Good</span></label>
+        <label><input type="radio" name="overall_rating" value="great"><span class="rating-btn">Great</span></label>
       </div>
-      <p class="rating-hint">1 = poor &nbsp;&nbsp; 5 = excellent</p>
     </fieldset>
   </div>
 
@@ -483,25 +478,19 @@ excerpt: "Help us make Civic Tech Toronto better. Responses are anonymous — we
       <fieldset>
         <legend>Did you feel welcome tonight?</legend>
         <div class="rating-scale">
-          <label><input type="radio" name="felt_welcome" value="1"><span class="rating-btn">1</span></label>
-          <label><input type="radio" name="felt_welcome" value="2"><span class="rating-btn">2</span></label>
-          <label><input type="radio" name="felt_welcome" value="3"><span class="rating-btn">3</span></label>
-          <label><input type="radio" name="felt_welcome" value="4"><span class="rating-btn">4</span></label>
-          <label><input type="radio" name="felt_welcome" value="5"><span class="rating-btn">5</span></label>
+          <label><input type="radio" name="felt_welcome" value="not-really"><span class="rating-btn">Not really</span></label>
+          <label><input type="radio" name="felt_welcome" value="somewhat"><span class="rating-btn">Somewhat</span></label>
+          <label><input type="radio" name="felt_welcome" value="very"><span class="rating-btn">Very</span></label>
         </div>
-        <p class="rating-hint">1 = not at all &nbsp;&nbsp; 5 = very welcome</p>
       </fieldset>
 
       <fieldset>
         <legend>Did you understand what was going on?</legend>
         <div class="rating-scale">
-          <label><input type="radio" name="understood" value="1"><span class="rating-btn">1</span></label>
-          <label><input type="radio" name="understood" value="2"><span class="rating-btn">2</span></label>
-          <label><input type="radio" name="understood" value="3"><span class="rating-btn">3</span></label>
-          <label><input type="radio" name="understood" value="4"><span class="rating-btn">4</span></label>
-          <label><input type="radio" name="understood" value="5"><span class="rating-btn">5</span></label>
+          <label><input type="radio" name="understood" value="confused"><span class="rating-btn">Confused</span></label>
+          <label><input type="radio" name="understood" value="mostly"><span class="rating-btn">Mostly</span></label>
+          <label><input type="radio" name="understood" value="totally-clear"><span class="rating-btn">Totally clear</span></label>
         </div>
-        <p class="rating-hint">1 = confused &nbsp;&nbsp; 5 = totally clear</p>
       </fieldset>
 
       <fieldset>
@@ -531,32 +520,26 @@ excerpt: "Help us make Civic Tech Toronto better. Responses are anonymous — we
       <fieldset>
         <legend>Could you hear and see what was happening clearly?</legend>
         <div class="rating-scale">
-          <label><input type="radio" name="av_quality" value="1"><span class="rating-btn">1</span></label>
-          <label><input type="radio" name="av_quality" value="2"><span class="rating-btn">2</span></label>
-          <label><input type="radio" name="av_quality" value="3"><span class="rating-btn">3</span></label>
-          <label><input type="radio" name="av_quality" value="4"><span class="rating-btn">4</span></label>
-          <label><input type="radio" name="av_quality" value="5"><span class="rating-btn">5</span></label>
+          <label><input type="radio" name="av_quality" value="not-really"><span class="rating-btn">Not really</span></label>
+          <label><input type="radio" name="av_quality" value="mostly"><span class="rating-btn">Mostly</span></label>
+          <label><input type="radio" name="av_quality" value="clearly"><span class="rating-btn">Clearly</span></label>
         </div>
-        <p class="rating-hint">1 = poor &nbsp;&nbsp; 5 = excellent</p>
       </fieldset>
 
       <fieldset>
         <legend>Did you feel like an equal participant, not just a viewer?</legend>
         <div class="rating-scale">
-          <label><input type="radio" name="felt_included" value="1"><span class="rating-btn">1</span></label>
-          <label><input type="radio" name="felt_included" value="2"><span class="rating-btn">2</span></label>
-          <label><input type="radio" name="felt_included" value="3"><span class="rating-btn">3</span></label>
-          <label><input type="radio" name="felt_included" value="4"><span class="rating-btn">4</span></label>
-          <label><input type="radio" name="felt_included" value="5"><span class="rating-btn">5</span></label>
+          <label><input type="radio" name="felt_included" value="not-really"><span class="rating-btn">Not really</span></label>
+          <label><input type="radio" name="felt_included" value="somewhat"><span class="rating-btn">Somewhat</span></label>
+          <label><input type="radio" name="felt_included" value="fully"><span class="rating-btn">Fully</span></label>
         </div>
-        <p class="rating-hint">1 = not at all &nbsp;&nbsp; 5 = fully included</p>
       </fieldset>
     </div>
   </section>
 
   <!-- Optional expander: general feedback -->
   <details class="fb-expander">
-    <summary>Tell us more <span style="font-size:0.8em;color:var(--pico-muted-color);font-weight:400;">(optional)</span></summary>
+    <summary>Tell us more</summary>
     <div class="fb-expander-body">
       <label for="liked">What worked well tonight?</label>
       <textarea id="liked" name="liked" rows="3"></textarea>
@@ -567,9 +550,9 @@ excerpt: "Help us make Civic Tech Toronto better. Responses are anonymous — we
 
   <!-- Optional expander: equity questions -->
   <details class="fb-expander">
-    <summary>About you <span style="font-size:0.8em;color:var(--pico-muted-color);font-weight:400;">(optional)</span></summary>
+    <summary>About you</summary>
     <div class="fb-expander-body">
-      <p class="privacy-note">All fields in this section are completely optional and anonymous. This information helps us understand who is showing up and whether everyone feels included.</p>
+      <p class="privacy-note">All fields in this section are anonymous. This information helps us understand who is showing up and whether everyone feels included.</p>
 
       <label for="gender_identity">How do you describe your gender identity?</label>
       <input type="text" id="gender_identity" name="gender_identity" placeholder="Your own words">
@@ -606,25 +589,19 @@ excerpt: "Help us make Civic Tech Toronto better. Responses are anonymous — we
       <fieldset>
         <legend>Do you feel like someone like you belongs in this space?</legend>
         <div class="rating-scale">
-          <label><input type="radio" name="belongs_here" value="1"><span class="rating-btn">1</span></label>
-          <label><input type="radio" name="belongs_here" value="2"><span class="rating-btn">2</span></label>
-          <label><input type="radio" name="belongs_here" value="3"><span class="rating-btn">3</span></label>
-          <label><input type="radio" name="belongs_here" value="4"><span class="rating-btn">4</span></label>
-          <label><input type="radio" name="belongs_here" value="5"><span class="rating-btn">5</span></label>
+          <label><input type="radio" name="belongs_here" value="not-at-all"><span class="rating-btn">Not at all</span></label>
+          <label><input type="radio" name="belongs_here" value="somewhat"><span class="rating-btn">Somewhat</span></label>
+          <label><input type="radio" name="belongs_here" value="absolutely"><span class="rating-btn">Absolutely</span></label>
         </div>
-        <p class="rating-hint">1 = not at all &nbsp;&nbsp; 5 = absolutely</p>
       </fieldset>
 
       <fieldset>
         <legend>Were tonight's topics or speakers relevant to your community or experience?</legend>
         <div class="rating-scale">
-          <label><input type="radio" name="topics_relevant" value="1"><span class="rating-btn">1</span></label>
-          <label><input type="radio" name="topics_relevant" value="2"><span class="rating-btn">2</span></label>
-          <label><input type="radio" name="topics_relevant" value="3"><span class="rating-btn">3</span></label>
-          <label><input type="radio" name="topics_relevant" value="4"><span class="rating-btn">4</span></label>
-          <label><input type="radio" name="topics_relevant" value="5"><span class="rating-btn">5</span></label>
+          <label><input type="radio" name="topics_relevant" value="not-relevant"><span class="rating-btn">Not relevant</span></label>
+          <label><input type="radio" name="topics_relevant" value="somewhat"><span class="rating-btn">Somewhat</span></label>
+          <label><input type="radio" name="topics_relevant" value="very-relevant"><span class="rating-btn">Very relevant</span></label>
         </div>
-        <p class="rating-hint">1 = not relevant &nbsp;&nbsp; 5 = very relevant</p>
       </fieldset>
     </div>
   </details>
@@ -778,15 +755,15 @@ excerpt: "Help us make Civic Tech Toronto better. Responses are anonymous — we
 
     if (attendanceMode) data.attendance_mode = attendanceMode;
     if (firstTime !== undefined) data.first_time = firstTime === 'yes';
-    if (overallRating) data.overall_rating = parseInt(overallRating, 10);
+    if (overallRating) data.overall_rating = overallRating;
 
     if (firstTime === 'yes') {
       var newAttendee = {};
       var fw = getRadio('felt_welcome');
       var un = getRadio('understood');
       var wr = getRadio('would_return');
-      if (fw) newAttendee.felt_welcome = parseInt(fw, 10);
-      if (un) newAttendee.understood_what_was_happening = parseInt(un, 10);
+      if (fw) newAttendee.felt_welcome = fw;
+      if (un) newAttendee.understood_what_was_happening = un;
       if (wr) newAttendee.would_return = wr;
       if (wr === 'maybe') {
         var maybeReason = getText('return_maybe_reason');
@@ -802,8 +779,8 @@ excerpt: "Help us make Civic Tech Toronto better. Responses are anonymous — we
       var online = {};
       var av = getRadio('av_quality');
       var fi = getRadio('felt_included');
-      if (av) online.av_quality = parseInt(av, 10);
-      if (fi) online.felt_included = parseInt(fi, 10);
+      if (av) online.av_quality = av;
+      if (fi) online.felt_included = fi;
       if (Object.keys(online).length) data.online = online;
     }
 
@@ -825,8 +802,8 @@ excerpt: "Help us make Civic Tech Toronto better. Responses are anonymous — we
     if (ar) equity.age_range = ar;
     if (ra) equity.racialized = ra;
     if (di) equity.disability = di;
-    if (bh) equity.belongs_here = parseInt(bh, 10);
-    if (tr) equity.topics_relevant = parseInt(tr, 10);
+    if (bh) equity.belongs_here = bh;
+    if (tr) equity.topics_relevant = tr;
     if (Object.keys(equity).length) data.equity = equity;
 
     return data;

From 9f3c9fb8ded60aff9e093d51d10b615b957c22d4 Mon Sep 17 00:00:00 2001
From: Alex Olson <alex.olson@outlook.com>
Date: Tue, 24 Feb 2026 19:26:02 -0500
Subject: [PATCH 20/20] Fix YAML syntax error in feedback token injection step

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .github/workflows/pages.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
index 65905430c..97b9b6f68 100644
--- a/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@@ -71,7 +71,8 @@ jobs:
       #     ./_scripts/thumbnail_sizes.sh
 
       - name: Inject feedback token
-        run: echo "feedback_token: \"$FEEDBACK_TOKEN\"" >> _config.yml
+        run: |
+          echo "feedback_token: \"$FEEDBACK_TOKEN\"" >> _config.yml
         env:
           FEEDBACK_TOKEN: ${{ secrets.FEEDBACK_TOKEN }}