OC: add the Change Check diagnostic (above/below-the-line 2-min quiz)

Standalone integrated OC page (change-check.html): a 5-question, manufacturer-safe
"is your team above or below the line?" check → tailored read (Above / On the line /
Below) + tips + Book CTA. Top-of-funnel mirroring SW's Continuity Audit. On the staging
branch for an isolated preview; not on main/production.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-26 09:10:43 -07:00
parent 955e3c8d58
commit cf28881bc1
+287
View File
@@ -0,0 +1,287 @@
<!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="#0f1729">
<title>The Change Check — Is your team above or below the line? | Open Communications</title>
<meta name="description" content="A 2-minute check for Canadian manufacturers: when change hits, is your team getting curious and owning it, or getting defensive and protecting the old way? Find out where your team sits — and what to do next.">
<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/change-check.html">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="icon" href="favicon.png" type="image/png" sizes="64x64">
<link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Open Communications">
<meta property="og:title" content="The Change Check — is your team above or below the line?">
<meta property="og:description" content="A 2-minute team check for manufacturers navigating change. Find out where your team sits, and what to do next.">
<meta property="og:url" content="https://www.opencommunications.consulting/change-check.html">
<style>
/* ---- Change Check: scoped quiz UI, OC palette ---- */
.cc-wrap { max-width: 760px; }
.cc-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px;
padding: clamp(1.6rem, 4vw, 2.6rem); margin-top: 2.2rem; }
.cc-progress { font-family: 'DM Sans', sans-serif; font-size: 0.7rem; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-deep); margin: 0 0 0.4rem; }
.cc-bar { height: 4px; background: rgba(15,23,41,0.08); border-radius: 999px; overflow: hidden; margin: 0 0 1.6rem; }
.cc-bar i { display: block; height: 100%; width: 0; background: var(--amber); border-radius: 999px; transition: width .4s ease; }
.cc-q { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.4rem, 3vw, 1.9rem);
line-height: 1.18; color: var(--ink); margin: 0 0 1.3rem; }
.cc-options { display: grid; gap: 0.7rem; }
.cc-opt { display: block; width: 100%; text-align: left; font-family: 'Lora', Georgia, serif;
font-size: 1.02rem; color: var(--ink); background: #fff; border: 1px solid var(--line);
border-radius: 10px; padding: 0.95rem 1.1rem; cursor: pointer;
transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.cc-opt:hover { border-color: var(--amber); transform: translateY(-1px); }
.cc-opt:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.cc-nav { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.4rem; min-height: 1.5rem; }
.cc-back { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; letter-spacing: 0.04em;
color: var(--gray); background: none; border: none; cursor: pointer; padding: 0; }
.cc-back:hover { color: var(--ink); }
.cc-back[hidden] { display: none; }
/* result */
.cc-result { animation: ccFade .5s ease; }
@keyframes ccFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cc-badge { font-family: 'DM Sans', sans-serif; font-size: 0.7rem; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-deep); margin: 0 0 0.5rem; }
.cc-result h2 { margin: 0 0 0.6rem; }
.cc-result .cc-read { color: var(--ink-soft); }
.cc-tips { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.cc-tips li { position: relative; padding: 0.6rem 0 0.6rem 1.8rem; line-height: 1.5; color: var(--ink); }
.cc-tips li + li { border-top: 1px solid var(--line); }
.cc-tips li::before { content: "→"; position: absolute; left: 0; top: 0.6rem; color: var(--amber-deep); font-weight: 700; }
.cc-result-cta { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.cc-retake { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; letter-spacing: 0.04em;
color: var(--gray); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }
.cc-line { font-family: 'Playfair Display', serif; font-style: italic; color: var(--ink-soft); margin-top: 1.4rem; }
@media (prefers-reduced-motion: reduce) { .cc-opt, .cc-bar i, .cc-result { transition: none; animation: none; } }
</style>
<script>document.documentElement.className += ' has-motion';</script>
</head>
<body>
<header class="nav" id="nav">
<a class="nav-logo" href="index.html" 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="index.html#problem">The problem</a>
<a href="index.html#work">How we work</a>
<a href="index.html#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="index.html#problem">The problem</a>
<a href="index.html#work">How we work</a>
<a href="index.html#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="band light" data-bg="light" style="padding-top: calc(var(--nav-h) + 72px);">
<div class="wrap cc-wrap">
<p class="eyebrow">A 2-minute team check</p>
<h1>Is your team above or below <em>the line?</em></h1>
<p class="lead">When a change lands, people go one of two ways. <strong>Above the line</strong>, they get curious and take ownership. <strong>Below the line</strong>, they get defensive and protect the old way — their standing, their habits, the thing that's made them the one everyone relies on. This tells you where your team sits right now, and what to do about it. Five questions, honest answers, no email required.</p>
<div class="cc-card" id="ccCard">
<!-- quiz -->
<div id="ccQuiz">
<p class="cc-progress" id="ccProgress">Question 1 of 5</p>
<div class="cc-bar"><i id="ccBar"></i></div>
<p class="cc-q" id="ccQuestion"></p>
<div class="cc-options" id="ccOptions"></div>
<div class="cc-nav"><button class="cc-back" id="ccBack" type="button" hidden>← Back</button></div>
</div>
<!-- result -->
<div id="ccResult" class="cc-result" hidden></div>
</div>
<p class="cc-line">The systems are the easy part. This is the other part.</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="index.html#problem">The problem</a>
<a href="index.html#work">How we work</a>
<a href="index.html#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 () {
var toggle = document.getElementById('navToggle'), menu = document.getElementById('navMobileMenu');
function closeMenu() { menu.classList.remove('open'); toggle.classList.remove('open'); toggle.setAttribute('aria-expanded','false'); toggle.setAttribute('aria-label','Open menu'); }
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-expanded', open ? 'true' : 'false'); toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
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() {
nav.classList.toggle('scrolled', window.scrollY > 24);
var nr = nav.getBoundingClientRect();
nav.classList.toggle('on-dark', darkBehind((nr.top+nr.bottom)/2));
if (menu && menu.classList.contains('open')) {
var links = menu.querySelectorAll('a');
var probe = links.length ? links[links.length-1].getBoundingClientRect().bottom : 0;
menu.classList.toggle('on-dark', darkBehind(probe));
}
}
updateNavTheme();
window.addEventListener('scroll', function(){ window.requestAnimationFrame(updateNavTheme); }, { passive:true });
window.addEventListener('resize', updateNavTheme);
})();
</script>
<!-- Cal.com booking embed -->
<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>
<!-- The Change Check quiz -->
<script>
(function () {
var BOOK = '<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>';
var Q = [
{ q: "When a new system or way of working lands, your team usually…", a: [
{ t: "digs in and figures out how to make it work", s: 0 },
{ t: "waits to see if it'll stick before committing", s: 1 },
{ t: "lists all the reasons it won't work", s: 2 },
{ t: "nods in the meeting, then keeps doing it the old way", s: 3 } ] },
{ q: "When something goes wrong after a change, the first reaction is…", a: [
{ t: "“what can we learn and fix?”", s: 0 },
{ t: "“let's figure out what happened”", s: 1 },
{ t: "“whose fault is this?”", s: 2 },
{ t: "“told you so” — and nobody wants to talk about it", s: 3 } ] },
{ q: "When you ask your most experienced people how they really do the job…", a: [
{ t: "they open up and teach it", s: 0 },
{ t: "they'll give you the steps, but not the judgment", s: 1 },
{ t: "they get guarded — “it's just experience”", s: 2 },
{ t: "they feel threatened by the question", s: 3 } ] },
{ q: "In meetings about a change, people…", a: [
{ t: "say what they actually think, including disagreement", s: 0 },
{ t: "mostly stay quiet and go along", s: 1 },
{ t: "save the real conversation for the parking lot", s: 2 },
{ t: "have checked out", s: 3 } ] },
{ q: "When you hit resistance as the leader, you tend to…", a: [
{ t: "get curious about what's underneath it", s: 0 },
{ t: "explain the why again and hope it lands", s: 1 },
{ t: "push harder, or make it mandatory", s: 2 },
{ t: "work around the people who won't get on board", s: 3 } ] }
];
var R = [
{ max: 4, badge: "Above the line", h: "Your team's ready — protect it.",
read: "When change hits, your people get curious and take ownership instead of defending the old way. That's the hard part, and you've got it. The real risk now is drift: curiosity is the first thing to fade once the pressure's on.",
tips: ["Keep naming what's working — out loud, often.",
"Let your veterans <em>teach</em>, don't just extract — it's how the openness lasts.",
"Protect the habit of honest disagreement; it's your early-warning system."],
line: "You're in a strong spot. A conversation here is about keeping it that way." },
{ max: 10, badge: "On the line", h: "Some curiosity, some armour — the workable middle.",
read: "Most teams live right here. Part of your crew is leaning in; part is protecting something — standing, habits, the thing that's made them irreplaceable for years. That's not a character flaw, it's how people work — and it's exactly the spot where a change either takes hold or quietly stalls.",
tips: ["Find where the defensiveness clusters — it's rarely the whole team.",
"Deal with the people side <em>before</em> the rollout, not after it breaks.",
"Get your key veteran's real buy-in first; the rest tends to follow."],
line: "This is the most common place to be — and the most workable. Worth a conversation." },
{ max: 15, badge: "Below the line", h: "The people side will decide this — address it first.",
read: "Right now, the change will stall unless the human side gets handled. Below the line, people are protecting something real, and no system, software, or procedure fixes that. The good news: it's fixable — and it's the single most common reason good changes don't stick.",
tips: ["Slow down and rebuild a little trust before pushing the change further.",
"Name the loss or threat people are feeling — unspoken is what keeps them stuck.",
"Treat this as the work, not a detour. It's the part that decides whether any of it sticks."],
line: "This is exactly what Open Communications takes on. A first conversation is free and commits you to nothing." }
];
var i = 0, answers = [], total = 0;
var qEl = document.getElementById('ccQuestion'), optEl = document.getElementById('ccOptions'),
progEl = document.getElementById('ccProgress'), barEl = document.getElementById('ccBar'),
backEl = document.getElementById('ccBack'), quizEl = document.getElementById('ccQuiz'),
resEl = document.getElementById('ccResult');
function render() {
var item = Q[i];
progEl.textContent = 'Question ' + (i + 1) + ' of ' + Q.length;
barEl.style.width = (i / Q.length * 100) + '%';
qEl.textContent = item.q;
optEl.innerHTML = '';
item.a.forEach(function (opt) {
var b = document.createElement('button');
b.type = 'button'; b.className = 'cc-opt'; b.textContent = opt.t;
b.addEventListener('click', function () { choose(opt.s); });
optEl.appendChild(b);
});
backEl.hidden = (i === 0);
qEl.focus && qEl.setAttribute('tabindex', '-1');
}
function choose(s) {
answers[i] = s;
if (i < Q.length - 1) { i++; render(); }
else { finish(); }
}
backEl.addEventListener('click', function () { if (i > 0) { i--; render(); } });
function finish() {
total = answers.reduce(function (a, b) { return a + b; }, 0);
var r = R.find(function (x) { return total <= x.max; });
quizEl.hidden = true;
resEl.hidden = false;
resEl.innerHTML =
'<p class="cc-badge">Your read &middot; ' + r.badge + '</p>' +
'<h2>' + r.h + '</h2>' +
'<p class="cc-read">' + r.read + '</p>' +
'<ul class="cc-tips">' + r.tips.map(function (t) { return '<li>' + t + '</li>'; }).join('') + '</ul>' +
'<p class="cc-line">' + r.line + '</p>' +
'<p class="cc-result-cta">' + BOOK + '<button class="cc-retake" type="button" id="ccRetake">Retake the check</button></p>';
barEl.style.width = '100%';
document.getElementById('ccRetake').addEventListener('click', function () {
i = 0; answers = []; total = 0; resEl.hidden = true; quizEl.hidden = false; render();
document.getElementById('ccCard').scrollIntoView({ behavior: 'smooth', block: 'start' });
});
if (window.Cal) { try { window.Cal('init', { origin: 'https://cal.shopwisdom.ca' }); } catch (e) {} }
resEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
render();
})();
</script>
</body>
</html>