.rc{--gold:#B8952A;--gold2:#D4AF50;--gold3:#F5E9C8;--gold4:#FBF6EA;--dark:#1A1208;--white:#fff;--offwhite:#FAFAF7;--border:#E8DFC8;--muted:#999;font-family:'Outfit',sans-serif;color:var(--dark);width:100%}
.rc *{box-sizing:border-box;margin:0;padding:0}
.rc button{cursor:pointer;font-family:'Outfit',sans-serif;border:none;background:none}
/* HERO */
.rc-hero{background:var(--dark);padding:60px 32px 52px;text-align:center;position:relative;overflow:hidden}
.rc-hero::after{content:'';position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(ellipse,rgba(184,149,42,.15) 0%,transparent 65%);pointer-events:none}
.rc-hero-label{position:relative;z-index:1;font-size:10px;font-weight:600;letter-spacing:6px;text-transform:uppercase;color:var(--gold2);margin-bottom:14px}
.rc-hero-yr{position:relative;z-index:1;font-family:'Cormorant Garamond',serif;font-size:clamp(80px,15vw,160px);font-weight:700;line-height:.85;letter-spacing:-5px;background:linear-gradient(135deg,#F5E9C8 0%,#D4AF50 45%,#8B6914 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.rc-hero-title{position:relative;z-index:1;font-family:'Cormorant Garamond',serif;font-size:clamp(20px,3vw,32px);font-weight:600;color:rgba(245,233,200,.8);margin-top:12px;font-style:italic}
.rc-hero-sub{position:relative;z-index:1;font-size:13px;color:rgba(245,233,200,.4);margin-top:10px;font-weight:300}
.rc-stats{position:relative;z-index:1;display:flex;justify-content:center;margin-top:36px;border:1px solid rgba(184,149,42,.2);border-radius:10px;overflow:hidden;max-width:420px;margin-left:auto;margin-right:auto;background:rgba(255,255,255,.03)}
.rc-stat{flex:1;padding:16px 8px;text-align:center;border-right:1px solid rgba(184,149,42,.15)}
.rc-stat:last-child{border-right:none}
.rc-sn{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:700;color:var(--gold2);display:block;line-height:1}
.rc-sl{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(245,233,200,.35);margin-top:3px}
/* FILTER BAR */
.rc-bar{background:var(--white);border-bottom:2px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.rc-tabs{display:flex;overflow-x:auto;scrollbar-width:none;max-width:1100px;margin:0 auto;padding:0 16px}
.rc-tabs::-webkit-scrollbar{display:none}
.rc-tab{flex-shrink:0;padding:14px 16px;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .18s;white-space:nowrap}
.rc-tab:hover{color:var(--gold)}
.rc-tab.on{color:var(--gold);border-bottom-color:var(--gold)}
.rc-tab .n{display:inline-block;background:var(--gold3);color:var(--dark);font-size:9px;font-weight:700;padding:1px 6px;border-radius:8px;margin-left:4px;vertical-align:middle}
/* CONTENT */
.rc-body{background:var(--offwhite);min-height:300px}
.rc-inner{max-width:1100px;margin:0 auto;padding:40px 20px 80px}
/* LOADING / EMPTY */
.rc-load{padding:80px 20px;text-align:center}
.rc-spin{width:32px;height:32px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:rcspin .7s linear infinite;margin:0 auto 14px}
@keyframes rcspin{to{transform:rotate(360deg)}}
.rc-load p,.rc-empty p{font-size:13px;color:var(--muted);line-height:1.8}
.rc-empty{padding:60px 20px;text-align:center}
.rc-empty-i{font-size:44px;margin-bottom:12px;opacity:.35}
/* MONTH SECTIONS */
.rc-month{margin-bottom:52px}
.rc-mhdr{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.rc-mname{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:700;color:var(--dark)}
.rc-mdot{width:5px;height:5px;background:var(--gold);border-radius:50%;flex-shrink:0}
.rc-mcount{font-size:10px;color:#ccc;letter-spacing:2px;text-transform:uppercase}
/* GRID */
.rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.rc-card{background:var(--white);border-radius:10px;border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.rc-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(26,18,8,.1),0 0 0 1px var(--gold2);border-color:var(--gold2)}
.rc-card img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--gold4);display:block}
.rc-card-ph{width:100%;aspect-ratio:3/4;background:linear-gradient(135deg,var(--gold4),var(--gold3));display:flex;align-items:center;justify-content:center;font-size:32px;opacity:.4}
.rc-card-body{padding:12px 14px 16px}
.rc-card-cat{display:inline-block;font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);background:var(--gold4);border:1px solid var(--gold3);padding:2px 8px;border-radius:16px;margin-bottom:7px}
.rc-card-title{font-size:12.5px;font-weight:600;color:var(--dark);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc-card-date{font-size:10px;color:#bbb;margin-top:6px}
/* LIGHTBOX */
.rc-lb{position:fixed;inset:0;z-index:9999;background:rgba(10,8,4,.96);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;padding:16px;animation:rcfade .18s ease}
@keyframes rcfade{from{opacity:0}to{opacity:1}}
.rc-lb-box{position:relative;max-width:780px;width:100%;background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.7)}
.rc-lb-img{width:100%;max-height:68vh;object-fit:contain;background:var(--gold4);display:block}
.rc-lb-info{padding:18px 22px;border-top:1px solid var(--border)}
.rc-lb-title{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:700;color:var(--dark);margin-bottom:5px}
.rc-lb-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rc-lb-cat{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);background:var(--gold4);border:1px solid var(--gold3);padding:2px 8px;border-radius:12px}
.rc-lb-date{font-size:11px;color:#bbb}
.rc-lb-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:rgba(10,8,4,.65);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s;z-index:2}
.rc-lb-x:hover{background:var(--gold)}
.rc-lb-nav{position:absolute;top:38%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(10,8,4,.6);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s;line-height:1}
.rc-lb-nav:hover{background:var(--gold)}
.rc-lb-p{left:-52px}.rc-lb-n{right:-52px}
@media(max-width:660px){.rc-lb-p{left:6px}.rc-lb-n{right:6px}}
@media(max-width:560px){
.rc-hero{padding:44px 16px 40px}
.rc-inner{padding:28px 12px 60px}
.rc-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.rc-card-body{padding:9px 11px 13px}
}
(function(){
/* ── CONFIG ── */
var API = '/wp-json/wp/v2/media';
var MN = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var CATS = [
{k:['eid','adha','fitr','eid-ul'], l:'Eid Celebrations', e:'🌙'},
{k:['ramadan','iftar','suhoor','tarawih'], l:'Ramadan', e:'☪️'},
{k:['picnic','bbq','park','outdoor'], l:'Family Picnic', e:'🌳'},
{k:['soccer','football','basketball','wrestling','sport','ysl','volleyball','athletic'], l:'Sports', e:'⚽'},
{k:['youth','yac','teen','junior','young'],l:'Youth Programs', e:'🏆'},
{k:['maktab','quran','arabic','halaqa','lecture','islamic','education','taleem','learn'], l:'Islamic Education', e:'📖'},
{k:['sister','women','ladies','wish'], l:'Sisters Programs', e:'🌸'},
{k:['brother','men','boys','scout'], l:'Brothers & Scouts', e:'🤝'},
{k:['dinner','banquet','fundrais','gala'], l:'Dinners & Fundraisers', e:'🍽️'},
{k:['retreat','camp','trip','hiking'], l:'Retreats & Camps', e:'⛺'},
{k:['volunteer','service','outreach','zakat','charity'], l:'Community Service', e:'🤲'},
{k:['tournament','competition','table','tennis'], l:'Tournaments', e:'🏓'},
];
var ALL=[], FL=[], LI=0;
function h(s){var t=document.createElement('textarea');t.innerHTML=s;return t.value;}
/* ── FETCH ── */
/* Fetch all pages, filter to only /2022/ upload path */
async function load(){
try {
var items=[], page=1, found=true;
while(found && page -1; });
items = items.concat(keep);
/* Stop if oldest item on this page is before 2022 */
if(d.some(function(i){ return i.date && i.date < '2022-01-01'; })) break;
page++;
}
process(items);
} catch(e){ showErr(); }
}
/* ── PROCESS ── */
function process(raw){
var seen={};
var imgs=raw.filter(function(i){
return i && i.source_url && i.media_type==='image' && !seen[i.id] && (seen[i.id]=1);
});
ALL = imgs.map(function(i){
var title = h((i.title&&i.title.rendered)||'');
var fname = i.source_url.split('/').pop().toLowerCase().replace(/[-_.]/g,' ');
var hay = (title+' '+fname+' '+(i.slug||'')).toLowerCase();
var cat='Community Events', emoji='✨';
for(var c=0;c-1;})){
cat=CATS[c].l; emoji=CATS[c].e; break;
}
}
var d = new Date(i.date);
var sz= i.media_details&&i.media_details.sizes;
var thumb = (sz&&sz.medium&&sz.medium.source_url)
|| (sz&&sz.large&&sz.large.source_url)
|| i.source_url;
return {
id:i.id, title:title||fname, cat:cat, emoji:emoji,
month:MN[d.getMonth()], mi:d.getMonth(), yr:d.getFullYear(),
date:d, ds:d.toLocaleDateString('en-US',{month:'long',day:'numeric',year:'numeric'}),
thumb:thumb, full:i.source_url
};
}).sort(function(a,b){return a.date-b.date;});
FL = ALL.slice();
buildTabs();
setStats();
draw();
}
/* ── TABS ── */
function buildTabs(){
var cnt={};
ALL.forEach(function(i){cnt[i.cat]=(cnt[i.cat]||0)+1;});
var bar=document.getElementById('rc-tabs');
bar.querySelector('[data-cat="all"]').innerHTML='All Events '+ALL.length+'';
bar.querySelectorAll('[data-cat]:not([data-cat="all"])').forEach(function(e){e.remove();});
Object.keys(cnt).sort(function(a,b){return cnt[b]-cnt[a];}).forEach(function(cat){
var em='✨';
for(var c=0;c'+cnt[cat]+'';
b.onclick=function(){rcF(cat,this);};
bar.appendChild(b);
});
}
/* ── STATS ── */
function setStats(){
var cats = new Set(ALL.map(function(i){return i.cat;}));
var months = new Set(ALL.map(function(i){return i.yr+'-'+i.mi;}));
anim('rc-ne',ALL.length);
anim('rc-nc',cats.size);
anim('rc-nm',months.size);
}
function anim(id,T){
var el=document.getElementById(id); if(!el)return;
var n=0, s=Math.max(1,Math.ceil(T/28));
var t=setInterval(function(){n=Math.min(n+s,T);el.textContent=n;if(n>=T)clearInterval(t);},38);
}
/* ── FILTER ── */
window.rcF=function(cat,btn){
document.querySelectorAll('.rc-tab').forEach(function(b){b.classList.remove('on');});
btn.classList.add('on');
FL = cat==='all' ? ALL.slice() : ALL.filter(function(i){return i.cat===cat;});
draw();
};
/* ── DRAW ── */
function draw(){
var M=document.getElementById('rc-main');
if(!ALL.length){showErr();return;}
if(!FL.length){
M.innerHTML='';
return;
}
/* Group by month */
var byM={};
FL.forEach(function(item){
var k=item.yr+'-'+String(item.mi).padStart(2,'0');
if(!byM[k]) byM[k]={l:item.month+' '+item.yr, items:[]};
byM[k].items.push(item);
});
var html='';
Object.keys(byM).sort().forEach(function(k){
var g=byM[k];
html+='';
});
M.innerHTML=html;
}
/* ── LIGHTBOX ── */
window.rcO=function(i){
LI=i; var item=FL[i]; if(!item)return;
document.getElementById('rc-li').src=item.full;
document.getElementById('rc-lt').textContent=item.title||'MHMA 2022 Event';
document.getElementById('rc-lc').textContent=item.emoji+' '+item.cat;
document.getElementById('rc-ld').textContent=item.ds;
document.getElementById('rc-lb').style.display='flex';
document.body.style.overflow='hidden';
};
window.rcLbX=function(){
document.getElementById('rc-lb').style.display='none';
document.body.style.overflow='';
};
window.rcLbBg=function(e){if(e.target===document.getElementById('rc-lb'))rcLbX();};
window.rcLbG=function(d){LI=(LI+d+FL.length)%FL.length; rcO(LI);};
/* ── ERROR ── */
function showErr(){
document.getElementById('rc-main').innerHTML=
'';
['rc-ne','rc-nc','rc-nm'].forEach(function(id){
var el=document.getElementById(id); if(el)el.textContent='0';
});
}
/* ── KEYBOARD ── */
document.addEventListener('keydown',function(e){
if(document.getElementById('rc-lb').style.display==='flex'){
if(e.key==='ArrowLeft') rcLbG(-1);
if(e.key==='ArrowRight') rcLbG(1);
if(e.key==='Escape') rcLbX();
}
});
load();
})();
Mountain House Muslim Association
2022
A Year of Community & Connection
Every event MHMA hosted and organized throughout 2022
—
Events
—
Categories
—
Months
Loading 2022 events…
🔍
No events in this category yet.
'
+'
'+g.l+'
'
+''
+''+g.items.length+' event'+(g.items.length!==1?'s':'')+'
'
+'';
g.items.forEach(function(item){
var gi=FL.indexOf(item);
var t=(item.title||'MHMA Event').replace(/"/g,'"');
html+='
'
+'
'
+''
+'
';
});
html+=''
+'
'+item.cat+'
'
+''+(item.title||'MHMA Event')+'
'
+''+item.ds+'
'
+'📭
'
+'Upload your 2022 event flyers to the WordPress Media Library
and they will appear here automatically.
