Commit ff106889 authored by Mahmoud Aglan's avatar Mahmoud Aglan

design(proposal): replace all emoji with an inline SVG icon set

Emoji render as platform-specific colour cartoons (Apple/Windows/Android
each differ) which reads informal in a document going to a club board, and
they cannot inherit brand colour. Replaced every one with a 33-symbol
inline SVG sprite: 24x24, stroke-based, currentColor, sized in em so each
existing icon slot keeps its own scale.

Removed: swimmer, bell, receipt, credit card, mobile, bank, football,
martial-arts, tennis, cartwheel, page, lock, floppy, plug, envelope, gear,
up/down arrows, and the EG regional-indicator flag pair.

Also converted the geometric glyphs sitting in icon slots (fisheye,
diamonds, house, quadrant-circle, square-fill, clock) plus the list
check/x/arrow marks, so the icon layer is uniformly SVG rather than a mix
of text glyphs and emoji. A source scan for emoji ranges now returns clean.

Sprite is hidden with position/width/height rather than display:none,
which can break <use> resolution in some engines.

Fixes an unrelated pre-existing contrast bug found while verifying: .card
h4 is declared after .dark h4 at equal specificity, so the three cards in
the dark flow section rendered navy-on-navy. Added .dark .card h4.
Co-Authored-By: 's avatarClaude Opus 5 (1M context) <noreply@anthropic.com>
parent 783a14e6
...@@ -629,3 +629,26 @@ footer > *{ position:relative; z-index:1; } ...@@ -629,3 +629,26 @@ footer > *{ position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce){ @media (prefers-reduced-motion:reduce){
.reveal{ opacity:1; transform:none; transition:none; } .reveal{ opacity:1; transform:none; transition:none; }
} }
/* ================= ICONS =================
Inline SVG sprite replaces emoji: emoji render differently per platform
(and as full-colour cartoons on some), which reads informal in a board
document. Icons inherit colour via currentColor and scale from the
container's font-size, so every existing icon slot keeps its own sizing. */
.ico-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{
width:1em; height:1em; display:inline-block; vertical-align:-.14em;
fill:none; stroke:currentColor; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;
}
.card-ico .ico{ width:1.35em; height:1.35em; }
.sport-ico .ico{ width:1.15em; height:1.15em; }
.drop .ic .ico{ width:1em; height:1em; stroke-width:1.4; }
.dl .ico{ width:1.25em; height:1.25em; }
.tab i, .side .si i{ display:inline-flex; align-items:center; }
.tick .ico{ width:12px; height:12px; stroke-width:2.6; }
.steps .b .ico{ width:11px; height:11px; stroke-width:2.8; }
/* .card h4 is declared after .dark h4 at equal specificity, so cards placed
inside a .dark section inherited navy-on-navy headings. Raise specificity. */
.dark .card h4{ color:#fff; }
This diff is collapsed.
...@@ -93,11 +93,11 @@ ...@@ -93,11 +93,11 @@
if (!n || !noteBox) return; if (!n || !noteBox) return;
noteBox.innerHTML = noteBox.innerHTML =
'<div class="card" style="border-color:var(--line-2);">' + '<div class="card" style="border-color:var(--line-2);">' +
'<div class="card-ico"></div>' + '<div class="card-ico"><svg class="ico"><use href="#i-note"/></svg></div>' +
'<h4>' + n.t + '</h4>' + '<h4>' + n.t + '</h4>' +
'<p>' + n.p + '</p>' + '<p>' + n.p + '</p>' +
'<ul class="scope-list" style="margin-top:14px;">' + '<ul class="scope-list" style="margin-top:14px;">' +
n.b.map(function (x) { return '<li><span class="tick"></span><span>' + x + '</span></li>'; }).join('') + n.b.map(function (x) { return '<li><span class="tick"><svg class="ico"><use href="#i-check"/></svg></span><span>' + x + '</span></li>'; }).join('') +
'</ul>' + '</ul>' +
'</div>'; '</div>';
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment