From 6836055edd304fcc4f826e5707fb61596578a317 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Thu, 2 Apr 2026 01:15:12 -0400
Subject: [PATCH] =?UTF-8?q?add:=20Tech=20Donor=20section=20=E2=80=94=20cir?=
 =?UTF-8?q?cular=20icons=20with=20hover=20tooltips=20on=20donate=20page=20?=
 =?UTF-8?q?and=20homepage=20strip=20(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Initial plan

* add: tech donor icons, homepage strip, and donate page footer

Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/8db83a4c-68fa-4c6c-ba53-eaa79825e487

Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com>

* Placeholder: plan noted

Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/f2a723b5-4eca-4be3-9bc3-f59fa035bf96

Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com>

* fix: logo cropping and homepage tooltip overflow clipping

Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/f2a723b5-4eca-4be3-9bc3-f59fa035bf96

Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com>

* fix: add JSDoc and initialize top on declaration (DeepSource JS-D1001, JS-0119)

Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/c4790ea8-3c18-4fc1-b602-40a36133d1d6

Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com>
---
 donate.html      |  54 +++++++++++++
 donors.css       | 207 +++++++++++++++++++++++++++++++++++++++++++++++
 donors.js        | 180 +++++++++++++++++++++++++++++++++++++++++
 index.html       |  17 ++++
 tech-donors.json |  32 ++++++++
 5 files changed, 490 insertions(+)
 create mode 100644 donors.css
 create mode 100644 donors.js
 create mode 100644 tech-donors.json

diff --git a/donate.html b/donate.html
index b94fa6d..9ba4b33 100644
--- a/donate.html
+++ b/donate.html
@@ -31,6 +31,7 @@
     <link rel="stylesheet" href="base.css" />
     <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="site.css" />
+    <link rel="stylesheet" href="donors.css" />
     <style>
       .apply-container {
         max-width: 860px;
@@ -137,7 +138,9 @@
         border: none;
         width: 100%;
         height: 1100px;
+        min-height: 400px;
         display: block;
+        transition: height 0.2s ease;
       }
 
       .copy-toast {
@@ -262,6 +265,10 @@ <h1>Make a Donation</h1>
           name="donateFrame"
         ></iframe>
       </div>
+      <div class="tech-donors-section">
+        <p class="tech-donors-label">Technology Partners</p>
+        <div class="tech-donors-list" id="techDonorsContainer"></div>
+      </div>
       <img
         class="donor-graph"
         src="https://graph.hcb.hackclub.com/sillylittletech"
@@ -269,6 +276,19 @@ <h1>Make a Donation</h1>
       />
     </div>
 
+    <footer class="site-footer">
+      <div class="footer-inner">
+        <a href="brand.html">Brand guidelines</a>
+        <div class="footer-copyright">
+          &copy; 2026 SillyLittleTech.<br />
+          Fiscally sponsored by The Hack Foundation (d.b.a. Hack Club), a
+          501(c)(3) nonprofit (EIN: 81-2908499).<br />
+          All charitable donations are tax-deductible to the fullest extent of
+          the law.
+        </div>
+      </div>
+    </footer>
+
     <output
       class="copy-toast"
       id="copyToast"
@@ -419,5 +439,39 @@ <h1>Make a Donation</h1>
           });
       })();
     </script>
+    <script src="donors.js"></script>
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        if (globalThis.SLT && globalThis.SLT.donors) {
+          globalThis.SLT.donors.renderTechDonors(
+            "#techDonorsContainer",
+            "tech-donors.json",
+          );
+        }
+      });
+    </script>
+    <script>
+      // Auto-resize the HCB donation iframe based on postMessage height events
+      // so the iframe never shows its own scrollbar (fixes #43).
+      (function () {
+        const HCB_ORIGIN = "https://hcb.hackclub.com";
+        window.addEventListener("message", function (event) {
+          if (event.origin !== HCB_ORIGIN) return;
+          const iframe = document.querySelector(".donate-iframe");
+          if (!iframe) return;
+          try {
+            const data =
+              typeof event.data === "string"
+                ? JSON.parse(event.data)
+                : event.data;
+            if (data && typeof data.height === "number" && data.height > 0) {
+              iframe.style.height = data.height + "px";
+            }
+          } catch (e) {
+            // ignore non-JSON or unrelated messages
+          }
+        });
+      })();
+    </script>
   </body>
 </html>
diff --git a/donors.css b/donors.css
new file mode 100644
index 0000000..3362107
--- /dev/null
+++ b/donors.css
@@ -0,0 +1,207 @@
+/* donors.css — styles for tech-donor icons, tooltips, and "With help from" strip */
+
+/* ── Shared icon wrapper ─────────────────────────────────────────────────── */
+.donor-icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  cursor: default;
+}
+
+.donor-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: #fff;
+  border: 2px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    transform 0.18s ease,
+    box-shadow 0.18s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.donor-icon-wrap:hover .donor-icon {
+  transform: scale(1.1);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
+}
+
+.donor-icon img {
+  width: 75%;
+  height: 75%;
+  object-fit: contain;
+  display: block;
+}
+
+.donor-icon-letter {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-color);
+  line-height: 1;
+}
+
+/* ── Floating tooltip (appended to body via JS; bypasses overflow clipping) ── */
+.donor-tooltip {
+  position: absolute;
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 12px 14px;
+  min-width: 200px;
+  max-width: 260px;
+  box-shadow:
+    0 8px 28px rgba(0, 0, 0, 0.14),
+    0 2px 8px rgba(0, 0, 0, 0.08);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.18s ease;
+  z-index: 1001;
+  text-align: left;
+  /* Downward caret (tooltip above icon) */
+  --caret-size: 7px;
+}
+
+.donor-tooltip--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* caret pointing down (default: tooltip is above the icon) */
+.donor-tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: var(--caret-size) solid transparent;
+  border-top-color: var(--card-bg);
+}
+
+.donor-tooltip::before {
+  content: "";
+  position: absolute;
+  top: calc(100% + 1px);
+  left: 50%;
+  transform: translateX(-50%);
+  border: var(--caret-size) solid transparent;
+  border-top-color: var(--border-color);
+}
+
+/* Flip carets when tooltip is placed below the icon */
+.donor-tooltip--below::after {
+  top: auto;
+  bottom: 100%;
+  border-top-color: transparent;
+  border-bottom-color: var(--card-bg);
+}
+
+.donor-tooltip--below::before {
+  top: auto;
+  bottom: calc(100% + 1px);
+  border-top-color: transparent;
+  border-bottom-color: var(--border-color);
+}
+
+.donor-tooltip-name {
+  display: block;
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 5px;
+  color: var(--text-color);
+}
+
+.donor-tooltip-desc {
+  font-size: 12px;
+  opacity: 0.85;
+  margin: 0 0 8px;
+  line-height: 1.45;
+  color: var(--text-color);
+}
+
+.donor-tooltip-link {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent-color);
+  text-decoration: none;
+  margin-top: 2px;
+}
+
+.donor-tooltip-link:hover {
+  text-decoration: underline;
+}
+
+/* ── donate.html — "Tech Partners" section ───────────────────────────────── */
+.tech-donors-section {
+  margin: 36px auto 0;
+  max-width: 860px;
+  text-align: center;
+  padding: 0 20px;
+}
+
+.tech-donors-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  opacity: 0.6;
+  margin-bottom: 16px;
+}
+
+.tech-donors-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+}
+
+/* ── index.html — "With help from" footer strip ──────────────────────────── */
+.with-help-from {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 10px 20px;
+  max-width: 1200px;
+  margin: 16px auto 0;
+  /* allow the row to scroll horizontally on narrow viewports */
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.with-help-from::-webkit-scrollbar {
+  display: none;
+}
+
+.help-label {
+  font-size: 11px;
+  opacity: 0.55;
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  flex-shrink: 0;
+}
+
+.help-logos {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+/* Smaller icons in the "With help from" strip */
+.with-help-from .donor-icon {
+  width: 30px;
+  height: 30px;
+}
+
+.with-help-from .donor-icon-letter {
+  font-size: 11px;
+}
+
+@media (max-width: 768px) {
+  .tech-donors-list {
+    gap: 16px;
+  }
+}
diff --git a/donors.js b/donors.js
new file mode 100644
index 0000000..1985fa7
--- /dev/null
+++ b/donors.js
@@ -0,0 +1,180 @@
+// donors.js — renders tech-donor circular icons with hover tooltips.
+// Used on donate.html (full-size) and index.html (compact "With help from" strip).
+"use strict";
+
+// ── Shared floating tooltip (appended once to body; bypasses overflow clipping) ──
+let _tooltip = null;
+let _hideTimer = null;
+
+/**
+ * Lazily creates and returns the single shared floating tooltip element,
+ * appending it to document.body on first call so it escapes any overflow context.
+ * @returns {HTMLElement}
+ */
+function getTooltip() {
+  if (!_tooltip) {
+    _tooltip = document.createElement("div");
+    _tooltip.className = "donor-tooltip";
+    _tooltip.setAttribute("role", "tooltip");
+    document.body.appendChild(_tooltip);
+    // Keep tooltip alive when cursor moves onto it (so the link is clickable)
+    _tooltip.addEventListener("mouseenter", cancelHide);
+    _tooltip.addEventListener("mouseleave", scheduleHide);
+  }
+  return _tooltip;
+}
+
+/**
+ * Cancels any pending hide timer for the floating tooltip.
+ */
+function cancelHide() {
+  if (_hideTimer) {
+    clearTimeout(_hideTimer);
+    _hideTimer = null;
+  }
+}
+
+/**
+ * Schedules the floating tooltip to be hidden after a short delay,
+ * allowing cursor movement between the icon and the tooltip card.
+ */
+function scheduleHide() {
+  cancelHide();
+  _hideTimer = setTimeout(() => {
+    if (_tooltip) _tooltip.classList.remove("donor-tooltip--visible");
+  }, 120);
+}
+
+// Hide whenever the page scrolls so stale positions don't linger
+window.addEventListener("scroll", scheduleHide, { passive: true });
+
+/**
+ * Positions and shows the floating tooltip for the given donor icon.
+ * Automatically flips below the icon when there is insufficient space above.
+ * @param {HTMLElement} wrap  The .donor-icon-wrap element being hovered.
+ * @param {{ name: string, contribution: string, url?: string }} donor  Donor data.
+ */
+function showTooltip(wrap, donor) {
+  cancelHide();
+  const tt = getTooltip();
+
+  // Build content
+  tt.innerHTML = "";
+  const nameEl = document.createElement("strong");
+  nameEl.className = "donor-tooltip-name";
+  nameEl.textContent = donor.name || "";
+
+  const descEl = document.createElement("p");
+  descEl.className = "donor-tooltip-desc";
+  descEl.textContent = donor.contribution || "";
+
+  tt.appendChild(nameEl);
+  tt.appendChild(descEl);
+
+  if (donor.url) {
+    const linkEl = document.createElement("a");
+    linkEl.className = "donor-tooltip-link";
+    linkEl.href = donor.url;
+    linkEl.target = "_blank";
+    linkEl.rel = "noopener noreferrer";
+    linkEl.textContent = "Learn more \u2192";
+    tt.appendChild(linkEl);
+  }
+
+  // Measure tooltip height before final placement
+  tt.style.visibility = "hidden";
+  tt.classList.add("donor-tooltip--visible");
+
+  const iconRect = wrap.getBoundingClientRect();
+  const ttHeight = tt.offsetHeight;
+  const scrollY = window.scrollY || document.documentElement.scrollTop;
+
+  const centerX = iconRect.left + iconRect.width / 2;
+  const spaceAbove = iconRect.top;
+  const placeBelow = spaceAbove < ttHeight + 16;
+
+  const top = placeBelow
+    ? iconRect.bottom + scrollY + 12
+    : iconRect.top + scrollY - ttHeight - 12;
+
+  if (placeBelow) {
+    tt.classList.add("donor-tooltip--below");
+  } else {
+    tt.classList.remove("donor-tooltip--below");
+  }
+
+  tt.style.position = "absolute";
+  tt.style.top = `${top}px`;
+  tt.style.left = `${centerX}px`;
+  tt.style.transform = "translateX(-50%)";
+  tt.style.visibility = "";
+}
+
+// ── Public API ────────────────────────────────────────────────────────────────
+
+/**
+ * Fetches a tech-donors JSON file and renders circular logo icons with
+ * hover tooltips into the given container element.
+ *
+ * @param {string} containerSelector  CSS selector for the target element.
+ * @param {string} jsonPath           Path/URL to tech-donors.json.
+ */
+function renderTechDonors(containerSelector, jsonPath) {
+  const container = document.querySelector(containerSelector);
+  if (!container) return;
+
+  fetch(jsonPath)
+    .then((res) => {
+      if (!res.ok) throw new Error(`Failed to load ${jsonPath}`);
+      return res.json();
+    })
+    .then((donors) => {
+      container.innerHTML = "";
+      donors.forEach((donor) => {
+        container.appendChild(buildDonorIcon(donor));
+      });
+    })
+    .catch((err) => {
+      console.error("donors.js: error rendering donors:", err);
+    });
+}
+
+/**
+ * Builds a single .donor-icon-wrap element for the given donor object.
+ * @param {{ name: string, logo: string, contribution: string, url: string }} donor
+ * @returns {HTMLElement}
+ */
+function buildDonorIcon(donor) {
+  const wrap = document.createElement("div");
+  wrap.className = "donor-icon-wrap";
+
+  // ── Icon ────────────────────────────────────────────────────────────────
+  const iconEl = document.createElement("div");
+  iconEl.className = "donor-icon";
+
+  const img = document.createElement("img");
+  img.src = donor.logo || "";
+  img.alt = donor.name || "";
+
+  // Fall back to a text initial when the logo cannot be loaded
+  img.addEventListener("error", () => {
+    if (img.parentNode) img.parentNode.removeChild(img);
+    const letter = document.createElement("span");
+    letter.className = "donor-icon-letter";
+    letter.textContent = (donor.name || "?")[0].toUpperCase();
+    iconEl.appendChild(letter);
+  });
+
+  iconEl.appendChild(img);
+  wrap.appendChild(iconEl);
+
+  // ── Tooltip: JS-driven floating (appended to body, bypasses overflow) ───
+  wrap.addEventListener("mouseenter", () => showTooltip(wrap, donor));
+  wrap.addEventListener("mouseleave", scheduleHide);
+
+  return wrap;
+}
+
+// Expose via the shared SLT namespace
+globalThis.SLT = globalThis.SLT || {};
+globalThis.SLT.donors = { renderTechDonors };
diff --git a/index.html b/index.html
index 3061260..88bc926 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,7 @@
     />
     <link rel="stylesheet" href="base.css" />
     <link rel="stylesheet" href="site.css" />
+    <link rel="stylesheet" href="donors.css" />
   </head>
   <body>
     <noscript>
@@ -87,6 +88,11 @@ <h1 class="name">Silly Little <span class="tech-thin">Tech</span></h1>
       </div>
     </div>
 
+    <section class="with-help-from" aria-label="Technology Partners">
+      <span class="help-label">With help from</span>
+      <div class="help-logos" id="helpFromContainer"></div>
+    </section>
+
     <footer class="site-footer" id="siteFooter">
       <!-- Footer content is loaded dynamically from includes/footer.html -->
       <div class="footer-inner">
@@ -101,5 +107,16 @@ <h1 class="name">Silly Little <span class="tech-thin">Tech</span></h1>
 
     <script src="theme.js"></script>
     <script src="script.js"></script>
+    <script src="donors.js"></script>
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        if (globalThis.SLT && globalThis.SLT.donors) {
+          globalThis.SLT.donors.renderTechDonors(
+            "#helpFromContainer",
+            "tech-donors.json",
+          );
+        }
+      });
+    </script>
   </body>
 </html>
diff --git a/tech-donors.json b/tech-donors.json
new file mode 100644
index 0000000..39a3de5
--- /dev/null
+++ b/tech-donors.json
@@ -0,0 +1,32 @@
+[
+  {
+    "name": "Okta",
+    "logo": "https://www.google.com/s2/favicons?domain=okta.com&sz=128",
+    "contribution": "Okta provided Okta for Good Seats",
+    "url": "https://www.okta.com/okta-for-good/"
+  },
+  {
+    "name": "Cloudflare",
+    "logo": "https://www.google.com/s2/favicons?domain=cloudflare.com&sz=128",
+    "contribution": "Cloudflare provides hosting software",
+    "url": "https://www.cloudflare.com/galileo/"
+  },
+  {
+    "name": "BetterStack",
+    "logo": "https://www.google.com/s2/favicons?domain=betterstack.com&sz=128",
+    "contribution": "BetterStack provided a discount on their platform for the NPO",
+    "url": "https://betterstack.com/"
+  },
+  {
+    "name": "Short.io",
+    "logo": "https://www.google.com/s2/favicons?domain=short.io&sz=128",
+    "contribution": "Short.io provided a non-profit discount",
+    "url": "https://short.io/"
+  },
+  {
+    "name": "Good360",
+    "logo": "https://www.google.com/s2/favicons?domain=good360.org&sz=128",
+    "contribution": "Good360 provided access to their platform for discounted logistics",
+    "url": "https://good360.org/"
+  }
+]