The Call buttons fell back to mailto: when the tel-rewrite script hadn't
run, so tapping "Call" opened an email draft on mobile. Switch the static
fallback to tel:+17789856736 (number is already public in JSON-LD, so no
added scraper exposure). Display text unchanged. Email Michael buttons untouched.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Self-hosted woff2 (8 latin faces, subset, font-display swap), preload H1/body faces; removed Google Fonts link. Cal embed now loads on first interaction, not page load. Re-encoded mobile hero 1.9MB->0.48MB. A11y: eyebrow size up to 0.72rem + amber text -> amber-deep.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Per a brand-voice review of the 'systems are the easy part' pitch: new hero H1; rigor cue added to the lead ('a clear method, and the people skill to make it land') so the page carries rigor AND soul above the fold; problem eyebrow changed to 'Where change actually breaks' (off the consultant axis Dale distrusts); tightened the emph line. Synced meta description + JSON-LD slogan to the new hero. Regenerated the OG share card (og-card.svg re-lettered, og-card.png re-rasterized via Chrome headless).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
.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>
Inga reviewed and prefers the "we" voice and to be listed as an Associate (as other
firms do, e.g. roundtableconsulting.ca). Roll back the sole-prop "I" pass to "we",
and reframe her from "independent coach we work with" to "Associate … collaborates
with us" — affiliated but still independent (not partner, not employee).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Mike is a sole proprietor. Convert Open Communications' practice voice from "we/our"
to "I/my" (Michael) across the homepage + Inga page. Labels: "How we work" -> "How I
work"; "Who we are" -> "Who you work with" (the section lists Michael + Inga).
Collaborative "we" (you + me) and Inga's own first-person/project "we" left intact.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Mike is a sole proprietor; Inga is an independent subcontractor. Remove framing that
implied a firm/partnership/employment: "leads our practice", "co-facilitator", "the
backbone of how we work", schema worksFor (= employee). Replace with "Open
Communications works with Inga Michaelsen, an independent leadership and team coach."
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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>
mike