feat: branded badge icons for all rApps and OSS tool logos

Replace emoji icons with consistent badge-style branding across the
entire site. Each rApp now shows its branded abbreviation (rS, rN, rV,
etc.) on its pastel badge color, matching the app-switcher design.

- 22 app cards: emoji → colored badge (e.g. 🌌 → [rS] on teal)
- 7 demo cards: emoji → larger badge variant
- 13 OSS tool cards: add brand-colored logo badges (Fk, Am, Wa, etc.)
- New CSS: .app-card-badge, .demo-card-badge, .oss-logo, .oss-card-header
- Badge colors match app-switcher MODULE_BADGES palette
- OSS logos use each project's official brand color

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

index.html

@@ -466,6 +466,21 @@
 			flex-shrink: 0;
 		}
 
+		.app-card-badge {
+			width: 40px;
+			height: 40px;
+			border-radius: 10px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 0.72rem;
+			font-weight: 800;
+			color: #0b1120;
+			flex-shrink: 0;
+			letter-spacing: -0.01em;
+			line-height: 1;
+		}
+
 		.app-card-name {
 			font-size: 1.05rem;
 			font-weight: 700;
@@ -603,6 +618,32 @@
 			line-height: 1.5;
 		}
 
+		.oss-card-header {
+			display: flex;
+			align-items: center;
+			gap: 0.75rem;
+			margin-bottom: 0.5rem;
+		}
+
+		.oss-card-header h4 {
+			margin-bottom: 0;
+		}
+
+		.oss-logo {
+			width: 36px;
+			height: 36px;
+			border-radius: 8px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 0.65rem;
+			font-weight: 800;
+			color: #fff;
+			flex-shrink: 0;
+			letter-spacing: -0.02em;
+			line-height: 1;
+		}
+
 		.oss-card .oss-tag {
 			display: inline-block;
 			margin-top: 0.5rem;
@@ -671,6 +712,20 @@
 			margin-bottom: 1rem;
 		}
 
+		.demo-card-badge {
+			width: 56px;
+			height: 56px;
+			border-radius: 14px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 1rem;
+			font-weight: 800;
+			color: #0b1120;
+			margin: 0 auto 1rem;
+			line-height: 1;
+		}
+
 		.demo-card h3 {
 			font-size: 1rem;
 			color: #f1f5f9;
@@ -1243,7 +1298,7 @@
 				<div class="area-apps">
 					<a href="https://rspace.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">🌌</div>
+							<div class="app-card-badge" style="background:#5eead4;">rS</div>
 							<div><div class="app-card-name">rSpace</div><div class="app-card-domain">rspace.online</div></div>
 						</div>
 						<div class="app-card-desc">Collaborative spatial canvas. The integration hub where all rStack tools come together on a shared, infinite workspace. Real-time multiplayer with Automerge CRDT sync.</div>
@@ -1251,7 +1306,7 @@
 					</a>
 					<a href="https://rnotes.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">📝</div>
+							<div class="app-card-badge" style="background:#fcd34d;">rN</div>
 							<div><div class="app-card-name">rNotes</div><div class="app-card-domain">rnotes.online</div></div>
 						</div>
 						<div class="app-card-desc">Real-time collaborative notebooks, checklists, and meeting notes. Local-first with end-to-end encryption and offline support.</div>
@@ -1259,7 +1314,7 @@
 					</a>
 					<a href="https://rpubs.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">📰</div>
+							<div class="app-card-badge" style="background:#fda4af;">rP</div>
 							<div><div class="app-card-name">rPubs</div><div class="app-card-domain">rpubs.online</div></div>
 						</div>
 						<div class="app-card-desc">Drop in a document, get a print-ready pocket book. Four formats, Typst typesetting, instant PDF generation. From draft to published in minutes.</div>
@@ -1267,7 +1322,7 @@
 					</a>
 					<a href="https://rtube.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">🎬</div>
+							<div class="app-card-badge" style="background:#f9a8d4;">rTu</div>
 							<div><div class="app-card-name">rTube</div><div class="app-card-domain">rtube.online</div></div>
 						</div>
 						<div class="app-card-desc">Community video sharing and streaming. Host, curate, and discuss video content without platform algorithms, ads, or surveillance.</div>
@@ -1275,7 +1330,7 @@
 					</a>
 					<a href="https://rswag.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">👕</div>
+							<div class="app-card-badge" style="background:#fca5a5;">rSw</div>
 							<div><div class="app-card-name">rSwag</div><div class="app-card-domain">rswag.online</div></div>
 						</div>
 						<div class="app-card-desc">Community merchandise on demand. Design, customize, and order stickers, shirts, and more with AI-powered design tools.</div>
@@ -1296,7 +1351,7 @@
 				<div class="area-apps">
 					<a href="https://rcal.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">📅</div>
+							<div class="app-card-badge" style="background:#7dd3fc;">rC</div>
 							<div><div class="app-card-name">rCal</div><div class="app-card-domain">rcal.online</div></div>
 						</div>
 						<div class="app-card-desc">Spatiotemporal group calendar. Ten zoom levels from moments to eras, map view for event locations, lunar phases, and deep integration with other r-Stack tools.</div>
@@ -1304,7 +1359,7 @@
 					</a>
 					<a href="https://rtrips.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">✈️</div>
+							<div class="app-card-badge" style="background:#6ee7b7;">rT</div>
 							<div><div class="app-card-name">rTrips</div><div class="app-card-domain">rtrips.online</div></div>
 						</div>
 						<div class="app-card-desc">Group trip planning. Itineraries, destinations, packing lists, and expenses &mdash; all linked across rMaps, rFunds, and rNotes in real time.</div>
@@ -1312,7 +1367,7 @@
 					</a>
 					<a href="https://rmaps.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">🗺️</div>
+							<div class="app-card-badge" style="background:#86efac;">rM</div>
 							<div><div class="app-card-name">rMaps</div><div class="app-card-domain">rmaps.online</div></div>
 						</div>
 						<div class="app-card-desc">Collaborative real-time mapping. Pin locations, draw regions, plan routes, and visualize your community's spatial footprint with open map tiles.</div>
@@ -1333,7 +1388,7 @@
 				<div class="area-apps">
 					<a href="https://rchats.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">💬</div>
+							<div class="app-card-badge" style="background:#6ee7b7;">rCh</div>
 							<div><div class="app-card-name">rChats</div><div class="app-card-domain">rchats.online</div></div>
 						</div>
 						<div class="app-card-desc">End-to-end encrypted community chat with self-sovereign identity. Channels, threads, and direct messages &mdash; all protected by EncryptID passkeys.</div>
@@ -1341,7 +1396,7 @@
 					</a>
 					<a href="https://rinbox.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">✉️</div>
+							<div class="app-card-badge" style="background:#a5b4fc;">rI</div>
 							<div><div class="app-card-name">rInbox</div><div class="app-card-domain">rinbox.online</div></div>
 						</div>
 						<div class="app-card-desc">Shared group inbox with multi-sig approval workflows. Self-hosted email for communities with entity extraction and graph-based discourse threading.</div>
@@ -1349,7 +1404,7 @@
 					</a>
 					<a href="https://rforum.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">🗣</div>
+							<div class="app-card-badge" style="background:#fcd34d;">rFo</div>
 							<div><div class="app-card-name">rForum</div><div class="app-card-domain">rforum.online</div></div>
 						</div>
 						<div class="app-card-desc">Self-hosted Discourse forums. Automated provisioning, DNS, SSL, and progress tracking. Full community discussion platform with trust levels and moderation.</div>
@@ -1370,7 +1425,7 @@
 				<div class="area-apps">
 					<a href="https://rchoices.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">🔀</div>
+							<div class="app-card-badge" style="background:#f0abfc;">rCo</div>
 							<div><div class="app-card-name">rChoices</div><div class="app-card-domain">rchoices.online</div></div>
 						</div>
 						<div class="app-card-desc">Collaborative decision making. Structured frameworks for evaluating options, weighing trade-offs, and reaching consensus as a group.</div>
@@ -1378,7 +1433,7 @@
 					</a>
 					<a href="https://rvote.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">🗳️</div>
+							<div class="app-card-badge" style="background:#c4b5fd;">rV</div>
 							<div><div class="app-card-name">rVote</div><div class="app-card-domain">rvote.online</div></div>
 						</div>
 						<div class="app-card-desc">Community governance. Create polls, weighted votes, and conviction-style proposals. Cryptographically signed ballots tied to EncryptID for verifiable, private voting.</div>
@@ -1399,7 +1454,7 @@
 				<div class="area-apps">
 					<a href="https://rwallet.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">💰</div>
+							<div class="app-card-badge" style="background:#fde047;">rW</div>
 							<div><div class="app-card-name">rWallet</div><div class="app-card-domain">rwallet.online</div></div>
 						</div>
 						<div class="app-card-desc">Community treasury management. Track shared resources, contributions, and funding flows with smart wallets. Paymaster-sponsored gasless transactions.</div>
@@ -1407,7 +1462,7 @@
 					</a>
 					<a href="https://rfunds.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">📊</div>
+							<div class="app-card-badge" style="background:#bef264;">rF</div>
 							<div><div class="app-card-name">rFunds</div><div class="app-card-domain">rfunds.online</div></div>
 						</div>
 						<div class="app-card-desc">Budget tracking and expense management. Split costs, allocate funds, and maintain transparent community finances with full audit trails.</div>
@@ -1415,7 +1470,7 @@
 					</a>
 					<a href="https://rcart.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">🛒</div>
+							<div class="app-card-badge" style="background:#fdba74;">rCt</div>
 							<div><div class="app-card-name">rCart</div><div class="app-card-domain">rcart.online</div></div>
 						</div>
 						<div class="app-card-desc">Group purchasing and crowdfunding. Pool resources, compare options, and fund community projects together. Accepts community tokens as payment.</div>
@@ -1423,7 +1478,7 @@
 					</a>
 					<a href="https://rauctions.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">🔨</div>
+							<div class="app-card-badge" style="background:#fca5a5;">rA</div>
 							<div><div class="app-card-name">rAuctions</div><div class="app-card-domain">rauctions.online</div></div>
 						</div>
 						<div class="app-card-desc">Cosmolocal auctions. List items, bid with USDC on Base, and settle peer-to-peer with EncryptID identity verification.</div>
@@ -1444,7 +1499,7 @@
 				<div class="area-apps">
 					<a href="https://rphotos.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">📸</div>
+							<div class="app-card-badge" style="background:#7dd3fc;">rPh</div>
 							<div><div class="app-card-name">rPhotos</div><div class="app-card-domain">rphotos.online</div></div>
 						</div>
 						<div class="app-card-desc">Community photo commons. Shared albums, AI-powered tagging, facial recognition, and location mapping &mdash; all self-hosted with full ownership of your memories.</div>
@@ -1452,7 +1507,7 @@
 					</a>
 					<a href="https://rnetwork.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">🕸</div>
+							<div class="app-card-badge" style="background:#93c5fd;">rNe</div>
 							<div><div class="app-card-name">rNetwork</div><div class="app-card-domain">rnetwork.online</div></div>
 						</div>
 						<div class="app-card-desc">Community directory and relationship mapping. See who's connected, discover collaborators, and grow your network with DID-based portable identity.</div>
@@ -1460,7 +1515,7 @@
 					</a>
 					<a href="https://rfiles.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">📁</div>
+							<div class="app-card-badge" style="background:#67e8f9;">rFi</div>
 							<div><div class="app-card-name">rFiles</div><div class="app-card-domain">rfiles.online</div></div>
 						</div>
 						<div class="app-card-desc">End-to-end encrypted file storage. Your community's documents, images, and media &mdash; encrypted with keys only community members hold. No admin backdoor.</div>
@@ -1468,7 +1523,7 @@
 					</a>
 					<a href="https://rsocials.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">📢</div>
+							<div class="app-card-badge" style="background:#7dd3fc;">rSo</div>
 							<div><div class="app-card-name">rSocials</div><div class="app-card-domain">rsocials.online</div></div>
 						</div>
 						<div class="app-card-desc">Manage your community's social media presence from one dashboard. Schedule posts, track engagement, and coordinate messaging across platforms.</div>
@@ -1489,7 +1544,7 @@
 				<div class="area-apps">
 					<a href="https://rdata.online" class="app-card" target="_blank" rel="noopener noreferrer">
 						<div class="app-card-header">
-							<div class="app-card-icon">📈</div>
+							<div class="app-card-badge" style="background:#d8b4fe;">rD</div>
 							<div><div class="app-card-name">rData</div><div class="app-card-domain">rdata.online</div></div>
 						</div>
 						<div class="app-card-desc">Self-hosted analytics dashboard. Lightweight, cookie-free, GDPR-compliant web analytics. See what matters without harvesting user data.</div>
@@ -1644,67 +1699,106 @@
 
 			<div class="oss-grid">
 				<div class="oss-card">
-					<h4>FolkJS</h4>
+					<div class="oss-card-header">
+						<div class="oss-logo" style="background:#22d3ee;">Fk</div>
+						<h4>FolkJS</h4>
+					</div>
 					<p>Spatial canvas engine powering rSpace. Web components positioned, connected, and composed on an infinite 2D surface.</p>
 					<span class="oss-tag">Canvas</span>
 				</div>
 				<div class="oss-card">
-					<h4>Automerge</h4>
+					<div class="oss-card-header">
+						<div class="oss-logo" style="background:#FFCC33; color:#2A1E20;">Am</div>
+						<h4>Automerge</h4>
+					</div>
 					<p>Local-first CRDTs for real-time sync. Peer-to-peer, offline-capable, Byzantine fault tolerant. The data layer for every rApp.</p>
 					<span class="oss-tag">Sync Layer</span>
 				</div>
 				<div class="oss-card">
-					<h4>WebAuthn</h4>
+					<div class="oss-card-header">
+						<div class="oss-logo" style="background:#3423A6;">Wa</div>
+						<h4>WebAuthn</h4>
+					</div>
 					<p>W3C standard for passwordless authentication. Hardware-backed passkeys via TPM and Secure Enclave.</p>
 					<span class="oss-tag">Identity</span>
 				</div>
 				<div class="oss-card">
-					<h4>Discourse</h4>
+					<div class="oss-card-header">
+						<div class="oss-logo" style="background:#0E76B2;">Dc</div>
+						<h4>Discourse</h4>
+					</div>
 					<p>The leading open-source discussion platform. Trust levels, moderation, and rich threading for rForum.</p>
 					<span class="oss-tag">Community</span>
 				</div>
 				<div class="oss-card">
-					<h4>Leaflet + OSM</h4>
+					<div class="oss-card-header">
+						<div class="oss-logo" style="background:#89C442;">Lf</div>
+						<h4>Leaflet + OSM</h4>
+					</div>
 					<p>Open-source mapping with OpenStreetMap tiles. Powers rMaps, rCal's spatial view, and rTrips route planning.</p>
 					<span class="oss-tag">Mapping</span>
 				</div>
 				<div class="oss-card">
-					<h4>Matrix Protocol</h4>
+					<div class="oss-card-header">
+						<div class="oss-logo" style="background:#0DBD8B;">[m]</div>
+						<h4>Matrix Protocol</h4>
+					</div>
 					<p>Decentralized, end-to-end encrypted messaging standard. Interoperable federation for rChats.</p>
 					<span class="oss-tag">Messaging</span>
 				</div>
 				<div class="oss-card">
-					<h4>Typst</h4>
+					<div class="oss-card-header">
+						<div class="oss-logo" style="background:#239DAD;">Ty</div>
+						<h4>Typst</h4>
+					</div>
 					<p>Modern typesetting system that's fast, ergonomic, and beautiful. Powers rPubs' document pipeline.</p>
 					<span class="oss-tag">Publishing</span>
 				</div>
 				<div class="oss-card">
-					<h4>Immich</h4>
+					<div class="oss-card-header">
+						<div class="oss-logo" style="background:#E8AA17; color:#1a1200;">Im</div>
+						<h4>Immich</h4>
+					</div>
 					<p>High-performance self-hosted photo management. AI-powered tagging, facial recognition, and mobile backup. Powers rPhotos.</p>
 					<span class="oss-tag">Photos</span>
 				</div>
 				<div class="oss-card">
-					<h4>PeerTube</h4>
+					<div class="oss-card-header">
+						<div class="oss-logo" style="background:#F1680D;">PT</div>
+						<h4>PeerTube</h4>
+					</div>
 					<p>Federated video hosting with ActivityPub. No algorithms, no ads, no surveillance. Powers rTube.</p>
 					<span class="oss-tag">Video</span>
 				</div>
 				<div class="oss-card">
-					<h4>Plausible</h4>
+					<div class="oss-card-header">
+						<div class="oss-logo" style="background:#4B38D8;">Pl</div>
+						<h4>Plausible</h4>
+					</div>
 					<p>Privacy-friendly analytics. No cookies, GDPR compliant, lightweight. Powers rData.</p>
 					<span class="oss-tag">Analytics</span>
 				</div>
 				<div class="oss-card">
-					<h4>Gnosis Safe</h4>
+					<div class="oss-card-header">
+						<div class="oss-logo" style="background:#008C73;">Sf</div>
+						<h4>Gnosis Safe</h4>
+					</div>
 					<p>Multi-sig wallet standard. Passkey-derived EOA as signer. Threshold signing for community treasuries across 12+ EVM chains.</p>
 					<span class="oss-tag">Wallet</span>
 				</div>
 				<div class="oss-card">
-					<h4>Docker + Traefik</h4>
+					<div class="oss-card-header">
+						<div class="oss-logo" style="background:#1D63ED;">Dk</div>
+						<h4>Docker + Traefik</h4>
+					</div>
 					<p>Container orchestration with automatic service discovery and TLS. The deployment backbone of every app.</p>
 					<span class="oss-tag">Infrastructure</span>
 				</div>
 				<div class="oss-card">
-					<h4>Hono + x402</h4>
+					<div class="oss-card-header">
+						<div class="oss-logo" style="background:#E36002;">Ho</div>
+						<h4>Hono + x402</h4>
+					</div>
 					<p>Edge-first web framework with HTTP 402 micropayment middleware. Any route can require payment &mdash; settled on EVM L2 rollups.</p>
 					<span class="oss-tag">Framework</span>
 				</div>
@@ -1789,37 +1883,37 @@
 
 			<div class="demo-preview">
 				<a href="https://rspace.online" class="demo-card" target="_blank" rel="noopener noreferrer">
-					<div class="demo-card-icon">🌌</div>
+					<div class="demo-card-badge" style="background:#5eead4;">rS</div>
 					<h3>Open a Canvas</h3>
 					<p>Jump into rSpace and start collaborating on an infinite, real-time canvas</p>
 				</a>
 				<a href="https://rvote.online" class="demo-card" target="_blank" rel="noopener noreferrer">
-					<div class="demo-card-icon">🗳</div>
+					<div class="demo-card-badge" style="background:#c4b5fd;">rV</div>
 					<h3>Cast a Vote</h3>
 					<p>Create a poll in rVote and see cryptographic ballot signing in action</p>
 				</a>
 				<a href="https://rpubs.online" class="demo-card" target="_blank" rel="noopener noreferrer">
-					<div class="demo-card-icon">📰</div>
+					<div class="demo-card-badge" style="background:#fda4af;">rP</div>
 					<h3>Publish a Book</h3>
 					<p>Drop a document into rPubs and generate a print-ready PDF in seconds</p>
 				</a>
 				<a href="https://rcal.online" class="demo-card" target="_blank" rel="noopener noreferrer">
-					<div class="demo-card-icon">📅</div>
+					<div class="demo-card-badge" style="background:#7dd3fc;">rC</div>
 					<h3>Plan Together</h3>
 					<p>Explore rCal's spatiotemporal calendar with ten zoom levels</p>
 				</a>
 				<a href="https://rmaps.online" class="demo-card" target="_blank" rel="noopener noreferrer">
-					<div class="demo-card-icon">🗺</div>
+					<div class="demo-card-badge" style="background:#86efac;">rM</div>
 					<h3>Map Your World</h3>
 					<p>Pin locations and draw regions on a collaborative open-source map</p>
 				</a>
 				<a href="https://rphotos.online" class="demo-card" target="_blank" rel="noopener noreferrer">
-					<div class="demo-card-icon">📸</div>
+					<div class="demo-card-badge" style="background:#7dd3fc;">rPh</div>
 					<h3>Browse Photos</h3>
 					<p>Explore the community photo commons with AI-powered search and shared albums</p>
 				</a>
 				<a href="https://ridentity.online" class="demo-card" target="_blank" rel="noopener noreferrer">
-					<div class="demo-card-icon">🔐</div>
+					<div class="demo-card-badge" style="background:#6ee7b7;">rId</div>
 					<h3>Try rIDs</h3>
 					<p>Register with a passkey and see zero-knowledge identity in action</p>
 				</a>