`; } function openPrintPreview(){ const w = window.open('', '_blank', 'noopener,noreferrer,width=1280,height=900'); if(!w){ alert('Please allow popups to generate the PDF preview.'); return; } w.document.open(); w.document.write(buildPrintHTML()); w.document.close(); }/* CSV Export */ on(csvBtn,'click',()=>{ const s = collectState(); const sections = $$('.section'); let csv = ''; sections.forEach(sec=>{ const title = sec.querySelector('.sb-title')?.textContent.trim() || 'Section'; csv += `${title}\n`; const head = sec.querySelector('.row.head')?.children; if(head) csv += Array.from(head).map(c=>`"${c.textContent.trim()}"`).join(',') + '\n'; const dataRows = Array.from(sec.querySelectorAll('.table .row')) .filter(r=>!r.classList.contains('head')) .filter(r=> isRowVisibleDOM(r) || !s.hide ); dataRows.forEach(r=>{ csv += Array.from(r.children).map(c=>`"${c.textContent.trim()}"`).join(',') + '\n'; }); csv += '\n'; }); const blob = new Blob([csv], {type: 'text/csv;charset=utf-8;'}); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `service-matrix-${nowStr().replace(/\s+/g,'-').replace(/:/g,'')}.csv`; link.click(); });/* Density (persist) */ const applyDensity = mode => { densBtns.forEach(b=>b.setAttribute('aria-pressed', String(b.dataset.density===mode))); const compact = mode==='compact'; $$('.cell').forEach(c=>c.style.padding= compact?'8px':'12px'); $$('.row').forEach(r=>r.style.gap= compact?'4px':'6px'); store.set('svc.density', mode); updateCounts(); }; applyDensity(store.get('svc.density','cozy')); densBtns.forEach(b=> on(b,'click',()=> applyDensity(b.dataset.density)));/* Search */ on(search,'input',e=>{ const q=(e.target.value||'').toLowerCase(); cells.forEach(c=>c.classList.remove('search-hit')); if(q){ cells.forEach(c=>{ if(c.textContent.toLowerCase().includes(q)) c.classList.add('search-hit'); }); $$('.section').forEach(sec=> setSectionState(sec, !!sec.querySelector('.search-hit'), false)); } updateCounts(); });/* Dim / Hide / Upgrades */ const togglePress = (btn,on)=> btn && btn.setAttribute('aria-pressed', String(on)); const state = { diff: !!store.get('svc.diff',false), hide: !!store.get('svc.hide',false), up: !!store.get('svc.up',false), pin: store.get('svc.pin',null) }; const applyDiff = ()=> rows.forEach(r=>{ const s=same(r); getPaid(r).forEach(c=>c.classList.toggle('dim', state.diff && s)); }); const applyHide = ()=> rows.forEach(r=>{ const s=same(r); r.classList.toggle('hiddenRow', state.hide && s); }); const applyUp = ()=> rows.forEach(r=>{ const cols=getPaid(r); cols.forEach((c,i)=>{ if(i===0) return; const cur=textify(c), prev=textify(cols[i-1]); c.classList.toggle('upgrade', state.up && cur && cur!==prev && !isDash(cur)); }); }); togglePress(diffBtn,state.diff); togglePress(hideBtn,state.hide); togglePress(upBtn,state.up); applyDiff(); applyHide(); applyUp(); on(diffBtn,'click',()=>{ state.diff=!state.diff; store.set('svc.diff',state.diff); togglePress(diffBtn,state.diff); applyDiff(); updateCounts(); }); on(hideBtn,'click',()=>{ state.hide=!state.hide; store.set('svc.hide',state.hide); togglePress(hideBtn,state.hide); applyHide(); updateCounts(); }); on(upBtn,'click', ()=>{ state.up =!state.up; store.set('svc.up', state.up); togglePress(upBtn, state.up); applyUp(); });/* Pin */ const clearPin = ()=>{ $$('.tier').forEach(t=>t.classList.remove('is-pinned')); $$('.row .cell').forEach(c=>{ c.classList.remove('pin-fill','cap-rail'); c.style.outline=''; }); pinBtns.forEach(b=>b.setAttribute('aria-pressed','false')); }; const applyPin = ()=>{ clearPin(); if(!state.pin) return;// top tier card outlined const tier = root.querySelector(`.tier[data-tier-id="${state.pin}"]`); tier?.classList.add('is-pinned'); root.querySelector(`.tier[data-tier-id="${state.pin}"] .pin`)?.setAttribute('aria-pressed','true');// shade pinned column cells root.querySelectorAll(`.row .cell[data-col-idx="${state.pin}"]`).forEach(c=> c.classList.add('pin-fill'));// add left-only orange rail on Capability column root.querySelectorAll(`.row .cell[data-col-idx="0"]`).forEach(c=> c.classList.add('cap-rail')); }; applyPin(); pinBtns.forEach(btn=> on(btn,'click',()=>{ const col = btn.closest('.tier')?.dataset.tierId; if(!col) return; state.pin = (state.pin===col)? null : col; store.set('svc.pin', state.pin); applyPin(); }));/* Collapsible (persist) */ const secKey = id => `svc.sec.${id}`; function setSectionState(section, expanded, save=true){ const btn = section.querySelector('.sectionbar'); const body = section.querySelector('.section-body'); if(!btn || !body) return; const currentlyExpanded = btn.getAttribute('aria-expanded')==='true'; if(expanded === currentlyExpanded && save===false) return; btn.setAttribute('aria-expanded', String(expanded)); if(expanded){ body.style.display='block'; const endH = body.scrollHeight; body.style.maxHeight = '0px'; requestAnimationFrame(()=>{ body.style.maxHeight = endH+'px'; }); const tidy = (e)=>{ if(e.propertyName==='max-height'){ body.style.maxHeight='none'; body.removeEventListener('transitionend', tidy); } }; body.addEventListener('transitionend', tidy); setTimeout(()=>{ if(getComputedStyle(body).maxHeight!=='none') body.style.maxHeight='none'; }, 350); }else{ body.style.maxHeight = body.scrollHeight + 'px'; requestAnimationFrame(()=>{ body.style.maxHeight='0px'; }); const hide = (e)=>{ if(e.propertyName==='max-height'){ body.style.display='none'; body.removeEventListener('transitionend', hide); } }; body.addEventListener('transitionend', hide); setTimeout(()=>{ if(getComputedStyle(body).maxHeight!=='0px'){ body.style.display='none'; body.style.maxHeight='0px'; } }, 350); } if(save && section.id){ store.set(secKey(section.id), expanded?1:0); } } $$('.section').forEach(section=>{ const btn = section.querySelector('.sectionbar'); const body= section.querySelector('.section-body'); if(!btn||!body) return; let expanded = true; const saved = store.get(secKey(section.id)); if(saved===0) expanded=false; if(!expanded){ body.style.display='none'; body.style.maxHeight='0px'; } btn.setAttribute('aria-expanded', String(expanded)); on(btn,'click', (e)=>{ e.preventDefault(); const willExpand = btn.getAttribute('aria-expanded')!=='true'; setSectionState(section, willExpand); updateCounts(); }); on(btn,'keydown', e=>{ if(e.key==='Enter' || e.key===' '){ e.preventDefault(); btn.click(); } }); });/* Section counters */ function updateCounts(){ $$('.section').forEach(sec=>{ const countEl = sec.querySelector('.sb-count'); if(!countEl) return; const visible = Array.from(sec.querySelectorAll('.table .row')) .filter(r=>!r.classList.contains('head')) .filter(r=> !r.classList.contains('hiddenRow') && getComputedStyle(r).display!=='none').length; countEl.textContent = visible ? `${visible}` : ''; }); } updateCounts();/* Sticky shadows */ const stickies = [$('.tiers'), ...$$('.sectionbar')].filter(Boolean); if('IntersectionObserver' in window && stickies.length){ const io = new IntersectionObserver(entries=>{ entries.forEach(e=> e.target.classList.toggle('is-stuck', e.intersectionRatio < 1)); }, {threshold:[1]}); stickies.forEach(el=>io.observe(el)); }/* Sticky offset from site header */ const calcOffset = () => { const admin = document.querySelector('#wpadminbar')?.offsetHeight || 0; const siteH = document.querySelector('header')?.offsetHeight || 0; const offset = Math.max(70, admin + siteH + 6); root.style.setProperty('--sticky', offset + 'px'); }; calcOffset(); window.addEventListener('resize', calcOffset);/* Keyboard QoL (scoped) */ let lastHit=-1; const hits = ()=> $$('.search-hit'); on(document,'keydown',e=>{ const inScope = app.contains(document.activeElement) || document.activeElement===document.body; if(!inScope) return; if(e.key==='/' && document.activeElement!==search){ e.preventDefault(); search?.focus(); } if(e.key==='Enter' && hits().length){ e.preventDefault(); lastHit=(lastHit+1)%hits().length; hits()[lastHit].scrollIntoView({behavior:'smooth',block:'center'}); } const k=e.key.toLowerCase(); if(k==='d') diffBtn?.click(); if(k==='h') hideBtn?.click(); if(k==='u') upBtn?.click(); if(k==='t') themeBtn?.click(); if(k==='p') openPrintPreview(); });/* Drawers (open/close + focus trap) — namespaced */ let lastOpener=null; const trap=(d,onTrap)=>{ const f=Array.from(d.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])')); if(!f.length) return; const first=f[0], last=f[f.length-1]; const handler=e=>{ if(e.key!=='Tab') return; if(e.shiftKey && document.activeElement===first){ e.preventDefault(); last.focus(); } else if(!e.shiftKey && document.activeElement===last){ e.preventDefault(); first.focus(); } }; onTrap? d.addEventListener('keydown',handler) : d.removeEventListener('keydown',handler); }; const openDrawer = sel => { const d=document.querySelector(sel); if(!d) return; lastOpener=document.activeElement; d.classList.add('is-open'); d.setAttribute('aria-hidden','false'); requestAnimationFrame(()=> d.querySelector('[data-close]')?.focus()); trap(d,true); }; const closeDrawer = d => { if(!d) return; d.classList.remove('is-open'); d.setAttribute('aria-hidden','true'); trap(d,false); lastOpener?.focus?.(); }; on(root,'click',e=>{ const o=e.target.closest('[data-open]'); if(o){ e.preventDefault?.(); openDrawer(o.getAttribute('data-open')); return; } const c=e.target.closest('[data-close]'); if(c){ e.preventDefault?.(); closeDrawer(c.closest('.de-drawer')); return; } if(e.target.classList.contains('de-drawer')) closeDrawer(e.target); }); on(document,'keydown',e=>{ if(e.key==='Escape') document.querySelectorAll('.de-drawer.is-open').forEach(closeDrawer); });/* Dynamic Tooltips (placement) */ function positionTooltips(){ $$('[data-tip]').forEach(el=>{ on(el,'mouseover',()=>{ const rect = el.getBoundingClientRect(); const spaceBelow = window.innerHeight - rect.bottom; el.classList.toggle('tip-bottom', spaceBelow < 150); el.classList.toggle('tip-top', spaceBelow >= 150); }); }); } positionTooltips();/* Tooltips attach (capability & values) */ const CAP_TIPS = { "help desk & sla":"Support hours and response targets for resolving issues.", "remote monitoring & alerting":"Automatic health checks for devices and services with alerts.", "patch & app management":"Keep operating systems and apps up to date and secure.", "remote support & quick assist":"Techs can securely connect to help users on demand.", "it documentation & knowledge base":"Runbooks and how-tos for your environment and common tasks.", "client portal & ticketing":"Submit, track, and update requests in one place.", "asset & warranty":"Track devices, software, and warranties to avoid surprises.", "executive reporting & qbrs":"Regular summaries of health, risks, and priorities.", "it governance & roadmaps":"Plan standards, budgets, and initiatives with clear milestones.", "vcio":"Strategic IT advisor aligned to business goals.", "baseline threat protection":"Core protections like anti-malware, web filtering, and hardening.", "data safeguards & identity controls":"Secure access, MFA, and policies that protect data everywhere.", "email security & mfa":"Filter threats and enforce multi-factor authentication.", "endpoint detection & response":"Detect, contain, and remediate endpoint threats quickly.", "security awareness & phishing":"Human risk training and phishing simulations.", "saas app security monitoring":"Detect risky changes and behavior in cloud apps.", "dark web monitoring":"Watch for leaked accounts and passwords.", "siem / soc":"24×7 log analysis and incident response by security analysts.", "security & compliance reporting":"Regular metrics for leadership and auditors.", "workstation backup":"Back up laptops/desktops for accidental deletion or loss.", "server backup":"Protect on-prem/VM servers with image and file backups.", "saas suite backup (mail/files)":"Back up mail, files, and collaboration data in the cloud.", "dr runbooks":"Step-by-step recovery plans for systems and teams.", "recovery tests":"Prove recoveries work and meet RPO/RTO targets.", "account setup & offboarding (major suites)":"Create/disable accounts and access safely across your chosen suite.", "new-hire kits & device provisioning":"Prepare devices and accessories for a day-one-ready start.", "email, calendar & contacts":"Business email, scheduling, and address books.", "team chat & video meetings":"Real-time messaging and meetings for teams and clients.", "drive & document sharing":"Shared spaces with smart retention and protections.", "hr forms & approvals (pto, access, changes)":"Click-to-approve requests for routine HR tasks.", "esignature & agreements":"Legally binding signatures with reusable templates.", "intranet & announcements":"Company hub for news, policies, and quick links.", "training library & how-to guides":"Short, practical guides for common workflows.", "identity & access for roles/teams":"Right people, right access, automatically by role.", "app provisioning (sso)":"One login to apps; add/remove with a click.", "employee lifecycle analytics":"Signals and trends across onboarding through exit.", "secure access (sase)":"Zero-trust network access with cloud security controls.", "lan / wan management":"Structured networks with monitoring and changes managed.", "mdm (desktop & mobile)":"Manage settings, apps, and security for devices.", "policies & isms":"Written policies and an information security program.", "risk register":"Identify, score, and treat risks with owners and dates.", "vendor due diligence":"Assess and track third-party security/compliance.", "compliance portal & reports":"Central system of record for controls and evidence.", "audit preparation":"Guidance to assemble evidence and pass audits.", "governance workshops":"Cadenced sessions to align practices to standards." }; function explainValue(value){ const v = (value||"").toLowerCase(); if(v.includes('✓') || v.includes('included')) return 'Included in this tier.'; if(v.includes('8×5') || v.includes('8x5')) return 'Business-hours support.'; if(v.includes('priority')) return 'Faster response for important issues.'; if(v.includes('vip') || v.includes('24×7') || v.includes('24x7')) return 'Priority handling; 24×7 available.'; if(v.includes('add-on')) return 'Available as an add-on.'; if(v.includes('optional')) return 'Can be added on request.'; if(v.includes('basic')) return 'Baseline level of service.'; if(v.includes('standard')) return 'Standard level of service.'; if(v.includes('advanced')) return 'Advanced level of service.'; if(v.includes('edr + mdr')) return 'Automated detection plus 24×7 human response.'; if(v.includes('edr + rollback')) return 'Threat rollback to last good state.'; if(v==='edr') return 'Detect and respond to endpoint threats.'; if(v.includes('quarterly')) return 'Delivered quarterly.'; if(v.includes('monthly')) return 'Delivered monthly.'; if(v.includes('semi-annual') || v.includes('semiannual')) return 'Delivered twice per year.'; if(v==='—' || v==='na') return 'Not included by default.'; return (value||'').trim(); } function attachTooltips(){ $$('.section .table .row').forEach(row=>{ if(row.classList.contains('head')) return; const cells = Array.from(row.querySelectorAll(':scope > .cell')); const cap = cells[0]?.textContent?.trim() || ''; const capKey = cap.toLowerCase(); if(cells[0]){ const tip = CAP_TIPS[capKey] || cap; cells[0].setAttribute('data-tip', tip); cells[0].setAttribute('aria-label', tip); cells[0].setAttribute('tabindex','0'); } cells.slice(1).forEach(c=>{ const val = c.textContent.trim(); const msg = `${cap}: ${explainValue(val)}`; c.setAttribute('data-tip', msg); c.setAttribute('aria-label', msg); c.setAttribute('tabindex','0'); }); }); } attachTooltips(); })();