[Change] Hero banner v3: HASH/HEX/CSIG/YARA/STRING stages; readable tickers

rfxn · rfxn · commit dae770426ddd · 2026-04-04T22:32:07.000-05:00
[Change] Merge MD5+SHA256 into HASH stage; add CSIG stage; bump top-right
         sig ticker opacity for dark mode readability; even 150px stage spacing
diff --git a/assets/banner-dark.svg b/assets/banner-dark.svg
@@ -26,11 +26,11 @@
   <!-- Top: tagline -->
   <text x="40" y="30" fill="#c9d1d9" font-family="ui-monospace,'Cascadia Code','Source Code Pro',Consolas,monospace" font-size="13.5" letter-spacing="0.5">Multi-engine malware detection for Linux</text>
 
-  <!-- Top right: faded sig tickers -->
+  <!-- Top right: sig tickers -->
   <g font-family="ui-monospace,monospace" font-size="8.5">
-    <text x="578" y="20" fill="#f85149" opacity="0.18">{HEX}php.backdoor.shell.183</text>
-    <text x="596" y="31" fill="#f85149" opacity="0.14">{MD5}base64.inject.unclassed</text>
-    <text x="614" y="42" fill="#f85149" opacity="0.10">{YARA}perl.ircbot.gen.b</text>
+    <text x="578" y="20" fill="#f85149" opacity="0.4">{HEX}php.backdoor.shell.183</text>
+    <text x="596" y="31" fill="#f85149" opacity="0.32">{CSIG}js.obfus.eval.packed</text>
+    <text x="614" y="42" fill="#f85149" opacity="0.24">{YARA}perl.ircbot.gen.b</text>
   </g>
 
   <!-- Thin divider -->
@@ -41,11 +41,11 @@
 
     <!-- Stage headers -->
     <g font-family="ui-monospace,monospace" font-size="10" font-weight="600" letter-spacing="0.5">
-      <text x="32" y="14" fill="#4ade80" opacity="0.7">MD5</text>
-      <text x="165" y="14" fill="#4ade80" opacity="0.7">SHA256</text>
-      <text x="320" y="14" fill="#4ade80" opacity="0.7">HEX</text>
-      <text x="468" y="14" fill="#4ade80" opacity="0.7">YARA</text>
-      <text x="618" y="14" fill="#4ade80" opacity="0.7">STRING</text>
+      <text x="30" y="14" fill="#4ade80" opacity="0.7">HASH</text>
+      <text x="180" y="14" fill="#4ade80" opacity="0.7">HEX</text>
+      <text x="325" y="14" fill="#4ade80" opacity="0.7">CSIG</text>
+      <text x="475" y="14" fill="#4ade80" opacity="0.7">YARA</text>
+      <text x="630" y="14" fill="#4ade80" opacity="0.7">STRING</text>
     </g>
 
     <!-- Pipeline track -->
@@ -54,56 +54,56 @@
 
     <!-- Stage separators -->
     <g stroke="#30363d" stroke-width="1">
-      <line x1="140" y1="24" x2="140" y2="60"/>
-      <line x1="280" y1="24" x2="280" y2="60"/>
-      <line x1="430" y1="24" x2="430" y2="60"/>
-      <line x1="580" y1="24" x2="580" y2="60"/>
+      <line x1="150" y1="24" x2="150" y2="60"/>
+      <line x1="300" y1="24" x2="300" y2="60"/>
+      <line x1="450" y1="24" x2="450" y2="60"/>
+      <line x1="600" y1="24" x2="600" y2="60"/>
     </g>
 
     <!-- Clean file dots flowing through pipeline -->
     <g filter="url(#glow-green)">
-      <!-- MD5 stage -->
-      <circle cx="30" cy="42" r="3" fill="#4ade80" opacity="0.8"/>
+      <!-- HASH stage -->
+      <circle cx="28" cy="42" r="3" fill="#4ade80" opacity="0.8"/>
       <circle cx="58" cy="42" r="3" fill="#4ade80" opacity="0.55"/>
-      <circle cx="86" cy="42" r="3" fill="#4ade80" opacity="0.35"/>
-      <circle cx="114" cy="42" r="3" fill="#4ade80" opacity="0.2"/>
-      <!-- SHA256 stage -->
-      <circle cx="164" cy="42" r="3" fill="#4ade80" opacity="0.7"/>
-      <circle cx="196" cy="42" r="3" fill="#4ade80" opacity="0.45"/>
-      <circle cx="228" cy="42" r="3" fill="#4ade80" opacity="0.25"/>
+      <circle cx="88" cy="42" r="3" fill="#4ade80" opacity="0.35"/>
+      <circle cx="118" cy="42" r="3" fill="#4ade80" opacity="0.2"/>
       <!-- HEX stage -->
-      <circle cx="306" cy="42" r="3" fill="#4ade80" opacity="0.6"/>
-      <circle cx="342" cy="42" r="3" fill="#4ade80" opacity="0.35"/>
-      <circle cx="378" cy="42" r="3" fill="#4ade80" opacity="0.2"/>
+      <circle cx="176" cy="42" r="3" fill="#4ade80" opacity="0.7"/>
+      <circle cx="210" cy="42" r="3" fill="#4ade80" opacity="0.45"/>
+      <circle cx="244" cy="42" r="3" fill="#4ade80" opacity="0.25"/>
+      <!-- CSIG stage -->
+      <circle cx="326" cy="42" r="3" fill="#4ade80" opacity="0.6"/>
+      <circle cx="362" cy="42" r="3" fill="#4ade80" opacity="0.35"/>
+      <circle cx="398" cy="42" r="3" fill="#4ade80" opacity="0.2"/>
       <!-- YARA stage -->
-      <circle cx="458" cy="42" r="3" fill="#4ade80" opacity="0.5"/>
-      <circle cx="498" cy="42" r="3" fill="#4ade80" opacity="0.3"/>
-      <circle cx="538" cy="42" r="3" fill="#4ade80" opacity="0.15"/>
+      <circle cx="478" cy="42" r="3" fill="#4ade80" opacity="0.5"/>
+      <circle cx="514" cy="42" r="3" fill="#4ade80" opacity="0.3"/>
+      <circle cx="550" cy="42" r="3" fill="#4ade80" opacity="0.15"/>
       <!-- STRING stage -->
-      <circle cx="608" cy="42" r="3" fill="#4ade80" opacity="0.4"/>
-      <circle cx="648" cy="42" r="3" fill="#4ade80" opacity="0.2"/>
+      <circle cx="626" cy="42" r="3" fill="#4ade80" opacity="0.4"/>
+      <circle cx="660" cy="42" r="3" fill="#4ade80" opacity="0.2"/>
     </g>
 
     <!-- Threat hits — red with glow -->
     <g filter="url(#glow-red)">
-      <!-- Hit in MD5 stage -->
-      <circle cx="86" cy="42" r="4" fill="#f85149"/>
-      <!-- Hit in HEX stage -->
-      <circle cx="378" cy="42" r="4" fill="#f85149"/>
+      <!-- Hit in HASH stage -->
+      <circle cx="88" cy="42" r="4" fill="#f85149"/>
+      <!-- Hit in CSIG stage -->
+      <circle cx="398" cy="42" r="4" fill="#f85149"/>
       <!-- Hit in YARA stage -->
-      <circle cx="538" cy="42" r="4" fill="#f85149"/>
+      <circle cx="550" cy="42" r="4" fill="#f85149"/>
     </g>
 
     <!-- Hit action labels below pipeline -->
     <g font-family="ui-monospace,monospace" font-size="9" fill="#f85149" opacity="0.55">
-      <line x1="86" y1="60" x2="86" y2="70" stroke="#f85149" stroke-width="0.8" opacity="0.3"/>
-      <text x="66" y="82" text-anchor="start">quarantine</text>
+      <line x1="88" y1="60" x2="88" y2="70" stroke="#f85149" stroke-width="0.8" opacity="0.3"/>
+      <text x="68" y="82" text-anchor="start">quarantine</text>
 
-      <line x1="378" y1="60" x2="378" y2="70" stroke="#f85149" stroke-width="0.8" opacity="0.3"/>
-      <text x="367" y="82" text-anchor="start">clean</text>
+      <line x1="398" y1="60" x2="398" y2="70" stroke="#f85149" stroke-width="0.8" opacity="0.3"/>
+      <text x="387" y="82" text-anchor="start">clean</text>
 
-      <line x1="538" y1="60" x2="538" y2="70" stroke="#f85149" stroke-width="0.8" opacity="0.3"/>
-      <text x="518" y="82" text-anchor="start">quarantine</text>
+      <line x1="550" y1="60" x2="550" y2="70" stroke="#f85149" stroke-width="0.8" opacity="0.3"/>
+      <text x="530" y="82" text-anchor="start">quarantine</text>
     </g>
 
     <!-- Summary -->
diff --git a/assets/banner-light.svg b/assets/banner-light.svg
@@ -26,11 +26,11 @@
   <!-- Top: tagline -->
   <text x="40" y="30" fill="#334155" font-family="ui-monospace,'Cascadia Code','Source Code Pro',Consolas,monospace" font-size="13.5" letter-spacing="0.5">Multi-engine malware detection for Linux</text>
 
-  <!-- Top right: faded sig tickers -->
+  <!-- Top right: sig tickers -->
   <g font-family="ui-monospace,monospace" font-size="8.5">
-    <text x="578" y="20" fill="#dc2626" opacity="0.15">{HEX}php.backdoor.shell.183</text>
-    <text x="596" y="31" fill="#dc2626" opacity="0.11">{MD5}base64.inject.unclassed</text>
-    <text x="614" y="42" fill="#dc2626" opacity="0.08">{YARA}perl.ircbot.gen.b</text>
+    <text x="578" y="20" fill="#dc2626" opacity="0.3">{HEX}php.backdoor.shell.183</text>
+    <text x="596" y="31" fill="#dc2626" opacity="0.22">{CSIG}js.obfus.eval.packed</text>
+    <text x="614" y="42" fill="#dc2626" opacity="0.16">{YARA}perl.ircbot.gen.b</text>
   </g>
 
   <!-- Thin divider -->
@@ -41,11 +41,11 @@
 
     <!-- Stage headers -->
     <g font-family="ui-monospace,monospace" font-size="10" font-weight="600" letter-spacing="0.5">
-      <text x="32" y="14" fill="#16a34a" opacity="0.65">MD5</text>
-      <text x="165" y="14" fill="#16a34a" opacity="0.65">SHA256</text>
-      <text x="320" y="14" fill="#16a34a" opacity="0.65">HEX</text>
-      <text x="468" y="14" fill="#16a34a" opacity="0.65">YARA</text>
-      <text x="618" y="14" fill="#16a34a" opacity="0.65">STRING</text>
+      <text x="30" y="14" fill="#16a34a" opacity="0.65">HASH</text>
+      <text x="180" y="14" fill="#16a34a" opacity="0.65">HEX</text>
+      <text x="325" y="14" fill="#16a34a" opacity="0.65">CSIG</text>
+      <text x="475" y="14" fill="#16a34a" opacity="0.65">YARA</text>
+      <text x="630" y="14" fill="#16a34a" opacity="0.65">STRING</text>
     </g>
 
     <!-- Pipeline track -->
@@ -54,53 +54,53 @@
 
     <!-- Stage separators -->
     <g stroke="#cbd5e1" stroke-width="1">
-      <line x1="140" y1="24" x2="140" y2="60"/>
-      <line x1="280" y1="24" x2="280" y2="60"/>
-      <line x1="430" y1="24" x2="430" y2="60"/>
-      <line x1="580" y1="24" x2="580" y2="60"/>
+      <line x1="150" y1="24" x2="150" y2="60"/>
+      <line x1="300" y1="24" x2="300" y2="60"/>
+      <line x1="450" y1="24" x2="450" y2="60"/>
+      <line x1="600" y1="24" x2="600" y2="60"/>
     </g>
 
     <!-- Clean file dots flowing through pipeline -->
     <g filter="url(#glow-green)">
-      <!-- MD5 stage -->
-      <circle cx="30" cy="42" r="3" fill="#16a34a" opacity="0.75"/>
+      <!-- HASH stage -->
+      <circle cx="28" cy="42" r="3" fill="#16a34a" opacity="0.75"/>
       <circle cx="58" cy="42" r="3" fill="#16a34a" opacity="0.5"/>
-      <circle cx="86" cy="42" r="3" fill="#16a34a" opacity="0.3"/>
-      <circle cx="114" cy="42" r="3" fill="#16a34a" opacity="0.15"/>
-      <!-- SHA256 stage -->
-      <circle cx="164" cy="42" r="3" fill="#16a34a" opacity="0.65"/>
-      <circle cx="196" cy="42" r="3" fill="#16a34a" opacity="0.4"/>
-      <circle cx="228" cy="42" r="3" fill="#16a34a" opacity="0.2"/>
+      <circle cx="88" cy="42" r="3" fill="#16a34a" opacity="0.3"/>
+      <circle cx="118" cy="42" r="3" fill="#16a34a" opacity="0.15"/>
       <!-- HEX stage -->
-      <circle cx="306" cy="42" r="3" fill="#16a34a" opacity="0.55"/>
-      <circle cx="342" cy="42" r="3" fill="#16a34a" opacity="0.3"/>
-      <circle cx="378" cy="42" r="3" fill="#16a34a" opacity="0.15"/>
+      <circle cx="176" cy="42" r="3" fill="#16a34a" opacity="0.65"/>
+      <circle cx="210" cy="42" r="3" fill="#16a34a" opacity="0.4"/>
+      <circle cx="244" cy="42" r="3" fill="#16a34a" opacity="0.2"/>
+      <!-- CSIG stage -->
+      <circle cx="326" cy="42" r="3" fill="#16a34a" opacity="0.55"/>
+      <circle cx="362" cy="42" r="3" fill="#16a34a" opacity="0.3"/>
+      <circle cx="398" cy="42" r="3" fill="#16a34a" opacity="0.15"/>
       <!-- YARA stage -->
-      <circle cx="458" cy="42" r="3" fill="#16a34a" opacity="0.45"/>
-      <circle cx="498" cy="42" r="3" fill="#16a34a" opacity="0.25"/>
-      <circle cx="538" cy="42" r="3" fill="#16a34a" opacity="0.1"/>
+      <circle cx="478" cy="42" r="3" fill="#16a34a" opacity="0.45"/>
+      <circle cx="514" cy="42" r="3" fill="#16a34a" opacity="0.25"/>
+      <circle cx="550" cy="42" r="3" fill="#16a34a" opacity="0.1"/>
       <!-- STRING stage -->
-      <circle cx="608" cy="42" r="3" fill="#16a34a" opacity="0.35"/>
-      <circle cx="648" cy="42" r="3" fill="#16a34a" opacity="0.15"/>
+      <circle cx="626" cy="42" r="3" fill="#16a34a" opacity="0.35"/>
+      <circle cx="660" cy="42" r="3" fill="#16a34a" opacity="0.15"/>
     </g>
 
     <!-- Threat hits — red with glow -->
     <g filter="url(#glow-red)">
-      <circle cx="86" cy="42" r="4" fill="#dc2626"/>
-      <circle cx="378" cy="42" r="4" fill="#dc2626"/>
-      <circle cx="538" cy="42" r="4" fill="#dc2626"/>
+      <circle cx="88" cy="42" r="4" fill="#dc2626"/>
+      <circle cx="398" cy="42" r="4" fill="#dc2626"/>
+      <circle cx="550" cy="42" r="4" fill="#dc2626"/>
     </g>
 
     <!-- Hit action labels below pipeline -->
     <g font-family="ui-monospace,monospace" font-size="9" fill="#dc2626" opacity="0.5">
-      <line x1="86" y1="60" x2="86" y2="70" stroke="#dc2626" stroke-width="0.8" opacity="0.3"/>
-      <text x="66" y="82" text-anchor="start">quarantine</text>
+      <line x1="88" y1="60" x2="88" y2="70" stroke="#dc2626" stroke-width="0.8" opacity="0.3"/>
+      <text x="68" y="82" text-anchor="start">quarantine</text>
 
-      <line x1="378" y1="60" x2="378" y2="70" stroke="#dc2626" stroke-width="0.8" opacity="0.3"/>
-      <text x="367" y="82" text-anchor="start">clean</text>
+      <line x1="398" y1="60" x2="398" y2="70" stroke="#dc2626" stroke-width="0.8" opacity="0.3"/>
+      <text x="387" y="82" text-anchor="start">clean</text>
 
-      <line x1="538" y1="60" x2="538" y2="70" stroke="#dc2626" stroke-width="0.8" opacity="0.3"/>
-      <text x="518" y="82" text-anchor="start">quarantine</text>
+      <line x1="550" y1="60" x2="550" y2="70" stroke="#dc2626" stroke-width="0.8" opacity="0.3"/>
+      <text x="530" y="82" text-anchor="start">quarantine</text>
     </g>
 
     <!-- Summary -->
