feat(web): switch Runs on wall to official PNG logos

web/src/pages/index.astro

@@ -156,20 +156,24 @@ const cell = (v) =>
 
 /*
  * "Runs on" platform wall. Every mark is the REAL official, full-colour brand
- * logo, saved under /public/logos/ and rendered as an <img> in its native
- * colours — no mask, no recolour. Each logo sits on a subtle neutral chip so
- * pure-white (Aiven), pure-dark (PlanetScale) and dark-navy (CloudNativePG)
- * marks stay legible on both the parchment-light and deep-dusk-dark themes.
+ * logo, saved as a high-resolution transparent PNG under /public/logos/png/
+ * and rendered as an <img> in its native colours — no mask, no recolour. Each
+ * logo sits on a subtle neutral chip so pure-white (Aiven), pure-dark
+ * (PlanetScale) and dark-navy (CloudNativePG) marks stay legible on both the
+ * parchment-light and deep-dusk-dark themes. Tiger Data gets a dark chip
+ * (.plat-chip--dark) because its pale-yellow badge vanishes on a light chip.
  *
  * Trademark notice: each mark is used nominatively — solely to indicate that
  * PgQue is compatible with these platforms (they ship pg_cron, so PgQue's
  * automated ticker works out of the box). No endorsement or affiliation is
  * implied; every mark stays the property of its respective owner. Each tile
  * uses the platform's correct PRODUCT-SPECIFIC official icon (e.g. the RDS
  * service icon, not the generic AWS logo). Full-colour logo sources:
- *   amazonrds / amazonaurora — AWS Architecture service icons (official AWS)
+ *   amazonrds / amazonaurora — AWS Architecture-Service-Icons package, the
+ *     current Arch_Amazon-RDS / Arch_Amazon-Aurora 64@5x service icons
+ *     (aws.amazon.com/architecture/icons official zip)
  *   googlecloudsql / googlealloydb — official Google Cloud product icons
- *     (cloud.google.com/icons → core-products-icons.zip)
+ *     (cloud.google.com/icons → core-products-icons.zip, distinct marks)
  *   azure — Azure "Database for PostgreSQL Server" service icon
  *     (learn.microsoft.com/azure/architecture/icons official package)
  *   supabase / planetscale — gilbarbara/logos (vendor brands)
@@ -200,8 +204,8 @@ const platformGroups = [
       { name: 'DigitalOcean', logo: 'digitalocean' },
       { name: 'PlanetScale', logo: 'planetscale' },
       { name: 'Crunchy Bridge', logo: 'crunchybridge' },
-      { name: 'Tiger Data', logo: 'tiger' },
-      { name: 'ClickHouse Cloud', logo: 'clickhouse' },
+      { name: 'Tiger Data', logo: 'tiger', darkChip: true },
+      { name: 'ClickHouse Cloud', logo: 'clickhouse', darkChip: true },
       { name: 'IBM Cloud', logo: 'ibm' },
       { name: 'Oracle OCI', logo: 'oracle' },
       { name: 'Ubicloud', logo: 'ubicloud' },
@@ -458,8 +462,8 @@ const platformGroups = [
               <div class="runson-wall">
                 {g.items.map((p) => (
                   <div class="plat-tile">
-                    <span class="plat-chip" aria-hidden="true">
-                      <img class="plat-logo" src={`/logos/${p.logo}.svg`} alt="" loading="lazy" decoding="async" width="26" height="26" />
+                    <span class={`plat-chip${p.darkChip ? ' plat-chip--dark' : ''}`} aria-hidden="true">
+                      <img class="plat-logo" src={`/logos/png/${p.logo}.png`} alt="" loading="lazy" decoding="async" width="26" height="26" />
                     </span>
                     <span class="plat-name">{p.name}</span>
                   </div>
@@ -1102,6 +1106,17 @@ const platformGroups = [
         transition: box-shadow 0.18s ease;
       }
       .plat-logo { display: block; width: 26px; height: 26px; object-fit: contain; }
+      /* Tiger Data's badge is a pale yellow circle with a white tiger cutout —
+         it vanishes on the light neutral chip. Give just that tile a dark chip
+         so the badge reads clearly in both the light and dark themes. */
+      .plat-chip--dark {
+        background: #1c2230;
+        border-color: color-mix(in srgb, #1c2230 70%, transparent);
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+      }
+      .plat-tile:hover .plat-chip--dark {
+        box-shadow: 0 4px 12px -6px var(--glow), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+      }
       .plat-tile:hover .plat-chip {
         box-shadow: 0 4px 12px -6px var(--glow), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
       }