Hide all cards by default — require category filter selection

Cards start hidden with filter-hidden class. No pill is active on load.
Clicking a pill shows that category; clicking again hides all.
The 'All' pill shows every card.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: brunoborges

site/app.js

@@ -157,14 +157,18 @@
     pills.forEach(pill => {
       pill.addEventListener('click', () => {
         const category = pill.dataset.filter || 'all';
+        const wasActive = pill.classList.contains('active');
 
-        // Update active pill
+        // Update active pill (toggle off if re-clicked)
         pills.forEach(p => p.classList.remove('active'));
-        pill.classList.add('active');
+        if (!wasActive) pill.classList.add('active');
+
+        const showAll = (!wasActive && category === 'all');
+        const showCategory = (!wasActive && category !== 'all') ? category : null;
 
         // Filter cards
         cards.forEach(card => {
-          if (category === 'all' || card.dataset.category === category) {
+          if (showAll || card.dataset.category === showCategory) {
             card.classList.remove('filter-hidden');
           } else {
             card.classList.add('filter-hidden');

templates/index-card.html

@@ -1,4 +1,4 @@
-      <a href="/{{category}}/{{slug}}.html" class="tip-card" data-category="{{category}}">
+      <a href="/{{category}}/{{slug}}.html" class="tip-card filter-hidden" data-category="{{category}}">
         <div class="tip-card-body">
           <div class="tip-card-header">
             <div class="tip-badges"><span class="badge {{category}}">{{catDisplay}}</span></div>

templates/index.html

@@ -218,7 +218,7 @@ <h2 class="section-title">All comparisons</h2>
     </div>
     <div class="filter-pills" id="categoryFilter">
       <span class="filter-label">Filter:</span>
-      <button class="filter-pill active" data-filter="all">All</button>
+      <button class="filter-pill" data-filter="all">All</button>
       <button class="filter-pill" data-filter="language">Language</button>
       <button class="filter-pill" data-filter="collections">Collections</button>
       <button class="filter-pill" data-filter="strings">Strings</button>