Build Inga's coaching practice as a native OC page in the OC design system: hero,
familiar-symptoms, approach + outcomes, "where to start" service cards, deeper-
engagement principles, social-impact callout, dark "in practice" band (count-up
stats + quotes), about essay, and a CTA wired to OC's real Cal.com booking. New
scoped inga.css for the components OC lacked. Repoint "More about Inga" from the
inga.opencommunications.consulting subdomain to the internal page.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Mike: lighter and calmer. Desktop particle loop plays at half speed (playbackRate
0.5, set on loadedmetadata + playing); mobile C unchanged.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Swap the desktop hero loop from the shared waves to a full-frame particle cloud
(AdobeStock_999841648, transcoded to ~4.3MB H.264) so OC and the Inga mirror no
longer share a graphic. The cloud covers the whole frame (fills the hero, no blank
top), and opacity goes .35 -> .55 so it reads as a present fill. Mobile keeps C.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Revert the floating button to amber. On mobile, wrap it in a navy dock flush to the
bottom edge: iOS blurs the navy into the address-bar toolbar (stays dark blue) while
the CTA itself reads orange. Desktop float-cta unchanged.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The amber float-cta bar hugged the iOS address bar, making the bottom region read
orange (theme-color is already navy #0f1729). Recolor the floating button to navy
with an amber border — visible on both cream and navy sections, on-brand, and the
bottom region now matches the navy browser toolbar.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Repoint from the old external ingamichaelsen.com to our sovereign Inga mirror at
its production subdomain; opens in a new tab. Link goes live with the Inga deploy.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Mike: no left-edge blend on OC, match the Inga (full-bleed, balanced) version, and
make the loops more transparent. Desktop waves go full-bleed with the gentle top/
bottom paper fade (no horizontal fade), opacity .5 -> .35. Mobile C .5 -> .4.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Desktop swaps to the flowing thin-line waves (they blend clean against the cream;
C's cool-gray background never did) with the Manus-style left-edge paper fade
restored. Mobile keeps the C loop Mike approved (rotated 90deg, centered, tinted).
JS chooses the source by viewport at load. Drop the unused comparison clips.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
C's background is cool-gray (not white), so multiply muddied it against the
cream. Back to plain cover at 50% opacity, normal blend, no zoom.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The gap was C's cool-white background reading against the cream + the zoom
pushing dots to one corner. Switch the desktop loop to mix-blend-mode:multiply
over the paper bg: white dissolves into paper (seamless, no gap), dots remain,
full-res (no zoom), and it holds at any viewport width. Opacity back to 1 (the
multiply does the lightening). Mobile pinned to its approved look (normal blend,
.5 opacity, rotate, centered).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
C's dots cluster low-right, leaving the tall desktop column's top empty. Zoom
1.45x + object-position 66% to fill it (1080p keeps it crisp at this level).
Scoped to desktop; mobile resets object-position to center so the approved
mobile framing is untouched.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Point hero-loop.mp4 at Option C (AdobeStock_1899613703, 1080p, ~2MB). Existing
treatment already fills the bg (object-fit cover) and rotates 90deg CW on mobile,
both at 50% opacity. Remove hero-previews.html + the spare preview-a/b/c clips.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Revert the scale/translate zoom that softened the loop and pulled it off the
edges; back to full-cover (full res). Re-encoded current loop at 1080p (2.4MB).
- Keep the 50% opacity lightening. Mobile loop back to centered (left:50%).
- theme-color -> navy (#0f1729) so the mobile address-bar UI is dark blue, not amber.
- Add hero-previews.html: 4 hero options (current + A/B/C) at 50%, full-cover, noindex,
for side-by-side comparison. Preview videos are temporary.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Wash the loop back into the paper so text reads cleanly over it (matters most on
mobile where text overlays the loop): drop the playing opacity to .5 (blends with
the paper bg) and flip the tint overlay from darkening multiply to a light paper
wash (.2). Tunable via those two values.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Desktop: drop the left-edge mask (the near-white clip blends into paper on its
own) and zoom/lift the loop (scale 1.7, translateY -16%) so the waves center on
the "easy part" headline instead of sitting low. Mobile: shift the rotated loop
left (left:34%) so it reads as a left-third band behind the headline + book
button. Both dialed via offline still-frame mocks (the loop won't decode in the
review browser).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the spheres with AdobeStock_1457104053 — abstract flowing wave/particle
field on near-white (blends into paper). Optimized 60MB->1.1MB H.264 (1280x720,
crf 25, faststart). Dropped the webm: VP9 came out larger than H.264 for this
thin-line content, and H.264 plays everywhere, so a single mp4 source is smaller
and universal.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Transcoded the VP9 webm to H.264 mp4 (~220KB) and add it as a second <source>
after the webm — modern browsers take the smaller VP9, pre-2021 Safari/iOS fall
back to mp4. JS appends both sources before load().
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Match the reference treatment — the open-o large with minimal padding and NO
background — keeping the brand amber. favicon.svg transparent; rasterized
transparent favicon.png (64) + apple-touch-icon.png (180) via Chrome headless;
wired all three in <head>.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Move the top-down fade start from 52% to 18% so the ambient reads behind the
headline (desktop-like presence) instead of tucked at the bottom.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Was position:relative on mobile, so it pushed down below the text. Make it the
full-bleed hero background (inherits absolute inset), rotated 90deg CW and sized
100vh x 100vw so it covers after rotation, with a top->down mask so the headline
reads over paper and the ambient shows lower.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Nav: fully transparent over the hero (no bg/blur/border), frosts in once
scrolled past 24px (.scrolled toggled in updateNavTheme; on-dark still wins
over dark sections).
- Mobile hero loop: rotate 90deg CW and size (240px x 100vw, centered) so it
fills the landscape strip after rotation; warm tint ::after still applies.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Stop boxing the loop. Pull .hero-media out of the content grid to a direct child
of .hero, absolutely positioned to bleed off the right edge and up behind the
frosted nav. Dissolve its left edge into the paper with a gradient mask-image and
warm it with a subtle paper/multiply overlay so it reads as cream, not stark
white — matching how Manus meshed it in. Mobile = full-width strip with a
bottom fade.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Can't generate a frame poster (the loop is VP9; fine for real browsers but the
review tooling can't decode it), so rely on the paper-tinted panel as the
instant never-blank base and fade the video in on the 'playing' event. Cleaner
and removes a 404. VP9 confirmed — plays on all modern browsers + iOS 14.5+.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Bring back the reference's hero ambient — text left, looping WebM right — but
fixed: self-hosted (62KB, off Manus's S3), poster-first with a paper-tinted
container so it's NEVER blank, and loaded via JS only when appropriate (skipped
on Save-Data and prefers-reduced-motion; poster stays if autoplay is blocked).
No autoplay attribute = no surprise download. Poster image added next.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The negative bottom margin let the next band's paper bg paint over the circle's
lower edge (the "clip"). Use symmetric positive margin + line-height:0 +
overflow:visible. Bump to 34px and give the scale-in a small rotate so the
entrance actually reads.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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>
Per Mike — amber (#e89b1c) open-o on a paper (#f7f4ef) square, with a hairline
border so the near-white square stays visible on light browser tabs.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Imbue the favicon with the OC brand orange — paper open-o on an amber (#e89b1c)
square, so the brand colour leads and the icon stays legible on any tab bg.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The large footer background mark still used the old letterforms; swap in the
updated mark paths (same as the new logo + favicon) so the watermark matches.
Aspect ratio unchanged, so footer height is unaffected.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Swap nav/footer logos for the updated black/white lockups (Asset 34/36); add
outline variants + the standalone open-o mark to the brand set. Rebuild the
favicon on the distinctive off-center open-o (paper on navy) instead of the
generic centered ring.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replaces the model-teaching cards (and the 'Clear models / not just a
workshop' heading) with Inga's concrete framing: the work happens in three
places — the people who carry the knowledge (coaching), the team that has to
get on board (facilitation), and the process that could work better
(redesign). Stacked editorial rows; new .work-list styles.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Inga's feedback: the framework focus is too much to give away on the site —
it belongs in a live session/workshop. Removed both dedicated diagram
sections (above/below the line graphic; drama->empowerment triangles) and
their IP-attribution credits. Reworded the two "How we work" cards to drop
the named models, keeping the plain-language value.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Inga's review flagged that "Booked in single sessions" read as a single
total session. Reword to "one session at a time — as many as the work
calls for" so the individually-booked-but-ongoing nature is clear.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Soft conversion path alongside booking: situation -> optional detail -> name/email.
Honeypot-protected, posts JSON to https://n8n.shopwisdom.ca/webhook/oc-lead, with an
email fallback on error. Captures the 'interested but not ready to book' visitor.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Nav (x2) + hero buttons now open the michaelvictory/20min-opencommunications-meeting
event in an on-brand Cal.com modal overlay; href points at the booking page as a
no-JS fallback. Adds the Cal embed loader.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Reframe: card tags Workshop/Flagship -> 'A shared lens' / 'The core shift';
diagram intro now 'not a workshop you sit through - a lens for the room'.
- Separate the two triangles: drama points DOWN (Persecutor/Rescuer/Victim),
empowerment points UP (Creator/Challenger/Coach), with a 'the shift' arrow +
role-mapping legend (Victim->Creator, Persecutor->Challenger, Rescuer->Coach).
- Proper IP attribution: Karpman (1968) for the Drama Triangle; David Emerald
(TED*) for the Empowerment Dynamic; Conscious Leadership Group for above/below.
- New 'above / below the line' teaching graphic with its own section + credit.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The IAS/OnDek before-after testimonials praise tool delivery, which is SW's
domain — and SW already hosts them in text at #results. Remove the OC 'Proof,
from the field' section + its assets; OC's proof should be human-change work.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Two case studies pulled from the reference build: Innovative Aluminum Systems
(dealer pricing tool) and OnDek Vinyl Worx (customer order form), each showing a
before/after screenshot pair plus the client's quote and headshot. Side-by-side
with an arrow on desktop; stacks with the arrow hidden on mobile. Framed to OC's
adoption thesis (systems stick because the people were brought along). Assets in
assets/work/ + assets/people/.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Brand-accurate 1200x630 OG card (paper bg, navy serif headline, amber accent,
navy footer band). Wires og:image/twitter:image so shared links render a card
on LinkedIn/iMessage/Slack instead of a blank preview. SVG source kept alongside.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The mobile menu links are top-anchored, so the panel's vertical midpoint sits
well below them. Triggering the light/dark flip at that midpoint meant the dark
boundary had already risen past the text before the switch fired. Probe the
lowest link's bottom edge instead so the fade lands as the boundary reaches the
text — matching how the thin nav bar flips at its own content.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
mike
Michael Victory