.tab { background: #fff; border: 1px solid #000; color: #000; padding: 5px 10px; margin: 3px; cursor: pointer; font-weight: bold; border-radius: 5px; font-size: 12px; } .legend-item { display: inline-block; margin: 5px 10px; font-size: 12px; } .legend-color { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: middle; border: 1px solid #000; } @media screen and (max-width: 600px) { #legendMobile { display: flex; flex-direction: column; align-items: flex-start; margin-left: auto; margin-right: auto; max-width: 90%; } .legend-item { display: flex; align-items: center; margin: 5px 0; text-align: left; } } const canvasMobile = document.getElementById('wealthCanvasMobile'); const ctxMobile = canvasMobile.getContext('2d'); const scaleMobile = window.devicePixelRatio || 1; canvasMobile.width = 300 * scaleMobile; canvasMobile.height = 300 * scaleMobile; canvasMobile.style.width = '300px'; canvasMobile.style.height = '300px'; ctxMobile.scale(scaleMobile, scaleMobile); const centerXMobile = 150; const centerYMobile = 150; const radiusMobile = 60; const thicknessMobile = 20; const lineLengthMobile = 24; const servicesByLevelMobile = { under250: ['Investment Management', 'Retirement Income Strategies', 'Insurance'], '250k': ['Financial Planning', 'Investment Management', 'Retirement Income Strategies', 'Insurance'], '1m': ['Financial Planning', 'Investment Management', 'Tax Optimization', 'Retirement Income Strategies', 'Insurance'], '2m': ['Financial Planning', 'Investment Management', 'Tax Optimization', 'Estate & Trust Planning', 'Retirement Income Strategies', 'Insurance'], '10m': ['Financial Planning', 'Investment Management', 'Tax Optimization', 'Estate & Trust Planning', 'Philanthropy Strategy', 'Retirement Income Strategies', 'Insurance'], '25m': ['Financial Planning', 'Investment Management', 'Tax Optimization', 'Estate & Trust Planning', 'Philanthropy Strategy', 'Retirement Income Strategies', 'Insurance', 'Family Office Services (Optional)'] }; const explanationsMobile = { under250: 'At this level of wealth, most people benefit from basic Investment Management, Retirement Income Strategies, and core Insurance coverage.', '250k': 'With $250k+, tailored Financial Planning and Investment Management become more important, along with Insurance and Retirement Strategy.', '1m': 'At $1M+, Financial Planning continues to be foundational. Tax Optimization joins the mix alongside Investment Management, Insurance, and Retirement Planning.', '2m': 'With $2M+, Private Wealth services begin: advanced Estate Planning, Tax Optimization, and sophisticated Investment and Financial Planning.', '10m': 'At $10M+, clients often add Philanthropy Strategy, deeper Tax Planning, and legacy-oriented Trust work, while Financial Planning remains essential.', '25m': 'At $25M+, highly customized strategies dominate. Many families at this level opt for full Family Office Services—but it’s not required. Financial Planning, Investment Management, Estate and Philanthropy design, and Insurance remain core.' }; const segmentDescriptionsMobile = { 'Investment Management': 'Portfolio construction, diversification, and strategic asset allocation.', 'Retirement Income Strategies': 'Ensuring income during retirement, including withdrawal planning.', 'Insurance': 'Protecting wealth through appropriate insurance coverage.', 'Financial Planning': 'Holistic planning for goals, budgeting, and future financial needs.', 'Tax Optimization': 'Structuring portfolios and income to reduce tax liability.', 'Estate & Trust Planning': 'Managing legacy through wills, trusts, and asset transfer structures.', 'Philanthropy Strategy': 'Giving strategies, donor-advised funds, and charitable planning.', 'Family Office Services (Optional)': 'Consolidated management of complex wealth, reporting, and governance.' }; const colorsMobile = ['#c9e4ff', '#d1ffd6', '#ffe1c4', '#ffccdc', '#fff7a8', '#dab6fc', '#b2ebf2', '#c2c2c2']; let currentSegmentsMobile = []; function splitLabelMobile(label) { return label.replace(/ /g, '\n'); } function renderWealthCircleMobile(levelKey) { const labels = servicesByLevelMobile[levelKey] || []; const total = labels.length; currentSegmentsMobile = []; ctxMobile.clearRect(0, 0, canvasMobile.width, canvasMobile.height); document.getElementById('legendMobile').innerHTML = ''; document.getElementById('segmentDescriptionMobile').innerText = ''; document.getElementById('explanationMobile').innerText = explanationsMobile[levelKey] || ''; if (total === 0) return; labels.forEach((label, i) => { const angleStart = (2 * Math.PI / total) * i; const angleEnd = (2 * Math.PI / total) * (i + 1); const midAngle = (angleStart + angleEnd) / 2; const ringColor = colorsMobile[i % colorsMobile.length]; currentSegmentsMobile.push({ start: angleStart, end: angleEnd, label }); // Segment arc ctxMobile.beginPath(); ctxMobile.arc(centerXMobile, centerYMobile, radiusMobile, angleStart, angleEnd); ctxMobile.arc(centerXMobile, centerYMobile, radiusMobile - thicknessMobile, angleEnd, angleStart, true); ctxMobile.closePath(); ctxMobile.fillStyle = ringColor; ctxMobile.fill(); // Connector line const outerX = centerXMobile + Math.cos(midAngle) * (radiusMobile - thicknessMobile / 2); const outerY = centerYMobile + Math.sin(midAngle) * (radiusMobile - thicknessMobile / 2); const labelX = centerXMobile + Math.cos(midAngle) * (radiusMobile + lineLengthMobile); const labelY = centerYMobile + Math.sin(midAngle) * (radiusMobile + lineLengthMobile); ctxMobile.beginPath(); ctxMobile.moveTo(outerX, outerY); ctxMobile.lineTo(labelX, labelY); ctxMobile.strokeStyle = '#000'; ctxMobile.lineWidth = 1; ctxMobile.stroke(); // Label text ctxMobile.fillStyle = '#000'; ctxMobile.font = '10px Arial'; ctxMobile.textAlign = (midAngle > Math.PI / 2 && midAngle { const offsetY = (index - (lines.length - 1) / 2) * 12; ctxMobile.fillText(line, labelX + (ctxMobile.textAlign === 'left' ? 5 : -5), labelY + offsetY); }); const legendItem = ``; document.getElementById('legendMobile').innerHTML += legendItem; }); } // Click event for segment descriptions canvasMobile.addEventListener('click', (e) => { const rect = canvasMobile.getBoundingClientRect(); const x = (e.clientX - rect.left) * (canvasMobile.width / rect.width) / scaleMobile; const y = (e.clientY - rect.top) * (canvasMobile.height / rect.height) / scaleMobile; const angle = Math.atan2(y - centerYMobile, x - centerXMobile); const dist = Math.sqrt((x - centerXMobile) ** 2 + (y - centerYMobile) ** 2); let normalizedAngle = angle >= 0 ? angle : (2 * Math.PI + angle); if (dist >= (radiusMobile - thicknessMobile) && dist = segment.start && normalizedAngle < segment.end) { const desc = segmentDescriptionsMobile[segment.label] || 'No description available.'; document.getElementById('segmentDescriptionMobile').innerText = segment.label + ': ' + desc; break; } } } }); // Initial gray ring ctxMobile.beginPath(); ctxMobile.arc(centerXMobile, centerYMobile, radiusMobile, 0, 2 * Math.PI); ctxMobile.arc(centerXMobile, centerYMobile, radiusMobile - thicknessMobile, 2 * Math.PI, 0, true); ctxMobile.closePath(); ctxMobile.fillStyle = '#f1f1f1'; ctxMobile.fill();