fix(branding): use inline SVG for branded "i" instead of CSS pseudo-element

The CSS ::after dot positioning was unreliable across fonts and sizes.
Switch to an inline SVG of the "i" glyph (green dot + cyan stem/bars)
extracted from the logo — renders pixel-perfect at any size.

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

static/css/core/layout.css

@@ -87,25 +87,20 @@
     color: var(--text-primary);
 }
 
-/* Branded "i" — cyan letter with green dot, matching the logo icon.
+/* Branded "i" — inline SVG that matches the logo icon.
-   Uses a normal "i" glyph. The ::after pseudo-element overlays a green
+   Sized to 0.9em so it sits naturally alongside text at any font-size. */
-   circle on top of the font's native dot to recolor it. */
 .brand-i {
-    color: var(--accent-cyan);
-    position: relative;
     display: inline-block;
+    width: 0.55em;
+    height: 0.9em;
+    vertical-align: baseline;
+    position: relative;
+    top: 0.05em;
 }
-.brand-i::after {
+.brand-i svg {
-    content: '';
+    display: block;
-    position: absolute;
+    width: 100%;
-    top: 0.12em;
+    height: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0.25em;
-    height: 0.25em;
-    background: var(--accent-green);
-    border-radius: 50%;
-    box-shadow: 0 0 0.4em var(--accent-green);
 }
 
 .app-logo-tagline {

templates/adsb_dashboard.html

@@ -51,7 +51,7 @@
     <header class="header">
         <div class="logo">
             AIRCRAFT RADAR
-            <span>// <span class="brand-i">i</span>NTERCEPT - See the Invisible</span>
+            <span>// <span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT - See the Invisible</span>
         </div>
         <div class="status-bar">
             <!-- Agent Selector -->

templates/adsb_history.html

@@ -22,7 +22,7 @@
     <header class="header">
         <div class="logo">
             ADS-B HISTORY
-            <span>// <span class="brand-i">i</span>NTERCEPT REPORTING</span>
+            <span>// <span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT REPORTING</span>
         </div>
         <div class="status-bar">
             <a href="/adsb/dashboard" class="back-link">Live Radar</a>

templates/agents.html

@@ -281,7 +281,7 @@
             </svg>
         </div>
         <h1 style="margin: 0;">
-            <span class="brand-i">i</span>NTERCEPT <span class="tagline">// Remote Agents</span>
+            <span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT <span class="tagline">// Remote Agents</span>
         </h1>
     </header>
 

templates/ais_dashboard.html

@@ -51,7 +51,7 @@
     <header class="header">
         <div class="logo">
             VESSEL RADAR
-            <span>// <span class="brand-i">i</span>NTERCEPT - AIS Tracking</span>
+            <span>// <span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT - AIS Tracking</span>
         </div>
         <div class="status-bar">
             <!-- Agent Selector -->

templates/index.html

@@ -293,7 +293,7 @@
                         <rect x="38" y="76" width="24" height="4" rx="1" fill="#00d4ff" />
                     </svg>
                 </div>
-                <h1 class="welcome-title"><span class="brand-i">i</span>NTERCEPT</h1>
+                <h1 class="welcome-title"><span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT</h1>
                 <p class="welcome-tagline">// See the Invisible</p>
                 <span class="welcome-version">v{{ version }}</span>
                 <button type="button" class="welcome-settings-btn" onclick="showSettings()" title="Settings" aria-label="Open settings">
@@ -589,7 +589,7 @@
                     <rect x="38" y="76" width="24" height="4" rx="1" fill="#00d4ff" />
                 </svg>
             </a>
-            <h1><span class="brand-i">i</span>NTERCEPT <span class="tagline">// See the Invisible</span></h1>
+            <h1><span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT <span class="tagline">// See the Invisible</span></h1>
         </div>
         <div class="header-right">
             <span class="active-mode-indicator" id="activeModeIndicator"><span class="pulse-dot"></span>PAGER</span>

templates/layout/base.html

@@ -53,7 +53,7 @@
                         <rect x="38" y="76" width="24" height="4" rx="1" fill="var(--accent-cyan)"/>
                     </svg>
                     <span class="app-logo-text">
-                        <span class="app-logo-title"><span class="brand-i">i</span>NTERCEPT</span>
+                        <span class="app-logo-title"><span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT</span>
                         <span class="app-logo-tagline">// See the Invisible</span>
                     </span>
                 </a>

templates/layout/base_dashboard.html

@@ -151,7 +151,7 @@
                 {% block dashboard_title %}DASHBOARD{% endblock %}
             </span>
             <span style="font-size: var(--text-sm); color: var(--text-dim); margin-left: var(--space-2);">
-                // <span class="brand-i">i</span>NTERCEPT
+                // <span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT
             </span>
         </div>
     </div>

templates/partials/help-modal.html

@@ -7,7 +7,7 @@
 <div id="helpModal" class="help-modal" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="helpModalTitle" onclick="if(event.target === this) hideHelp()">
     <div class="help-content" tabindex="-1">
         <button type="button" class="help-close" onclick="hideHelp()" aria-label="Close help">&times;</button>
-        <h2 id="helpModalTitle"><span class="brand-i">i</span>NTERCEPT Help</h2>
+        <h2 id="helpModalTitle"><span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT Help</h2>
 
         <div class="help-tabs" role="tablist" aria-label="Help sections">
             <button type="button" class="help-tab active" data-tab="icons" onclick="switchHelpTab('icons')" role="tab" aria-controls="help-icons" aria-selected="true">Icons</button>

templates/partials/settings-modal.html

@@ -530,7 +530,7 @@
         <div id="settings-about" class="settings-section">
             <div class="settings-group">
                 <div class="about-info">
-                    <p><strong><span class="brand-i">i</span>NTERCEPT</strong> - Signal Intelligence Platform</p>
+                    <p><strong><span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT</strong> - Signal Intelligence Platform</p>
                     <p>Version: <span class="about-version">{{ version }}</span></p>
                     <p>
                         A unified web interface for software-defined radio (SDR) tools,
@@ -546,7 +546,7 @@
             <div class="settings-group">
                 <div class="settings-group-title">Support the Project</div>
                 <p style="color: var(--text-dim); margin-bottom: 15px; font-size: 12px;">
-                    If you find <span class="brand-i">i</span>NTERCEPT useful, consider supporting its development.
+                    If you find <span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT useful, consider supporting its development.
                 </p>
                 <a href="https://buymeacoffee.com/smittix" target="_blank" rel="noopener noreferrer" class="donate-btn">
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 18px; height: 18px; vertical-align: -3px; margin-right: 8px;">

templates/satellite_dashboard.html

@@ -37,7 +37,7 @@
     <header class="header">
         <div class="logo">
             SATELLITE COMMAND
-            <span>// <span class="brand-i">i</span>NTERCEPT - See the Invisible</span>
+            <span>// <span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT - See the Invisible</span>
         </div>
         <div class="stats-badges">
             <div class="stat-badge">