diff --git a/index.html b/index.html index 5bb77f2..96ab083 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + @@ -194,9 +194,9 @@

In practice

A decade of work alongside teams under pressure.

-
100+
Workshops
-
850+
Coaching sessions
-
25+
Team engagements
+
100+
Workshops
+
850+
Coaching sessions
+
25+
Team engagements
@@ -314,6 +314,33 @@ } else { nodes.forEach(function (n) { n.classList.add('in'); }); } + + // frosted-glass nav: transparent at top, blurs in on scroll + var nav = document.getElementById('nav'); + if (nav) { + var onScroll = function () { nav.classList.toggle('scrolled', window.scrollY > 16); }; + onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); + } + + // count the proof numbers up when they scroll into view + var counters = [].slice.call(document.querySelectorAll('[data-count]')); + if (counters.length && !rm && 'IntersectionObserver' in window) { + counters.forEach(function (c) { c.textContent = '0'; }); + var run = function (el) { + var to = parseInt(el.getAttribute('data-count'), 10), dur = 1500, t0 = null; + var tick = function (ts) { + if (!t0) t0 = ts; + var p = Math.min((ts - t0) / dur, 1), e = 1 - Math.pow(1 - p, 3); + el.textContent = Math.round(e * to); + if (p < 1) requestAnimationFrame(tick); + }; + requestAnimationFrame(tick); + }; + var nio = new IntersectionObserver(function (es) { + es.forEach(function (e) { if (e.isIntersecting) { run(e.target); nio.unobserve(e.target); } }); + }, { threshold: 0.5 }); + counters.forEach(function (c) { nio.observe(c); }); + } })(); diff --git a/style.css b/style.css index 116262d..abc1c80 100644 --- a/style.css +++ b/style.css @@ -13,8 +13,9 @@ --accent-soft: #e7eef1; /* tint for panels */ --accent-ink: #356b7b; /* accessible dusty-blue for links/text on light */ --accent-deep: #2b5563; /* hover */ - --sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; - --serif: 'Lora', Georgia, 'Times New Roman', serif; + --sans: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* micro UI only: eyebrows, nav, labels, buttons */ + --serif: 'Lora', Georgia, 'Times New Roman', serif; /* body prose + h3 */ + --display: 'Playfair Display', Georgia, 'Times New Roman', serif; /* titles */ --wrap: 1140px; --gap: clamp(1.25rem, 4vw, 2.5rem); } @@ -25,19 +26,23 @@ html { scroll-behavior: smooth; } body { margin: 0; - font-family: var(--sans); - font-size: clamp(1.02rem, 0.55vw + 0.9rem, 1.14rem); - line-height: 1.7; + font-family: var(--serif); + font-size: clamp(1.06rem, 0.4vw + 0.96rem, 1.2rem); + line-height: 1.72; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } -h1, h2, h3 { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; color: var(--ink); margin: 0 0 .5em; } -h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); } -h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); } -h3 { font-size: clamp(1.18rem, 1.4vw, 1.4rem); letter-spacing: -0.01em; } +h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.005em; line-height: 1.07; color: var(--ink); margin: 0 0 .4em; } +h3 { font-family: var(--serif); font-weight: 600; letter-spacing: 0; line-height: 1.28; color: var(--ink); margin: 0 0 .5em; } +h1 { font-size: clamp(2.7rem, 5.4vw, 4.4rem); line-height: 1.04; } +h2 { font-size: clamp(2.05rem, 3.7vw, 3rem); } +h3 { font-size: clamp(1.34rem, 1.5vw, 1.62rem); } +/* micro UI stays sans for crispness; big stat numbers use the display serif */ +.eyebrow, .hero-creds, .nav-links a, .nav-mobile a, .card .when, .card .lab, .stat .lab, .contact-box .placeholder { font-family: var(--sans); } +.stat .num { font-family: var(--display); } p { margin: 0 0 1.1rem; } a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--accent-deep); } @@ -75,8 +80,13 @@ section { padding-block: clamp(3.4rem, 7vw, 6rem); scroll-margin-top: 86px; } /* ---- nav ---- */ .nav { - position: sticky; top: 0; z-index: 50; background: rgba(246,245,242,.86); - backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); + position: sticky; top: 0; z-index: 50; background: transparent; + border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; +} +.nav.scrolled { + background: rgba(246,245,242,.72); -webkit-backdrop-filter: saturate(140%) blur(14px); + backdrop-filter: saturate(140%) blur(14px); border-bottom-color: var(--line); + box-shadow: 0 4px 24px rgba(35,31,32,.05); } .nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 72px; } .nav-logo { display: inline-flex; align-items: center; } @@ -163,7 +173,7 @@ section { padding-block: clamp(3.4rem, 7vw, 6rem); scroll-margin-top: 86px; } /* ---- proof / stats ---- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 2.6rem; text-align: center; } .stat .num { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--white); line-height: 1; } -.stat .num span { color: var(--accent); } +.stat .num .plus { color: var(--accent); } .stat .lab { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(246,245,242,.7); margin-top: .5rem; } .quotes { display: grid; gap: 1.2rem; } @media (min-width: 760px) { .quotes { grid-template-columns: 1fr 1fr; } } @@ -176,7 +186,7 @@ section { padding-block: clamp(3.4rem, 7vw, 6rem); scroll-margin-top: 86px; } @media (min-width: 820px) { .practice { grid-template-columns: 1fr 1fr; } } .practice .item { border-left: 3px solid var(--accent); padding-left: 1.3rem; } .practice .item h3 { margin-bottom: .4rem; } -.practice .item p { color: var(--charcoal); font-size: .98rem; } +.practice .item p { color: rgba(246,245,242,.85); font-size: .98rem; } /* ---- principles ---- */ .principles { display: grid; gap: 1.1rem; margin-top: 2rem; } @@ -196,6 +206,16 @@ section { padding-block: clamp(3.4rem, 7vw, 6rem); scroll-margin-top: 86px; } .site-footer nav a:hover { color: var(--accent); } .site-footer .fine { font-size: .82rem; color: rgba(246,245,242,.55); max-width: 60ch; } +/* ---- subtle interaction: lift the content cards to draw the eye (desktop affordance) ---- */ +.card, .principle { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } +.card:hover, .principle:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(35,31,32,.10); border-color: var(--accent); } +.quote { transition: transform .25s ease, border-color .25s ease, background .25s ease; } +.quote:hover { transform: translateY(-3px); border-color: rgba(157,189,199,.5); background: rgba(255,255,255,.09); } +@media (prefers-reduced-motion: reduce) { + .card, .principle, .quote { transition: none; } + .card:hover, .principle:hover, .quote:hover { transform: none; } +} + /* ---- motion: subtle reveal on scroll (gated; hero never animates; CLS-safe) ---- */ .has-motion main section:not(.hero) > .wrap { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease;