mike/inga-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Inga: ambient wave loop, subtle scroll motion, check-list outcomes, nav caps

Browse Source 
- Hero: drop the dusty-blue orb; add the thin-line wave loop Mike liked, paper-
  blended on the left so the headline stays clean (50% opacity, save-data/reduced
  -motion gated, fades in on play).
- Motion: subtle reveal-on-scroll for below-fold sections (gated on has-motion,
  reduced-motion off, hero never animates — LCP/CLS safe), same idea as OC.
- "What changes when we work together": replace the arrow bullets (read like a
  flow chart) with a clean single-column check-list with divider lines.
- Nav: capitalize "The Moment" and "Where to Start".

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-22 22:29:25 -07:00
parent bdba21c6bf
commit a26d1cee79
3 changed files with 63 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+41 -9
View File
@@ -16,6 +16,7 @@
<meta property="og:title" content="Inga Michaelsen — leadership &amp; team coaching">
<meta property="og:description" content="How you work together is everything. Systems-aware, trauma-informed coaching and facilitation for teams doing meaningful work in a complex world.">
<!-- NOTE: contact/scheduling intentionally excluded in this build. Booking + form get wired in at handoff to Inga. -->
<script>document.documentElement.className += ' has-motion';</script>
</head>
<body>
@@ -25,9 +26,9 @@
<img src="assets/brand/inga-logo.svg" alt="Inga Michaelsen">
</a>
<nav class="nav-links" aria-label="Main">
<a href="#familiar">The moment</a>
<a href="#familiar">The Moment</a>
<a href="#approach">Approach</a>
<a href="#services">Where to start</a>
<a href="#services">Where to Start</a>
<a href="#about">About</a>
<a class="btn" href="#contact">Let's talk</a>
</nav>
@@ -41,9 +42,9 @@
</div>
</header>
<div class="nav-mobile" id="navMobile">
<a href="#familiar">The moment</a>
<a href="#familiar">The Moment</a>
<a href="#approach">Approach</a>
<a href="#services">Where to start</a>
<a href="#services">Where to Start</a>
<a href="#about">About</a>
<a class="btn" href="#contact">Let's talk</a>
</div>
@@ -51,12 +52,14 @@
<main id="top">
<section class="hero">
<div class="hero-orb" aria-hidden="true"></div>
<div class="hero-media" aria-hidden="true">
<video class="hero-video" muted loop playsinline preload="none" data-src-mp4="assets/media/hero-loop.mp4"></video>
</div>
<div class="wrap">
<p class="eyebrow">Leadership &amp; team coaching · facilitation</p>
<h1>In a complex world, how you work together is <em>everything.</em></h1>
<p class="lead">Leadership and team development for organizations doing meaningful work in an unpredictable world — building the capacity to perform and relate well, even when the path isn't clear.</p>
<div class="actions"><a class="btn" href="#contact">Let's talk</a><a class="btn ghost" href="#services">Where to start</a></div>
<div class="actions"><a class="btn" href="#contact">Let's talk</a><a class="btn ghost" href="#services">Where to Start</a></div>
<div class="hero-creds">
<span>Professional Certified Coach (PCC)</span>
<span>Team Coach (ACTC)</span>
@@ -110,7 +113,7 @@
<section class="band-tint" id="services">
<div class="wrap">
<p class="eyebrow">Where to start</p>
<p class="eyebrow">Where to Start</p>
<h2>Focused, time-bound, practical.</h2>
<p class="section-intro">Every team and context is different. These starting points are designed for different moments. Not sure which fits? Start with a conversation, and we'll figure it out together.</p>
<div class="cards">
@@ -259,9 +262,9 @@
<div class="wrap">
<div class="foot-logo"><img src="assets/brand/inga-logo-wh.svg" alt="Inga Michaelsen"></div>
<nav aria-label="Footer">
<a href="#familiar">The moment</a>
<a href="#familiar">The Moment</a>
<a href="#approach">Approach</a>
<a href="#services">Where to start</a>
<a href="#services">Where to Start</a>
<a href="#about">About</a>
</nav>
<p class="fine">Leadership &amp; team coaching · facilitation · Victoria, BC, Canada · Professional Certified Coach (PCC), Team Coach (ACTC), International Coaching Federation.</p>
@@ -285,5 +288,34 @@
})();
</script>
<script>
(function () {
var root = document.documentElement;
var rm = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// hero ambient video — load only when motion is welcome and the connection allows
var hv = document.querySelector('.hero-video');
var conn = navigator.connection || {};
if (hv && !rm && conn.saveData !== true) {
var mp4 = hv.getAttribute('data-src-mp4');
if (mp4) {
var s = document.createElement('source'); s.src = mp4; s.type = 'video/mp4';
hv.appendChild(s); hv.load();
hv.addEventListener('playing', function () { hv.classList.add('is-playing'); }, { once: true });
var p = hv.play(); if (p && p.catch) p.catch(function () {});
}
}
// subtle reveal on scroll
var nodes = [].slice.call(document.querySelectorAll('main section:not(.hero) > .wrap'));
if (root.classList.contains('has-motion') && !rm && 'IntersectionObserver' in window) {
var io = new IntersectionObserver(function (es) {
es.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { rootMargin: '0px 0px -10% 0px', threshold: 0.12 });
nodes.forEach(function (n) { io.observe(n); });
} else {
nodes.forEach(function (n) { n.classList.add('in'); });
}
})();
</script>
</body>
</html>