mythtemple-ui-mark-100px.svg
Vector XML
<!-- MythTemple Rogue Scriptorium Mark (Optimized 100px / 32px Micro-Vector) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<!-- Outer Heavy Frame for Edge Integrity -->
<circle cx="50" cy="50" r="48" fill="#94a3b8" stroke="#020617" stroke-width="2.5"/>
<circle cx="50" cy="50" r="42" fill="#090d16" />
<!-- Stark White Inner Triangle Field -->
<polygon points="50,9 88,75 12,75" fill="#94a3b8" stroke="#020617" stroke-width="2"/>
<polygon points="50,16 81,70 19,70" fill="#ffffff" stroke="#020617" stroke-width="2.2"/>
<!-- Insurgent Jumper Bypass Line (Ear Tag Green Wire) -->
<path d="M 23,70 Q 32,52 46,47" fill="none" stroke="#22c55e" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="23" cy="70" r="2.2" fill="#22c55e" stroke="#020617" stroke-width="0.8"/>
<!-- Bold Lockpick Nib Body -->
<path d="M 50,23
C 54,37 59,45 61,56
L 56,56
L 56,66
L 44,66
L 44,56
L 39,56
C 41,45 46,37 50,23 Z"
fill="#090d16"
stroke="#090d16"
stroke-width="1.2" />
<!-- Facet Shading -->
<path d="M 50,25 C 53,36 57,43 58,54 L 50,54 Z" fill="#475569" />
<path d="M 50,25 C 47,36 43,43 42,54 L 50,54 Z" fill="#090d16" />
<!-- Cyan Breather Core & Slit -->
<circle cx="50" cy="46" r="3.2" fill="#38bdf8" stroke="#090d16" stroke-width="1.2" />
<line x1="50" y1="25" x2="50" y2="42.8" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
<!-- Collar Bar with Neon Status Indicator -->
<rect x="42" y="57" width="16" height="4" fill="#1e293b" stroke="#090d16" stroke-width="1" rx="0.5" />
<circle cx="50" cy="59" r="1.2" fill="#22c55e" />
</svg>
ghost-code-injection.css
Site Header CSS
/* ============================================================
MythTemple Ghost 6 Responsive Mark + Neon Carrier Pulse
Place in: Ghost Admin > Settings > Code Injection > Site Header
============================================================ */
/* Dimension stabilization */
.gh-head-logo img,
.gh-head-brand img,
.gh-head-logo svg {
max-height: 52px !important;
width: auto !important;
display: block;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.gh-head-logo:hover img,
.gh-head-logo:hover svg {
transform: scale(1.05);
}
/* Embedded Neon Slit Pulse Keyframes for Ghost */
@keyframes ghostSlitPulse {
0%, 100% {
stroke: #38bdf8;
filter: drop-shadow(0 0 2px rgba(56, 189, 248, 0.5));
}
50% {
stroke: #e0f2fe;
filter: drop-shadow(0 0 8px #38bdf8) drop-shadow(0 0 14px #0284c7);
}
}
@keyframes ghostPacketSurge {
0% { stroke-dashoffset: 40; opacity: 0; }
30% { opacity: 1; }
80% { opacity: 1; }
100% { stroke-dashoffset: -40; opacity: 0; }
}
.gh-head-logo svg .carrier-slit-glow {
animation: ghostSlitPulse 1.8s ease-in-out infinite;
}
.gh-head-logo svg .carrier-packet {
stroke-dasharray: 8, 22;
animation: ghostPacketSurge 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* Mobile responsive clamp */
@media (max-width: 640px) {
.gh-head-logo img,
.gh-head-logo svg {
max-height: 40px !important;
}
}