/* ─── RESET & BASE ─── */
#bucc-wrap{font-family:’DM Sans’,sans-serif;color:#1c1c1c;line-height:1.6;overflow-x:hidden}
#bucc-wrap *{box-sizing:border-box;margin:0;padding:0}
#bucc-wrap a{text-decoration:none;color:inherit}
#bucc-wrap img{max-width:100%;display:block}
:root{–g:#1a6b3c;–gd:#0f4526;–gl:#e8f5ee;–gold:#e8a020;–w:#fff;–txt:#1c1c1c;–muted:#6b7280;–r:14px}
/* ─── TOPBAR ─── */
.b-topbar{background:#0f4526;color:rgba(255,255,255,.75);font-size:12.5px;padding:7px 0}
.b-topbar-inner{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.b-topbar a{color:rgba(255,255,255,.75);transition:color .2s}.b-topbar a:hover{color:var(–gold)}
.b-topbar-socials{display:flex;gap:8px}
.b-topbar-socials a{width:24px;height:24px;background:rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;transition:background .2s}
.b-topbar-socials a:hover{background:var(–gold);color:#fff}
/* ─── HEADER ─── */
.b-header{background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.07);position:sticky;top:0;z-index:9999;transition:box-shadow .3s}
.b-header-inner{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.b-logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.b-logo-icon{width:46px;height:46px;background:linear-gradient(135deg,var(–g),#2a9d5c);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;box-shadow:0 4px 12px rgba(26,107,60,.3)}
.b-logo-name{font-family:’Playfair Display’,serif;font-size:15.5px;font-weight:700;color:var(–gd);line-height:1.2}
.b-logo-sub{font-size:10px;color:var(–muted);text-transform:uppercase;letter-spacing:1.2px}
.b-nav{display:flex;align-items:center;gap:2px}
.b-nav a{font-size:14px;font-weight:500;padding:8px 13px;border-radius:8px;color:#333;transition:all .2s;white-space:nowrap}
.b-nav a:hover{background:var(–gl);color:var(–g)}
.b-nav-cta{background:var(–g)!important;color:#fff!important;border-radius:50px!important;padding:9px 22px!important;font-weight:700!important;box-shadow:0 3px 12px rgba(26,107,60,.3);margin-left:6px}
.b-nav-cta:hover{background:var(–gd)!important;transform:translateY(-1px)}
.b-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.b-hamburger span{width:24px;height:2.5px;background:#333;border-radius:2px;transition:all .3s}
/* mobile menu */
.b-mobile-menu{display:none;flex-direction:column;background:#fff;border-top:1px solid #eee;padding:12px 20px 20px}
.b-mobile-menu.open{display:flex}
.b-mobile-menu a{font-size:15px;font-weight:500;padding:11px 0;border-bottom:1px solid #f0f0f0;color:#333}
.b-mobile-menu a:last-child{background:var(–g);color:#fff;text-align:center;border-radius:8px;padding:12px;margin-top:10px;border:none;font-weight:700}
/* ─── SLIDER ─── */
.b-slider{position:relative;width:100%;height:90vh;min-height:560px;max-height:800px;overflow:hidden}
.b-slides{display:flex;height:100%;transition:transform .7s cubic-bezier(.77,0,.175,1)}
.b-slide{min-width:100%;height:100%;position:relative;flex-shrink:0}
.b-slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 6s ease-out}
.b-slides .b-slide.active .b-slide-bg{transform:scale(1.06)}
.b-slide-overlay{position:absolute;inset:0;background:linear-gradient(110deg,rgba(8,40,20,.82) 0%,rgba(8,40,20,.55) 55%,rgba(0,0,0,.15) 100%)}
.b-slide-content{position:absolute;inset:0;display:flex;align-items:center}
.b-slide-inner{max-width:1240px;margin:0 auto;padding:0 20px;width:100%}
.b-slide-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(232,160,32,.15);border:1px solid rgba(232,160,32,.5);color:var(–gold);font-size:11.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;padding:6px 16px;border-radius:50px;margin-bottom:22px;animation:fadeUp .7s .1s both}
.b-slide-tag::before{content:”;width:6px;height:6px;background:var(–gold);border-radius:50%;flex-shrink:0}
.b-slide h1{font-family:’Playfair Display’,serif;font-size:clamp(2.2rem,5.5vw,4.4rem);font-weight:900;color:#fff;line-height:1.1;max-width:660px;margin-bottom:20px;animation:fadeUp .7s .2s both}
.b-slide h1 em{color:var(–gold);font-style:normal}
.b-slide-desc{font-size:clamp(.95rem,1.8vw,1.1rem);color:rgba(255,255,255,.82);max-width:520px;line-height:1.8;margin-bottom:34px;animation:fadeUp .7s .35s both}
.b-slide-btns{display:flex;gap:14px;flex-wrap:wrap;animation:fadeUp .7s .5s both}
.b-btn-gold{background:var(–gold);color:#1a1a1a;padding:13px 30px;border-radius:50px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:8px;transition:all .25s;box-shadow:0 4px 20px rgba(232,160,32,.4)}
.b-btn-gold:hover{background:#d4911a;transform:translateY(-2px);box-shadow:0 8px 28px rgba(232,160,32,.45)}
.b-btn-wire{border:2px solid rgba(255,255,255,.65);color:#fff;padding:11px 28px;border-radius:50px;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px;transition:all .25s}
.b-btn-wire:hover{border-color:#fff;background:rgba(255,255,255,.12)}
/* slider controls */
.b-slider-arrows{position:absolute;bottom:40px;right:40px;display:flex;gap:10px;z-index:10}
.b-arrow{width:46px;height:46px;background:rgba(255,255,255,.15);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:18px;transition:all .25s;user-select:none}
.b-arrow:hover{background:var(–gold);border-color:var(–gold);color:#1a1a1a;transform:scale(1.1)}
.b-dots{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10}
.b-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:all .3s}
.b-dot.active{background:var(–gold);width:24px;border-radius:4px}
/* slider stats bar */
.b-stats-bar{position:absolute;bottom:0;left:0;right:0;background:rgba(10,40,20,.75);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1);z-index:5}
.b-stats-bar-inner{max-width:1240px;margin:0 auto;padding:0 20px;display:flex}
.b-stat-item{flex:1;padding:18px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
.b-stat-item:last-child{border-right:none}
.b-stat-num{font-family:’Playfair Display’,serif;font-size:1.8rem;font-weight:900;color:var(–gold);line-height:1}
.b-stat-lbl{font-size:11px;color:rgba(255,255,255,.6);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}
/* ─── SECTION COMMONS ─── */
.b-sec{padding:88px 0}
.b-inner{max-width:1240px;margin:0 auto;padding:0 20px}
.b-label{display:inline-block;color:var(–g);font-size:11.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
.b-title{font-family:’Playfair Display’,serif;font-size:clamp(1.8rem,3.8vw,2.8rem);font-weight:900;line-height:1.2;color:#1c1c1c;margin-bottom:14px}
.b-sub{font-size:1.02rem;color:var(–muted);line-height:1.8;max-width:540px}
.b-sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px;flex-wrap:wrap;gap:20px}
/* ─── ABOUT ─── */
.b-about{background:#fff}
.b-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.b-img-stack{position:relative;padding-bottom:48px}
.b-img-main{border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.12)}
.b-img-main img{width:100%;height:420px;object-fit:cover}
.b-img-float{position:absolute;bottom:0;right:-20px;width:48%;border-radius:16px;overflow:hidden;border:5px solid #fff;box-shadow:0 16px 40px rgba(0,0,0,.12)}
.b-img-float img{width:100%;height:210px;object-fit:cover}
.b-badge{position:absolute;top:32px;right:-16px;background:var(–g);color:#fff;padding:16px 18px;border-radius:14px;text-align:center;box-shadow:0 8px 24px rgba(26,107,60,.35);z-index:2}
.b-badge-num{font-family:’Playfair Display’,serif;font-size:2.2rem;font-weight:900;line-height:1}
.b-badge-txt{font-size:10px;text-transform:uppercase;letter-spacing:1px;opacity:.85;margin-top:2px}
.b-feats{display:flex;flex-direction:column;gap:18px;margin-top:28px}
.b-feat{display:flex;gap:14px;align-items:flex-start}
.b-feat-icon{width:46px;height:46px;min-width:46px;background:var(–gl);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px}
.b-feat-title{font-weight:700;font-size:14.5px;margin-bottom:3px}
.b-feat-text{font-size:13px;color:var(–muted);line-height:1.65}
.b-btn-green{background:var(–g);color:#fff;padding:13px 30px;border-radius:50px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:8px;transition:all .25s;box-shadow:0 4px 16px rgba(26,107,60,.3);margin-top:28px}
.b-btn-green:hover{background:var(–gd);transform:translateY(-2px)}
/* ─── PROGRAMMES ─── */
.b-progs{background:#f7faf8}
.b-prog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.b-prog-card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.05);transition:transform .3s,box-shadow .3s}
.b-prog-card:hover{transform:translateY(-7px);box-shadow:0 20px 50px rgba(0,0,0,.11)}
.b-prog-img{position:relative;overflow:hidden}
.b-prog-img img{width:100%;height:215px;object-fit:cover;transition:transform .5s}
.b-prog-card:hover .b-prog-img img{transform:scale(1.07)}
.b-prog-badge{position:absolute;top:14px;left:14px;background:var(–g);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 12px;border-radius:50px}
.b-prog-body{padding:22px}
.b-prog-emoji{font-size:26px;margin-bottom:10px}
.b-prog-name{font-family:’Playfair Display’,serif;font-size:1.15rem;font-weight:700;margin-bottom:8px;color:#1c1c1c}
.b-prog-desc{font-size:13px;color:var(–muted);line-height:1.7;margin-bottom:14px}
.b-prog-link{color:var(–g);font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:5px}
/* ─── COUNTER ─── */
.b-counter{background:var(–g);position:relative;overflow:hidden}
.b-counter::after{content:”;position:absolute;inset:0;background:url(‘https://images.unsplash.com/photo-1509099836639-18ba1795216d?w=1400&q=40′) center/cover no-repeat;opacity:.06;pointer-events:none}
.b-counter-grid{display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:1}
.b-ctr-box{padding:52px 24px;text-align:center;border-right:1px solid rgba(255,255,255,.1)}
.b-ctr-box:last-child{border-right:none}
.b-ctr-icon{font-size:38px;margin-bottom:14px}
.b-ctr-num{font-family:’Playfair Display’,serif;font-size:clamp(2.2rem,4vw,3rem);font-weight:900;color:#fff;line-height:1;display:flex;align-items:baseline;justify-content:center;gap:4px}
.b-ctr-suffix{font-size:1.3rem;opacity:.8}
.b-ctr-lbl{font-size:12.5px;color:rgba(255,255,255,.65);margin-top:8px;text-transform:uppercase;letter-spacing:.5px}
/* ─── INVOLVED ─── */
.b-involved{background:#fff}
.b-inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.b-inv-img{border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.12)}
.b-inv-img img{width:100%;height:520px;object-fit:cover}
.b-ways{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.b-way{display:flex;gap:14px;padding:18px 20px;border-radius:12px;border:1.5px solid #e5ebe6;transition:all .25s;cursor:default}
.b-way:hover{border-color:var(–g);background:var(–gl)}
.b-way-icon{width:42px;height:42px;min-width:42px;background:var(–g);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px}
.b-way-name{font-weight:700;font-size:14px;margin-bottom:3px}
.b-way-desc{font-size:12.5px;color:var(–muted);line-height:1.6}
/* ─── TESTIMONIALS ─── */
.b-testi{background:#f7faf8}
.b-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.b-testi-card{background:#fff;padding:30px 26px;border-radius:18px;box-shadow:0 4px 18px rgba(0,0,0,.05)}
.b-quote-mark{font-size:52px;color:var(–g);line-height:.8;font-family:Georgia,serif;margin-bottom:10px}
.b-testi-text{font-size:13.5px;color:#555;line-height:1.8;font-style:italic;margin-bottom:22px}
.b-testi-author{display:flex;align-items:center;gap:12px}
.b-testi-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0}
.b-testi-avatar img{width:100%;height:100%;object-fit:cover}
.b-testi-name{font-weight:700;font-size:14px}
.b-testi-role{font-size:12px;color:var(–muted)}
/* ─── NEWS ─── */
.b-news{background:#fff}
.b-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.b-news-card{border-radius:16px;overflow:hidden;border:1px solid #edf0ec;transition:transform .3s,box-shadow .3s}
.b-news-card:hover{transform:translateY(-5px);box-shadow:0 14px 40px rgba(0,0,0,.09)}
.b-news-img img{width:100%;height:195px;object-fit:cover}
.b-news-body{padding:20px}
.b-news-cat{font-size:11px;font-weight:700;color:var(–g);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:7px}
.b-news-title{font-family:’Playfair Display’,serif;font-size:1.05rem;font-weight:700;line-height:1.4;margin-bottom:8px;color:#1c1c1c}
.b-news-date{font-size:11.5px;color:var(–muted)}
/* ─── CTA BAND ─── */
.b-cta{background:url(‘https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?w=1600&q=80′) center/cover no-repeat;position:relative;padding:96px 0}
.b-cta::before{content:”;position:absolute;inset:0;background:rgba(8,38,18,.84)}
.b-cta-inner{position:relative;text-align:center;max-width:720px;margin:0 auto;padding:0 20px}
.b-cta h2{font-family:’Playfair Display’,serif;font-size:clamp(1.9rem,4.5vw,3rem);color:#fff;font-weight:900;margin-bottom:16px}
.b-cta p{color:rgba(255,255,255,.75);font-size:1.05rem;line-height:1.75;margin-bottom:34px}
.b-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* ─── FOOTER ─── */
.b-footer{background:#0a2214;color:rgba(255,255,255,.75);padding:72px 0 0}
.b-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:48px;max-width:1240px;margin:0 auto;padding:0 20px 56px}
.b-footer-about p{font-size:13.5px;line-height:1.8;margin:14px 0 20px;opacity:.72}
.b-footer-social{display:flex;gap:9px}
.b-footer-social a{width:34px;height:34px;background:rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;transition:background .2s}
.b-footer-social a:hover{background:var(–gold);color:#fff}
.b-footer h4{color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid rgba(255,255,255,.08)}
.b-footer-links{display:flex;flex-direction:column;gap:9px}
.b-footer-links a{font-size:13.5px;color:rgba(255,255,255,.6);transition:color .2s;display:flex;align-items:center;gap:7px}
.b-footer-links a:hover{color:var(–gold)}
.b-footer-links a::before{content:’›’;color:var(–g);font-size:16px;font-weight:700}
.b-footer-ci{display:flex;gap:10px;margin-bottom:12px;font-size:13px}
.b-footer-ci-icon{color:var(–gold);flex-shrink:0;margin-top:2px}
.b-footer-bottom{border-top:1px solid rgba(255,255,255,.07);max-width:1240px;margin:0 auto;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:rgba(255,255,255,.38);flex-wrap:wrap;gap:8px}
/* ─── ANIMATIONS ─── */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.b-reveal{opacity:0;transform:translateY(32px);transition:opacity .6s ease,transform .6s ease}
.b-reveal.visible{opacity:1;transform:none}
/* ─── RESPONSIVE ─── */
@media(max-width:1024px){
.b-prog-grid{grid-template-columns:repeat(2,1fr)}
.b-counter-grid{grid-template-columns:repeat(2,1fr)}
.b-ctr-box{border-right:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.b-footer-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:768px){
.b-nav{display:none}
.b-hamburger{display:flex}
.b-about-grid,.b-inv-grid{grid-template-columns:1fr;gap:48px}
.b-img-float{display:none}
.b-img-main img{height:320px}
.b-badge{right:16px}
.b-testi-grid,.b-news-grid{grid-template-columns:1fr}
.b-stats-bar-inner{flex-wrap:wrap}
.b-stat-item{min-width:50%;border-bottom:1px solid rgba(255,255,255,.08)}
.b-sec-head{flex-direction:column;align-items:flex-start}
.b-slider{height:75vh;min-height:520px}
}
@media(max-width:540px){
.b-prog-grid{grid-template-columns:1fr}
.b-counter-grid{grid-template-columns:1fr 1fr}
.b-footer-grid{grid-template-columns:1fr}
.b-slider-arrows{bottom:20px;right:16px}
.b-dots{bottom:28px}
.b-stats-bar-inner{flex-wrap:wrap}
.b-stat-item{min-width:50%}
}
Bayview · Chatsworth · Durban
We Help People
Build Better Lives
Together
A multi-service community development hub providing food, skills, healthcare, and hope to the families of Bayview every single day.
Food Security Programme
No One in Bayview
Should Go to Bed
Hungry
Our daily soup kitchen feeds hundreds of vulnerable residents — children, the elderly, and families facing hardship — 365 days a year.
Skills Development
Empowering Women
and Youth to
Build a Future
Vocational training in sewing, beauty therapy, and hairstyling — giving community members the skills to build sustainable livelihoods.
Healthcare Access
Free Medical Camps
for Our Community
Blood pressure, diabetes, cholesterol, and eye screenings — free primary healthcare brought directly to the people of Bayview.
160+
Organisations Supported
R270M+
Community Investment
About BUCC
We Are a Community
Built on Ubuntu
The Bayview Ubuntu Community Centre is a one-stop shop for community development — made possible by the Sibaya Community Trust and philanthropist Vivian Reddy in partnership with the Bayview Flats Residents Association.
🍲
Feeding the Hungry Every Day
Our daily soup kitchen ensures no resident in Bayview goes to bed hungry — 365 days a year.
🎓
Empowering Through Skills
Vocational training equips youth and women to build sustainable livelihoods and small businesses.
🏥
Free Healthcare Access
Regular medical camps bring free screenings and primary care directly into the community.
Learn Our Story →
What We Do
Our Core Programmes
Comprehensive services designed to uplift every resident of Bayview.
View All Programmes →
Daily🍲
Daily Soup Kitchen
Providing nutritious meals to vulnerable residents — because no one should go hungry.
Learn More →
Training🎓
Skills Development
Sewing, beauty therapy, hairstyling — empowering women and youth to create their own enterprises.
Learn More →
Health🏥
Medical Camps
Free health screenings: blood pressure, cholesterol, diabetes, eye testing and primary healthcare.
Learn More →
Education📚
Youth Education
Working with the Fatima Meer School Centre to open doors for the next generation.
Learn More →
Support🤝
Community Support
Connecting residents to social services and support networks that uplift the entire community.
Learn More →
Volunteer💪
Volunteer Programme
Join our dedicated team and help change lives in Bayview every day through service.
Join Us →
Our Impact
Making a Real Difference
🎓
0+
Organisations Supported
💰
R0M+
Community Investment
Take Action
There Are Many
Ways to Help
Your support — whether through donations, volunteering, or partnerships — keeps the Bayview community strong every day.
❤️
Make a Donation
Every rand funds our soup kitchen, training, and healthcare programmes directly.
🙌
Volunteer Your Time
Join our community volunteers and make a hands-on difference in people’s lives.
🤝
Corporate Partnership
CSI initiatives with real, measurable impact for your business and our community.
📦
In-Kind Donations
Food, clothing, equipment, or educational materials — all gratefully received.
Get Involved Today →
Community Voices
What People Say
“
The soup kitchen changed my family’s life. When times were hard, BUCC made sure my children never went to bed hungry. I am so grateful for this community centre.
Priya Naidoo
Community Member, Bayview
“
I learned sewing at BUCC and now I run my own small business from home. The skills training gave me independence and confidence I never thought I’d have.
Fatima Govender
Skills Training Graduate
“
The medical camp caught my high blood pressure early. The doctors were so kind and professional. BUCC is truly a blessing for our neighbourhood.
Rajan Pillay
Medical Camp Beneficiary
Community
BUCC Officially Opens Doors to the Bayview Community
May 2024
Food Security
Soup Kitchen Serves Thousands of Meals to Families in Need
June 2024
Skills & Training
Women Empowered Through New Vocational Training Programme
July 2024
Together We Can Change Lives in Bayview
Your donation, time, or partnership directly uplifts the families and individuals of the Bayview community. Join us in building a brighter, more empowered future — guided by Ubuntu.
(function(){
// ── SLIDER ──
const slides = document.querySelectorAll(‘.b-slide’);
const dots = document.querySelectorAll(‘.b-dot’);
const track = document.getElementById(‘b-slides’);
let cur = 0, total = slides.length, timer, dragging = false, startX = 0;
function goTo(n){
slides[cur].classList.remove(‘active’);
dots[cur].classList.remove(‘active’);
cur = (n + total) % total;
slides[cur].classList.add(‘active’);
dots[cur].classList.add(‘active’);
track.style.transform = ‘translateX(-‘ + cur * 100 + ‘%)’;
}
function autoPlay(){ timer = setInterval(()=> goTo(cur+1), 5500); }
function resetTimer(){ clearInterval(timer); autoPlay(); }
document.getElementById(‘b-next’).addEventListener(‘click’, ()=>{ goTo(cur+1); resetTimer(); });
document.getElementById(‘b-prev’).addEventListener(‘click’, ()=>{ goTo(cur-1); resetTimer(); });
dots.forEach(d => d.addEventListener(‘click’, ()=>{ goTo(+d.dataset.index); resetTimer(); }));
// swipe
track.addEventListener(‘touchstart’, e=>{ startX = e.touches[0].clientX; }, {passive:true});
track.addEventListener(‘touchend’, e=>{ const dx = e.changedTouches[0].clientX – startX; if(Math.abs(dx)>50){ goTo(dx{
entries.forEach(e=>{ if(e.isIntersecting) e.target.classList.add(‘visible’); });
}, {threshold:0.12});
document.querySelectorAll(‘.b-reveal’).forEach(el=> obs.observe(el));
// ── COUNTER ──
const cObs = new IntersectionObserver((entries)=>{
entries.forEach(entry=>{
if(!entry.isIntersecting) return;
entry.target.querySelectorAll(‘.b-counter’).forEach(el=>{
const target = +el.dataset.target;
let current = 0;
const step = target / 80;
const t = setInterval(()=>{
current += step;
if(current >= target){ el.textContent = target; clearInterval(t); }
else el.textContent = Math.floor(current);
}, 20);
});
cObs.unobserve(entry.target);
});
}, {threshold:0.3});
document.querySelectorAll(‘.b-counter-grid’).forEach(el=> cObs.observe(el));
// ── STICKY HEADER SHADOW ──
window.addEventListener(‘scroll’, ()=>{
document.getElementById(‘b-header’).style.boxShadow =
window.scrollY > 10 ? ‘0 4px 24px rgba(0,0,0,.12)’ : ‘0 2px 16px rgba(0,0,0,.07)’;
});
})();
