johan
/
clavitor
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

chore: auto-commit uncommitted changes

This commit is contained in:
James 2026-03-24 12:01:47 -04:00
parent 4e909e6967
commit 7c7cfa7a4a
6 changed files with 118 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
clavitor.com/clavitor-web
View File

Binary file not shown.

43
clavitor.com/clavitor.css
View File

@ -7,9 +7,9 @@
:root {
/* Brand */
--brand-black: #0A0A0A;
--brand-accent: #7C3AED;
--brand-accent-light: #8B5CF6;
--brand-accent-dark: #6D28D9;
--brand-red: #DC2626;
--brand-red-light: #EF4444;
--brand-red-dark: #B91C1C;
/* Backgrounds */
--bg: #FFFFFF;
@ -30,7 +30,6 @@
/* Semantic */
--success: #16A34A;
--warning: #CA8A04;
--error: #DC2626;
--gold: #D4AF37;
/* Typography */
@ -47,14 +46,14 @@
/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
/* === LAYOUT === */
.container { max-width: var(--width); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: 80px 0; }
.section { padding-top: 80px; padding-bottom: 80px; }
.narrow { max-width: 800px; margin: 0 auto; }
.prose-width { max-width: 720px; }
hr.divider { border: none; border-top: 1px solid var(--border); }
@ -72,7 +71,7 @@ code { font-size: 0.875em; }
.label { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); }
.label.accent { color: var(--brand-black); }
.label.gold { color: var(--gold); }
.label.red { color: var(--error); }
.label.red { color: var(--brand-red); }
/* === EMPHASIS TEXT === */
.gradient-text { color: var(--brand-black); font-weight: 800; }
@ -84,13 +83,13 @@ code { font-size: 0.875em; }
.logo-lockup { display: inline-flex; gap: 20px; align-items: stretch; }
.logo-lockup-square { width: 80px; height: 80px; background: var(--brand-black); flex-shrink: 0; }
.logo-lockup-text { display: flex; flex-direction: column; justify-content: space-between; height: 80px; }
.logo-lockup-wordmark { font-family: var(--font-sans); font-size: 56px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--brand-accent); line-height: 1; }
.logo-lockup-wordmark { font-family: var(--font-sans); font-size: 56px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--brand-black); line-height: 1; }
.logo-lockup-tagline { font-size: 16px; font-weight: 500; color: var(--text-tertiary); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; margin-bottom: -2px; }
.logo-lockup-nav { transform: scale(0.65); transform-origin: left center; }
/* === NAV === */
.nav { position: fixed; top: 0; width: 100%; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: var(--width); margin: 0 auto; padding: 0 var(--pad); height: 64px; display: flex; align-items: center; justify-content: space-between; }
.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; font-size: 0.875rem; }
.nav-link { color: var(--text-secondary); font-weight: 500; transition: color 100ms ease; }
@ -102,8 +101,8 @@ code { font-size: 0.875em; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; padding: 0.625rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: all 100ms ease; text-align: center; text-decoration: none; }
.btn-primary { background: var(--brand-black); color: #ffffff; border-color: var(--brand-black); }
.btn-primary:hover { background: #262626; }
.btn-accent { background: var(--brand-accent); color: #ffffff; border-color: var(--brand-accent); }
.btn-accent:hover { background: var(--brand-accent-light); }
.btn-accent { background: var(--brand-red); color: #ffffff; border-color: var(--brand-red); }
.btn-accent:hover { background: var(--brand-red-light); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--bg-secondary); }
.btn-block { display: flex; width: 100%; }
@ -122,7 +121,7 @@ code { font-size: 0.875em; }
.card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; }
.card.alt { background: rgba(10,10,10,0.03); border-color: rgba(10,10,10,0.1); }
.card.gold { background: rgba(212,175,55,0.06); border-color: rgba(212,175,55,0.2); }
.card.red { background: rgba(239,68,68,0.04); border-color: rgba(239,68,68,0.15); }
.card.red { background: rgba(220,38,38,0.04); border-color: rgba(220,38,38,0.15); }
.card-hover { transition: transform 0.2s, box-shadow 0.2s; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
@ -135,35 +134,35 @@ code { font-size: 0.875em; }
/* === CODE BLOCKS === */
.code-block { background: var(--bg-inverse); border-radius: var(--radius); padding: 1.5rem; font-family: var(--font-mono); font-size: 0.875rem; overflow-x: auto; line-height: 1.7; color: #d1d5db; }
.code-block .prompt { color: #a5b4fc; }
.code-block .prompt { color: #fca5a5; }
.code-block .comment { color: #737373; }
.code-block .highlight { color: #a5b4fc; }
.code-block .highlight { color: #fca5a5; }
.code-label { font-size: 0.75rem; color: var(--text-tertiary); margin-bottom: 0.75rem; font-family: var(--font-sans); }
.code-block pre { margin: 0; color: #d1d5db; }
/* === FEATURE ICONS === */
.feature-icon { width: 2.5rem; height: 2.5rem; border-radius: 0; background: var(--brand-black); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; flex-shrink: 0; }
.feature-icon svg { width: 1.25rem; height: 1.25rem; color: #ffffff; stroke: #ffffff; }
.feature-icon.red { background: var(--error); border-radius: 0; }
.feature-icon.red { background: var(--brand-red); border-radius: 0; }
.feature-icon.red svg { color: #ffffff; stroke: #ffffff; }
/* === CHECKLISTS === */
.checklist { list-style: none; }
.checklist li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.75rem; }
.checklist li::before { content: ''; width: 1rem; height: 1rem; flex-shrink: 0; background: var(--brand-black); border-radius: 50%; margin-top: 0.125rem; clip-path: polygon(20% 50%, 40% 70%, 80% 25%, 85% 30%, 40% 80%, 15% 55%); }
.checklist.red li::before { background: var(--error); }
.checklist.red li::before { background: var(--brand-red); }
/* === BADGES === */
.badge { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: 9999px; }
.badge.accent { background: rgba(10,10,10,0.08); color: var(--brand-black); border: 1px solid rgba(10,10,10,0.15); }
.badge.gold { background: rgba(212,175,55,0.1); color: var(--gold); border: 1px solid rgba(212,175,55,0.2); }
.badge.red { background: rgba(239,68,68,0.1); color: var(--error); border: 1px solid rgba(239,68,68,0.2); }
.badge.red { background: rgba(220,38,38,0.08); color: var(--brand-red); border: 1px solid rgba(220,38,38,0.2); }
.badge.recommended { background: var(--brand-black); color: #ffffff; }
/* === PILLS === */
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; }
.pill { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; white-space: nowrap; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 9999px; font-size: 14px; font-weight: 500; }
.pill-accent { background: var(--brand-accent); color: white; border-color: var(--brand-accent); }
.pill-accent { background: var(--brand-red); color: white; border-color: var(--brand-red); }
/* === PRICING === */
.price-card { border-radius: var(--radius); border: 1px solid var(--border); padding: 2.5rem; background: var(--bg-secondary); }
@ -198,7 +197,7 @@ code { font-size: 0.875em; }
.visitor-label { font-weight: 600; font-size: 0.875rem; color: var(--text); }
.visitor-region { font-size: 0.75rem; color: var(--text-tertiary); margin-bottom: 0.5rem; }
.visitor-status { display: flex; align-items: center; justify-content: center; gap: 0.375rem; font-size: 0.75rem; color: var(--text-tertiary); }
.visitor-dot { width: 6px; height: 6px; border-radius: 50%; background: #EF4444; display: inline-block; }
.visitor-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-red); display: inline-block; }
/* === INSTALL STEPS === */
.step { display: flex; gap: 1.25rem; margin-bottom: 3rem; }
@ -213,7 +212,7 @@ code { font-size: 0.875em; }
.prose h3 { font-size: 1.1rem; font-weight: 600; color: var(--text); margin: 1.75rem 0 0.75rem; }
.prose p { color: var(--text-secondary); line-height: 1.8; margin-bottom: 1rem; }
.prose ul { color: var(--text-secondary); padding-left: 1.5rem; margin-bottom: 1rem; line-height: 1.8; }
.prose a { color: var(--brand-accent); }
.prose a { color: var(--brand-red); }
.prose a:hover { text-decoration: underline; }
/* === FOOTER === */
@ -239,7 +238,7 @@ code { font-size: 0.875em; }
.text-xs { font-size: 0.75rem; }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-accent { color: var(--brand-accent); }
.text-accent { color: var(--brand-red); }
.font-mono { font-family: var(--font-mono); }
/* === UTILITIES: Layout === */
@ -263,5 +262,5 @@ code { font-size: 0.875em; }
.grid-4-equal { grid-template-columns: repeat(2, 1fr); }
#dc-grid { flex-direction: column; }
.nav-links { gap: 0.75rem; font-size: 0.75rem; }
.section { padding: 48px 0; }
.section { padding-top: 48px; padding-bottom: 48px; }
}

2
clavitor.com/templates/base.tmpl
View File

@ -15,7 +15,7 @@
</head>
<body>
<nav class="nav">
<div class="nav-inner">
<div class="container nav-inner">
<a href="/" class="nav-logo"><span class="logo-lockup logo-lockup-nav"><span class="logo-lockup-square"></span><span class="logo-lockup-text"><span class="logo-lockup-wordmark">CLAVITOR</span><span class="logo-lockup-tagline">Black-box credential issuance</span></span></span></a>
<div class="nav-links">
<a href="https://github.com/clavitor/clavitor" target="_blank" rel="noopener" class="nav-link">GitHub</a>

182
clavitor.com/templates/hosted.tmpl
View File

@ -2,8 +2,8 @@
<!-- Hero -->
<div class="hero container">
<p class="label accent mb-4"><span class="vaultname">clavitor</span> hosted</p>
<h1>Your vault needs to work everywhere. We make sure it does.</h1>
<p class="lead">Your laptop, your phone, your browser extension — at home, at work, on the road. We run the infrastructure across 22 regions. You pick where your data lives. <s>$20</s> $12/yr.</p>
<h1>Zero cache. Every request hits the vault. So the vault has to be close.</h1>
<p class="lead">Clavitor never caches credentials — not in memory, not on disk, not anywhere. Every request is a fresh decrypt from the vault. That's the security model. To make it fast, we run across 22 regions on every continent. Your data lives where you choose. <s>$20</s> $12/yr.</p>
</div>
<!-- Map -->
@ -11,95 +11,95 @@
<div class="map-wrap">
<svg id="worldmap" viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg">
<image href="/worldmap.svg" x="0" y="0" width="1000" height="460"/>
<circle cx="284.7" cy="143.8" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.00s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.00s" repeatCount="indefinite"/></circle>
<circle cx="284.7" cy="143.8" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.80s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="0.80s" repeatCount="indefinite"/></circle>
<circle cx="284.7" cy="143.8" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="284.7" y="155.8" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Washington D.C.</text>
<circle cx="160.0" cy="143.1" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.08s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.08s" repeatCount="indefinite"/></circle>
<circle cx="160.0" cy="143.1" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.88s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="0.88s" repeatCount="indefinite"/></circle>
<circle cx="160.0" cy="143.1" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="160.0" y="135.1" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">San Francisco</text>
<circle cx="295.6" cy="122.8" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.16s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.16s" repeatCount="indefinite"/></circle>
<circle cx="295.6" cy="122.8" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.96s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="0.96s" repeatCount="indefinite"/></circle>
<circle cx="295.6" cy="122.8" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="295.6" y="114.8" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Montréal</text>
<circle cx="224.7" cy="187.0" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.24s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.24s" repeatCount="indefinite"/></circle>
<circle cx="224.7" cy="187.0" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.04s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.04s" repeatCount="indefinite"/></circle>
<circle cx="224.7" cy="187.0" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="224.7" y="199.0" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Mexico City</text>
<circle cx="294.2" cy="219.7" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.32s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.32s" repeatCount="indefinite"/></circle>
<circle cx="294.2" cy="219.7" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.12s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.12s" repeatCount="indefinite"/></circle>
<circle cx="294.2" cy="219.7" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="294.2" y="231.7" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Bogotá</text>
<circle cx="370.6" cy="282.7" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.40s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.40s" repeatCount="indefinite"/></circle>
<circle cx="370.6" cy="282.7" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.20s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.20s" repeatCount="indefinite"/></circle>
<circle cx="370.6" cy="282.7" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="370.6" y="294.7" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">São Paulo</text>
<circle cx="303.9" cy="306.0" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.48s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.48s" repeatCount="indefinite"/></circle>
<circle cx="303.9" cy="306.0" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.28s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.28s" repeatCount="indefinite"/></circle>
<circle cx="303.9" cy="306.0" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="303.9" y="318.0" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Santiago</text>
<circle cx="499.7" cy="106.0" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.56s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.56s" repeatCount="indefinite"/></circle>
<circle cx="499.7" cy="106.0" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.36s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.36s" repeatCount="indefinite"/></circle>
<circle cx="499.7" cy="106.0" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="499.7" y="98.0" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">London</text>
<circle cx="523.6" cy="117.6" r="5" fill="none" stroke="#D4AF37" stroke-width="2"><animate attributeName="r" values="5;18;5" dur="2.4s" begin="0.64s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.64s" repeatCount="indefinite"/></circle>
<circle cx="523.6" cy="117.6" r="5" fill="none" stroke="#D4AF37" stroke-width="1.5"><animate attributeName="r" values="5;18;5" dur="2.4s" begin="1.44s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.44s" repeatCount="indefinite"/></circle>
<circle cx="523.6" cy="117.6" r="6" fill="#D4AF37" stroke="#ffffff" stroke-width="2"/>
<circle cx="523.6" cy="117.6" r="3" fill="#ffffff"/>
<text x="523.6" y="109.6" font-family="Inter,sans-serif" font-size="8.5" fill="#D4AF37" text-anchor="middle" opacity="0.85">Zürich</text>
<circle cx="489.7" cy="136.4" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.72s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.72s" repeatCount="indefinite"/></circle>
<circle cx="489.7" cy="136.4" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.52s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.52s" repeatCount="indefinite"/></circle>
<circle cx="489.7" cy="136.4" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="489.7" y="128.4" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Madrid</text>
<circle cx="550.3" cy="82.1" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.80s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.80s" repeatCount="indefinite"/></circle>
<circle cx="550.3" cy="82.1" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.60s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.60s" repeatCount="indefinite"/></circle>
<circle cx="550.3" cy="82.1" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="550.3" y="74.1" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Stockholm</text>
<circle cx="580.3" cy="134.8" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.88s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.88s" repeatCount="indefinite"/></circle>
<circle cx="580.3" cy="134.8" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.68s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.68s" repeatCount="indefinite"/></circle>
<circle cx="580.3" cy="134.8" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="580.3" y="126.8" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Istanbul</text>
<circle cx="653.6" cy="173.6" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.96s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.96s" repeatCount="indefinite"/></circle>
<circle cx="653.6" cy="173.6" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.76s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.76s" repeatCount="indefinite"/></circle>
<circle cx="653.6" cy="173.6" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="653.6" y="165.6" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Dubai</text>
<circle cx="509.4" cy="215.7" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.04s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.04s" repeatCount="indefinite"/></circle>
<circle cx="509.4" cy="215.7" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.84s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.84s" repeatCount="indefinite"/></circle>
<circle cx="509.4" cy="215.7" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="509.4" y="227.7" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Lagos</text>
<circle cx="602.2" cy="232.8" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.12s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.12s" repeatCount="indefinite"/></circle>
<circle cx="602.2" cy="232.8" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.92s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.92s" repeatCount="indefinite"/></circle>
<circle cx="602.2" cy="232.8" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="602.2" y="244.8" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Nairobi</text>
<circle cx="551.1" cy="307.2" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.20s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.20s" repeatCount="indefinite"/></circle>
<circle cx="551.1" cy="307.2" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="2.00s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="2.00s" repeatCount="indefinite"/></circle>
<circle cx="551.1" cy="307.2" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="551.1" y="319.2" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Cape Town</text>
<circle cx="702.5" cy="187.7" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.28s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.28s" repeatCount="indefinite"/></circle>
<circle cx="702.5" cy="187.7" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="2.08s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="2.08s" repeatCount="indefinite"/></circle>
<circle cx="702.5" cy="187.7" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="702.5" y="179.7" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Mumbai</text>
<circle cx="788.3" cy="227.2" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.36s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.36s" repeatCount="indefinite"/></circle>
<circle cx="788.3" cy="227.2" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="2.16s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="2.16s" repeatCount="indefinite"/></circle>
<circle cx="788.3" cy="227.2" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="788.3" y="239.2" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Singapore</text>
<circle cx="920.0" cy="307.2" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.44s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.44s" repeatCount="indefinite"/></circle>
<circle cx="920.0" cy="307.2" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="2.24s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="2.24s" repeatCount="indefinite"/></circle>
<circle cx="920.0" cy="307.2" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="920.0" y="319.2" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Sydney</text>
<circle cx="888.1" cy="148.3" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.52s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.52s" repeatCount="indefinite"/></circle>
<circle cx="888.1" cy="148.3" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="2.32s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="2.32s" repeatCount="indefinite"/></circle>
<circle cx="888.1" cy="148.3" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="888.1" y="140.3" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Tokyo</text>
<circle cx="852.5" cy="143.6" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.60s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.60s" repeatCount="indefinite"/></circle>
<circle cx="852.5" cy="143.6" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="2.40s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="2.40s" repeatCount="indefinite"/></circle>
<circle cx="852.5" cy="143.6" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="852.5" y="135.6" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Seoul</text>
<circle cx="817.2" cy="180.3" r="4" fill="none" stroke="#7C3AED" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.68s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.68s" repeatCount="indefinite"/></circle>
<circle cx="817.2" cy="180.3" r="4" fill="none" stroke="#7C3AED" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="2.48s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="2.48s" repeatCount="indefinite"/></circle>
<circle cx="817.2" cy="180.3" r="4.5" fill="#7C3AED" stroke="#ffffff" stroke-width="1.5"/>
<text x="817.2" y="172.3" font-family="Inter,sans-serif" font-size="8.5" fill="#6D28D9" text-anchor="middle" opacity="0.85">Hong Kong</text>
<circle cx="284.7" cy="143.8" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.00s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.00s" repeatCount="indefinite"/></circle>
<circle cx="284.7" cy="143.8" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.80s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="0.80s" repeatCount="indefinite"/></circle>
<circle cx="284.7" cy="143.8" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="284.7" y="155.8" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Washington D.C.</text>
<circle cx="160.0" cy="143.1" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.08s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.08s" repeatCount="indefinite"/></circle>
<circle cx="160.0" cy="143.1" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.88s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="0.88s" repeatCount="indefinite"/></circle>
<circle cx="160.0" cy="143.1" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="160.0" y="135.1" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">San Francisco</text>
<circle cx="295.6" cy="122.8" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.16s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.16s" repeatCount="indefinite"/></circle>
<circle cx="295.6" cy="122.8" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.96s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="0.96s" repeatCount="indefinite"/></circle>
<circle cx="295.6" cy="122.8" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="295.6" y="114.8" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Montréal</text>
<circle cx="224.7" cy="187.0" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.24s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.24s" repeatCount="indefinite"/></circle>
<circle cx="224.7" cy="187.0" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.04s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.04s" repeatCount="indefinite"/></circle>
<circle cx="224.7" cy="187.0" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="224.7" y="199.0" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Mexico City</text>
<circle cx="294.2" cy="219.7" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.32s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.32s" repeatCount="indefinite"/></circle>
<circle cx="294.2" cy="219.7" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.12s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.12s" repeatCount="indefinite"/></circle>
<circle cx="294.2" cy="219.7" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="294.2" y="231.7" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Bogotá</text>
<circle cx="370.6" cy="282.7" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.40s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.40s" repeatCount="indefinite"/></circle>
<circle cx="370.6" cy="282.7" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.20s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.20s" repeatCount="indefinite"/></circle>
<circle cx="370.6" cy="282.7" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="370.6" y="294.7" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">São Paulo</text>
<circle cx="303.9" cy="306.0" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.48s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.48s" repeatCount="indefinite"/></circle>
<circle cx="303.9" cy="306.0" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.28s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.28s" repeatCount="indefinite"/></circle>
<circle cx="303.9" cy="306.0" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="303.9" y="318.0" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Santiago</text>
<circle cx="499.7" cy="106.0" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.56s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.56s" repeatCount="indefinite"/></circle>
<circle cx="499.7" cy="106.0" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.36s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.36s" repeatCount="indefinite"/></circle>
<circle cx="499.7" cy="106.0" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="499.7" y="98.0" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">London</text>
<circle cx="523.6" cy="117.6" r="5" fill="none" stroke="#0A0A0A" stroke-width="2"><animate attributeName="r" values="5;18;5" dur="2.4s" begin="0.64s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.64s" repeatCount="indefinite"/></circle>
<circle cx="523.6" cy="117.6" r="5" fill="none" stroke="#0A0A0A" stroke-width="1.5"><animate attributeName="r" values="5;18;5" dur="2.4s" begin="1.44s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.44s" repeatCount="indefinite"/></circle>
<circle cx="523.6" cy="117.6" r="6" fill="#0A0A0A" stroke="#F5F5F5" stroke-width="2"/>
<circle cx="523.6" cy="117.6" r="3" fill="#F5F5F5"/>
<text x="523.6" y="109.6" font-family="Inter,sans-serif" font-size="8.5" fill="#0A0A0A" text-anchor="middle" opacity="0.85">Zürich</text>
<circle cx="489.7" cy="136.4" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.72s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.72s" repeatCount="indefinite"/></circle>
<circle cx="489.7" cy="136.4" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.52s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.52s" repeatCount="indefinite"/></circle>
<circle cx="489.7" cy="136.4" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="489.7" y="128.4" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Madrid</text>
<circle cx="550.3" cy="82.1" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.80s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.80s" repeatCount="indefinite"/></circle>
<circle cx="550.3" cy="82.1" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.60s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.60s" repeatCount="indefinite"/></circle>
<circle cx="550.3" cy="82.1" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="550.3" y="74.1" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Stockholm</text>
<circle cx="580.3" cy="134.8" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.88s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.88s" repeatCount="indefinite"/></circle>
<circle cx="580.3" cy="134.8" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.68s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.68s" repeatCount="indefinite"/></circle>
<circle cx="580.3" cy="134.8" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="580.3" y="126.8" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Istanbul</text>
<circle cx="653.6" cy="173.6" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="0.96s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="0.96s" repeatCount="indefinite"/></circle>
<circle cx="653.6" cy="173.6" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.76s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.76s" repeatCount="indefinite"/></circle>
<circle cx="653.6" cy="173.6" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="653.6" y="165.6" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Dubai</text>
<circle cx="509.4" cy="215.7" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.04s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.04s" repeatCount="indefinite"/></circle>
<circle cx="509.4" cy="215.7" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.84s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.84s" repeatCount="indefinite"/></circle>
<circle cx="509.4" cy="215.7" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="509.4" y="227.7" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Lagos</text>
<circle cx="602.2" cy="232.8" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.12s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.12s" repeatCount="indefinite"/></circle>
<circle cx="602.2" cy="232.8" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.92s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="1.92s" repeatCount="indefinite"/></circle>
<circle cx="602.2" cy="232.8" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="602.2" y="244.8" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Nairobi</text>
<circle cx="551.1" cy="307.2" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.20s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.20s" repeatCount="indefinite"/></circle>
<circle cx="551.1" cy="307.2" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="2.00s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="2.00s" repeatCount="indefinite"/></circle>
<circle cx="551.1" cy="307.2" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="551.1" y="319.2" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Cape Town</text>
<circle cx="702.5" cy="187.7" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.28s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.28s" repeatCount="indefinite"/></circle>
<circle cx="702.5" cy="187.7" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="2.08s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="2.08s" repeatCount="indefinite"/></circle>
<circle cx="702.5" cy="187.7" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="702.5" y="179.7" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Mumbai</text>
<circle cx="788.3" cy="227.2" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.36s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.36s" repeatCount="indefinite"/></circle>
<circle cx="788.3" cy="227.2" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="2.16s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="2.16s" repeatCount="indefinite"/></circle>
<circle cx="788.3" cy="227.2" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="788.3" y="239.2" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Singapore</text>
<circle cx="920.0" cy="307.2" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.44s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.44s" repeatCount="indefinite"/></circle>
<circle cx="920.0" cy="307.2" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="2.24s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="2.24s" repeatCount="indefinite"/></circle>
<circle cx="920.0" cy="307.2" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="920.0" y="319.2" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Sydney</text>
<circle cx="888.1" cy="148.3" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.52s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.52s" repeatCount="indefinite"/></circle>
<circle cx="888.1" cy="148.3" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="2.32s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="2.32s" repeatCount="indefinite"/></circle>
<circle cx="888.1" cy="148.3" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="888.1" y="140.3" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Tokyo</text>
<circle cx="852.5" cy="143.6" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.60s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.60s" repeatCount="indefinite"/></circle>
<circle cx="852.5" cy="143.6" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="2.40s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="2.40s" repeatCount="indefinite"/></circle>
<circle cx="852.5" cy="143.6" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="852.5" y="135.6" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Seoul</text>
<circle cx="817.2" cy="180.3" r="4" fill="none" stroke="#DC2626" stroke-width="1.5"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="1.68s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="2.4s" begin="1.68s" repeatCount="indefinite"/></circle>
<circle cx="817.2" cy="180.3" r="4" fill="none" stroke="#DC2626" stroke-width="1"><animate attributeName="r" values="4;13;4" dur="2.4s" begin="2.48s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" begin="2.48s" repeatCount="indefinite"/></circle>
<circle cx="817.2" cy="180.3" r="4.5" fill="#DC2626" stroke="#F5F5F5" stroke-width="1.5"/>
<text x="817.2" y="172.3" font-family="Inter,sans-serif" font-size="8.5" fill="#B91C1C" text-anchor="middle" opacity="0.85">Hong Kong</text>
</svg>
</div>
<div class="map-gap"></div>

80
clavitor.com/templates/index.tmpl
View File

@ -100,80 +100,6 @@
<hr class="divider">
<!-- 3D Box Prototypes (TEMPORARY) -->
<div class="section container">
<h2 class="mb-4">Black box icon options</h2>
<p class="lead mb-8">6 corners. Front face dominant, slight depth peek right + top.</p>
<div style="display:flex;gap:48px;align-items:flex-end;flex-wrap:wrap">
<!-- Option A: Subtle depth, strong contrast -->
<div style="text-align:center">
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="4,15 58,15 58,73 4,73" fill="#0A0A0A"/>
<polygon points="4,15 14,8 68,8 58,15" fill="#555"/>
<polygon points="58,15 68,8 68,66 58,73" fill="#333"/>
</svg>
<p class="text-sm mt-3"><strong>A.</strong> Subtle</p>
</div>
<!-- Option B: More depth, strong contrast -->
<div style="text-align:center">
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="4,18 54,18 54,74 4,74" fill="#0A0A0A"/>
<polygon points="4,18 18,8 68,8 54,18" fill="#555"/>
<polygon points="54,18 68,8 68,64 54,74" fill="#333"/>
</svg>
<p class="text-sm mt-3"><strong>B.</strong> More depth</p>
</div>
<!-- Option C: Just a hair -->
<div style="text-align:center">
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="4,13 62,13 62,73 4,73" fill="#0A0A0A"/>
<polygon points="4,13 11,8 69,8 62,13" fill="#555"/>
<polygon points="62,13 69,8 69,68 62,73" fill="#333"/>
</svg>
<p class="text-sm mt-3"><strong>C.</strong> Just a hair</p>
</div>
<!-- Option D: Very light top face -->
<div style="text-align:center">
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="4,15 58,15 58,73 4,73" fill="#0A0A0A"/>
<polygon points="4,15 14,8 68,8 58,15" fill="#777"/>
<polygon points="58,15 68,8 68,66 58,73" fill="#444"/>
</svg>
<p class="text-sm mt-3"><strong>D.</strong> Lighter top</p>
</div>
<!-- Option E: A at icon size 40px -->
<div style="text-align:center">
<div style="width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center">
<svg width="40" height="40" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="4,15 58,15 58,73 4,73" fill="#0A0A0A"/>
<polygon points="4,15 14,8 68,8 58,15" fill="#555"/>
<polygon points="58,15 68,8 68,66 58,73" fill="#333"/>
</svg>
</div>
<p class="text-sm mt-3"><strong>E.</strong> A at 40px</p>
</div>
<!-- Option F: Red variant at 40px -->
<div style="text-align:center">
<div style="width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center">
<svg width="40" height="40" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="4,15 58,15 58,73 4,73" fill="#DC2626"/>
<polygon points="4,15 14,8 68,8 58,15" fill="#F87171"/>
<polygon points="58,15 68,8 68,66 58,73" fill="#B91C1C"/>
</svg>
</div>
<p class="text-sm mt-3"><strong>F.</strong> Red at 40px</p>
</div>
</div>
</div>
<hr class="divider">
<!-- The Problem -->
<div class="section container">
@ -526,7 +452,7 @@
const ring = document.createElementNS(ns, 'circle');
ring.setAttribute('cx', x); ring.setAttribute('cy', y);
ring.setAttribute('r', '3'); ring.setAttribute('fill', 'none');
ring.setAttribute('stroke', '#EF4444'); ring.setAttribute('stroke-width', '1.5');
ring.setAttribute('stroke', '#0A0A0A'); ring.setAttribute('stroke-width', '1.5');
const a1 = document.createElementNS(ns, 'animate');
a1.setAttribute('attributeName', 'r'); a1.setAttribute('values', '3;16;3');
a1.setAttribute('dur', '2s'); a1.setAttribute('repeatCount', 'indefinite');
@ -538,7 +464,7 @@
// Dot
const dot = document.createElementNS(ns, 'circle');
dot.setAttribute('cx', x); dot.setAttribute('cy', y);
dot.setAttribute('r', '4'); dot.setAttribute('fill', '#EF4444');
dot.setAttribute('r', '4'); dot.setAttribute('fill', '#0A0A0A');
dot.setAttribute('stroke', '#ffffff'); dot.setAttribute('stroke-width', '1.5');
// Label
@ -546,7 +472,7 @@
label.setAttribute('x', x); label.setAttribute('y', y + 15);
label.setAttribute('font-family', 'Inter,sans-serif');
label.setAttribute('font-size', '10');
label.setAttribute('fill', '#EF4444');
label.setAttribute('fill', '#0A0A0A');
label.setAttribute('text-anchor', 'middle');
label.setAttribute('font-weight', '500');
label.textContent = city || 'You';

4
clavitor.com/worldmap.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 130 KiB

After

Width:  |  Height:  |  Size: 130 KiB