feat: replace all low-res emojis with crisp handcrafted vector SVG icons

css/styles.css

@@ -698,20 +698,47 @@ button, input, select, textarea {
 }
 
 .pillar-icon {
-  width: 52px;
+  width: 56px;
-  height: 52px;
+  height: 56px;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 24px;
+  margin-bottom: 22px;
-  margin-bottom: 20px;
+  transition: var(--transition);
+}
+
+.pillar-icon svg {
+  width: 28px;
+  height: 28px;
+  transition: transform 0.3s ease;
+}
+
+.pillar-card:hover .pillar-icon svg {
+  transform: scale(1.12);
+}
+
+.icon-red { background: rgba(230, 57, 70, 0.12); color: var(--relief-red); border: 1px solid rgba(230, 57, 70, 0.22); }
+.icon-orange { background: rgba(245, 158, 11, 0.14); color: #d97706; border: 1px solid rgba(245, 158, 11, 0.25); }
+.icon-blue { background: rgba(59, 130, 246, 0.12); color: #2563eb; border: 1px solid rgba(59, 130, 246, 0.22); }
+.icon-gold { background: rgba(212, 175, 55, 0.15); color: #b8911f; border: 1px solid rgba(212, 175, 55, 0.28); }
+
+.contact-info-heading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--font-heading);
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--primary-900);
+  margin-bottom: 10px;
+}
+
+.contact-info-heading svg {
+  color: var(--gold-500);
+  flex-shrink: 0;
 }
 
-.icon-red { background: rgba(230, 57, 70, 0.12); color: var(--relief-red); }
-.icon-orange { background: rgba(245, 158, 11, 0.12); color: #d97706; }
-.icon-blue { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
-.icon-gold { background: rgba(212, 175, 55, 0.15); color: #b8911f; }
 
 .pillar-card h3 {
   font-family: var(--font-heading);

index.html

@@ -70,9 +70,15 @@
   <section class="hero">
     <div class="container">
       <div class="hero-content">
-        <div class="eyebrow" data-i18n="hero.eyebrow">
+        <div class="eyebrow">
-          ⚠️ URGENT RELIEF & REBUILDING INITIATIVE • CARACAS, VENEZUELA
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: -2px; margin-right: 6px;">
+            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+            <line x1="12" y1="9" x2="12" y2="13"></line>
+            <line x1="12" y1="17" x2="12.01" y2="17"></line>
+          </svg>
+          <span data-i18n="hero.eyebrow">URGENT RELIEF & REBUILDING INITIATIVE • CARACAS, VENEZUELA</span>
         </div>
+
         
         <!-- StoryBrand Hero Character Hook -->
         <p style="font-size: 1.15rem; color: var(--gold-300); font-weight: 600; margin-bottom: 12px; letter-spacing: 0.02em;" data-i18n="sb7.hero_hook">
@@ -322,28 +328,61 @@
       <!-- Relief Impact Pillars -->
       <div class="pillars-grid">
         <div class="pillar-card">
-          <div class="pillar-icon icon-red">🏢</div>
+          <div class="pillar-icon icon-red">
+            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 21h18"></path>
+              <path d="M5 21V7l8-4v18"></path>
+              <path d="M19 21V11l-6-4"></path>
+              <line x1="9" y1="9" x2="9" y2="9.01"></line>
+              <line x1="9" y1="13" x2="9" y2="13.01"></line>
+              <line x1="9" y1="17" x2="9" y2="17.01"></line>
+            </svg>
+          </div>
           <h3 data-i18n="pillar1.title">Structural Repairs & Rebuilding</h3>
           <p data-i18n="pillar1.desc">
             Reinforcing church foundation, repairing masonry cracks in the sanctuary, and restoring damaged classrooms of the Seminario Bautista de Venezuela.
           </p>
         </div>
+
         <div class="pillar-card">
-          <div class="pillar-icon icon-orange">🍲</div>
+          <div class="pillar-icon icon-orange">
+            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 12h18a8 8 0 0 1-16 0"></path>
+              <path d="M12 3v4"></path>
+              <path d="M8 4v3"></path>
+              <path d="M16 4v3"></path>
+              <line x1="2" y1="12" x2="22" y2="12"></line>
+            </svg>
+          </div>
           <h3 data-i18n="pillar2.title">Daily Community Kitchen</h3>
           <p data-i18n="pillar2.desc">
             Providing nourishing hot meals, food parcels, and baby formula to displaced families and vulnerable seniors in the Vista Alegre community.
           </p>
         </div>
+
         <div class="pillar-card">
-          <div class="pillar-icon icon-blue">💧</div>
+          <div class="pillar-icon icon-blue">
+            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path>
+              <line x1="12" y1="10" x2="12" y2="16"></line>
+              <line x1="9" y1="13" x2="15" y2="13"></line>
+            </svg>
+          </div>
           <h3 data-i18n="pillar3.title">Clean Water & Medical Relief</h3>
           <p data-i18n="pillar3.desc">
             Distributing filtered drinking water, basic hygiene packages, first-aid medication, and emergency support for affected families.
           </p>
         </div>
+
         <div class="pillar-card">
-          <div class="pillar-icon icon-gold">📖</div>
+          <div class="pillar-icon icon-gold">
+            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+              <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
+              <line x1="6" y1="8" x2="8" y2="8"></line>
+              <line x1="6" y1="12" x2="8" y2="12"></line>
+            </svg>
+          </div>
           <h3 data-i18n="pillar4.title">Gospel Outreach & Bibles</h3>
           <p data-i18n="pillar4.desc">
             Sharing the peace and hope of Jesus Christ during crisis through personal counseling, open-air services, and Spanish Bible distribution.
@@ -351,6 +390,7 @@
         </div>
       </div>
 
+
       <!-- Interactive Donation Tier Selector -->
       <div class="donate-calculator">
         <h3 data-i18n="donate.select_amount">Select Your Support Gift</h3>
@@ -474,7 +514,14 @@
 
       <div class="seminary-features-grid">
         <div class="seminary-card">
-          <div class="seminary-card-icon">📖</div>
+          <div class="seminary-card-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
+              <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
+              <line x1="12" y1="6" x2="12" y2="12"></line>
+              <line x1="9" y1="9" x2="15" y2="9"></line>
+            </svg>
+          </div>
           <h3 data-i18n="seminary.feature1_title">Expository Preaching & Doctrine</h3>
           <p data-i18n="seminary.feature1_desc">
             Rigorous Bible training rooted firmly in the timeless truths of Scripture, preparing men to shepherd local flocks with theological fidelity.
@@ -482,7 +529,14 @@
         </div>
 
         <div class="seminary-card">
-          <div class="seminary-card-icon">🌱</div>
+          <div class="seminary-card-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M7 20h10"></path>
+              <path d="M10 20c0-4 2-7 5-8"></path>
+              <path d="M14 12c-2-2-4-3-7-3-2 0-3 1-3 1s1 2 3 3c3 1 5 1 7-1z"></path>
+              <path d="M15 12c2-2 4-3 7-3 2 0 3 1 3 1s-1 2-3 3c-3 1-5 1-7-1z"></path>
+            </svg>
+          </div>
           <h3 data-i18n="seminary.feature2_title">Active Church Planting Pipeline</h3>
           <p data-i18n="seminary.feature2_desc">
             Graduates have established independent Baptist churches across Venezuela: Maracaibo, Guacara, La Mariposa, Las Adjuntas, and beyond.
@@ -490,13 +544,20 @@
         </div>
 
         <div class="seminary-card">
-          <div class="seminary-card-icon">💻</div>
+          <div class="seminary-card-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+              <line x1="8" y1="21" x2="16" y2="21"></line>
+              <line x1="12" y1="17" x2="12" y2="21"></line>
+            </svg>
+          </div>
           <h3 data-i18n="seminary.feature3_title">Online Seminary Reach (SEBEL)</h3>
           <p data-i18n="seminary.feature3_desc">
             Extending theological education digitally to students across Venezuela and Latin America who cannot travel to the capital.
           </p>
         </div>
       </div>
+
     </div>
   </section>
 
@@ -712,18 +773,43 @@
 
         <div class="contact-sidebar">
           <div class="contact-info-card">
-            <h4>📍 Iglesia Bíblica Bautista de Vista Alegre</h4>
+            <h4 class="contact-info-heading">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
+                <circle cx="12" cy="10" r="3"></circle>
+              </svg>
+              <span>Iglesia Bíblica Bautista</span>
+            </h4>
             <p>2da. Transversal Av. Rotaria, Quinta Bautista, Urb. La Paz, Caracas, Venezuela</p>
             <p style="margin-top: 8px; font-size: 0.85rem; color: var(--slate-500);">Metro: La Paz Station (500m)</p>
           </div>
 
           <div class="contact-info-card">
-            <h4>🏛 Seminario Bautista de Venezuela</h4>
+            <h4 class="contact-info-heading">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="3" y1="21" x2="21" y2="21"></line>
+                <line x1="4" y1="10" x2="20" y2="10"></line>
+                <polyline points="2 7 12 2 22 7"></polyline>
+                <line x1="6" y1="10" x2="6" y2="21"></line>
+                <line x1="10" y1="10" x2="10" y2="21"></line>
+                <line x1="14" y1="10" x2="14" y2="21"></line>
+                <line x1="18" y1="10" x2="18" y2="21"></line>
+              </svg>
+              <span>Seminario Bautista de Venezuela</span>
+            </h4>
             <p>Dedicated to biblical training and equipping national pastors and church planters across Venezuela.</p>
           </div>
 
           <div class="contact-info-card">
-            <h4>🤝 Mission Board Sending Office</h4>
+            <h4 class="contact-info-heading">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                <circle cx="9" cy="7" r="4"></circle>
+                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+              </svg>
+              <span>Mission Board Sending Office</span>
+            </h4>
             <p><strong>Macedonia World Baptist Missions, Inc.</strong></p>
             <p>P.O. Box 519, Braselton, GA 30517</p>
             <p style="margin-top: 4px; font-size: 0.85rem; color: var(--slate-500);">Designation: Pastor Victor Paez — Venezuela</p>
@@ -752,19 +838,30 @@
         <h4 style="font-size: 0.98rem; font-weight: 700; color: var(--primary-900); margin-bottom: 12px;" data-i18n="modal.step1">Choose Giving Option:</h4>
         
         <!-- Online Giving Card -->
-        <a href="#giving" onclick="document.getElementById('donate-modal').classList.remove('active');" class="btn btn-relief btn-full" style="margin-bottom: 12px;">
+        <a href="#giving" onclick="document.getElementById('donate-modal').classList.remove('active');" class="btn btn-relief btn-full" style="margin-bottom: 12px; gap: 10px;">
-          💳 <span data-i18n="modal.method_online">Donate Online (MWBM Support Portal)</span>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
+            <line x1="1" y1="10" x2="23" y2="10"></line>
+          </svg>
+          <span data-i18n="modal.method_online">Donate Online (MWBM Support Portal)</span>
         </a>
 
         <!-- Mail Check Details Card -->
         <div style="background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; padding: 14px 18px; font-size: 0.88rem; color: var(--slate-700); line-height: 1.5;">
-          <strong>✉️ By Check (Tax-Deductible 501c3):</strong><br />
+          <strong style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--primary-900);">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+              <polyline points="22,6 12,13 2,6"></polyline>
+            </svg>
+            <span>By Check (Tax-Deductible 501c3):</span>
+          </strong>
           Payable to: <em>Macedonia World Baptist Missions, Inc.</em><br />
           Memo: <span class="memo-highlight">Pastor Victor Paez – Venezuela Relief</span><br />
           Mail: P.O. Box 519, Braselton, GA 30517
         </div>
       </div>
 
+
       <button id="modal-close-action" onclick="document.getElementById('donate-modal').classList.remove('active');" class="btn btn-outline-white btn-full" style="color: var(--slate-700); border-color: var(--slate-300);" data-i18n="modal.close">
         Close Window
       </button>