Mediusa/ibbcaracas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mediusa
2026-09-02 13:59:57 -07:00
parent 2c729f516d
commit 05a5f7ef63
2 changed files with 148 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+36 -9
View File
@@ -698,20 +698,47 @@ button, input, select, textarea {
}
.pillar-icon {
width: 52px;
height: 52px;
border-radius: var(--radius-sm);
width: 56px;
height: 56px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 20px;
margin-bottom: 22px;
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
+112 -15
View File
@@ -70,10 +70,16 @@
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="eyebrow" data-i18n="hero.eyebrow">
⚠️ URGENT RELIEF & REBUILDING INITIATIVE • CARACAS, VENEZUELA
<div class="eyebrow">
<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">
You want your faith and resources to make an eternal difference where crisis is real.
@@ -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;">
💳 <span data-i18n="modal.method_online">Donate Online (MWBM Support Portal)</span>
<a href="#giving" onclick="document.getElementById('donate-modal').classList.remove('active');" class="btn btn-relief btn-full" style="margin-bottom: 12px; gap: 10px;">
<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>