diff --git a/index.html b/index.html index c8eb15b..664398f 100644 --- a/index.html +++ b/index.html @@ -44,6 +44,7 @@ "knowsAbout": ["change management", "leadership coaching", "organizational change", "manufacturing succession", "knowledge transfer"] } + @@ -90,7 +91,7 @@
-
+

The part most consultants skip

You can buy the software. You can write the procedures. And still watch the whole thing quietly fall apart.

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.

@@ -99,7 +100,7 @@
-
+

One business, two sides

The human side of ShopWisdom.

Open Communications is the human side of ShopWisdom. 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.

@@ -110,10 +111,12 @@
-

How we work

-

The work happens in three places.

-

Depending on what's actually getting in the way.

-
+
+

How we work

+

The work happens in three places.

+

Depending on what's actually getting in the way.

+
+

The people who carry the knowledge

@@ -145,12 +148,12 @@
-

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.

+

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.

-
+

Who we are

Rigor and soul.

Our change practice is led by Michael Victory, with Inga Michaelsen as co-facilitator.

@@ -169,8 +172,12 @@
+ +
-
+

Start a conversation

The people part doesn't have to be a mystery.

No pitch, no program to sign up for. Just a straight talk about what's getting in the way and whether we can help.

@@ -352,5 +359,41 @@ Cal("init", { origin: "https://cal.shopwisdom.ca" }); +
+ Book a conversation +
+ + + + diff --git a/style.css b/style.css index 506523f..289ff6d 100644 --- a/style.css +++ b/style.css @@ -279,3 +279,47 @@ a:focus-visible, .btn:focus-visible { outline: 2px solid var(--amber); outline-o .lf-err { font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: #b4452f; margin: 1rem 0 0; } .lf-err a { color: #b4452f; } .lf-alt { font-family: 'DM Sans', sans-serif; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); text-align: center; margin: 0.5rem 0 0.8rem; } + +/* ── Motion — progressive enhancement ────────────────────────────────────── + Gated on html.has-motion (one inline line is the on/off switch). + Hero is never animated (LCP stays instant). Only opacity/transform animate + (CLS 0). All off under prefers-reduced-motion. JS adds .in; a timeout + fallback guarantees content is never left hidden. */ +.has-motion .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; } +.has-motion .reveal.in { opacity: 1; transform: none; } +.has-motion .stagger > * { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; } +.has-motion .stagger.in > * { opacity: 1; transform: none; } +.has-motion .stagger.in > *:nth-child(2) { transition-delay: .1s; } +.has-motion .stagger.in > *:nth-child(3) { transition-delay: .2s; } +.has-motion .stagger.in > *:nth-child(4) { transition-delay: .3s; } + +/* Underline that grows on hover — replaces the static border on prose links */ +.bridge-link a, .person a { + border-bottom: 0; + background-image: linear-gradient(var(--amber-deep), var(--amber-deep)); + background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat; + transition: background-size .3s ease, color .2s ease; +} +.bridge-link a:hover, .person a:hover { background-size: 100% 1.5px; } + +/* Open-o divider — a quiet brand beat that settles in right before the ask */ +.o-divider { text-align: center; margin: 8px 0 -10px; } +.o-divider svg { width: 30px; height: 30px; } +.o-divider path { fill: var(--amber); } +.has-motion .o-divider { opacity: 0; transform: scale(.7); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); } +.has-motion .o-divider.in { opacity: 1; transform: none; } + +/* Persistent CTA — returns after the hero scrolls off, steps aside at the contact */ +.float-cta { position: fixed; right: 22px; bottom: 22px; z-index: 80; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; } +.float-cta.show { opacity: 1; transform: none; pointer-events: auto; } +.float-cta .btn { box-shadow: 0 6px 22px rgba(15, 23, 41, 0.18); } + +@media (prefers-reduced-motion: reduce) { + .has-motion .reveal, .has-motion .stagger > * { opacity: 1; transform: none; } + .has-motion .o-divider { opacity: 1; transform: none; } + .float-cta { transition: none; } +} +@media (max-width: 600px) { + .float-cta { right: 12px; left: 12px; bottom: 12px; } + .float-cta .btn { display: block; text-align: center; } +}