document.documentElement.classList.add('sbk-js'); (function () { 'use strict'; var GAP = 24; // matches --sbk-space-3, the flex gap on .sbk-track /* ---------- Carousels ---------- */ document.querySelectorAll('[data-carousel]').forEach(function (root) { var track = root.querySelector('.sbk-track'); var prev = root.querySelector('[data-dir="prev"]'); var next = root.querySelector('[data-dir="next"]'); var fill = root.querySelector('.sbk-rail-fill'); var arrows = root.querySelector('.sbk-arrows'); var rail = root.querySelector('.sbk-rail'); if (!track) return; function step() { var slide = track.querySelector('.sbk-slide'); return slide ? slide.getBoundingClientRect().width + GAP : track.clientWidth * 0.8; } function sync() { var max = track.scrollWidth - track.clientWidth; // When every slide already fits there is nothing to drive, so the arrows and // the progress rail would just be dead furniture. Hide them instead. var scrollable = max > 1; if (arrows) arrows.hidden = !scrollable; if (rail) rail.hidden = !scrollable; if (!scrollable) return; if (prev) prev.disabled = track.scrollLeft <= 1; if (next) next.disabled = track.scrollLeft >= max - 1; if (fill) { var ratio = track.clientWidth / track.scrollWidth; var pct = max > 0 ? track.scrollLeft / max : 0; fill.style.width = Math.min(ratio * 100, 100) + '%'; fill.style.transform = 'translateX(' + (pct * (100 / Math.max(ratio, 0.01) - 100)) + '%)'; } } if (prev) prev.addEventListener('click', function () { track.scrollBy({ left: -step(), behavior: 'smooth' }); }); if (next) next.addEventListener('click', function () { track.scrollBy({ left: step(), behavior: 'smooth' }); }); track.addEventListener('scroll', sync, { passive: true }); window.addEventListener('resize', sync); sync(); // Re-measure once the webfont lands — the first sync() runs before the reflow // that changes whether the track overflows, which otherwise leaves arrows on. if (document.fonts && document.fonts.ready) document.fonts.ready.then(sync); /* drag-to-scroll (pointer), skipping the before/after sliders */ var down = false, startX = 0, startScroll = 0, moved = 0; track.addEventListener('pointerdown', function (e) { if (e.pointerType === 'touch') return; // native touch scrolling is better down = true; moved = 0; startX = e.clientX; startScroll = track.scrollLeft; }); track.addEventListener('pointermove', function (e) { if (!down) return; var dx = e.clientX - startX; moved += Math.abs(dx); if (moved > 4) track.classList.add('is-dragging'); track.scrollLeft = startScroll - dx; }); ['pointerup', 'pointercancel', 'pointerleave'].forEach(function (evt) { track.addEventListener(evt, function () { if (!down) return; down = false; track.classList.remove('is-dragging'); sync(); }); }); }); /* ---------- Review expand ---------- */ document.querySelectorAll('.sbk-review-more').forEach(function (btn) { var card = btn.closest('.sbk-review'); var text = card.querySelector('.sbk-review-text'); btn.addEventListener('click', function () { var open = card.classList.toggle('is-open'); btn.textContent = open ? 'Read less' : 'Read more'; btn.setAttribute('aria-expanded', String(open)); }); // Show the control only on reviews that are actually cut off, and keep that // true as the box changes. The clamp height moves when the webfont swaps in // and when the viewport changes, so this is re-checked rather than decided // once — a single measurement at load lands on the fallback font and leaves // the control on reviews that fit. function sync() { if (card.classList.contains('is-open')) return; // expanded: keep the way back btn.hidden = text.scrollHeight <= text.clientHeight + 1; } sync(); if (document.fonts && document.fonts.ready) document.fonts.ready.then(sync); if ('ResizeObserver' in window) new ResizeObserver(sync).observe(text); window.addEventListener('resize', sync); }); /* ---------- FAQ accordion ---------- */ document.querySelectorAll('.sbk-faq-item').forEach(function (item) { var btn = item.querySelector('.sbk-faq-q'); var panel = item.querySelector('.sbk-faq-a'); if (!btn || !panel) return; btn.addEventListener('click', function () { var open = item.classList.toggle('is-open'); btn.setAttribute('aria-expanded', String(open)); panel.style.height = open ? panel.firstElementChild.offsetHeight + 'px' : '0px'; }); }); /* ---------- Mobile nav ---------- */ var nav = document.getElementById('nav'); var burger = document.getElementById('burger'); if (nav && burger) { burger.addEventListener('click', function () { var open = nav.classList.toggle('is-open'); burger.setAttribute('aria-expanded', String(open)); burger.setAttribute('aria-label', open ? 'Close menu' : 'Open menu'); }); nav.querySelectorAll('.sbk-nav-drawer a').forEach(function (a) { a.addEventListener('click', function () { nav.classList.remove('is-open'); burger.setAttribute('aria-expanded', 'false'); }); }); } /* ---------- Sticky nav condense ---------- */ window.addEventListener('scroll', function () { if (nav) nav.classList.toggle('is-stuck', window.scrollY > 40); }, { passive: true }); /* ---------- Scroll reveal ---------- */ var reveals = document.querySelectorAll('.sbk-reveal'); if (!('IntersectionObserver' in window)) { reveals.forEach(function (el) { el.classList.add('is-in'); }); } else { var io = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (entry.isIntersecting) { entry.target.classList.add('is-in'); io.unobserve(entry.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -40px' }); reveals.forEach(function (el) { io.observe(el); }); } })(); (function () { var form = document.getElementById('assessment-form'); var note = document.getElementById('form-note'); if (!form) return; form.addEventListener('submit', function (e) { e.preventDefault(); if (!form.checkValidity()) { form.reportValidity(); return; } // No backend connected in this build — tell the user honestly. note.textContent = 'This form isn’t connected yet — please reach us on WhatsApp or email above.'; }); })(); /* Custom country-code dropdown with inline SVG flags — a native

Get a plan shaped to your face

Request your assessment

Where the clinic is

Request a consultation