From 0030cf97adb22dc829f3a199e5146e589466fcde Mon Sep 17 00:00:00 2001
From: Franz Kafka <kafka@ashisgreat.xyz>
Date: Sun, 22 Mar 2026 22:59:32 +0000
Subject: [PATCH] feat: per-engine accent colors in search results
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each engine now has a distinctive color accent applied to its result
card (left border) and engine badge (colored left strip + text).

16 engines mapped to brand-appropriate colors:
Google blue, Bing teal, DDG orange-red, Brave red, Qwant blue,
Wikipedia dark, GitHub purple, Reddit orange-red, YouTube red,
Stack Overflow amber, arXiv crimson, Crossref navy blue.

Pure CSS via data-engine attribute — no JavaScript.
---
 internal/views/static/css/kafka.css       | 49 +++++++++++++++++++++++
 internal/views/templates/result_item.html |  4 +-
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/internal/views/static/css/kafka.css b/internal/views/static/css/kafka.css
index feb6da5..f4aef1c 100644
--- a/internal/views/static/css/kafka.css
+++ b/internal/views/static/css/kafka.css
@@ -339,6 +339,10 @@ main {
   border-bottom: 1px solid var(--border);
 }
 
+.result[data-engine] {
+  border-left: 3px solid var(--accent, transparent);
+}
+
 .result:last-child {
   border-bottom: none;
 }
@@ -393,6 +397,51 @@ main {
   font-size: 0.7rem;
   color: var(--text-muted);
   margin-left: auto;
+  border-left: 2.5px solid transparent;
+  transition: border-color 0.15s ease;
+}
+
+/* ============================================================
+   Engine Accent Colors
+   ============================================================ */
+
+.result[data-engine="google"],
+.engine-badge[data-engine="google"]        { --accent: #4285f4; }
+.result[data-engine="bing"],
+.engine-badge[data-engine="bing"]          { --accent: #00897b; }
+.result[data-engine="duckduckgo"],
+.engine-badge[data-engine="duckduckgo"]    { --accent: #de5833; }
+.result[data-engine="brave"],
+.engine-badge[data-engine="brave"]         { --accent: #fb542b; }
+.result[data-engine="braveapi"],
+.engine-badge[data-engine="braveapi"]      { --accent: #ff6600; }
+.result[data-engine="qwant"],
+.engine-badge[data-engine="qwant"]         { --accent: #5c97ff; }
+.result[data-engine="wikipedia"],
+.engine-badge[data-engine="wikipedia"]     { --accent: #333333; }
+.result[data-engine="github"],
+.engine-badge[data-engine="github"]        { --accent: #8b5cf6; }
+.result[data-engine="reddit"],
+.engine-badge[data-engine="reddit"]        { --accent: #ff4500; }
+.result[data-engine="youtube"],
+.engine-badge[data-engine="youtube"]       { --accent: #ff0000; }
+.result[data-engine="stackoverflow"],
+.engine-badge[data-engine="stackoverflow"] { --accent: #f48024; }
+.result[data-engine="arxiv"],
+.engine-badge[data-engine="arxiv"]         { --accent: #b31b1b; }
+.result[data-engine="crossref"],
+.engine-badge[data-engine="crossref"]      { --accent: #00354d; }
+.result[data-engine="bing_images"],
+.engine-badge[data-engine="bing_images"]   { --accent: #00897b; }
+.result[data-engine="ddg_images"],
+.engine-badge[data-engine="ddg_images"]    { --accent: #de5833; }
+.result[data-engine="qwant_images"],
+.engine-badge[data-engine="qwant_images"]  { --accent: #5c97ff; }
+
+.engine-badge[data-engine] {
+  border-left-color: var(--accent, transparent);
+  color: var(--accent, var(--text-muted));
+  font-weight: 500;
 }
 
 .result_content {
diff --git a/internal/views/templates/result_item.html b/internal/views/templates/result_item.html
index cc548e2..3967891 100644
--- a/internal/views/templates/result_item.html
+++ b/internal/views/templates/result_item.html
@@ -1,12 +1,12 @@
 {{define "result_item"}}
-<article class="result">
+<article class="result" data-engine="{{.Engine}}">
   <div class="result_header">
     <a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.SafeTitle}}</a>
   </div>
   <div class="result_url">
     <img class="result-favicon" src="https://www.google.com/s2/favicons?domain={{.URL | urlquery}}&sz=32" alt="" loading="lazy" onerror="this.style.display='none'">
     <a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.URL}}</a>
-    <span class="engine-badge">{{.Engine}}</span>
+    <span class="engine-badge" data-engine="{{.Engine}}">{{.Engine}}</span>
   </div>
   {{if .Content}}
   <p class="result_content">{{.SafeContent}}</p>