.btn + .nav-cta border-radius 2px -> 999px (half-circle ends); focus ring matches;
nudge .btn horizontal padding 22->24 to balance the pill. OC only — SW keeps its
squared/industrial buttons. .btn.link (text link) and form fields unchanged.
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>
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>
- 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>
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>
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>
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>
- 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>
Open Communications homepage rebuilt clean (no Tailwind/React bloat):
adaptive light/dark frosted-glass nav, Playfair/DM Sans/Lora, navy+amber,
bot-protected click-to-call. For sovereign OVH (Gitea -> Coolify) staging.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
mike
Michael Victory