/* CSS Variables – Focus on Large Text and High Contrast */
:root {
–primary-green: #2d5a27;
–dark-green: #142911;
–light-green: #e9f5e8;
–text-black: #000000; /* Pure black for maximum legibility */
–border-radius: 15px;
–font-size-base: 22px; /* Large base size */
}
.cib-app-wrapper {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Arial, sans-serif;
font-size: var(–font-size-base);
line-height: 1.5;
color: var(–text-black);
max-width: 750px;
margin: 20px auto;
background-color: #ffffff;
border: 3px solid var(–primary-green);
border-radius: var(–border-radius);
padding: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* Large Headings */
.cib-app-wrapper h1 { font-size: 2.2rem; color: var(–primary-green); line-height: 1.2; margin-bottom: 20px; }
.cib-app-wrapper h2 { font-size: 1.8rem; color: var(–primary-green); margin-top: 0; }
.cib-app-wrapper h3 { font-size: 1.5rem; color: var(–text-black); margin-bottom: 25px; }
.cib-app-wrapper p { margin-bottom: 25px; font-size: 1.2rem; font-weight: 400; }
/* Feature Cards on Welcome Screen */
.cib-feature-box {
background: var(–light-green);
padding: 20px;
border-radius: 10px;
font-size: 1.3rem;
text-align: center;
font-weight: 700;
color: var(–dark-green);
margin-bottom: 15px;
border-left: 8px solid var(–primary-green);
}
/* Large Progress Bar */
.cib-progress-container { height: 20px; background: #eee; border-radius: 10px; margin-bottom: 40px; border: 1px solid #ccc; }
.cib-progress-fill { height: 100%; background: var(–primary-green); border-radius: 8px; transition: width 0.3s ease; width: 0%; }
/* Answer Buttons – Extra Large and Bold */
.cib-btn-option {
display: block;
width: 100%;
background: #ffffff;
border: 3px solid #000000;
padding: 22px;
margin-bottom: 18px;
border-radius: var(–border-radius);
text-align: left;
font-size: 1.3rem;
font-weight: 700;
cursor: pointer;
color: var(–text-black);
transition: background 0.2s;
}
.cib-btn-option:hover { background: var(–light-green); border-color: var(–primary-green); }
/* Call to Action Buttons */
.cib-btn-primary {
background: var(–primary-green);
color: #ffffff !important;
border: none;
padding: 22px 30px;
border-radius: 60px;
font-size: 1.4rem;
font-weight: 800;
cursor: pointer;
width: 100%;
text-decoration: none;
display: block;
text-align: center;
margin-top: 20px;
}
.cib-btn-primary:hover { background: #1a3617; }
.cib-btn-secondary {
background: #ffffff;
color: var(–text-black) !important;
border: 3px solid var(–text-black);
padding: 18px 25px;
border-radius: 60px;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
width: 100%;
margin-top: 25px;
}
/* Role Result Cards */
.cib-role-card {
border: 4px solid var(–primary-green);
border-radius: var(–border-radius);
padding: 25px;
margin-bottom: 30px;
background: #ffffff;
}
.cib-role-tag {
display: inline-block;
background: var(–primary-green);
color: #ffffff;
padding: 6px 15px;
border-radius: 5px;
font-size: 1rem;
font-weight: 800;
margin-bottom: 15px;
text-transform: uppercase;
}
.cib-role-title { font-weight: 900; font-size: 1.7rem; margin-bottom: 15px; color: var(–primary-green); }
.cib-role-detail { font-size: 1.25rem; margin-bottom: 12px; }
.hidden { display: none; }
.fade-in { animation: fadeIn 0.4s ease-in; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) {
.cib-app-wrapper { padding: 15px; margin: 0; border-width: 2px; }
.cib-app-wrapper h1 { font-size: 1.8rem; }
.cib-btn-option { padding: 18px; font-size: 1.1rem; }
}
Find Your Best Way to Help Corstorphine Bloom
Answer 5 quick questions and weāll suggest a role that suits your time and interests.
5ā15 minutes now and then
Outdoor or from home
No pressure or big commitment
āSmall actions, shared locally, make a big difference.ā
Question
Loading question…
Your best ways to help
Based on your answers, these roles are a great fit. No pressure. Choose what suits you.
What happens next?
- Register your interest below.
- We keep a record of local supporters.
- We’ll contact you when an opportunity pops up nearby.
There is no obligation at this stage.
const questions = [
{
text: “Who are you?”,
options: [
{ text: “Local resident”, weights: { micro: 2, adopt: 2, planting: 2 } },
{ text: “Local business”, weights: { business: 10, watering: 3, sponsor: 3 } },
{ text: “School or youth group”, weights: { youth: 10 } },
{ text: “Community organisation”, weights: { partner: 10 } },
{ text: “I just want to support the idea”, weights: { updates: 5 } }
]
},
{
text: “How much time could you give?”,
options: [
{ text: “5ā15 minutes now and then”, weights: { micro: 5, watering: 4 } },
{ text: “An occasional hour”, weights: { adopt: 3, planting: 3 } },
{ text: “A few times a year”, weights: { planting: 5, sponsor: 2 } },
{ text: “I can help from home”, weights: { skills: 5, sponsor: 4, updates: 2 } },
{ text: “I only want updates for now”, weights: { updates: 10 } }
]
},
{
text: “What kind of help sounds like you?”,
options: [
{ text: “Watering or light weeding”, weights: { micro: 4, watering: 5, adopt: 3 } },
{ text: “Joining a planting day”, weights: { planting: 10 } },
{ text: “Helping organise things”, weights: { skills: 4, partner: 3 } },
{ text: “Sharing posts or photos”, weights: { skills: 5, updates: 2 } },
{ text: “Sponsoring or funding”, weights: { sponsor: 10, business: 3 } },
{ text: “Providing space or water access”, weights: { watering: 3, business: 4, partner: 4 } },
{ text: “Helping children or groups”, weights: { youth: 10 } },
{ text: “Iām not sure yet”, weights: { updates: 3 } }
]
},
{
text: “Where would you prefer to help?”,
options: [
{ text: “Near my home”, weights: { micro: 4, adopt: 4, watering: 3 } },
{ text: “Near my workplace”, weights: { business: 5, watering: 2 } },
{ text: “In a park”, weights: { planting: 4 } },
{ text: “In a shopping area”, weights: { business: 4, micro: 3 } },
{ text: “From home”, weights: { skills: 10, sponsor: 3 } },
{ text: “Anywhere useful”, weights: { planting: 3, micro: 3 } }
]
},
{
text: “What responsibility feels right?”,
options: [
{ text: “Very small and informal”, weights: { micro: 10, watering: 5 } },
{ text: “Shared with other people”, weights: { adopt: 10, planting: 5 } },
{ text: “Occasional practical help”, weights: { planting: 8, watering: 4 } },
{ text: “A behind-the-scenes role”, weights: { skills: 10, sponsor: 5 } },
{ text: “A business or group role”, weights: { business: 8, partner: 8 } },
{ text: “Just keep me informed”, weights: { updates: 10 } }
]
}
];
const roles = [
{ id: ‘micro’, title: “Micro-Volunteer: Planter Care”, bestFor: “People who walk past a planter regularly.”, tasks: “Water during dry spells, remove a weed or litter.”, time: “5ā15 minutes now and then.”, msg: “Perfect if you want to help in a small, visible way.” },
{ id: ‘adopt’, title: “Adopt a Planter with Others”, bestFor: “Neighbours, friends, families or small groups.”, tasks: “Share watering and weeding with others.”, time: “Flexible and shared.”, msg: “Care for one local spot as part of a small team.” },
{ id: ‘planting’, title: “Occasional Planting Day Helper”, bestFor: “People who enjoy practical outdoor activity.”, tasks: “Help plant flowers or refresh planters.”, time: “Occasional sessions.”, msg: “Ideal if you want to help when there is a clear task.” },
{ id: ‘watering’, title: “Watering Support”, bestFor: “Residents or businesses with water access.”, tasks: “Give plants a drink during dry spells.”, time: “Occasional.”, msg: “Simple help that keeps Corstorphine’s flowers alive.” },
{ id: ‘business’, title: “Business Supporter”, bestFor: “Local shops, cafĆ©s, and offices.”, tasks: “Install baskets, sponsor a planter, or display a poster.”, time: “Flexible.”, msg: “A visible way for businesses to show support.” },
{ id: ‘sponsor’, title: “Sponsor or Fundraising Helper”, bestFor: “People who prefer helping behind the scenes.”, tasks: “Sponsor a planter or help find grants.”, time: “Flexible.”, msg: “Helps turn local support into visible improvements.” },
{ id: ‘skills’, title: “Skills Helper”, bestFor: “People with useful specific skills.”, tasks: “Photography, social media, or admin.”, time: “From home or occasional.”, msg: “Great if you want to help using your skills.” },
{ id: ‘youth’, title: “Schools and Youth Link”, bestFor: “Schools, youth groups, or parents.”, tasks: “Help children connect with nature.”, time: “Project-based.”, msg: “Help the next generation connect with their area.” },
{ id: ‘partner’, title: “Organisation or Group Partner”, bestFor: “Churches, clubs, and local charities.”, tasks: “Adopt a space or share info with members.”, time: “Flexible.”, msg: “Works well for groups without a big commitment.” },
{ id: ‘updates’, title: “Supporter / Keep Me Updated”, bestFor: “People who aren’t ready to volunteer yet.”, tasks: “Register support and get news.”, time: “None.”, msg: “Registering support helps the project grow.” }
];
let currentStep = 0;
let userScores = { micro: 0, adopt: 0, planting: 0, watering: 0, business: 0, sponsor: 0, skills: 0, youth: 0, partner: 0, updates: 0 };
function startQuiz() {
document.getElementById(‘screen-welcome’).classList.add(‘hidden’);
document.getElementById(‘screen-quiz’).classList.remove(‘hidden’);
showQuestion();
}
function resetQuiz() {
// Reset everything
currentStep = 0;
userScores = { micro: 0, adopt: 0, planting: 0, watering: 0, business: 0, sponsor: 0, skills: 0, youth: 0, partner: 0, updates: 0 };
// Switch screens
document.getElementById(‘screen-results’).classList.add(‘hidden’);
document.getElementById(‘screen-welcome’).classList.remove(‘hidden’);
// SCROLL TO TOP
window.scrollTo({ top: 0, behavior: ‘smooth’ });
// Alternative for embedded WP sites:
document.getElementById(‘cib-main-app’).scrollIntoView({ behavior: ‘smooth’ });
}
function showQuestion() {
const q = questions[currentStep];
document.getElementById(‘question-label’).innerText = `Question ${currentStep + 1} of 5`;
document.getElementById(‘question-text’).innerText = q.text;
const container = document.getElementById(‘options-container’);
container.innerHTML = ”;
q.options.forEach(opt => {
const btn = document.createElement(‘button’);
btn.className = ‘cib-btn-option’;
btn.innerText = opt.text;
btn.onclick = () => handleAnswer(opt.weights);
container.appendChild(btn);
});
document.getElementById(‘progress-fill’).style.width = `${((currentStep + 1) / questions.length) * 100}%`;
document.getElementById(‘btn-back’).style.display = currentStep === 0 ? ‘none’ : ‘block’;
}
function handleAnswer(weights) {
for (const role in weights) { userScores[role] += weights[role]; }
if (currentStep 0) { currentStep–; showQuestion(); }
}
function showResults() {
document.getElementById(‘screen-quiz’).classList.add(‘hidden’);
document.getElementById(‘screen-results’).classList.remove(‘hidden’);
const sortedRoles = […roles].sort((a, b) => userScores[b.id] – userScores[a.id]);
const resultsContainer = document.getElementById(‘role-recommendations’);
resultsContainer.innerHTML = ”;
sortedRoles.slice(0, 3).forEach(role => {
const div = document.createElement(‘div’);
div.className = ‘cib-role-card fade-in’;
div.innerHTML = `
Suggested Match
${role.title}
Best for: ${role.bestFor}
Possible tasks: ${role.tasks}
Time: ${role.time}
${role.msg}
`;
resultsContainer.appendChild(div);
});
window.scrollTo({ top: 0, behavior: ‘smooth’ });
}
Corstorphine in Bloom 