/* ===== Great Island: Tall/Narrow Thermometer ===== */
.gi-thermo {
–gi-text: #0f172a;
–gi-subtext: #475569;
–gi-border: #e2e8f0;
/* COLORS REQUESTED */
–gi-tube-blue: #1e40af; /* blue background for thermometer */
–gi-mercury-red: #ef4444; /* red liquid fill */
max-width: 520px;
margin: 1rem auto;
padding: 1rem 1rem 1.25rem;
background: #ffffff;
border: 1px solid var(–gi-border);
border-radius: 16px;
box-shadow: 0 10px 28px rgba(2,6,23,0.08);
font-family: system-ui, -apple-system, Segoe UI, Roboto, “Helvetica Neue”, Arial, “Noto Sans”;
color: var(–gi-text);
}
.gi-thermo__header {
display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
margin-bottom: .5rem;
}
.gi-thermo__title { font-weight: 700; font-size: 1.1rem; }
.gi-thermo__amounts { color: var(–gi-subtext); font-size: .95rem; }
.gi-thermo__raised { font-weight: 700; color: var(–gi-text); margin-right: .35rem; }
/* Layout: tall & narrow tube + ticks on the side */
.gi-thermo__wrap {
position: relative;
display: grid;
grid-template-columns: 56px 1fr 70px; /* tube | spacer | ticks */
align-items: end;
gap: 12px;
margin: .25rem 0 1rem;
min-height: 560px; /* overall block height */
}
.gi-thermo__tube {
position: relative;
height: 500px; /* Tall tube */
width: 40px; /* Narrow tube */
border-radius: 999px;
background: var(–gi-tube-blue);
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35), 0 8px 18px rgba(2,6,23,0.15);
overflow: hidden;
}
.gi-thermo__mercury {
position: absolute; left: 0; right: 0; bottom: 0;
height: 0%; /* JS sets this */
background: linear-gradient(180deg, #f87171 0%, var(–gi-mercury-red) 55%, #b91c1c 100%);
box-shadow: inset 0 -8px 18px rgba(0,0,0,0.18);
transition: height 1.1s cubic-bezier(.22,.9,.32,1);
}
.gi-thermo__bulb {
grid-column: 1 / 2;
justify-self: center;
width: 64px; height: 64px; border-radius: 50%;
margin-top: 10px;
background:
radial-gradient(circle at 35% 35%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.5) 18%, rgba(255,255,255,0) 36%),
radial-gradient(circle at 50% 50%, #f87171 0%, var(–gi-mercury-red) 70%);
box-shadow: inset 0 -12px 16px rgba(0,0,0,0.2), 0 12px 22px rgba(2,6,23,0.18);
}
/* Ticks every €1,000 with labels */
.gi-thermo__ticks {
position: relative;
height: 500px;
width: 100%;
font-size: .82rem;
color: var(–gi-subtext);
}
.gi-thermo__tick {
position: absolute;
left: 0; right: 0;
display: flex; align-items: center; gap: 8px;
transform: translateY(50%); /* because we position from bottom */
}
.gi-thermo__tick::before {
content: “”;
display: inline-block;
width: 22px; height: 2px;
background: #94a3b8; /* slate-400 */
border-radius: 2px;
}
.gi-thermo__tick.small::before { width: 14px; opacity: .65; }
.gi-thermo__tick strong { color: #0f172a; font-weight: 700; }
/* Footer */
.gi-thermo__footer {
display: flex; justify-content: space-between; align-items: center;
}
.gi-thermo__pct {
font-weight: 800; font-size: 1.1rem;
padding: .25rem .6rem; border-radius: 10px; background: #f1f5f9;
}
/* Responsive */
@media (max-width: 520px) {
.gi-thermo__wrap { grid-template-columns: 56px 1fr 64px; }
.gi-thermo__ticks { font-size: .78rem; }
}
(function(){
const GOAL = 25000; // €25,000 fixed goal
const root = document.getElementById(‘gi-thermo’);
if (!root) return;
// Current amount from data attribute (you update this value)
const currentRaw = root.getAttribute(‘data-current’) || ‘0’;
let current = parseFloat(currentRaw.toString().replace(/[^\d.]/g, ”)) || 0;
current = Math.min(Math.max(current, 0), GOAL);
const mercury = document.getElementById(‘gi-mercury’);
const raised = document.getElementById(‘gi-raised’);
const pctEl = document.getElementById(‘gi-pct’);
const tube = root.querySelector(‘.gi-thermo__tube’);
const ticksEl = document.getElementById(‘gi-ticks’);
const fmtMoney = new Intl.NumberFormat(‘en-IE’, { style: ‘currency’, currency: ‘EUR’, maximumFractionDigits: 0 });
// Set progress
const pct = Math.round((current / GOAL) * 100);
mercury.style.height = pct + ‘%’;
raised.textContent = fmtMoney.format(current);
pctEl.textContent = pct + ‘%’;
tube.setAttribute(‘aria-valuenow’, String(current));
tube.setAttribute(‘aria-valuetext’, `${pct}% of €25,000 reached`);
// Build €1,000 graduations (0..25k). Label every 1k; emphasize every 5k.
const steps = GOAL / 1000; // 25
for (let i = 0; i <= steps; i++) {
const value = i * 1000; // € value
const yPct = (value / GOAL) * 100; // from bottom
const tick = document.createElement('div');
tick.className = 'gi-thermo__tick' + (i % 5 === 0 ? '' : ' small');
tick.style.bottom = yPct + '%';
tick.innerHTML = `
${i % 5 === 0 ? ‘€’ + (value/1000)+’k‘ : ‘€’ + (value/1000)+’k’}`;
ticksEl.appendChild(tick);
}
// Optional: smooth count-up animation for the € raised display
const start = 0, duration = 900;
const t0 = performance.now();
function step(t){
const k = Math.min(1, (t – t0) / duration);
const eased = 1 – Math.pow(1 – k, 3);
const val = Math.round(start + eased * (current – start));
raised.textContent = fmtMoney.format(val);
if (k < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
})();
Proudly supported by Great Island Creative Arts CLG.
Great Island Creative Arts 