fix(branding): use regular "i" glyph with green dot overlay

The dotless i (ı) wasn't rendering in all fonts. Switch to a regular "i"
with the green dot CSS overlay positioned on top of the native dot.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-03-12 22:20:56 +00:00
parent 11b6b1107e
commit 2a0a12bd1c
11 changed files with 18 additions and 16 deletions
+6 -4
View File
@@ -87,7 +87,9 @@
color: var(--text-primary); color: var(--text-primary);
} }
/* Branded "i" — cyan stem with green dot, matching the logo icon */ /* Branded "i" — cyan letter with green dot, matching the logo icon.
Uses a normal "i" glyph. The ::after pseudo-element overlays a green
circle on top of the font's native dot to recolor it. */
.brand-i { .brand-i {
color: var(--accent-cyan); color: var(--accent-cyan);
position: relative; position: relative;
@@ -96,11 +98,11 @@
.brand-i::after { .brand-i::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0.05em; top: 0.12em;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 0.22em; width: 0.25em;
height: 0.22em; height: 0.25em;
background: var(--accent-green); background: var(--accent-green);
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 0.4em var(--accent-green); box-shadow: 0 0 0.4em var(--accent-green);
+1 -1
View File
@@ -51,7 +51,7 @@
<header class="header"> <header class="header">
<div class="logo"> <div class="logo">
AIRCRAFT RADAR AIRCRAFT RADAR
<span>// <span class="brand-i">&#x131;</span>NTERCEPT - See the Invisible</span> <span>// <span class="brand-i">i</span>NTERCEPT - See the Invisible</span>
</div> </div>
<div class="status-bar"> <div class="status-bar">
<!-- Agent Selector --> <!-- Agent Selector -->
+1 -1
View File
@@ -22,7 +22,7 @@
<header class="header"> <header class="header">
<div class="logo"> <div class="logo">
ADS-B HISTORY ADS-B HISTORY
<span>// <span class="brand-i">&#x131;</span>NTERCEPT REPORTING</span> <span>// <span class="brand-i">i</span>NTERCEPT REPORTING</span>
</div> </div>
<div class="status-bar"> <div class="status-bar">
<a href="/adsb/dashboard" class="back-link">Live Radar</a> <a href="/adsb/dashboard" class="back-link">Live Radar</a>
+1 -1
View File
@@ -281,7 +281,7 @@
</svg> </svg>
</div> </div>
<h1 style="margin: 0;"> <h1 style="margin: 0;">
<span class="brand-i">&#x131;</span>NTERCEPT <span class="tagline">// Remote Agents</span> <span class="brand-i">i</span>NTERCEPT <span class="tagline">// Remote Agents</span>
</h1> </h1>
</header> </header>
+1 -1
View File
@@ -51,7 +51,7 @@
<header class="header"> <header class="header">
<div class="logo"> <div class="logo">
VESSEL RADAR VESSEL RADAR
<span>// <span class="brand-i">&#x131;</span>NTERCEPT - AIS Tracking</span> <span>// <span class="brand-i">i</span>NTERCEPT - AIS Tracking</span>
</div> </div>
<div class="status-bar"> <div class="status-bar">
<!-- Agent Selector --> <!-- Agent Selector -->
+2 -2
View File
@@ -293,7 +293,7 @@
<rect x="38" y="76" width="24" height="4" rx="1" fill="#00d4ff" /> <rect x="38" y="76" width="24" height="4" rx="1" fill="#00d4ff" />
</svg> </svg>
</div> </div>
<h1 class="welcome-title"><span class="brand-i">&#x131;</span>NTERCEPT</h1> <h1 class="welcome-title"><span class="brand-i">i</span>NTERCEPT</h1>
<p class="welcome-tagline">// See the Invisible</p> <p class="welcome-tagline">// See the Invisible</p>
<span class="welcome-version">v{{ version }}</span> <span class="welcome-version">v{{ version }}</span>
<button type="button" class="welcome-settings-btn" onclick="showSettings()" title="Settings" aria-label="Open settings"> <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" /> <rect x="38" y="76" width="24" height="4" rx="1" fill="#00d4ff" />
</svg> </svg>
</a> </a>
<h1><span class="brand-i">&#x131;</span>NTERCEPT <span class="tagline">// See the Invisible</span></h1> <h1><span class="brand-i">i</span>NTERCEPT <span class="tagline">// See the Invisible</span></h1>
</div> </div>
<div class="header-right"> <div class="header-right">
<span class="active-mode-indicator" id="activeModeIndicator"><span class="pulse-dot"></span>PAGER</span> <span class="active-mode-indicator" id="activeModeIndicator"><span class="pulse-dot"></span>PAGER</span>
+1 -1
View File
@@ -53,7 +53,7 @@
<rect x="38" y="76" width="24" height="4" rx="1" fill="var(--accent-cyan)"/> <rect x="38" y="76" width="24" height="4" rx="1" fill="var(--accent-cyan)"/>
</svg> </svg>
<span class="app-logo-text"> <span class="app-logo-text">
<span class="app-logo-title"><span class="brand-i">&#x131;</span>NTERCEPT</span> <span class="app-logo-title"><span class="brand-i">i</span>NTERCEPT</span>
<span class="app-logo-tagline">// See the Invisible</span> <span class="app-logo-tagline">// See the Invisible</span>
</span> </span>
</a> </a>
+1 -1
View File
@@ -151,7 +151,7 @@
{% block dashboard_title %}DASHBOARD{% endblock %} {% block dashboard_title %}DASHBOARD{% endblock %}
</span> </span>
<span style="font-size: var(--text-sm); color: var(--text-dim); margin-left: var(--space-2);"> <span style="font-size: var(--text-sm); color: var(--text-dim); margin-left: var(--space-2);">
// <span class="brand-i">&#x131;</span>NTERCEPT // <span class="brand-i">i</span>NTERCEPT
</span> </span>
</div> </div>
</div> </div>
+1 -1
View File
@@ -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 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"> <div class="help-content" tabindex="-1">
<button type="button" class="help-close" onclick="hideHelp()" aria-label="Close help">&times;</button> <button type="button" class="help-close" onclick="hideHelp()" aria-label="Close help">&times;</button>
<h2 id="helpModalTitle"><span class="brand-i">&#x131;</span>NTERCEPT Help</h2> <h2 id="helpModalTitle"><span class="brand-i">i</span>NTERCEPT Help</h2>
<div class="help-tabs" role="tablist" aria-label="Help sections"> <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> <button type="button" class="help-tab active" data-tab="icons" onclick="switchHelpTab('icons')" role="tab" aria-controls="help-icons" aria-selected="true">Icons</button>
+2 -2
View File
@@ -530,7 +530,7 @@
<div id="settings-about" class="settings-section"> <div id="settings-about" class="settings-section">
<div class="settings-group"> <div class="settings-group">
<div class="about-info"> <div class="about-info">
<p><strong><span class="brand-i">&#x131;</span>NTERCEPT</strong> - Signal Intelligence Platform</p> <p><strong><span class="brand-i">i</span>NTERCEPT</strong> - Signal Intelligence Platform</p>
<p>Version: <span class="about-version">{{ version }}</span></p> <p>Version: <span class="about-version">{{ version }}</span></p>
<p> <p>
A unified web interface for software-defined radio (SDR) tools, A unified web interface for software-defined radio (SDR) tools,
@@ -546,7 +546,7 @@
<div class="settings-group"> <div class="settings-group">
<div class="settings-group-title">Support the Project</div> <div class="settings-group-title">Support the Project</div>
<p style="color: var(--text-dim); margin-bottom: 15px; font-size: 12px;"> <p style="color: var(--text-dim); margin-bottom: 15px; font-size: 12px;">
If you find <span class="brand-i">&#x131;</span>NTERCEPT useful, consider supporting its development. If you find <span class="brand-i">i</span>NTERCEPT useful, consider supporting its development.
</p> </p>
<a href="https://buymeacoffee.com/smittix" target="_blank" rel="noopener noreferrer" class="donate-btn"> <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;"> <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;">
+1 -1
View File
@@ -37,7 +37,7 @@
<header class="header"> <header class="header">
<div class="logo"> <div class="logo">
SATELLITE COMMAND SATELLITE COMMAND
<span>// <span class="brand-i">&#x131;</span>NTERCEPT - See the Invisible</span> <span>// <span class="brand-i">i</span>NTERCEPT - See the Invisible</span>
</div> </div>
<div class="stats-badges"> <div class="stats-badges">
<div class="stat-badge"> <div class="stat-badge">