mike
a2a57ce8a1
Progressive-enhancement motion, all gated on a single html.has-motion line so it's trivially on/off: - Section reveal-on-scroll (fade + 10px rise), below the fold only — hero stays instant so LCP is untouched. Animates opacity/transform only (CLS 0). - Staggered reveal on the three "how we work" blocks. - Grow-on-hover underline for prose links (clearer affordance). - An open-o divider that settles in just before the contact CTA. - Persistent "Book a conversation" that returns after the hero scrolls off and steps aside at the contact section. ~1KB inline vanilla JS (IntersectionObserver), try/catch + reduced-motion guard so content is never left hidden. No animation library. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
400 lines
25 KiB
HTML
400 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-CA">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="theme-color" content="#f5f2ec">
|
|
<title>Open Communications | The Human Side of Change — for Canadian Manufacturers</title>
|
|
<meta name="description" content="The systems are the easy part. Open Communications helps the people in your shop trust the change, share what they know, and lead through it — so the work actually sticks. The human side of ShopWisdom.">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Lora:ital,wght@0,400;0,500;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap">
|
|
<link rel="stylesheet" href="style.css">
|
|
<meta name="robots" content="index,follow">
|
|
<link rel="canonical" href="https://www.opencommunications.consulting/">
|
|
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:site_name" content="Open Communications">
|
|
<meta property="og:title" content="Open Communications — the human side of change">
|
|
<meta property="og:description" content="The human side of change for Canadian manufacturers. We help your people trust the change, share what they know, and lead through it — so the work actually sticks.">
|
|
<meta property="og:url" content="https://www.opencommunications.consulting/">
|
|
<meta property="og:locale" content="en_CA">
|
|
<meta property="og:image" content="https://www.opencommunications.consulting/assets/og-card.png">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
<meta property="og:image:alt" content="Open Communications — the systems are the easy part. The human side of change.">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Open Communications — the human side of change">
|
|
<meta name="twitter:description" content="The human side of change for Canadian manufacturers. The people side of ShopWisdom.">
|
|
<meta name="twitter:image" content="https://www.opencommunications.consulting/assets/og-card.png">
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "ProfessionalService",
|
|
"name": "Open Communications",
|
|
"url": "https://www.opencommunications.consulting/",
|
|
"logo": "https://www.opencommunications.consulting/assets/brand/oc-logo.svg",
|
|
"description": "Change management and leadership coaching for Canadian manufacturers — the human side of organizational change. The people side of ShopWisdom.",
|
|
"areaServed": { "@type": "Country", "name": "Canada" },
|
|
"founder": { "@type": "Person", "name": "Michael Victory" },
|
|
"telephone": "+1-778-985-6736",
|
|
"email": "michael@opencommunications.consulting",
|
|
"address": { "@type": "PostalAddress", "addressRegion": "British Columbia", "addressCountry": "CA" },
|
|
"sameAs": ["https://shopwisdom.ca"],
|
|
"knowsAbout": ["change management", "leadership coaching", "organizational change", "manufacturing succession", "knowledge transfer"]
|
|
}
|
|
</script>
|
|
<script>document.documentElement.className += ' has-motion';</script>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="nav" id="nav">
|
|
<a class="nav-logo" href="#top" aria-label="Open Communications — home">
|
|
<img class="nav-logo-img" src="assets/brand/oc-logo.svg" alt="Open Communications">
|
|
</a>
|
|
<nav class="nav-links-desktop" aria-label="Main">
|
|
<a href="#problem">The problem</a>
|
|
<a href="#work">How we work</a>
|
|
<a href="#who">Who we are</a>
|
|
<a class="nav-cta" href="https://cal.shopwisdom.ca/michaelvictory/20min-opencommunications-meeting" data-cal-link="michaelvictory/20min-opencommunications-meeting" data-cal-origin="https://cal.shopwisdom.ca" data-cal-config='{"theme":"light"}'>Book a conversation</a>
|
|
</nav>
|
|
<button class="nav-toggle" id="navToggle" aria-label="Open menu" aria-expanded="false">
|
|
<svg class="nav-toggle-icon" viewBox="0 0 32 32" aria-hidden="true">
|
|
<line class="bar bar-top" x1="6" y1="10" x2="26" y2="10"/>
|
|
<line class="bar bar-mid" x1="6" y1="16" x2="26" y2="16"/>
|
|
<line class="bar bar-bot" x1="6" y1="22" x2="26" y2="22"/>
|
|
<circle class="o-ring" cx="16" cy="16" r="9"/>
|
|
</svg>
|
|
</button>
|
|
</header>
|
|
<div class="nav-mobile-menu" id="navMobileMenu">
|
|
<a href="#problem">The problem</a>
|
|
<a href="#work">How we work</a>
|
|
<a href="#who">Who we are</a>
|
|
<a class="nav-cta" href="https://cal.shopwisdom.ca/michaelvictory/20min-opencommunications-meeting" data-cal-link="michaelvictory/20min-opencommunications-meeting" data-cal-origin="https://cal.shopwisdom.ca" data-cal-config='{"theme":"light"}'>Book a conversation</a>
|
|
</div>
|
|
|
|
<main id="top">
|
|
|
|
<section class="hero" data-bg="light">
|
|
<div class="wrap"><div class="hero-col">
|
|
<p class="eyebrow">The human side of change · for Canadian manufacturers</p>
|
|
<h1>The systems are the <em>easy part.</em></h1>
|
|
<p class="lead">Getting your people to trust the change, share what they know, and lead through it — that's what decides whether any of it sticks. That's our work.</p>
|
|
<div class="actions">
|
|
<a class="btn" href="https://cal.shopwisdom.ca/michaelvictory/20min-opencommunications-meeting" data-cal-link="michaelvictory/20min-opencommunications-meeting" data-cal-origin="https://cal.shopwisdom.ca" data-cal-config='{"theme":"light"}'>Book a conversation</a>
|
|
<a class="btn link" href="#work">See how we work</a>
|
|
</div>
|
|
<p class="call">or call <a class="tel" data-p1="778" data-p2="985" data-p3="6736" href="#contact">778‑985‑OPEN (6736)</a></p>
|
|
</div></div>
|
|
</section>
|
|
|
|
<section class="band dark statement" data-bg="dark" id="problem">
|
|
<div class="motif" aria-hidden="true"></div>
|
|
<div class="wrap narrow reveal">
|
|
<p class="eyebrow">The part most consultants skip</p>
|
|
<h2 class="statement-line">You can buy the software. You can write the procedures. And still watch the whole thing <em>quietly fall apart.</em></h2>
|
|
<p>Because the new way asks people to change — and people don't resist change to be difficult. They resist it because it threatens something: their standing, their habits, the thing that's made them the one everyone relies on. The veteran who won't quite share what he knows. The supervisor who nods in the meeting and does it the old way Monday morning. The blame that starts flying the first time something goes wrong.</p>
|
|
<p class="emph">None of that is a character flaw. It's how people work — and it's the part that decides whether your investment pays off or sits on a shelf.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="band light" data-bg="light">
|
|
<div class="wrap narrow reveal">
|
|
<p class="eyebrow">One business, two sides</p>
|
|
<h2>The human side of <em>ShopWisdom.</em></h2>
|
|
<p>Open Communications is the human side of <strong>ShopWisdom</strong>. ShopWisdom builds the systems that keep a shop running when your best people leave. We make sure the people actually use them — and come through the change stronger, not fractured.</p>
|
|
<p>Same business. Same straight talk. One side works on the shop; the other works with the crew.</p>
|
|
<p class="bridge-link"><a href="https://shopwisdom.ca">See the systems side — ShopWisdom →</a></p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="band light services" data-bg="light" id="work">
|
|
<div class="wrap">
|
|
<div class="reveal">
|
|
<p class="eyebrow">How we work</p>
|
|
<h2>The work happens in <em>three places.</em></h2>
|
|
<p class="section-intro">Depending on what's actually getting in the way.</p>
|
|
</div>
|
|
<div class="work-list stagger">
|
|
<article class="work-item">
|
|
<div class="work-head">
|
|
<h3>The people who carry the knowledge</h3>
|
|
<p class="work-deliver">Delivered through one-to-one coaching, scheduled around their calendar.</p>
|
|
</div>
|
|
<div class="work-body">
|
|
<p>Every shop has someone whose expertise is real and hard-won and almost entirely in their head. When they leave, retire, or just get pulled in another direction, that knowledge leaves with them.</p>
|
|
<p>We work directly with those people — not to extract what they know and hand it to a system, but to help them see the value in passing it on and actually want to do it. That usually takes more than one conversation. It takes someone who can ask the right questions, earn the trust, and help them work out what letting go actually means for them.</p>
|
|
</div>
|
|
</article>
|
|
<article class="work-item">
|
|
<div class="work-head">
|
|
<h3>The team that has to get on board</h3>
|
|
<p class="work-deliver">Delivered through facilitated sessions — one-off or a short series — with the team or a cross-section of it.</p>
|
|
</div>
|
|
<div class="work-body">
|
|
<p>A change announced is not a change adopted. The people affected by it usually have something to say — about what's getting lost, about whether it'll actually work, about what they're worried won't be considered. When that stays unsaid, it surfaces later as resistance, workarounds, or quiet non-compliance.</p>
|
|
<p>We create the conditions for that conversation to happen before the rollout, not after. When people have real input into how something changes, they're more likely to make it work — and the end result is usually better for it.</p>
|
|
</div>
|
|
</article>
|
|
<article class="work-item">
|
|
<div class="work-head">
|
|
<h3>The process that could work better</h3>
|
|
<p class="work-deliver">Delivered through structured working sessions, with the right people in the room.</p>
|
|
</div>
|
|
<div class="work-body">
|
|
<p>Sometimes the real opportunity isn't getting people to accept a new tool — it's rethinking how the work actually happens. Not patching the old process with something faster on top of it, but asking whether it still makes sense for the people doing it and the customers depending on it.</p>
|
|
<p>We facilitate that redesign work with the people closest to the process: mapping how it really works now, where it breaks down, and what a better version could look like. The output is something the team helped build, which is most of why it gets used.</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<p class="reassure reveal">Most engagements draw on more than one of these. A knowledge holder who won't quite let go is also a team-alignment question; a process redesign that doesn't involve the people doing the work tends not to stick. We design each engagement around what's actually needed — not a fixed program.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="band light who" data-bg="light" id="who">
|
|
<div class="wrap narrow reveal">
|
|
<p class="eyebrow">Who we are</p>
|
|
<h2>Rigor <em>and soul.</em></h2>
|
|
<p class="section-intro">Our change practice is led by Michael Victory, with Inga Michaelsen as co-facilitator.</p>
|
|
<div class="people">
|
|
<div class="person">
|
|
<p class="person-name">Michael Victory</p>
|
|
<p>Michael carries the through-line across both sides of the business — he knows the shop and the crew, and brings the same rigor to people that ShopWisdom brings to systems.</p>
|
|
</div>
|
|
<div class="person">
|
|
<p class="person-name">Inga Michaelsen</p>
|
|
<p>A Professional Certified Coach (PCC) and Team Coach (ACTC) with the International Coaching Federation, Inga designs experiential leadership work at Royal Roads University. Her depth in trauma-informed, systems-aware coaching is the backbone of how we work.</p>
|
|
<p><a href="https://www.ingamichaelsen.com/">More about Inga →</a></p>
|
|
</div>
|
|
</div>
|
|
<blockquote class="creed">The rigor to build something that works. The soul to make people actually want to use it.</blockquote>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="o-divider" aria-hidden="true">
|
|
<svg viewBox="0 0 538 538"><path d="M269.06,0C120.46,0,0,120.46,0,269.06s120.46,269.06,269.06,269.06,269.06-120.46,269.06-269.06S417.66,0,269.06,0ZM276.06,356.34c-48.2,0-87.28-39.07-87.28-87.28s39.07-87.28,87.28-87.28,87.28,39.08,87.28,87.28-39.07,87.28-87.28,87.28Z"/></svg>
|
|
</div>
|
|
|
|
<section class="band light contact" data-bg="light" id="contact">
|
|
<div class="wrap narrow reveal">
|
|
<p class="eyebrow">Start a conversation</p>
|
|
<h2>The people part doesn't have to be <em>a mystery.</em></h2>
|
|
<p>No pitch, no program to sign up for. Just a straight talk about what's getting in the way and whether we can help.</p>
|
|
|
|
<form class="lf" data-endpoint="https://n8n.shopwisdom.ca/webhook/lead" data-source="open-communications" novalidate>
|
|
<div class="lf-progress" aria-hidden="true"><span class="lf-dot is-active"></span><span class="lf-dot"></span><span class="lf-dot"></span></div>
|
|
<fieldset class="lf-step is-active" data-step="1">
|
|
<legend class="lf-q">What's getting in the way?</legend>
|
|
<div class="lf-choices">
|
|
<label class="lf-choice"><input type="radio" name="topic" value="A change isn't sticking" required> A change that won't stick</label>
|
|
<label class="lf-choice"><input type="radio" name="topic" value="Team friction or resistance"> Team friction or resistance</label>
|
|
<label class="lf-choice"><input type="radio" name="topic" value="Succession or leadership transition"> Succession / a leadership handoff</label>
|
|
<label class="lf-choice"><input type="radio" name="topic" value="Just exploring"> Just exploring for now</label>
|
|
</div>
|
|
<div class="lf-nav"><button type="button" class="btn lf-next" data-next>Continue →</button></div>
|
|
</fieldset>
|
|
<fieldset class="lf-step" data-step="2">
|
|
<legend class="lf-q">Anything you want me to know? <span class="lf-opt">(optional)</span></legend>
|
|
<textarea class="lf-input" name="detail" rows="3" placeholder="A sentence or two is plenty."></textarea>
|
|
<div class="lf-nav"><button type="button" class="btn link lf-back" data-back>← Back</button><button type="button" class="btn lf-next" data-next>Continue →</button></div>
|
|
</fieldset>
|
|
<fieldset class="lf-step" data-step="3">
|
|
<legend class="lf-q">Where do I reach you?</legend>
|
|
<input class="lf-input" type="text" name="name" placeholder="Your name" required autocomplete="name">
|
|
<input class="lf-input" type="email" name="email" placeholder="Email" required autocomplete="email">
|
|
<input class="lf-input" type="tel" name="phone" placeholder="Phone (optional)" autocomplete="tel">
|
|
<input type="text" name="company_website" class="lf-hp" tabindex="-1" autocomplete="off" aria-hidden="true">
|
|
<div class="lf-nav"><button type="button" class="btn link lf-back" data-back>← Back</button><button type="submit" class="btn lf-submit">Send it →</button></div>
|
|
<p class="lf-err" hidden>Hmm — that didn't go through. Please <a href="mailto:michael@opencommunications.consulting">email me directly</a> and I'll get right back to you.</p>
|
|
</fieldset>
|
|
<div class="lf-done" hidden><p class="lf-done-msg">Got it — thank you. I'll be in touch personally, usually within a business day.</p></div>
|
|
</form>
|
|
|
|
<p class="lf-alt">Prefer to reach out directly?</p>
|
|
<p class="actions center">
|
|
<a class="btn link" href="mailto:michael@opencommunications.consulting?subject=A%20conversation%20—%20Open%20Communications">Email Michael</a>
|
|
<a class="btn link tel" data-p1="778" data-p2="985" data-p3="6736" href="mailto:michael@opencommunications.consulting">Call 778‑985‑OPEN (6736)</a>
|
|
</p>
|
|
<p class="promise">The first conversation is free and commits you to nothing.</p>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="site-footer" data-bg="dark">
|
|
<div class="footer-bg" aria-hidden="true">
|
|
<svg class="footer-bg-img" viewBox="0 0 1267.12 317" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<path d="M158.5,0C70.96,0,0,70.96,0,158.5s70.96,158.5,158.5,158.5,158.5-70.96,158.5-158.5S246.04,0,158.5,0ZM158.42,210.08c-28.44,0-51.5-23.06-51.5-51.5s23.06-51.5,51.5-51.5,51.5,23.06,51.5,51.5-23.06,51.5-51.5,51.5Z"/>
|
|
<path d="M475.45.08c-87.54,0-158.5,70.96-158.5,158.5,0,1.27.02,2.54.05,3.81v154.87h106.87v-158.6h0c0-28.44,23.06-51.5,51.5-51.5s51.5,23.06,51.5,51.5-23.06,51.5-51.5,51.5c-6.49,0-12.7-1.21-18.42-3.41v109.24c6.07.71,12.24,1.08,18.5,1.08,87.54,0,158.5-70.96,158.5-158.5S562.99.08,475.45.08Z"/>
|
|
<path d="M791.96,210.25c-28.44,0-51.5-23.06-51.5-51.5s23.06-51.5,51.5-51.5,51.5,23.06,51.5,51.5c0,6.49-1.21,12.7-3.41,18.42h109.41c.71-6.07,1.08-12.24,1.08-18.5C950.54,71.13,879.57.17,792.04.17s-158.5,70.96-158.5,158.5,70.96,158.5,158.5,158.5c69.48,0,128.51-44.71,149.91-106.92h-149.99Z"/>
|
|
<path d="M1109.31,0h0S950.12,0,950.12,0v159.19h0c.35,81.64,62.41,148.7,141.95,156.95v-156.13c0-9.14,7.41-16.54,16.54-16.54s16.54,7.41,16.54,16.54v156.13c79.76-8.27,141.96-75.69,141.96-157.64C1267.12,71.19,1196.53.38,1109.31,0Z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="footer-content">
|
|
<div class="footer-block">
|
|
<div class="footer-logo"><img class="footer-logo-img" src="assets/brand/oc-logo-wh.svg" alt="Open Communications"></div>
|
|
<nav class="footer-links" aria-label="Footer">
|
|
<a href="#problem">The problem</a>
|
|
<a href="#work">How we work</a>
|
|
<a href="#who">Who we are</a>
|
|
<a href="https://shopwisdom.ca">ShopWisdom</a>
|
|
</nav>
|
|
<p class="footer-copy">Open Communications and ShopWisdom are practices of Open Communications, owned and operated by Michael Victory · British Columbia, Canada</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
(function () {
|
|
for (var l of document.querySelectorAll('a.tel')) {
|
|
l.setAttribute('href', 'tel:+1' + l.dataset.p1 + l.dataset.p2 + l.dataset.p3);
|
|
}
|
|
var toggle = document.getElementById('navToggle');
|
|
var menu = document.getElementById('navMobileMenu');
|
|
function closeMenu() {
|
|
menu.classList.remove('open');
|
|
toggle.classList.remove('open');
|
|
toggle.setAttribute('aria-label', 'Open menu');
|
|
toggle.setAttribute('aria-expanded', 'false');
|
|
}
|
|
if (toggle && menu) {
|
|
toggle.addEventListener('click', function () {
|
|
var open = !menu.classList.contains('open');
|
|
menu.classList.toggle('open', open);
|
|
toggle.classList.toggle('open', open);
|
|
toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
|
|
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
|
updateNavTheme();
|
|
});
|
|
for (var a of menu.querySelectorAll('a')) { a.addEventListener('click', closeMenu); }
|
|
}
|
|
var nav = document.getElementById('nav');
|
|
var sections = Array.prototype.slice.call(document.querySelectorAll('[data-bg]'));
|
|
function darkBehind(y) {
|
|
for (var i = 0; i < sections.length; i++) {
|
|
var r = sections[i].getBoundingClientRect();
|
|
if (r.top <= y && r.bottom > y) return sections[i].dataset.bg === 'dark';
|
|
}
|
|
return false;
|
|
}
|
|
function updateNavTheme() {
|
|
var nr = nav.getBoundingClientRect();
|
|
nav.classList.toggle('on-dark', darkBehind((nr.top + nr.bottom) / 2));
|
|
if (menu && menu.classList.contains('open')) {
|
|
// Flip the menu when the dark boundary reaches its TEXT — the lowest link's
|
|
// leading edge — not the panel's midpoint. The links are top-anchored, so the
|
|
// midpoint sits well below them: by the time dark reached it, the text had
|
|
// already been over dark. Probing the lowest link makes the switch land as the
|
|
// boundary enters the text, just like the (thin) nav bar flips at its content.
|
|
var links = menu.querySelectorAll('a');
|
|
var probe = links.length
|
|
? links[links.length - 1].getBoundingClientRect().bottom
|
|
: (function () { var mr = menu.getBoundingClientRect(); return (mr.top + mr.bottom) / 2; })();
|
|
menu.classList.toggle('on-dark', darkBehind(probe));
|
|
}
|
|
}
|
|
updateNavTheme();
|
|
window.addEventListener('scroll', function () { window.requestAnimationFrame(updateNavTheme); }, { passive: true });
|
|
window.addEventListener('resize', updateNavTheme);
|
|
})();
|
|
</script>
|
|
|
|
<!-- Lead form: 3-step navigation + submit to the n8n webhook (honeypot-protected) -->
|
|
<script>
|
|
(function () {
|
|
document.querySelectorAll('form.lf').forEach(function (form) {
|
|
var steps = [].slice.call(form.querySelectorAll('.lf-step'));
|
|
var dots = [].slice.call(form.querySelectorAll('.lf-dot'));
|
|
var done = form.querySelector('.lf-done');
|
|
var err = form.querySelector('.lf-err');
|
|
var progress = form.querySelector('.lf-progress');
|
|
var cur = 0;
|
|
function show(i) {
|
|
steps.forEach(function (s, k) { s.classList.toggle('is-active', k === i); });
|
|
dots.forEach(function (d, k) { d.classList.toggle('is-active', k <= i); });
|
|
cur = i;
|
|
var fld = steps[i].querySelector('input:not([type=radio]),textarea'); if (fld) { try { fld.focus(); } catch (e) {} }
|
|
}
|
|
function valid(i) {
|
|
var reqs = steps[i].querySelectorAll('[required]');
|
|
for (var j = 0; j < reqs.length; j++) { if (!reqs[j].checkValidity()) { reqs[j].reportValidity(); return false; } }
|
|
return true;
|
|
}
|
|
form.addEventListener('click', function (e) {
|
|
if (e.target.closest('[data-next]')) { if (valid(cur)) show(Math.min(cur + 1, steps.length - 1)); }
|
|
else if (e.target.closest('[data-back]')) { show(Math.max(cur - 1, 0)); }
|
|
});
|
|
form.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
if (!valid(cur)) return;
|
|
var hp = form.querySelector('.lf-hp');
|
|
if (hp && hp.value) { return; }
|
|
if (err) err.hidden = true;
|
|
var data = {};
|
|
new FormData(form).forEach(function (v, k) { if (k !== 'company_website') data[k] = v; });
|
|
data.source = form.getAttribute('data-source') || location.hostname;
|
|
data.submittedAt = new Date().toISOString();
|
|
var btn = form.querySelector('.lf-submit'); var label = btn.textContent;
|
|
btn.disabled = true; btn.textContent = 'Sending…';
|
|
fetch(form.getAttribute('data-endpoint'), {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data)
|
|
}).then(function (r) {
|
|
if (!r.ok) throw new Error('status ' + r.status);
|
|
steps.forEach(function (s) { s.style.display = 'none'; });
|
|
if (progress) progress.style.display = 'none';
|
|
if (done) done.hidden = false;
|
|
}).catch(function () {
|
|
btn.disabled = false; btn.textContent = label;
|
|
if (err) err.hidden = false;
|
|
});
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<!-- Cal.com booking embed (opens the booking popup on-brand; href is the no-JS fallback) -->
|
|
<script>
|
|
(function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; if (typeof namespace === "string") { cal.ns[namespace] = cal.ns[namespace] || api; p(cal.ns[namespace], ar); p(cal, ["initNamespace", namespace]); } else p(cal, ar); return; } p(cal, ar); }; })(window, "https://cal.shopwisdom.ca/embed/embed.js", "init");
|
|
Cal("init", { origin: "https://cal.shopwisdom.ca" });
|
|
</script>
|
|
|
|
<div class="float-cta">
|
|
<a class="btn" href="https://cal.shopwisdom.ca/michaelvictory/20min-opencommunications-meeting" data-cal-link="michaelvictory/20min-opencommunications-meeting" data-cal-origin="https://cal.shopwisdom.ca" data-cal-config='{"theme":"light"}'>Book a conversation</a>
|
|
</div>
|
|
|
|
<!-- Motion: reveal-on-scroll + stagger + open-o divider + persistent CTA. Gated on html.has-motion (the one line in <head>). -->
|
|
<script>
|
|
(function () {
|
|
var root = document.documentElement;
|
|
if (!root.classList.contains('has-motion')) return;
|
|
var nodes = [].slice.call(document.querySelectorAll('.reveal, .stagger, .o-divider'));
|
|
function showAll() { nodes.forEach(function (n) { n.classList.add('in'); }); }
|
|
try {
|
|
if ('IntersectionObserver' in window) {
|
|
var io = new IntersectionObserver(function (entries) {
|
|
entries.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
|
|
}, { rootMargin: '0px 0px -10% 0px', threshold: 0.12 });
|
|
nodes.forEach(function (n) { io.observe(n); });
|
|
} else { showAll(); }
|
|
} catch (err) { showAll(); }
|
|
|
|
var cta = document.querySelector('.float-cta');
|
|
var hero = document.querySelector('.hero');
|
|
var contact = document.getElementById('contact');
|
|
if (cta && hero) {
|
|
var upd = function () {
|
|
var pastHero = window.scrollY > hero.offsetHeight - 90;
|
|
var atContact = contact && contact.getBoundingClientRect().top < window.innerHeight * 0.92;
|
|
cta.classList.toggle('show', pastHero && !atContact);
|
|
};
|
|
upd();
|
|
window.addEventListener('scroll', function () { window.requestAnimationFrame(upd); }, { passive: true });
|
|
window.addEventListener('resize', upd);
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|