Rename upcoming product to SQLLoad with approved artwork

Author: kvlonge

assets/icons/sqlload.png

@@ -142,10 +142,10 @@ <h3 id="sqlquack-name">SQLQuack</h3>
               <span class="badge">Coming soon</span>
             </div>
           </article>
-          <article class="product sqload" aria-labelledby="sqload-name">
-            <img class="product-icon" src="assets/icons/sqload.png" width="52" height="52" alt="">
+          <article class="product sqlload" aria-labelledby="sqlload-name">
+            <img class="product-icon" src="assets/icons/sqlload.png" width="52" height="52" alt="">
             <div class="upcoming-name">
-              <h3 id="sqload-name">SQLoad</h3>
+              <h3 id="sqlload-name">SQLLoad</h3>
               <span class="badge">Coming soon</span>
             </div>
           </article>

assets/icons/sqload.png

@@ -115,12 +115,12 @@ sup a { color: var(--muted); text-decoration: none; padding-inline: 2px; }
 .sqlclean { --accent: #00c995; }
 .fensu { --accent: #ff6b00; }
 .sqlquack { --accent: #ffe000; }
-.sqload { --accent: #ff5268; }
+.sqlload { --accent: #ff5268; }
 .upcoming .product { min-height: 128px; align-items: center; padding-block: 22px; }
 .upcoming .product-icon { margin-top: 0; }
 .upcoming-name { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
 .badge { display: inline-block; padding: 6px 10px; border-radius: 4px; font-size: 12px; line-height: 16px; color: var(--gold-ink); background: var(--gold-bg); white-space: nowrap; }
-.sqload .badge { color: var(--pink-ink); background: var(--pink-bg); }
+.sqlload .badge { color: var(--pink-ink); background: var(--pink-bg); }
 .benchmark { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
 .site-footer { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0 24px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
 .site-footer span:last-child { color: var(--muted); }

index.html

@@ -43,7 +43,7 @@ test('theme control remains usable when browser storage is blocked', async ({ pa
 });
 
 test('approved products, sharing assets and responsive navigation work in both themes', async ({ page, request }) => {
-  const names = ['SQLBuild', 'SQLTide', 'SQLClean', 'Fensu', 'SQLQuack', 'SQLoad'];
+  const names = ['SQLBuild', 'SQLTide', 'SQLClean', 'Fensu', 'SQLQuack', 'SQLLoad'];
   for (const theme of ['light', 'dark']) {
     await page.emulateMedia({ colorScheme: theme });
     await page.goto('/');