Contact the clinic

Clinic phone unavailable

Dentistry @ Vida’s phone number is not available in the current site configuration. You can email the clinic or continue to the appointment handoff.

Email the clinic

\`; callDialog.addEventListener("click", (event) => { if (event.target.closest("[data-call-close]")) callDialog.close(); if (event.target.closest("[data-call-book]")) { const target = callReturnFocus && callReturnFocus.isConnected ? callReturnFocus : null; callReturnFocus = null; callDialog.close(); if (target) target.focus(); if (window.startBooking) window.startBooking({ service: "new-patient", startStep: 1 }); } }); callDialog.addEventListener("close", () => { if (callReturnFocus && callReturnFocus.isConnected) callReturnFocus.focus(); callReturnFocus = null; }); document.body.append(callDialog); } function openClinicCall(userInitiated) { const phone = normalizedPhone(config().phone); const active = userInitiated === true || Boolean(navigator.userActivation && navigator.userActivation.isActive); if (phone) { if (active) window.location.href = \`tel:\${phone}\`; return active; } if (!callDialog) createCallDialog(); if (callDialog.open) return false; callReturnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null; callDialog.showModal(); callDialog.querySelector("#concierge-call-title").focus({ preventScroll: true }); return false; } // Kept under its old name too, for any script that still calls it. window.openConcierge = openLiveChat; window.openLiveChat = openLiveChat; window.openClinicCall = function () { return openClinicCall(false); }; document.addEventListener("click", (event) => { const chat = event.target.closest("[data-chat]"); if (chat) { event.preventDefault(); openLiveChat(); return; } const call = event.target.closest("[data-call]"); if (call) { event.preventDefault(); openClinicCall(event.isTrusted); } }); if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", createCallDialog, { once: true }); else createCallDialog(); })(); `, "site.js": `(function(){ 'use strict'; const year=document.getElementById('year'); if(year) year.textContent=new Date().getFullYear(); const config=window.VIDA_CONFIG||{}; document.querySelectorAll('[data-phone-label]').forEach(el=>el.textContent=config.phoneDisplay||'416-440-8222'); const toggle=document.querySelector('.menu-toggle'); const menu=document.querySelector('.mobile-menu'); function closeMenu(focus=false){toggle.setAttribute('aria-expanded','false');toggle.setAttribute('aria-label','Open navigation');menu.classList.remove('is-open');menu.inert=true;if(focus)toggle.focus();} toggle.addEventListener('click',()=>{const open=toggle.getAttribute('aria-expanded')!=='true';toggle.setAttribute('aria-expanded',String(open));toggle.setAttribute('aria-label',open?'Close navigation':'Open navigation');menu.classList.toggle('is-open',open);menu.inert=!open;}); menu.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>closeMenu())); menu.querySelectorAll('button').forEach(b=>b.addEventListener('click',()=>closeMenu(true))); const navGroups=[...document.querySelectorAll('.nav-group')]; navGroups.forEach(group=>group.addEventListener('toggle',()=>{if(group.open)navGroups.forEach(other=>{if(other!==group)other.open=false;});})); document.addEventListener('keydown',event=>{if(event.key==='Escape'){if(menu.classList.contains('is-open'))closeMenu(true);navGroups.forEach(g=>{if(g.open){g.open=false;g.querySelector('summary').focus();}});}}); document.addEventListener('click',event=>{if(!menu.contains(event.target)&&!toggle.contains(event.target))closeMenu();navGroups.forEach(g=>{if(!g.contains(event.target))g.open=false;});}); window.matchMedia('(min-width:981px)').addEventListener('change',()=>{closeMenu();navGroups.forEach(g=>g.open=false);}); if('IntersectionObserver' in window){document.querySelectorAll('.reveal').forEach(el=>{const box=el.getBoundingClientRect();if(box.bottom>=0&&box.top<=window.innerHeight)el.classList.add('visible');});document.body.classList.add('js-ready');const observer=new IntersectionObserver(entries=>{entries.forEach(entry=>{if(entry.isIntersecting){entry.target.classList.add('visible');observer.unobserve(entry.target);}});},{threshold:.06});document.querySelectorAll('.reveal').forEach(el=>observer.observe(el));} const dock=document.querySelector('.contact-dock'),launcher=document.querySelector('.chat-launcher'),strip=document.querySelector('.appointment-strip'); if(dock&&launcher){let queued=false;const updateDock=()=>{const stripBox=strip?.getBoundingClientRect();const show=stripBox?stripBox.bottom<0:window.scrollY>240;const hideLauncher=show||Boolean(stripBox);dock.classList.toggle('is-visible',show);dock.inert=!show;launcher.classList.toggle('is-hidden',hideLauncher);launcher.inert=hideLauncher;queued=false;};window.addEventListener('scroll',()=>{if(!queued){queued=true;requestAnimationFrame(updateDock);}},{passive:true});window.addEventListener('resize',updateDock,{passive:true});updateDock();} const filters=[...document.querySelectorAll('[data-filter]')],cards=[...document.querySelectorAll('[data-service-category]')]; filters.forEach(button=>button.addEventListener('click',()=>{let count=0;filters.forEach(b=>b.setAttribute('aria-pressed',String(b===button)));cards.forEach(card=>{const match=button.dataset.filter==='All services'||card.dataset.serviceCategory.split('|').includes(button.dataset.filter);card.hidden=!match;if(match)count++;});document.querySelector('.filter-status').textContent=\`\${count} \${count===1?'service':'services'} to explore\`;})); const search=document.querySelector('#faq-search'); if(search){const items=[...document.querySelectorAll('[data-faq]')];const update=()=>{const term=search.value.toLowerCase().trim();let count=0;items.forEach(item=>{const match=item.textContent.toLowerCase().includes(term);item.hidden=!match;if(match)count++;});document.querySelector('#faq-count').textContent=\`\${count} \${count===1?'answer':'answers'}\${term?' found':''}\`;document.querySelector('#faq-empty').hidden=count>0;};search.addEventListener('input',update);update();} const care=document.querySelector('#booking-care'); if(care&&dock){const selected=new URLSearchParams(location.search).get('service');if([...care.options].some(o=>o.value===selected))care.value=selected;const update=()=>{const label=care.selectedOptions[0].textContent;document.querySelector('.booking-context').textContent=\`Your selected care: \${label}\`;document.querySelector('#booking-email').href=\`mailto:vidadentistry102@outlook.com?subject=\${encodeURIComponent('Appointment enquiry - '+label)}\`;dock.querySelector('[data-book]').dataset.book=care.value;};care.addEventListener('change',update);update();} })(); `, "editorial-motion.js": `(function () { 'use strict'; const root = document.documentElement; const STORAGE_KEY = 'vida-motion-paused'; const FRAME_MS = 1000 / 30; const DPR_MAX = 1.5; const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); const mobileViewport = window.matchMedia('(max-width: 700px)'); const finePointer = window.matchMedia('(hover: hover) and (pointer: fine)'); function onMediaChange(query, callback) { if (typeof query.addEventListener === 'function') query.addEventListener('change', callback); else if (typeof query.addListener === 'function') query.addListener(callback); } function readPausedPreference() { try { return window.sessionStorage.getItem(STORAGE_KEY) === '1'; } catch (_error) { return false; } } function savePausedPreference(value) { try { window.sessionStorage.setItem(STORAGE_KEY, value ? '1' : '0'); } catch (_error) { // Motion remains usable when storage is blocked or unavailable. } } function init() { if (root.dataset.editorialMotion === 'ready') return; root.dataset.editorialMotion = 'ready'; const canvases = []; const depthElements = Array.from(document.querySelectorAll('[data-depth]')); const revealElements = Array.from(document.querySelectorAll('[data-reveal]')); const sceneElements = Array.from(document.querySelectorAll('[data-motion-scene]')); const toggles = Array.from(document.querySelectorAll('button.motion-toggle')); const hero = document.querySelector('.hero-content'); const heroStage = hero ? hero.querySelector('.human-hero-stage') : null; let userPaused = readPausedPreference(); let auroraRaf = 0; let auroraTimer = 0; let lastAuroraDraw = 0; let depthRaf = 0; let pointerRaf = 0; let pointerX = 0; let pointerY = 0; let revealObserver = null; function motionStopped() { return userPaused || reduceMotion.matches; } function pageCanAnimate() { return !motionStopped() && document.visibilityState !== 'hidden'; } function updateToggleState() { const reduced = reduceMotion.matches; toggles.forEach((button) => { button.disabled = reduced; button.setAttribute('aria-pressed', String(reduced || userPaused)); if (reduced) button.title = 'Motion is reduced by your system preference.'; else button.removeAttribute('title'); const label = button.querySelector('[data-motion-label]'); if (label) label.textContent = reduced ? 'Reduced motion' : userPaused ? 'Play motion' : 'Pause motion'; const icon = button.querySelector('.motion-icon'); if (icon) icon.textContent = reduced ? '−' : userPaused ? '▶' : 'Ⅱ'; }); } function stopAuroraLoop() { if (auroraTimer) { window.clearTimeout(auroraTimer); auroraTimer = 0; } if (auroraRaf) { window.cancelAnimationFrame(auroraRaf); auroraRaf = 0; } } function resizeCanvas(state) { const box = state.canvas.getBoundingClientRect(); const width = Math.max(1, Math.round(box.width)); const height = Math.max(1, Math.round(box.height)); const dpr = Math.min(window.devicePixelRatio || 1, DPR_MAX); const pixelWidth = Math.round(width * dpr); const pixelHeight = Math.round(height * dpr); if (state.canvas.width !== pixelWidth || state.canvas.height !== pixelHeight) { state.canvas.width = pixelWidth; state.canvas.height = pixelHeight; state.width = width; state.height = height; state.dpr = dpr; } } function traceRibbon(ctx, width, height, time, layer) { const margin = width * 0.08; const step = Math.max(18, width / 34); const base = height * (0.34 + layer * 0.13); const amplitude = Math.min(height * (0.11 + layer * 0.018), 82); const thickness = Math.min(height * (0.12 + layer * 0.025), 94); const speed = 0.16 + layer * 0.035; const phase = time * speed + layer * 1.7; const frequency = 1.05 + layer * 0.18; function yAt(x, underside) { const progress = (x + margin) / (width + margin * 2); const primary = Math.sin(progress * Math.PI * 2 * frequency + phase) * amplitude; const secondary = Math.sin(progress * Math.PI * 4.2 - phase * 0.55) * amplitude * 0.22; return base + primary + secondary + (underside ? thickness : 0); } ctx.beginPath(); ctx.moveTo(-margin, yAt(-margin, false)); for (let x = -margin + step; x <= width + margin; x += step) { ctx.lineTo(x, yAt(x, false)); } for (let x = width + margin; x >= -margin; x -= step) { ctx.lineTo(x, yAt(x, true)); } ctx.closePath(); } function drawAurora(state, elapsedSeconds) { resizeCanvas(state); const { ctx, width, height, dpr } = state; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, width, height); ctx.save(); ctx.globalCompositeOperation = 'screen'; const glowX = width * (0.48 + Math.sin(elapsedSeconds * 0.11 + state.seed) * 0.1); const glowY = height * (0.48 + Math.cos(elapsedSeconds * 0.09 + state.seed) * 0.08); const glow = ctx.createRadialGradient( glowX, glowY, 0, glowX, glowY, Math.max(width, height) * 0.68 ); glow.addColorStop(0, 'rgba(119, 137, 255, 0.16)'); glow.addColorStop(0.45, 'rgba(122, 78, 188, 0.08)'); glow.addColorStop(1, 'rgba(31, 50, 120, 0)'); ctx.fillStyle = glow; ctx.fillRect(0, 0, width, height); const palettes = [ ['rgba(96, 160, 255, 0)', 'rgba(96, 160, 255, 0.22)', 'rgba(124, 82, 214, 0.03)'], ['rgba(96, 79, 203, 0)', 'rgba(153, 101, 226, 0.2)', 'rgba(79, 126, 235, 0.02)'], ['rgba(70, 135, 236, 0)', 'rgba(91, 118, 222, 0.15)', 'rgba(149, 85, 210, 0.02)'] ]; palettes.forEach((palette, layer) => { traceRibbon(ctx, width, height, elapsedSeconds + state.seed, layer); const gradient = ctx.createLinearGradient(-width * 0.1, 0, width * 1.1, height); gradient.addColorStop(0, palette[0]); gradient.addColorStop(0.48, palette[1]); gradient.addColorStop(1, palette[2]); ctx.fillStyle = gradient; ctx.shadowColor = layer === 1 ? 'rgba(138, 93, 224, 0.2)' : 'rgba(74, 137, 245, 0.18)'; ctx.shadowBlur = Math.min(28, Math.max(14, height * 0.055)); ctx.fill(); }); ctx.restore(); } function visibleCanvases() { return canvases.filter((state) => state.visible); } function drawStaticCanvases() { if (document.visibilityState === 'hidden') return; visibleCanvases().forEach((state) => drawAurora(state, state.seed * 0.35)); } function shouldRunAurora() { return pageCanAnimate() && visibleCanvases().length > 0; } function scheduleAurora() { if (!shouldRunAurora() || auroraTimer || auroraRaf) return; const wait = Math.max(0, FRAME_MS - (performance.now() - lastAuroraDraw)); auroraTimer = window.setTimeout(() => { auroraTimer = 0; if (!shouldRunAurora()) return; auroraRaf = window.requestAnimationFrame((now) => { auroraRaf = 0; if (!shouldRunAurora()) return; visibleCanvases().forEach((state) => drawAurora(state, now / 1000)); lastAuroraDraw = now; scheduleAurora(); }); }, wait); } function refreshAurora() { stopAuroraLoop(); if (reduceMotion.matches) drawStaticCanvases(); else if (!userPaused) scheduleAurora(); } function setupCanvases() { document.querySelectorAll('canvas.aurora-canvas').forEach((canvas, index) => { const ctx = canvas.getContext('2d', { alpha: true }); if (!ctx) return; const box = canvas.getBoundingClientRect(); const state = { canvas, ctx, width: Math.max(1, Math.round(box.width)), height: Math.max(1, Math.round(box.height)), dpr: 1, seed: (index + 1) * 0.83, visible: box.bottom > 0 && box.top < window.innerHeight }; canvases.push(state); drawAurora(state, state.seed * 0.35); }); if ('IntersectionObserver' in window) { const canvasObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { const state = canvases.find((item) => item.canvas === entry.target); if (!state) return; state.visible = entry.isIntersecting; if (state.visible && motionStopped()) drawAurora(state, state.seed * 0.35); }); if (shouldRunAurora()) scheduleAurora(); else stopAuroraLoop(); }, { rootMargin: '80px 0px', threshold: 0.01 }); canvases.forEach((state) => canvasObserver.observe(state.canvas)); } if ('ResizeObserver' in window) { const canvasResizeObserver = new ResizeObserver((entries) => { entries.forEach((entry) => { const state = canvases.find((item) => item.canvas === entry.target); if (!state) return; resizeCanvas(state); if (state.visible && motionStopped()) drawAurora(state, state.seed * 0.35); }); if (shouldRunAurora()) scheduleAurora(); }); canvases.forEach((state) => canvasResizeObserver.observe(state.canvas)); } } function updateDepth() { depthRaf = 0; if (!('IntersectionObserver' in window)) { canvases.forEach((state) => { const wasVisible = state.visible; const box = state.canvas.getBoundingClientRect(); state.visible = box.bottom > 0 && box.top < window.innerHeight; if (!wasVisible && state.visible && motionStopped()) { drawAurora(state, state.seed * 0.35); } }); if (shouldRunAurora()) scheduleAurora(); else stopAuroraLoop(); } if (motionStopped() || document.visibilityState === 'hidden') { depthElements.forEach((element) => element.style.setProperty('--depth-y', '0px')); return; } const viewportHeight = Math.max(1, window.innerHeight); const mobile = mobileViewport.matches; depthElements.forEach((element) => { const requested = Number.parseFloat(element.dataset.depth || '18'); const safeRequested = Number.isFinite(requested) ? Math.abs(requested) : 18; const maximum = Math.min(safeRequested, mobile ? 12 : 42); const box = element.getBoundingClientRect(); if (box.bottom < 0 || box.top > viewportHeight) return; const elementCenter = box.top + box.height / 2; const travel = Math.max(viewportHeight / 2 + box.height / 2, 1); const progress = Math.max(-1, Math.min(1, (viewportHeight / 2 - elementCenter) / travel)); element.style.setProperty('--depth-y', \`\${(progress * maximum).toFixed(2)}px\`); }); } function queueDepthUpdate() { if (depthRaf) return; depthRaf = window.requestAnimationFrame(updateDepth); } function resetPointerDepth() { if (pointerRaf) { window.cancelAnimationFrame(pointerRaf); pointerRaf = 0; } pointerX = 0; pointerY = 0; if (heroStage) { heroStage.style.setProperty('--pointer-x', '0px'); heroStage.style.setProperty('--pointer-y', '0px'); } } function applyPointerDepth() { pointerRaf = 0; if (!heroStage || motionStopped() || !finePointer.matches || document.visibilityState === 'hidden') { resetPointerDepth(); return; } heroStage.style.setProperty('--pointer-x', \`\${(pointerX * 10).toFixed(2)}px\`); heroStage.style.setProperty('--pointer-y', \`\${(pointerY * 10).toFixed(2)}px\`); } function queuePointerDepth(event) { if (!hero || !heroStage || motionStopped() || !finePointer.matches) { resetPointerDepth(); return; } const box = hero.getBoundingClientRect(); if (!box.width || !box.height) return; pointerX = Math.max(-1, Math.min(1, ((event.clientX - box.left) / box.width) * 2 - 1)); pointerY = Math.max(-1, Math.min(1, ((event.clientY - box.top) / box.height) * 2 - 1)); if (!pointerRaf) pointerRaf = window.requestAnimationFrame(applyPointerDepth); } function setupMotionScenes() { if (!sceneElements.length) return; if (!('IntersectionObserver' in window)) { sceneElements.forEach((element) => element.classList.add('motion-inview')); return; } const sceneObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { entry.target.classList.toggle('motion-inview', entry.isIntersecting); }); }, { rootMargin: '80px 0px', threshold: 0.01 }); sceneElements.forEach((element) => sceneObserver.observe(element)); } function revealEverything() { revealElements.forEach((element) => element.classList.add('is-inview')); if (revealObserver) { revealObserver.disconnect(); revealObserver = null; } } function setupReveals() { if (!revealElements.length) return; if (motionStopped() || !('IntersectionObserver' in window)) { revealEverything(); return; } revealObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (!entry.isIntersecting) return; entry.target.classList.add('is-inview'); revealObserver.unobserve(entry.target); }); }, { rootMargin: '0px 0px -4%', threshold: 0.06 }); revealElements.forEach((element) => { const box = element.getBoundingClientRect(); if (box.bottom >= 0 && box.top <= window.innerHeight) element.classList.add('is-inview'); else revealObserver.observe(element); }); } function applyMotionState() { root.classList.toggle('motion-paused', motionStopped()); updateToggleState(); if (motionStopped()) revealEverything(); if (motionStopped()) resetPointerDepth(); updateDepth(); refreshAurora(); } toggles.forEach((button) => { button.addEventListener('click', () => { userPaused = !userPaused; savePausedPreference(userPaused); applyMotionState(); }); }); onMediaChange(reduceMotion, applyMotionState); onMediaChange(mobileViewport, queueDepthUpdate); onMediaChange(finePointer, resetPointerDepth); document.addEventListener('visibilitychange', () => { root.classList.toggle('motion-suspended', document.visibilityState === 'hidden'); if (document.visibilityState === 'hidden') { stopAuroraLoop(); resetPointerDepth(); if (depthRaf) { window.cancelAnimationFrame(depthRaf); depthRaf = 0; } } else { updateDepth(); refreshAurora(); } }); window.addEventListener('scroll', queueDepthUpdate, { passive: true }); window.addEventListener('resize', () => { queueDepthUpdate(); canvases.forEach(resizeCanvas); if (motionStopped()) drawStaticCanvases(); }, { passive: true }); setupCanvases(); setupReveals(); setupMotionScenes(); if (hero && heroStage) { hero.addEventListener('pointermove', queuePointerDepth, { passive: true }); hero.addEventListener('pointerleave', resetPointerDepth); } root.classList.toggle('motion-suspended', document.visibilityState === 'hidden'); root.classList.add('motion-ready'); applyMotionState(); } if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, { once: true }); else init(); })(); `, "app.js": `(function () { 'use strict'; const card = document.querySelector('[data-hero-dock]'); const slot = document.querySelector('.appointment-slot'); if (!card || !slot) return; const root = document.documentElement; const header = document.querySelector('.top-shell'); const heroContent = document.querySelector('.hero-content'); const dynamicViewport = CSS.supports('height', '100dvh'); function fitHero() { document.body.style.setProperty('--hero-header-height', \`\${header.getBoundingClientRect().height}px\`); if (!dynamicViewport) document.body.style.setProperty('--hero-viewport', \`\${window.innerHeight}px\`); document.body.classList.remove('hero-content-overflow'); const style = getComputedStyle(heroContent); const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom); const intro = heroContent.querySelector('.hero-intro'); let needed = intro.offsetHeight + padding; if (getComputedStyle(intro).display === 'contents') { const rows = ['.eyebrow', 'h1', 'p', '.hero-links'].map(selector => intro.querySelector(selector)).filter(node => node && getComputedStyle(node).display !== 'none'); needed = padding + rows.reduce((sum, node) => sum + node.offsetHeight, 0) + Math.max(0, rows.length - 1) * parseFloat(style.rowGap); } if (needed > heroContent.clientHeight + 2) { document.body.style.setProperty('--hero-readable-content', \`\${Math.ceil(needed)}px\`); document.body.classList.add('hero-content-overflow'); } } const reduced = window.matchMedia('(prefers-reduced-motion: reduce)'); const selectors = ['.appointment-heading', '.hero-connect-note', '.hero-connect-book', '.hero-connect-call', '.hero-connect-chat']; // The card's text pieces come first (they fade out as it docks), then its three buttons. const TEXT_COUNT = 2; const elements = selectors.map(selector => card.querySelector(selector)); const clamp = value => Math.max(0, Math.min(1, value)); const mix = (from, to, progress) => from + (to - from) * progress; const ease = value => { const t = clamp(value); return t * t * (3 - 2 * t); }; let frame = 0; let needsMeasure = true; let geometry; // The measurement copy has no interactive elements, IDs, action handlers or // accessible content. The original card and original buttons are never replaced. const measure = card.cloneNode(true); measure.classList.remove('hero-action-card'); measure.classList.add('hero-card-measure'); measure.removeAttribute('data-hero-dock'); measure.removeAttribute('role'); measure.removeAttribute('aria-label'); measure.setAttribute('aria-hidden', 'true'); measure.inert = true; measure.querySelectorAll('[id]').forEach(element => element.removeAttribute('id')); measure.querySelectorAll('button').forEach(button => { const placeholder = document.createElement('div'); placeholder.className = button.className; placeholder.innerHTML = button.innerHTML; button.replaceWith(placeholder); }); const safeArea = document.createElement('span'); safeArea.className = 'hero-dock-safe-area'; safeArea.setAttribute('aria-hidden', 'true'); slot.append(measure, safeArea); const active = card.contains(document.activeElement) ? document.activeElement : null; card.classList.add('is-morph-ready'); slot.closest('.hero-shell').after(card); if (active) active.focus({ preventScroll: true }); function viewport() { const visual = window.visualViewport; return { width: document.documentElement.clientWidth, bottom: visual ? visual.offsetTop + visual.height : window.innerHeight }; } function readGeometry() { fitHero(); const box = measure.getBoundingClientRect(); const view = viewport(); const mobile = view.width <= 700; const safe = safeArea.getBoundingClientRect().height; const bottomGap = mobile ? Math.max(10, safe) : Math.max(20, safe); const dockHeight = mobile ? 60 : 62; const dockWidth = Math.min(500, view.width - (mobile ? 20 : 32)); const documentTop = box.top + window.scrollY; const start = Math.max(0, documentTop + box.height - view.bottom + (mobile ? 18 : 24)); geometry = { width: box.width, height: box.height, left: box.left, documentTop, start, range: mobile ? 260 : 280, mobile, stacked: mobile && !window.matchMedia('(min-width:568px) and (max-height:560px)').matches, viewportWidth: view.width, sourceBottom: documentTop - start + box.height, dock: { width: dockWidth, height: dockHeight, left: (view.width - dockWidth) / 2, bottom: view.bottom - bottomGap }, children: selectors.map(selector => { const child = measure.querySelector(selector).getBoundingClientRect(); return { x: child.left - box.left, y: child.top - box.top, width: child.width, height: child.height }; }) }; needsMeasure = false; } function place(element, box) { element.style.left = \`\${box.x.toFixed(3)}px\`; element.style.top = \`\${box.y.toFixed(3)}px\`; element.style.width = \`\${box.width.toFixed(3)}px\`; element.style.height = \`\${box.height.toFixed(3)}px\`; } function actionTargets(width) { const pad = geometry.mobile ? 6 : 7; const gap = geometry.mobile ? 4 : 6; const secondary = geometry.mobile ? (geometry.viewportWidth <= 370 ? 60 : 66) : 90; const primary = width - 2 * pad - 2 * gap - 2 * secondary; return [ { x: pad, y: pad, width: primary, height: 48 }, { x: pad + primary + gap, y: pad, width: secondary, height: 48 }, { x: pad + primary + 2 * gap + secondary, y: pad, width: secondary, height: 48 } ]; } function draw() { frame = 0; if (document.visibilityState === 'hidden') return; if (needsMeasure || !geometry) readGeometry(); const g = geometry; const raw = clamp((window.scrollY - g.start) / g.range); const staticMotion = reduced.matches || root.classList.contains('motion-paused'); const progress = staticMotion ? (raw >= .5 ? 1 : 0) : ease(raw); // On phones the two lower buttons move into their columns before travelling // upward, so the three targets never cross or overlap during the morph. const horizontal = g.stacked && !staticMotion ? ease(progress / .38) : progress; const vertical = g.stacked && !staticMotion ? ease((progress - .25) / .75) : progress; const width = mix(g.width, g.dock.width, progress); const height = mix(g.height, g.dock.height, vertical); const left = mix(g.left, g.dock.left, progress); const bottom = mix(g.sourceBottom, g.dock.bottom, progress); const top = progress === 0 ? g.documentTop - window.scrollY : bottom - height; card.style.width = \`\${width.toFixed(3)}px\`; card.style.height = \`\${height.toFixed(3)}px\`; card.style.transform = \`translate3d(\${left.toFixed(3)}px,\${top.toFixed(3)}px,0)\`; card.style.setProperty('--connect-radius', \`\${mix(10, 13, progress).toFixed(2)}px\`); card.style.setProperty('--connect-shadow', mix(.13, .2, progress).toFixed(3)); card.style.setProperty('--connect-button-fill', (1 - progress).toFixed(3)); card.dataset.dockState = progress === 0 ? 'expanded' : progress === 1 ? 'docked' : 'morphing'; card.dataset.dockProgress = progress.toFixed(4); elements.slice(0, TEXT_COUNT).forEach((element, index) => { place(element, g.children[index]); const fade = g.stacked ? vertical / [.4, .2][index] : progress / (g.mobile ? .15 : .25); element.style.opacity = String(1 - clamp(fade)); element.hidden = fade >= 1; }); const targets = actionTargets(g.stacked ? width : g.dock.width); elements.slice(TEXT_COUNT).forEach((element, index) => { const from = g.children[index + TEXT_COUNT], to = targets[index]; place(element, { x: mix(from.x, to.x, horizontal), y: mix(from.y, to.y, vertical), width: mix(from.width, to.width, horizontal), height: mix(from.height, to.height, vertical) }); }); } function queue(measureAgain = false) { needsMeasure = needsMeasure || measureAgain; if (!frame && document.visibilityState !== 'hidden') frame = requestAnimationFrame(draw); } card.addEventListener('focusin', event => { if (needsMeasure || !geometry) readGeometry(); const box = event.target.getBoundingClientRect(); if (box.bottom > viewport().bottom - 8 || box.top < 0) { window.scrollTo({ top: geometry.start, behavior: 'instant' }); draw(); } }); window.addEventListener('scroll', () => queue(), { passive: true }); window.addEventListener('resize', () => queue(true), { passive: true }); window.addEventListener('pageshow', () => queue(true)); window.visualViewport?.addEventListener('resize', () => queue(true), { passive: true }); window.visualViewport?.addEventListener('scroll', () => queue(true), { passive: true }); reduced.addEventListener('change', () => queue()); document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') { cancelAnimationFrame(frame); frame = 0; } else queue(true); }); new MutationObserver(() => queue()).observe(root, { attributes: true, attributeFilter: ['class'] }); if ('ResizeObserver' in window) { const observer = new ResizeObserver(() => queue(true)); observer.observe(measure); observer.observe(header); observer.observe(heroContent); } document.fonts?.ready.then(() => queue(true)); draw(); })(); ` }; var pages = { "home": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js", "app.js" ], "about": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ], "book": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ], "contact": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ], "faq": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ], "insurance": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ], "new-patients": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ], "services": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ], "sitemap": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ], "cleaning-whitening": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ], "crowns-bridges-veneers": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ], "dental-exam": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ], "dental-implants": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ], "dentures": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ], "fillings-extractions": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ], "orthodontics": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ], "root-canals": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ], "wisdom-extraction": [ "site-config.js", "booking.js", "concierge.js", "site.js", "editorial-motion.js" ] }; var designClasses = ["about-hero-image","action-arrow","active","appointment-heading","appointment-slot","appointment-strip","arrival-items","arrival-section","art-caption","aurora-canvas","back-top","book-page","booking-address","booking-alternatives","booking-body","booking-button","booking-button--primary","booking-button--quiet","booking-care-context","booking-choice","booking-contact-cards","booking-contact-options","booking-context","booking-dialog","booking-divider","booking-explainer","booking-eyebrow","booking-guidance","booking-header","booking-icon-button","booking-kicker","booking-notice","booking-page-grid","booking-prep","booking-shell","booking-title","brand","breadcrumbs","button","button-dark","button-lime","button-outline","button-small","card-explore","care-card","care-card-arrow","care-card-bottom","care-card-copy","care-card-description","care-card-fill","care-card-grid","care-card-title","care-collection","care-collection-help","care-heading-spectrum","care-help-actions","care-help-spark","care-section","care-select","chat-launcher","cinema-actions","cinema-book","cinema-bottomline","cinema-call","cinema-copy","cinema-copy-inner","cinema-hero","cinema-image","cinema-subline","circle-arrow","clinic-strip","clinic-strip-full","clinic-strip-sep","clinic-strip-short","concierge-action","concierge-call-actions","concierge-call-card","concierge-call-close","concierge-call-dialog","concierge-call-number","concierge-compose","concierge-eyebrow","concierge-footer","concierge-header","concierge-icon-button","concierge-intro","concierge-message","concierge-message--user","concierge-message__actions","concierge-message__label","concierge-messages","concierge-panel","concierge-primary","concierge-secondary","concierge-shell","concierge-suggestions","consult-band","consult-steps","contact-big-phone","contact-details","contact-dock","contact-email","contact-hours","contact-inner","contact-map","contact-message-card","contact-message-link","contact-option","contact-options","contact-options-page","contact-page","contact-page-grid","contact-primary","contact-section","contact-title","coverage-art","coverage-check","desktop-break","desktop-nav","directory-art","directory-section","directory-toolbar","dock-book","dock-label","editorial-cta","editorial-heading","editorial-hero","editorial-items","editorial-number","editorial-section","editorial-tint","error-actions","experience-copy","experience-photo","experience-points","experience-section","eyebrow","faq-count","faq-intro","faq-list","faq-page","faq-search","faq-section","filter-status","footer-bottom","footer-brand","footer-brandline","footer-intro","footer-motion-toggle","footer-newsletter","footer-newsletter-label","footer-newsletter-note","footer-newsletter-row","footer-newsletter-status","footer-newsletter-title","footer-phone","footer-rule","footer-settings","footer-top","graphic-core","graphic-orbit","graphic-point","header-actions","header-call","hero","hero-action-card","hero-art","hero-aurora","hero-card-measure","hero-connect-actions","hero-connect-book","hero-connect-call","hero-connect-caption","hero-connect-chat","hero-connect-content","hero-connect-note","hero-content","hero-content-overflow","hero-description-full","hero-description-short","hero-dock-safe-area","hero-endnote","hero-grid-lines","hero-intro","hero-links","hero-motion-control","hero-photo-konrads","hero-promises","hero-scroll","hero-shell","home-page","home-page-links","human-directory","human-hero-caption","human-hero-frame","human-hero-seal","human-hero-stage","human-moment","human-service-image","image-caption","image-note","inner-page","is-hidden","is-inview","is-morph-ready","is-open","is-visible","journey-action","journey-action--primary","journey-actions","journey-actions__label","journey-actions__links","journey-eyebrow","journey-heading","journey-number","journey-section","journey-step","journey-step__title","journey-steps","journey-wrap","js-ready","launcher-arrow","launcher-icon","legal-content","legal-date","menu-toggle","mobile-menu","motion-icon","motion-inview","motion-paused","motion-ready","motion-suspended","motion-toggle","muted-heading","nav-chevron","nav-dropdown","nav-group","nav-overview","noscript-note","orbit-one","orbit-two","page-actions","page-content","page-cta","page-faq","page-hero","page-hero-copy","page-hero-grid","page-hero-split","page-primary","page-text-link","panel-book","panel-copy","panel-index","panel-top","photo-coordinate","point-one","point-two","preview-note","privacy-close","privacy-dialog","privacy-trigger","quick-booking","related-grid","related-heading","related-section","reveal","sample-label","section-heading","section-kicker","select-wrap","service-card","service-card-image","service-detail-link","service-features","service-filters","service-hero-image","service-overview","service-page","services-dropdown","services-grid","signal","signature-aura","signature-clinic","signature-endnote","signature-type","signature-word","site-footer","site-footer-grid","site-header","sitemap-grid","skip-link","smile-story","smile-story-bottom","smile-story-grid","smile-story-heading","step-foot","step-head","story-wide","svg-defs","text-button","top-shell","treatment-graphic","treatment-help","treatment-layout","treatment-number","treatment-panel","treatment-tab","treatment-tabs","treatment-tags","v3-revival-back-top","v3-revival-closing","v3-revival-closing-inner","v3-revival-closing-note","v3-revival-closing-spark","v3-revival-closing-title","v3-revival-eyebrow","v3-revival-footer","v3-revival-footer-bottom","v3-revival-footer-tagline","v3-revival-footer-top","v3-revival-orbit","v3-revival-primary","v3-revival-ribbon","v3-revival-ribbon-phrase","v3-revival-ribbon-spark","v3-revival-ribbon-track","v3-revival-secondary","v3-revival-wordmark","v3-revival-wrap","vida-access","vida-address","vida-brand-caption","vida-brand-logo","vida-contact-links","vida-details","vida-facilities","vida-hours","vida-legal-links","vida-life","vida-life-access","vida-life-card-top","vida-life-coverage","vida-life-details","vida-life-grid","vida-life-heading","vida-life-hours","vida-life-link","vida-life-offer","vida-life-photo","vida-life-photo-label","vida-map","vida-map-label","vida-offer","vida-resource-links","vida-resources","vida-signature","vida-visit","vida-visit-grid","visible","visit-section","visit-steps","welcome-art","welcome-spark","wrap"]; var designAttrs = ["data-bf-state","data-depth","data-motion-scene","data-reveal"]; var bodyMarks = {}; function run() { var root = document.querySelector('[data-bf-page]'); if (!root) return; var list = pages[root.getAttribute('data-bf-page')] || []; var key = Symbol.for('bluefie.designScripts'); var state = window[key] || { ran: {}, classes: {}, attrs: {}, props: {}, observing: false }; try { Object.defineProperty(window, key, { value: state, configurable: true }); } catch (e) {} var html = document.documentElement, body = document.body; var isDesignClass = {}; designClasses.forEach(function (c) { isDesignClass[c] = true; }); var isDesignAttr = {}; designAttrs.forEach(function (a) { isDesignAttr[a] = true; }); // What earlier runs mirrored comes back first: a re-render may have reset the root. Object.keys(state.classes).forEach(function (c) { root.classList.toggle(c, state.classes[c]); }); Object.keys(state.attrs).forEach(function (a) { if (state.attrs[a] === null) root.removeAttribute(a); else root.setAttribute(a, state.attrs[a]); }); Object.keys(state.props).forEach(function (p) { root.style.setProperty(p, state.props[p]); }); var running = true; function classes(value) { return (value || '').split(/\s+/).filter(Boolean); } function mirror(records) { var page = document.querySelector('[data-bf-page]'); if (!page) return; records.forEach(function (r) { if (r.type === 'childList') { // Only what the design's own scripts add while they run: the platform // adds its panels to too, and those stay where they are. if (!running || r.target !== body) return; r.addedNodes.forEach(function (n) { if (n.nodeType === 1 && n.tagName !== 'SCRIPT' && n.parentNode === body && !n.contains(page)) page.appendChild(n); }); return; } var name = r.attributeName, el = r.target; if (name === 'class') { var before = classes(r.oldValue), after = classes(el.getAttribute('class')); after.forEach(function (c) { if (isDesignClass[c] && before.indexOf(c) < 0) { page.classList.add(c); state.classes[c] = true; } }); before.forEach(function (c) { if (isDesignClass[c] && after.indexOf(c) < 0) { page.classList.remove(c); state.classes[c] = false; } }); } else if (name === 'style') { for (var i = 0; i < el.style.length; i++) { var p = el.style[i]; if (p.indexOf('--') === 0) { var v = el.style.getPropertyValue(p); page.style.setProperty(p, v); state.props[p] = v; } } } else if (name && isDesignAttr[name]) { var value = el.getAttribute(name); if (value === null) page.removeAttribute(name); else page.setAttribute(name, value); state.attrs[name] = value; } }); } var observer = state.observer; if (!observer) { observer = state.observer = new MutationObserver(mirror); observer.observe(html, { attributes: true, attributeOldValue: true }); observer.observe(body, { attributes: true, attributeOldValue: true, childList: true }); } // Changes from before this run (the platform rendering the page) are the // platform's: their attributes still mirror, but nothing they added moves. running = false; mirror(observer.takeRecords()); running = true; // The page classes this page's scripts read by name go on the real , // so a check like body.classList.contains('home-page') finds them. (bodyMarks[root.getAttribute('data-bf-page')] || []).forEach(function (c) { body.classList.add(c); }); // A design starts its code on DOMContentLoaded, or on load. Both have fired // (or are firing) by the time its scripts run here, and a listener added then // never runs. So while the scripts run, those listeners are collected and // called once every script has run, in the order they were added. And // document.write, which a script run after the page is parsed would use to // wipe the whole page, writes nothing. var ready = []; var addDoc = document.addEventListener, addWin = window.addEventListener, write = document.write, writeln = document.writeln; var own = function (o, k) { return Object.prototype.hasOwnProperty.call(o, k); }; var had = { da: own(document, 'addEventListener'), wa: own(window, 'addEventListener'), w: own(document, 'write'), wl: own(document, 'writeln') }; var loaded = document.readyState === 'complete'; document.addEventListener = function (type, fn, opts) { if (type === 'DOMContentLoaded') { ready.push({ target: document, type: type, fn: fn }); return; } // readystatechange fires again (at "complete"), so it is registered for // real as well as called once now for the state already reached. if (type === 'readystatechange') ready.push({ target: document, type: type, fn: fn }); return addDoc.apply(this, arguments); }; window.addEventListener = function (type, fn, opts) { if (type === 'DOMContentLoaded' || (type === 'load' && loaded)) { ready.push({ target: window, type: type, fn: fn }); return; } return addWin.apply(this, arguments); }; document.write = document.writeln = function () { console.warn('[custom-theme] a design script called document.write after the page loaded; nothing was written.'); }; try { list.forEach(function (name) { var code = scripts[name]; if (typeof code !== 'string' || state.ran[name]) return; // Once per page load: a script that ran is not run again by a re-render, // which would declare its names twice and double every listener. state.ran[name] = true; var el = document.createElement('script'); el.setAttribute('data-bf-design-script', name); el.text = code + '\n//# sourceURL=design/' + name.replace(/[^\w./-]+/g, '-'); document.head.appendChild(el); mirror(observer.takeRecords()); }); } finally { // Put back exactly as found: an own property where there was none would // hide a library's later patch of EventTarget.prototype from these two. if (had.da) document.addEventListener = addDoc; else delete document.addEventListener; if (had.wa) window.addEventListener = addWin; else delete window.addEventListener; if (had.w) document.write = write; else delete document.write; if (had.wl) document.writeln = writeln; else delete document.writeln; } ready.forEach(function (l) { try { var event = new Event(l.type); if (typeof l.fn === 'function') l.fn.call(l.target, event); else if (l.fn && typeof l.fn.handleEvent === 'function') l.fn.handleEvent(event); } catch (e) { console.error('[custom-theme] a design start-up handler failed:', e); } mirror(observer.takeRecords()); }); running = false; } if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', run, { once: true }); else run(); })(); }catch(e){console.error('[custom-theme] global script failed:',e);}})();

Blog

Categories

Latest Posts