From 17c434dcee1e8d1c31ea223a041791bd9375efba Mon Sep 17 00:00:00 2001
From: Local Dev <dev@localhost>
Date: Fri, 23 Oct 2026 23:34:25 +0300
Subject: [PATCH] Theseus 0.3.110: horizontal cards, semi-transparent
 backgrounds, refreshed tagline

Silent Mode cards switch from a vertical icon-above-title-above-sub
layout to a horizontal one: a left stack holds the icon and the title,
the description sits on the right with left-aligned text and up to
three lines. Backgrounds move from the solid --card tone to a 55%
rgba with a 10 px backdrop blur so the wallpaper reads through.

Home tagline updated: 'Names that live on the Bitcoin Cash chain'
becomes 'Names that live on decentralized blockchain'. The address-bar
tip now points at hello.bch by name so the first step is obvious.
---
 home.html    | 28 +++++++++++++++-------------
 package.json |  2 +-
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/home.html b/home.html
index 7d92361f..8c6daa6d 100644
--- a/home.html
+++ b/home.html
@@ -119,25 +119,27 @@
   @media (max-width: 980px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
   @media (max-width: 560px) { .cards-grid { grid-template-columns: 1fr; } }
 
-  .card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
-          gap: 8px; padding: 18px 14px 16px; min-height: 148px;
-          background: var(--card); border: 1px solid var(--line); border-radius: 14px;
+  .card { display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
+          gap: 14px; padding: 14px 16px; min-height: 92px;
+          background: rgba(20,26,36,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+          border: 1px solid var(--line); border-radius: 14px;
           text-decoration: none; color: inherit; cursor: pointer; position: relative;
           transition: transform .12s, background .12s, border-color .12s; }
-  .card:hover { background: var(--card-hi); border-color: rgba(75,123,236,.4); transform: translateY(-1px); }
-  .card .card-ico { flex: none; width: 44px; height: 44px; border-radius: 10px;
+  .card:hover { background: rgba(20,26,36,.72); border-color: rgba(75,123,236,.4); transform: translateY(-1px); }
+  .card .card-left { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; }
+  .card .card-ico { flex: none; width: 40px; height: 40px; border-radius: 10px;
                     background: var(--iconBg, transparent);
                     display: flex; align-items: center; justify-content: center;
                     color: var(--iconFg, #e7eaf1); font-weight: 700; font-size: 20px;
                     overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
   .card .card-ico svg, .card .card-ico img { width: 100%; height: 100%; display: block; }
-  .card .card-title { font-size: 14px; font-weight: 600; color: var(--ink); text-align: center;
-                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
+  .card .card-title { font-size: 13px; font-weight: 600; color: var(--ink); text-align: center;
+                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; line-height: 1.2; }
   .card .card-title .tld { color: var(--acid); font-weight: 700; letter-spacing: .3px;
                            text-shadow: 0 0 8px rgb(from var(--acid) r g b / .35); }
-  .card .card-sub { font-size: 12px; color: var(--mut); text-align: center; line-height: 1.35;
-                    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
-                    overflow: hidden; max-width: 100%; }
+  .card .card-sub { flex: 1; min-width: 0; font-size: 12px; color: var(--mut); text-align: left; line-height: 1.4;
+                    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
+                    overflow: hidden; }
   .card:hover .card-sub { color: var(--ink); }
   .card.dragging { opacity: .6; }
   .card.drag-before::before, .card.drag-after::after {
@@ -225,12 +227,12 @@
       </div>
       <h1>Theseus <span class="g">Navigator</span></h1>
     </div>
-    <p class="tag">A browser that follows the thread. Names that live on the Bitcoin Cash chain.</p>
+    <p class="tag">A browser that follows the thread. Names that live on decentralized blockchain.</p>
     <form id="searchForm">
       <input id="q" placeholder="Search the web" autofocus spellcheck="false">
       <button type="submit">Search</button>
     </form>
-    <p class="hint">Tip: type a <b>.bch</b> name in the address bar above to open a decentralized site.</p>
+    <p class="hint">Tip: type <b>hello.bch</b> in the address bar above to open a decentralized site.</p>
   </div>
 
   <div class="homepage">
@@ -485,7 +487,7 @@
         el.style.setProperty("--iconFg", isLightColor(ic.color || "#d6ff3d") ? "#0b0e14" : "#ffffff");
       }
       const sub = ic.sub ? `<div class="card-sub">${esc(ic.sub)}</div>` : "";
-      el.innerHTML = `<div class="card-ico">${iconArt(ic)}</div><div class="card-title">${styledTitle(ic.title)}</div>${sub}`;
+      el.innerHTML = `<div class="card-left"><div class="card-ico">${iconArt(ic)}</div><div class="card-title">${styledTitle(ic.title)}</div></div>${sub}`;
       wireCard(el, i);
       grid.appendChild(el);
     });
diff --git a/package.json b/package.json
index 2433c08f..f43308ca 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "theseus-navigator",
-  "version": "0.3.109",
+  "version": "0.3.110",
   "license": "MPL-2.0",
   "description": "Theseus Navigator — a browser that follows the thread. By Silent Mode, a Deviant project.",
   "author": "Silent Mode",