Compare commits
2
Commits
d518ad2ae4
...
b0dde481cf
| Author | SHA1 | Date | |
|---|---|---|---|
 oliver
|
b0dde481cf | ||
|
oliver
|
5172bfe62c |
No files matched your search
+321
-8
@@ -1217,6 +1217,41 @@
|
||||
.news-teaser {
|
||||
font-size: 0.88rem;
|
||||
margin-bottom: 18px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.news-read-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
align-self: flex-start;
|
||||
margin-top: auto;
|
||||
padding: 10px 20px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--gold);
|
||||
border: 1px solid rgba(230, 81, 0, 0.24);
|
||||
border-radius: 999px;
|
||||
background: rgba(230, 81, 0, 0.06);
|
||||
cursor: pointer;
|
||||
transition: background 0.25s, color 0.25s, border-color 0.25s;
|
||||
}
|
||||
|
||||
.news-read-btn:hover {
|
||||
background: var(--gold);
|
||||
color: #fff;
|
||||
border-color: var(--gold);
|
||||
}
|
||||
|
||||
.news-date {
|
||||
@@ -1755,6 +1790,229 @@
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
@keyframes articleFlyIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(60px) scale(0.96);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes articleOverlayIn {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
#article-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9500;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
background: rgba(62, 39, 35, 0.88);
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
#article-overlay.is-open {
|
||||
display: flex;
|
||||
animation: articleOverlayIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
#article-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
max-height: 88vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fdf6ee;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(93, 64, 55, 0.22);
|
||||
box-shadow:
|
||||
0 40px 100px rgba(0, 0, 0, 0.35),
|
||||
0 0 0 1px rgba(255, 243, 224, 0.15);
|
||||
animation: articleFlyIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#article-box .article-rule {
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--gold), var(--gold-hi), var(--gold));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#article-box .article-header {
|
||||
padding: 32px 40px 0;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid rgba(93, 64, 55, 0.12);
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
#article-box .article-header .article-area {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#article-box .article-header h2 {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 2rem;
|
||||
line-height: 1.2;
|
||||
color: #3e2723;
|
||||
margin: 12px 0 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#article-box .article-header .article-date {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 0.78rem;
|
||||
color: #8d6e63;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#article-box .article-body {
|
||||
padding: 28px 40px 40px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.85;
|
||||
color: #4e342e;
|
||||
column-count: 1;
|
||||
}
|
||||
|
||||
#article-box .article-body::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#article-box .article-body::-webkit-scrollbar-track {
|
||||
background: rgba(93, 64, 55, 0.06);
|
||||
}
|
||||
|
||||
#article-box .article-body::-webkit-scrollbar-thumb {
|
||||
background: rgba(230, 81, 0, 0.25);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#article-box .article-body::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(230, 81, 0, 0.45);
|
||||
}
|
||||
|
||||
#article-box .article-body h2,
|
||||
#article-box .article-body h3 {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-weight: 400;
|
||||
color: #3e2723;
|
||||
margin: 28px 0 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
#article-box .article-body h2 {
|
||||
font-size: 1.35rem;
|
||||
border-bottom: 1px solid rgba(93, 64, 55, 0.12);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
#article-box .article-body h3 {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
#article-box .article-body p {
|
||||
margin-bottom: 16px;
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
#article-box .article-body ul {
|
||||
margin: 12px 0;
|
||||
padding-left: 20px;
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
#article-box .article-body li {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
#article-box .article-body a.cta {
|
||||
display: inline-block;
|
||||
padding: 14px 28px;
|
||||
background: var(--gold);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 700;
|
||||
font-family: "Segoe UI", system-ui, sans-serif;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: 12px;
|
||||
transition: background 0.25s;
|
||||
}
|
||||
|
||||
#article-box .article-body a.cta:hover {
|
||||
background: var(--gold-hi);
|
||||
}
|
||||
|
||||
#article-box .article-body iframe {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 6px;
|
||||
margin: 20px 0;
|
||||
border: 1px solid rgba(93, 64, 55, 0.12);
|
||||
}
|
||||
|
||||
#article-close {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(93, 64, 55, 0.08);
|
||||
color: #8d6e63;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#article-close:hover {
|
||||
background: rgba(230, 81, 0, 0.12);
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
#article-box {
|
||||
max-height: 92vh;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#article-box .article-header {
|
||||
padding: 24px 20px 18px;
|
||||
}
|
||||
#article-box .article-header h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#article-box .article-body {
|
||||
padding: 20px 20px 28px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
#modal-confirm .confirm-title {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 1.6rem;
|
||||
@@ -1941,7 +2199,7 @@
|
||||
<div class="hero-bg-wrap">
|
||||
<img
|
||||
class="hero-bg-img"
|
||||
src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&q=80&auto=format&fit=crop"
|
||||
src="https://my-biz.app/content/images/bg/india.webp"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
data-mf-parallax
|
||||
@@ -2110,6 +2368,19 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="article-overlay">
|
||||
<div id="article-box">
|
||||
<button id="article-close" aria-label="Close article">×</button>
|
||||
<div class="article-rule"></div>
|
||||
<div class="article-header">
|
||||
<div class="article-area" id="article-area"></div>
|
||||
<h2 id="article-title"></h2>
|
||||
<div class="article-date" id="article-date"></div>
|
||||
</div>
|
||||
<div class="article-body" id="article-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="story">
|
||||
<div class="story-grid">
|
||||
<div
|
||||
@@ -2856,23 +3127,24 @@
|
||||
});
|
||||
}
|
||||
|
||||
function postMarkup(post) {
|
||||
function postMarkup(post, index) {
|
||||
return [
|
||||
'<div class="news-card">',
|
||||
post.image ? '<img class="news-card-image" src="' +
|
||||
post.image ? '<img class="news-card-image" src="https://my-biz.app/content/images/blog/' +
|
||||
post.image +
|
||||
'" alt="' +
|
||||
'.webp" alt="' +
|
||||
post.title.replace(/"/g, """) +
|
||||
'">' : '',
|
||||
'<div class="news-card-body">',
|
||||
"<div>",
|
||||
'<div class="news-card-header">',
|
||||
'<div class="news-area">' + post.area + "</div>",
|
||||
'<span class="news-date">' + formatDate(post.date) + "</span>",
|
||||
"</div>",
|
||||
'<h3 class="news-title">' + post.title + "</h3>",
|
||||
'<p class="news-teaser">' + post.teaser + "</p>",
|
||||
'<span class="news-date">' +
|
||||
formatDate(post.date) +
|
||||
"</span>",
|
||||
"</div>",
|
||||
'<button class="news-read-btn" data-article-index="' + index + '">How to implement this →</button>',
|
||||
"</div>",
|
||||
"</div>",
|
||||
].join("");
|
||||
@@ -2905,7 +3177,9 @@
|
||||
"No posts match your search.",
|
||||
);
|
||||
} else {
|
||||
grid.innerHTML = pagePosts.map(postMarkup).join("");
|
||||
grid.innerHTML = pagePosts.map(function(p, i) {
|
||||
return postMarkup(p, currentPage * PAGE_SIZE + i);
|
||||
}).join("");
|
||||
}
|
||||
if (window._mbsTracking)
|
||||
window._mbsTracking.applyToLinks(grid);
|
||||
@@ -2961,6 +3235,45 @@
|
||||
searchTrackTimer = setTimeout(trackSearch, 450);
|
||||
});
|
||||
|
||||
var articleOverlay = document.getElementById('article-overlay');
|
||||
var articleClose = document.getElementById('article-close');
|
||||
var articleTitle = document.getElementById('article-title');
|
||||
var articleArea = document.getElementById('article-area');
|
||||
var articleDate = document.getElementById('article-date');
|
||||
var articleBody = document.getElementById('article-body');
|
||||
|
||||
function openArticle(index) {
|
||||
var post = allPosts[index];
|
||||
if (!post) return;
|
||||
articleArea.textContent = post.area || '';
|
||||
articleTitle.textContent = post.title || '';
|
||||
articleDate.textContent = formatDate(post.date);
|
||||
articleBody.innerHTML = post.content || '';
|
||||
articleBody.scrollTop = 0;
|
||||
articleOverlay.classList.add('is-open');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeArticle() {
|
||||
articleOverlay.classList.remove('is-open');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
articleClose.addEventListener('click', closeArticle);
|
||||
articleOverlay.addEventListener('click', function(e) {
|
||||
if (e.target === articleOverlay) closeArticle();
|
||||
});
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && articleOverlay.classList.contains('is-open')) closeArticle();
|
||||
});
|
||||
|
||||
grid.addEventListener('click', function(e) {
|
||||
var btn = e.target.closest('.news-read-btn');
|
||||
if (!btn) return;
|
||||
var idx = parseInt(btn.getAttribute('data-article-index'), 10);
|
||||
openArticle(idx);
|
||||
});
|
||||
|
||||
fetch(POSTS_URL)
|
||||
.then(function (response) {
|
||||
return response.json();
|
||||
|
||||
+11
-1
@@ -1 +1,11 @@
|
||||
[{"area": "Improvements", "date": "2026-05-02", "title": "How to Build Donor Trust with Transparent Impact Reporting", "teaser": "Maria spent another late night reconciling spreadsheets, trying to piece together program outcomes for her donor report. Her phone buzzed with another message from a major supporter asking for updates on their donation. She sighed—the truth was, she knew the impact was happening on the ground, but turning that into a report her donors would understand felt impossible.", "content": "<article>\n\n<p style=\"margin: 0; color: #374151;\">Maria spent another late night reconciling spreadsheets, trying to piece together program outcomes for her donor report. Her phone buzzed with another message from a major supporter asking for updates on their donation. She sighed—the truth was, she knew the impact was happening on the ground, but turning that into a report her donors would understand felt impossible.</p>\n\n<h2>When Transparency Becomes a Time Vampire</h2>\n\n<p style=\"margin: 0; color: #374151;\">— \"Every quarter, I dread the donor report cycle. Our programs are running smoothly—we're helping families, educating children, making a real difference. But proving that to our supporters? That's a whole other job. I spend <strong>days</strong> pulling data from <strong>different spreadsheets</strong>, chasing program managers for updates, and trying to make it all make sense in a format donors will actually read. Last month, a longtime supporter told me they were considering giving to another organization because they 'hadn't seen any updates lately.' The irony? We'd done more impact in six months than ever before. We just couldn't show it.\"</p>\n\n<p style=\"margin: 0; color: #374151;\">This is the reality for thousands of small NGOs. <em style=\"font-style: italic; color: #0f172a;\">Your mission is delivering real change—but proving that change takes you away from doing the work that matters.</em></p>\n\n<h3>The Visibility Gap That Costs You Donors</h3>\n\n<p style=\"margin: 0; color: #374151;\">Here's what happens in most small nonprofits: program staff are in the field doing incredible work. Development staff are building relationships with donors. But between those two worlds? A vast information gap that nobody intentionally created but everybody suffers from.</p>\n\n<p style=\"margin: 0; color: #374151;\">Donors want to see their money making a difference. When they don't see updates, they assume one of two things: either nothing is happening, or you don't care enough to tell them. Neither is true—but the result is the same. <strong style=\"font-weight: 700; color: #0f172a;\">Eroded trust leads to lost donations.</strong></p>\n\n<p style=\"margin: 0; color: #374151;\">Meanwhile, your team is drowning in manual processes. Compiling reports that should take minutes instead take hours. The data exists—it's just scattered across different systems, different spreadsheets, different people's memories.</p>\n\n<h3>Making Transparency Automatic, Not Optional</h3>\n\n<p style=\"margin: 0; color: #374151;\">Modern computer systems can significantly reduce the administrative workload around donor reporting. Processes that were previously manual—pulling data from multiple sources, formatting reports, emailing updates—can now be streamlined through centralized platforms.</p>\n\n<p style=\"margin: 0; color: #374151;\">Live dashboards that update automatically mean your program data is always current—not just when you have time to compile a report. When program staff log activities in a centralized system, that information flows directly into reports that donors can access. <strong style=\"font-weight: 700; color: #0f172a;\">No extra work required.</strong></p>\n\n<p style=\"margin: 0; color: #374151;\">This isn't about creating more work for your already stretched team. It's about making the work they already do serve multiple purposes. The hours spent tracking program activities become the same hours that generate donor-ready updates.</p>\n\n<h3>What This Means for Your Organization</h3>\n\n<p style=\"margin: 0; color: #374151;\">When transparency becomes automatic rather than occasional, several things shift:</p>\n\n<p style=\"margin: 0; color: #374151;\"><strong style=\"font-weight: 700; color: #0f172a;\">Donor trust increases</strong> because they see consistent, real-time evidence that their donations are making a difference. No more waiting for quarterly reports to know what's happening.</p>\n\n<p style=\"margin: 0; color: #374151;\"><strong style=\"font-weight: 700; color: #0f172a;\">Staff time frees up</strong> because manual report compilation becomes a thing of the past. Your program managers spend less time answering \"what did we do with that grant?\" and more time actually doing the work.</p>\n\n<p style=\"margin: 0; color: #374151;\"><strong style=\"font-weight: 700; color: #0f172a;\">Retention improves</strong> because engaged donors who see impact become reLine truncated
|
||||
[
|
||||
{
|
||||
"area": "Improvements",
|
||||
"Vertical": "NGO",
|
||||
"date": "2026-05-02",
|
||||
"title": "How to Build Donor Trust with Transparent Impact Reporting",
|
||||
"teaser": "Maria spent another late night reconciling spreadsheets, trying to piece together program outcomes for her donor report. Her phone buzzed with another message from a major supporter asking for updates on their donation. She sighed—the truth was, she knew the impact was happening on the ground, but turning that into a report her donors would understand felt impossible.",
|
||||
"content": "<article>\n\n<p style=\"margin: 0; color: #374151;\">Maria spent another late night reconciling spreadsheets, trying to piece together program outcomes for her donor report. Her phone buzzed with another message from a major supporter asking for updates on their donation. She sighed—the truth was, she knew the impact was happening on the ground, but turning that into a report her donors would understand felt impossible.</p>\n\n<h2>When Transparency Becomes a Time Vampire</h2>\n\n<p style=\"margin: 0; color: #374151;\">— \"Every quarter, I dread the donor report cycle. Our programs are running smoothly—we're helping families, educating children, making a real difference. But proving that to our supporters? That's a whole other job. I spend <strong>days</strong> pulling data from <strong>different spreadsheets</strong>, chasing program managers for updates, and trying to make it all make sense in a format donors will actually read. Last month, a longtime supporter told me they were considering giving to another organization because they 'hadn't seen any updates lately.' The irony? We'd done more impact in six months than ever before. We just couldn't show it.\"</p>\n\n<p style=\"margin: 0; color: #374151;\">This is the reality for thousands of small NGOs. <em style=\"font-style: italic; color: #0f172a;\">Your mission is delivering real change—but proving that change takes you away from doing the work that matters.</em></p>\n\n<h3>The Visibility Gap That Costs You Donors</h3>\n\n<p style=\"margin: 0; color: #374151;\">Here's what happens in most small nonprofits: program staff are in the field doing incredible work. Development staff are building relationships with donors. But between those two worlds? A vast information gap that nobody intentionally created but everybody suffers from.</p>\n\n<p style=\"margin: 0; color: #374151;\">Donors want to see their money making a difference. When they don't see updates, they assume one of two things: either nothing is happening, or you don't care enough to tell them. Neither is true—but the result is the same. <strong style=\"font-weight: 700; color: #0f172a;\">Eroded trust leads to lost donations.</strong></p>\n\n<p style=\"margin: 0; color: #374151;\">Meanwhile, your team is drowning in manual processes. Compiling reports that should take minutes instead take hours. The data exists—it's just scattered across different systems, different spreadsheets, different people's memories.</p>\n\n<h3>Making Transparency Automatic, Not Optional</h3>\n\n<p style=\"margin: 0; color: #374151;\">Modern computer systems can significantly reduce the administrative workload around donor reporting. Processes that were previously manual—pulling data from multiple sources, formatting reports, emailing updates—can now be streamlined through centralized platforms.</p>\n\n<p style=\"margin: 0; color: #374151;\">Live dashboards that update automatically mean your program data is always current—not just when you have time to compile a report. When program staff log activities in a centralized system, that information flows directly into reports that donors can access. <strong style=\"font-weight: 700; color: #0f172a;\">No extra work required.</strong></p>\n\n<p style=\"margin: 0; color: #374151;\">This isn't about creating more work for your already stretched team. It's about making the work they already do serve multiple purposes. The hours spent tracking program activities become the same hours that generate donor-ready updates.</p>\n\n<h3>What This Means for Your Organization</h3>\n\n<p style=\"margin: 0; color: #374151;\">When transparency becomes automatic rather than occasional, several things shift:</p>\n\n<p style=\"margin: 0; color: #374151;\"><strong style=\"font-weight: 700; color: #0f172a;\">Donor trust increases</strong> because they see consistent, real-time evidence that their donations are making a difference. No more waiting for quarterly reports to know what's happening.</p>\n\n<p style=\"margin: 0; color: #374151;\"><strong style=\"font-weight: 700; color: #0f172a;\">Staff time frees up</strong> because manual report compilation becomes a thing of the past. Your program managers spend less time answering \"what did we do with that grant?\" and more time actually doing the work.</p>\n\n<p style=\"margin: 0; color: #374151;\"><strong style=\"font-weight: 700; color: #0f172a;\">Retention improves</strong> because engaged donors who see impact become repeat donors. The organization that shows results keeps results.</p>\n\n<p style=\"margin: 0; color: #374151;\">This isn't about becoming a data-driven enterprise. It's about matching your operational excellence with communication excellence. You're already doing the work—now the work can speak for itself.</p>\n\n<h3>The Shift from Reaction to Proaction</h3>\n\n<p style=\"margin: 0; color: #374151;\">The old way of donor reporting is reactive: donors ask, you scramble, you produce something, youLine truncated
|
||||
"image": "ngo_office.jpg"
|
||||
}
|
||||
]
|
||||
Reference in new issue
Block a user