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

OC: rebuild to match reference — light/cream main theme, Playfair + amber-italic headlines, Lora body, squared amber buttons, navy statement band + footer anchor with open watermark

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-16 09:29:37 -07:00
parent fb44bc8a15
commit 7a52ad6b11
2 changed files with 178 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+58 -67
View File
@@ -3,17 +3,17 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#1C1C2E"> <meta name="theme-color" content="#f5f2ec">
<title>Open Communications | The Human Side of Change — for Canadian Manufacturers</title> <title>Open Communications | The Human Side of Change — for Canadian Manufacturers</title>
<meta name="description" content="The systems are the easy part. Open Communications helps the people in your shop trust the change, share what they know, and lead through it — so the work actually sticks. The human side of ShopWisdom."> <meta name="description" content="The systems are the easy part. Open Communications helps the people in your shop trust the change, share what they know, and lead through it — so the work actually sticks. The human side of ShopWisdom.">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Lora:ital@1&family=Playfair+Display:wght@600;700&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Lora:ital,wght@0,400;0,500;1,400&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<header class="nav on-dark" id="nav"> <header class="nav on-light" id="nav">
<div class="wrap nav-row"> <div class="wrap nav-row">
<a class="wordmark" href="#top" aria-label="Open Communications — home"><span class="logo-mark" role="img" aria-label="Open Communications"></span></a> <a class="wordmark" href="#top" aria-label="Open Communications — home"><span class="logo-mark" role="img" aria-label="Open Communications"></span></a>
<nav class="nav-links" aria-label="Main"> <nav class="nav-links" aria-label="Main">
@@ -28,33 +28,33 @@
<main id="top"> <main id="top">
<section class="hero" data-bg="dark"> <section class="hero" data-bg="light">
<div class="glow" aria-hidden="true"></div>
<div class="pattern" aria-hidden="true"></div>
<div class="wrap"> <div class="wrap">
<p class="eyebrow">The human side of change · for Canadian manufacturers</p> <p class="eyebrow">The human side of change · for Canadian manufacturers</p>
<h1>The systems are the easy part.</h1> <h1>The systems are the <em>easy part.</em></h1>
<p class="lead">Getting your people to trust the change, share what they know, and lead through it — that's what decides whether any of it sticks. That's our work.</p> <p class="lead">Getting your people to trust the change, share what they know, and lead through it — that's what decides whether any of it sticks. That's our work.</p>
<div class="actions"> <div class="actions">
<a class="btn" href="#contact">Book a conversation</a> <a class="btn" href="#contact">Book a conversation</a>
<a class="btn ghost" href="#work">See how we work</a> <a class="btn link" href="#work">See how we work</a>
</div> </div>
<p class="call">or call <a class="tel" data-p1="778" data-p2="985" data-p3="6736" href="#contact">778&#8209;985&#8209;OPEN (6736)</a></p> <p class="call">or call <a class="tel" data-p1="778" data-p2="985" data-p3="6736" href="#contact">778&#8209;985&#8209;OPEN (6736)</a></p>
</div> </div>
</section> </section>
<section class="band light" data-bg="light" id="problem"> <section class="band dark statement" data-bg="dark" id="problem">
<div class="motif" aria-hidden="true"></div>
<div class="wrap narrow"> <div class="wrap narrow">
<h2>The part most consultants skip</h2> <p class="eyebrow">The part most consultants skip</p>
<p>You can buy the software. You can write the procedures. And you can still watch the whole thing quietly fall apart.</p> <h2 class="statement-line">You can buy the software. You can write the procedures. And still watch the whole thing <em>quietly fall apart.</em></h2>
<p>Because the new way asks people to change — and people don't resist change to be difficult. They resist it because it threatens something: their standing, their habits, the thing that's made them the one everyone relies on. The veteran who won't quite share what he knows. The supervisor who nods in the meeting and does it the old way Monday morning. The blame that starts flying the first time something goes wrong.</p> <p>Because the new way asks people to change — and people don't resist change to be difficult. They resist it because it threatens something: their standing, their habits, the thing that's made them the one everyone relies on. The veteran who won't quite share what he knows. The supervisor who nods in the meeting and does it the old way Monday morning. The blame that starts flying the first time something goes wrong.</p>
<p class="pull">None of that is a character flaw. It's how people work — and it's the part that decides whether your investment pays off or sits on a shelf.</p> <p class="emph">None of that is a character flaw. It's how people work — and it's the part that decides whether your investment pays off or sits on a shelf.</p>
</div> </div>
</section> </section>
<section class="band dark bridge" data-bg="dark"> <section class="band light" data-bg="light">
<div class="wrap narrow"> <div class="wrap narrow">
<h2>One business, two sides</h2> <p class="eyebrow">One business, two sides</p>
<h2>The human side of <em>ShopWisdom.</em></h2>
<p>Open Communications is the human side of <strong>ShopWisdom</strong>. ShopWisdom builds the systems that keep a shop running when your best people leave. We make sure the people actually use them — and come through the change stronger, not fractured.</p> <p>Open Communications is the human side of <strong>ShopWisdom</strong>. ShopWisdom builds the systems that keep a shop running when your best people leave. We make sure the people actually use them — and come through the change stronger, not fractured.</p>
<p>Same business. Same straight talk. One side works on the shop; the other works with the crew.</p> <p>Same business. Same straight talk. One side works on the shop; the other works with the crew.</p>
<p class="bridge-link"><a href="https://shopwisdom.ca">See the systems side — ShopWisdom →</a></p> <p class="bridge-link"><a href="https://shopwisdom.ca">See the systems side — ShopWisdom →</a></p>
@@ -63,19 +63,20 @@
<section class="band light services" data-bg="light" id="work"> <section class="band light services" data-bg="light" id="work">
<div class="wrap"> <div class="wrap">
<h2>How we work</h2> <p class="eyebrow">How we work</p>
<p class="section-intro">We don't do vague. We work from clear, proven models — the kind you can use in a hallway conversation, not just a workshop.</p> <h2>Clear models, <em>not vague advice.</em></h2>
<p class="section-intro">The kind you can use in a hallway conversation, not just a workshop.</p>
<div class="cards"> <div class="cards">
<article class="card"> <article class="card">
<p class="card-tag">Workshop · half-day</p> <p class="card-tag">Workshop · half-day</p>
<h3>A shared language</h3> <h3>A shared language</h3>
<p>In any tense moment, you're either <strong>above the line</strong> — open, curious, willing to learn — or <strong>below it</strong> — closed, defensive, out to be right. Once a team can name where they are, the hard conversations get easier overnight. No jargon. No couch.</p> <p>In any tense moment, you're either <strong>above the line</strong> — open, curious, willing to learn — or <strong>below it</strong> — closed, defensive, out to be right. Once a team can name where they are, the hard conversations get easier overnight.</p>
<p class="outcome">A shared, plain-spoken way to handle friction.</p> <p class="outcome">A shared, plain-spoken way to handle friction.</p>
</article> </article>
<article class="card feature"> <article class="card feature">
<p class="card-tag">Flagship program</p> <p class="card-tag">Flagship program</p>
<h3>Breaking the blame game</h3> <h3>Breaking the blame game</h3>
<p>Every shop has a blame game: someone plays the victim, someone's the villain who gets blamed, someone's the hero who burns out. It kills change. We move teams into a better triangle: people who <strong>own</strong> the outcome, <strong>call it straight</strong>, and <strong>build each other up</strong>.</p> <p>Every shop has a blame game: a victim, a villain who gets blamed, a hero who burns out. It kills change. We move teams into a better triangle: people who <strong>own</strong> the outcome, <strong>call it straight</strong>, and <strong>build each other up</strong>.</p>
<p class="outcome">Stop the blame cycles that stall every change.</p> <p class="outcome">Stop the blame cycles that stall every change.</p>
</article> </article>
<article class="card"> <article class="card">
@@ -89,55 +90,46 @@
</div> </div>
</section> </section>
<section class="band dark diagram" data-bg="dark"> <section class="band light diagram" data-bg="light">
<div class="wrap"> <div class="wrap">
<h2>From the blame game to ownership</h2> <p class="eyebrow">From the blame game to ownership</p>
<p class="section-intro">Our flagship work in one picture: moving a team out of the drama triangle — below the line — and into the one above it.</p> <h2>Two triangles, <em>one shift.</em></h2>
<svg class="triangles" viewBox="0 0 770 380" role="img" aria-labelledby="tri-title tri-desc"> <svg class="triangles" viewBox="0 0 770 380" role="img" aria-labelledby="tri-title tri-desc">
<title id="tri-title">The drama triangle versus the empowerment triangle</title> <title id="tri-title">The drama triangle versus the empowerment triangle</title>
<desc id="tri-desc">On the left, the drama triangle below the line: Victim, Villain, and Rescuer. An arrow points right to the empowerment triangle above the line: Creator, Challenger, and Coach.</desc> <desc id="tri-desc">On the left, the drama triangle below the line: Victim, Villain, and Rescuer. An arrow points right to the empowerment triangle above the line: Creator, Challenger, and Coach.</desc>
<g fill="none" stroke="#b8836f" stroke-width="2"><polygon points="175,95 70,295 280,295" fill="rgba(184,131,111,0.07)"/></g>
<g fill="none" stroke="#b8836f" stroke-width="2">
<polygon points="175,95 70,295 280,295" fill="rgba(184,131,111,0.06)"/>
</g>
<g fill="#b8836f"><circle cx="175" cy="95" r="5"/><circle cx="70" cy="295" r="5"/><circle cx="280" cy="295" r="5"/></g> <g fill="#b8836f"><circle cx="175" cy="95" r="5"/><circle cx="70" cy="295" r="5"/><circle cx="280" cy="295" r="5"/></g>
<g text-anchor="middle" font-family="'DM Sans',sans-serif"> <g text-anchor="middle" font-family="'DM Sans',sans-serif">
<text x="175" y="70" fill="#fff" font-size="16" font-weight="700">Rescuer</text> <text x="175" y="70" fill="#1f1c1a" font-size="16" font-weight="700">Rescuer</text>
<text x="175" y="86" fill="rgba(244,241,234,0.66)" font-size="12.5">swoops in, burns out</text> <text x="175" y="86" fill="#6b655c" font-size="12.5">swoops in, burns out</text>
<text x="70" y="320" fill="#fff" font-size="16" font-weight="700">Victim</text> <text x="70" y="320" fill="#1f1c1a" font-size="16" font-weight="700">Victim</text>
<text x="70" y="336" fill="rgba(244,241,234,0.66)" font-size="12.5">&#8220;nothing I can do&#8221;</text> <text x="70" y="336" fill="#6b655c" font-size="12.5">&#8220;nothing I can do&#8221;</text>
<text x="280" y="320" fill="#fff" font-size="16" font-weight="700">Villain</text> <text x="280" y="320" fill="#1f1c1a" font-size="16" font-weight="700">Villain</text>
<text x="280" y="336" fill="rgba(244,241,234,0.66)" font-size="12.5">the one who gets blamed</text> <text x="280" y="336" fill="#6b655c" font-size="12.5">the one who gets blamed</text>
<text x="175" y="362" fill="#b8836f" font-size="12.5" font-weight="700" letter-spacing="1.5">BELOW THE LINE</text> <text x="175" y="362" fill="#b8836f" font-size="12.5" font-weight="700" letter-spacing="1.5">BELOW THE LINE</text>
</g> </g>
<g stroke="#e89b1c" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M330,200 L432,200"/><path d="M420,191 L434,200 L420,209"/></g>
<g stroke="#e89b1c" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"> <text x="381" y="186" text-anchor="middle" fill="#6b655c" font-size="12.5" font-family="'DM Sans',sans-serif">we move teams</text>
<path d="M330,200 L432,200"/> <g fill="none" stroke="#e89b1c" stroke-width="2"><polygon points="595,95 490,295 700,295" fill="rgba(232,155,28,0.10)"/></g>
<path d="M420,191 L434,200 L420,209"/>
</g>
<text x="381" y="186" text-anchor="middle" fill="rgba(244,241,234,0.7)" font-size="12.5" font-family="'DM Sans',sans-serif">we move teams</text>
<g fill="none" stroke="#e89b1c" stroke-width="2">
<polygon points="595,95 490,295 700,295" fill="rgba(232,155,28,0.08)"/>
</g>
<g fill="#e89b1c"><circle cx="595" cy="95" r="5"/><circle cx="490" cy="295" r="5"/><circle cx="700" cy="295" r="5"/></g> <g fill="#e89b1c"><circle cx="595" cy="95" r="5"/><circle cx="490" cy="295" r="5"/><circle cx="700" cy="295" r="5"/></g>
<g text-anchor="middle" font-family="'DM Sans',sans-serif"> <g text-anchor="middle" font-family="'DM Sans',sans-serif">
<text x="595" y="70" fill="#fff" font-size="16" font-weight="700">Coach</text> <text x="595" y="70" fill="#1f1c1a" font-size="16" font-weight="700">Coach</text>
<text x="595" y="86" fill="rgba(244,241,234,0.66)" font-size="12.5">builds people up</text> <text x="595" y="86" fill="#6b655c" font-size="12.5">builds people up</text>
<text x="490" y="320" fill="#fff" font-size="16" font-weight="700">Creator</text> <text x="490" y="320" fill="#1f1c1a" font-size="16" font-weight="700">Creator</text>
<text x="490" y="336" fill="rgba(244,241,234,0.66)" font-size="12.5">owns the outcome</text> <text x="490" y="336" fill="#6b655c" font-size="12.5">owns the outcome</text>
<text x="700" y="320" fill="#fff" font-size="16" font-weight="700">Challenger</text> <text x="700" y="320" fill="#1f1c1a" font-size="16" font-weight="700">Challenger</text>
<text x="700" y="336" fill="rgba(244,241,234,0.66)" font-size="12.5">calls it straight</text> <text x="700" y="336" fill="#6b655c" font-size="12.5">calls it straight</text>
<text x="595" y="362" fill="#e89b1c" font-size="12.5" font-weight="700" letter-spacing="1.5">ABOVE THE LINE</text> <text x="595" y="362" fill="#c47f12" font-size="12.5" font-weight="700" letter-spacing="1.5">ABOVE THE LINE</text>
</g> </g>
</svg> </svg>
</div> </div>
</section> </section>
<section class="band dark who" data-bg="dark" id="who"> <section class="band light who" data-bg="light" id="who">
<div class="wrap narrow"> <div class="wrap narrow">
<h2>Who we are</h2> <p class="eyebrow">Who we are</p>
<p class="section-intro">Open Communications' change practice is led by Michael Victory, working alongside Inga Michaelsen as co-facilitator.</p> <h2>Rigor <em>and soul.</em></h2>
<p class="section-intro">Our change practice is led by Michael Victory, with Inga Michaelsen as co-facilitator.</p>
<div class="people"> <div class="people">
<div class="person"> <div class="person">
<p class="person-name">Michael Victory</p> <p class="person-name">Michael Victory</p>
@@ -149,17 +141,18 @@
<p><a href="https://www.ingamichaelsen.com/">More about Inga →</a></p> <p><a href="https://www.ingamichaelsen.com/">More about Inga →</a></p>
</div> </div>
</div> </div>
<blockquote class="creed">Rigor and soul. The rigor to build something that works. The soul to make people actually want to use it.</blockquote> <blockquote class="creed">The rigor to build something that works. The soul to make people actually want to use it.</blockquote>
</div> </div>
</section> </section>
<section class="band light contact" data-bg="light" id="contact"> <section class="band light contact" data-bg="light" id="contact">
<div class="wrap narrow"> <div class="wrap narrow">
<h2>Change is hard. The people part doesn't have to be a mystery.</h2> <p class="eyebrow">Start a conversation</p>
<p>Start with a conversation — no pitch, no program to sign up for. Just a straight talk about what's getting in the way and whether we can help.</p> <h2>The people part doesn't have to be <em>a mystery.</em></h2>
<p>No pitch, no program to sign up for. Just a straight talk about what's getting in the way and whether we can help.</p>
<p class="actions center"> <p class="actions center">
<a class="btn" href="mailto:michael@opencommunications.consulting?subject=A%20conversation%20—%20Open%20Communications">Email Michael</a> <a class="btn" href="mailto:michael@opencommunications.consulting?subject=A%20conversation%20—%20Open%20Communications">Email Michael</a>
<a class="btn ghost tel" data-p1="778" data-p2="985" data-p3="6736" href="mailto:michael@opencommunications.consulting">Call 778&#8209;985&#8209;OPEN (6736)</a> <a class="btn link tel" data-p1="778" data-p2="985" data-p3="6736" href="mailto:michael@opencommunications.consulting">Call 778&#8209;985&#8209;OPEN (6736)</a>
</p> </p>
<p class="promise">The first conversation is free and commits you to nothing.</p> <p class="promise">The first conversation is free and commits you to nothing.</p>
</div> </div>
@@ -168,9 +161,15 @@
</main> </main>
<footer class="band dark site-footer" data-bg="dark"> <footer class="band dark site-footer" data-bg="dark">
<div class="wrap"> <div class="footer-watermark" aria-hidden="true"></div>
<div class="wrap footer-inner">
<div class="footer-brand logo-mark" role="img" aria-label="Open Communications"></div> <div class="footer-brand logo-mark" role="img" aria-label="Open Communications"></div>
<p>The human side of change · Hosted in Canada</p> <nav class="footer-nav" aria-label="Footer">
<a href="#problem">The problem</a>
<a href="#work">How we work</a>
<a href="#who">Who we are</a>
<a href="https://shopwisdom.ca">ShopWisdom</a>
</nav>
<p class="footer-call"><a class="tel" data-p1="778" data-p2="985" data-p3="6736" href="mailto:michael@opencommunications.consulting">778&#8209;985&#8209;OPEN (6736)</a></p> <p class="footer-call"><a class="tel" data-p1="778" data-p2="985" data-p3="6736" href="mailto:michael@opencommunications.consulting">778&#8209;985&#8209;OPEN (6736)</a></p>
<p class="footer-legal">Open Communications and ShopWisdom are practices of Open Communications, owned and operated by Michael Victory · British Columbia, Canada</p> <p class="footer-legal">Open Communications and ShopWisdom are practices of Open Communications, owned and operated by Michael Victory · British Columbia, Canada</p>
</div> </div>
@@ -181,14 +180,10 @@
for (var l of document.querySelectorAll('a.tel')) { for (var l of document.querySelectorAll('a.tel')) {
l.setAttribute('href', 'tel:+1' + l.dataset.p1 + l.dataset.p2 + l.dataset.p3); l.setAttribute('href', 'tel:+1' + l.dataset.p1 + l.dataset.p2 + l.dataset.p3);
} }
var nav = document.getElementById('nav'); var nav = document.getElementById('nav');
var sections = Array.from(document.querySelectorAll('[data-bg]')); var sections = Array.from(document.querySelectorAll('[data-bg]'));
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
function setNav() { function setNav() {
var line = nav.offsetHeight * 0.5; var line = nav.offsetHeight * 0.5, current = sections[0];
var current = sections[0];
for (var s of sections) { for (var s of sections) {
var r = s.getBoundingClientRect(); var r = s.getBoundingClientRect();
if (r.top <= line && r.bottom > line) { current = s; break; } if (r.top <= line && r.bottom > line) { current = s; break; }
@@ -197,12 +192,8 @@
nav.classList.toggle('on-dark', dark); nav.classList.toggle('on-dark', dark);
nav.classList.toggle('on-light', !dark); nav.classList.toggle('on-light', !dark);
} }
setNav(); setNav();
window.addEventListener('scroll', function () { window.addEventListener('scroll', function () { window.requestAnimationFrame(setNav); }, { passive: true });
if (reduce) { setNav(); return; }
window.requestAnimationFrame(setNav);
}, { passive: true });
window.addEventListener('resize', setNav); window.addEventListener('resize', setNav);
})(); })();
</script> </script>
style.css
+120 -114
View File
@@ -1,17 +1,17 @@
:root { :root {
--paper: #f5f2ec;
--paper-2: #efeae1;
--navy: #1c1c2e; --navy: #1c1c2e;
--navy-deep: #14141f; --navy-2: #25253c;
--paper: #f8f7f4; --ink: #1f1c1a;
--paper-2: #efebe4; --ink-soft: #6b655c;
--cream: #f3f0ea; --cream: #f5f2ec;
--cream-soft: rgba(243, 240, 234, 0.66); --cream-soft: rgba(245, 242, 236, 0.66);
--ink: #1a1a19;
--ink-soft: #565049;
--amber: #e89b1c; --amber: #e89b1c;
--amber-deep: #c47f12; --amber-deep: #c47f12;
--line-dark: rgba(243, 240, 234, 0.14); --line: rgba(31, 28, 26, 0.13);
--line-light: rgba(26, 26, 25, 0.10); --line-dark: rgba(245, 242, 236, 0.16);
--max: 1080px; --max: 1100px;
--nav-h: 64px; --nav-h: 64px;
} }
@@ -22,172 +22,178 @@ html { scroll-behavior: smooth; }
body { body {
margin: 0; margin: 0;
background: var(--navy); background: var(--paper);
color: var(--ink); color: var(--ink);
font-family: 'DM Sans', system-ui, sans-serif; font-family: 'Lora', Georgia, serif;
font-size: 18px; font-size: 18px;
line-height: 1.65; line-height: 1.7;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.wrap.narrow { max-width: 760px; } .wrap.narrow { max-width: 820px; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; line-height: 1.15; margin: 0 0 0.4em; } h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; line-height: 1.12; margin: 0 0 0.5em; color: var(--ink); }
h1 { font-size: 3.2rem; letter-spacing: -0.01em; } h1 { font-size: 4rem; letter-spacing: -0.015em; }
h2 { font-size: 2.1rem; } h2 { font-size: 2.6rem; }
h3 { font-size: 1.35rem; } h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; } h1 em, h2 em { font-style: italic; font-weight: 600; color: var(--amber); }
strong { font-weight: 700; } p { margin: 0 0 1.1em; }
strong { font-weight: 700; color: inherit; }
/* Brand logo — CSS mask so it inherits (and flips with) currentColor */ /* Eyebrow with amber dash */
.eyebrow {
font-family: 'DM Sans', sans-serif; font-size: 0.74rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.16em; color: var(--amber);
margin: 0 0 22px; display: flex; align-items: center;
}
.eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--amber); margin-right: 16px; flex: none; }
/* Brand logo — CSS mask so it flips with currentColor */
.logo-mark { .logo-mark {
display: block; display: block; width: 172px; height: 38px; background-color: currentColor;
width: 168px; height: 38px; -webkit-mask: url(assets/brand/oc-logo.svg) no-repeat left center / contain;
background-color: currentColor; mask: url(assets/brand/oc-logo.svg) no-repeat left center / contain;
-webkit-mask: url(assets/brand/oc-logo.svg) no-repeat left center;
mask: url(assets/brand/oc-logo.svg) no-repeat left center;
-webkit-mask-size: contain; mask-size: contain;
} }
/* Adaptive frosted-glass nav */ /* Adaptive frosted-glass nav */
.nav { .nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 50; position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h);
height: var(--nav-h);
display: flex; align-items: center; display: flex; align-items: center;
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
transition: background-color .35s ease, border-color .35s ease, color .35s ease; transition: background-color .35s ease, border-color .35s ease, color .35s ease;
} }
.nav-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; } .nav-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; }
.nav.on-light { background: rgba(245, 242, 236, 0.72); border-bottom-color: var(--line); color: var(--ink); }
.nav.on-dark { background: rgba(28, 28, 46, 0.55); border-bottom-color: var(--line-dark); color: var(--cream); } .nav.on-dark { background: rgba(28, 28, 46, 0.55); border-bottom-color: var(--line-dark); color: var(--cream); }
.nav.on-light { background: rgba(248, 247, 244, 0.66); border-bottom-color: var(--line-light); color: var(--ink); }
.wordmark { display: flex; align-items: center; color: inherit; text-decoration: none; } .wordmark { display: flex; align-items: center; color: inherit; text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 22px; font-size: 0.9rem; } .nav-links { display: flex; align-items: center; gap: 26px; font-family: 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.nav-links a { color: inherit; text-decoration: none; opacity: 0.82; transition: opacity .2s; } .nav-links a { color: inherit; text-decoration: none; opacity: 0.78; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; } .nav-links a:hover { opacity: 1; }
.nav-phone { font-weight: 700; opacity: 1 !important; white-space: nowrap; } .nav-phone { font-weight: 700; opacity: 1 !important; white-space: nowrap; }
.nav-cta { .nav-cta {
background: var(--amber); color: var(--navy-deep) !important; background: var(--amber); color: #fff !important; opacity: 1 !important;
font-weight: 700; padding: 9px 18px; border-radius: 9999px; opacity: 1 !important; padding: 9px 18px; border-radius: 3px; border: 1px solid var(--amber);
border: 1px solid var(--amber);
} }
.nav-cta:hover { background: var(--amber-deep); border-color: var(--amber-deep); } .nav-cta:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
a.tel { text-decoration: none; } a.tel { text-decoration: none; }
/* Bands */ /* Bands */
.band { padding: 96px 0; position: relative; } .band { padding: 104px 0; position: relative; overflow: hidden; }
.band.dark { background: var(--navy); color: var(--cream); }
.band.light { background: var(--paper); color: var(--ink); } .band.light { background: var(--paper); color: var(--ink); }
.band.dark { background: var(--navy); color: var(--cream); }
.band.dark h1, .band.dark h2, .band.dark h3 { color: #fff; } .band.dark h1, .band.dark h2, .band.dark h3 { color: #fff; }
.band.light h2, .band.light h3 { color: var(--ink); } .section-intro { max-width: 42em; margin-top: -0.2em; color: var(--ink-soft); }
.section-intro { max-width: 44em; margin-top: 0; }
.band.dark .section-intro { color: var(--cream-soft); } .band.dark .section-intro { color: var(--cream-soft); }
.band.light .section-intro { color: var(--ink-soft); }
/* Hero with amber glow + faint brand pattern */ /* Hero (light, airy) */
.hero { background: var(--navy); color: var(--cream); padding: 160px 0 110px; overflow: hidden; } .hero { background: var(--paper); padding: 168px 0 120px; }
.hero .glow { .hero h1 { max-width: 13em; margin-bottom: 0.35em; }
position: absolute; inset: 0; pointer-events: none; .lead { font-size: 1.35rem; line-height: 1.6; color: var(--ink-soft); max-width: 30em; margin-bottom: 2.2em; }
background: radial-gradient(ellipse 70% 60% at 72% 42%, rgba(232, 155, 28, 0.16) 0%, transparent 70%);
}
.hero .pattern {
position: absolute; top: -100px; right: -100px; width: 520px; height: 520px; pointer-events: none;
background-color: var(--amber); opacity: 0.06;
-webkit-mask: url(assets/brand/oc-pattern.svg) no-repeat center / contain;
mask: url(assets/brand/oc-pattern.svg) no-repeat center / contain;
}
.hero .wrap { position: relative; }
.eyebrow { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--amber); margin: 0 0 20px; font-weight: 500; }
.hero h1 { max-width: 12em; margin-bottom: 0.3em; }
.lead { font-size: 1.3rem; line-height: 1.55; color: var(--cream-soft); max-width: 30em; margin-bottom: 2em; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; } .actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.actions.center { justify-content: center; } .actions.center { justify-content: center; }
.btn { .btn {
display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 700; display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 700;
background: var(--amber); color: var(--navy-deep); padding: 14px 28px; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.08em;
background: var(--amber); color: #fff; padding: 15px 28px; border-radius: 3px;
text-decoration: none; border: 1px solid var(--amber); transition: background-color .2s, border-color .2s; text-decoration: none; border: 1px solid var(--amber); transition: background-color .2s, border-color .2s;
} }
.btn:hover { background: var(--amber-deep); border-color: var(--amber-deep); } .btn:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; opacity: 0.9; } .btn.link {
.btn.ghost:hover { opacity: 1; } background: transparent; color: inherit; border: none; padding: 15px 4px;
.band.light .btn.ghost:hover { background: rgba(26, 26, 25, 0.05); } border-bottom: 1px solid currentColor; border-radius: 0; opacity: 0.85;
.call { font-size: 0.92rem; color: var(--cream-soft); margin: 18px 0 0; }
.call a.tel { color: var(--amber); font-weight: 700; white-space: nowrap; }
.pull {
font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 1.4rem; line-height: 1.5;
border-left: 3px solid var(--amber); padding-left: 22px; margin: 1.6em 0 0; color: var(--ink);
} }
.btn.link:hover { background: transparent; opacity: 1; }
.call { font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: var(--ink-soft); margin: 22px 0 0; }
.call a.tel { color: var(--amber-deep); font-weight: 700; white-space: nowrap; border-bottom: 1px solid currentColor; }
/* Bridge */ /* Navy statement band */
.bridge .bridge-link { margin-top: 1.5em; } .statement .motif {
.bridge-link a { color: var(--amber); font-weight: 700; text-decoration: none; } position: absolute; left: -180px; top: -120px; width: 620px; height: 620px; border-radius: 50%;
.bridge-link a:hover { color: #fff; } background: var(--navy-2); pointer-events: none;
/* Service cards (frosted glass over a soft gradient) */
.services { background: linear-gradient(160deg, #fbfaf7 0%, #efebe4 100%); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 40px 0 0; }
.card {
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid var(--line-light); border-radius: 14px; padding: 28px;
} }
.card.feature { border-color: var(--amber); box-shadow: 0 8px 30px rgba(232, 155, 28, 0.12); } .statement .wrap { position: relative; }
.card-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--amber-deep); font-weight: 700; margin: 0 0 10px; } .statement-line { font-size: 2.7rem; line-height: 1.25; max-width: 16em; color: var(--cream-soft) !important; }
.statement-line em { color: #fff; font-style: normal; font-weight: 700; }
.statement p { color: var(--cream-soft); max-width: 40em; }
.statement .emph { color: #fff; }
/* Generic light band emphasis */
.band.light p { color: var(--ink-soft); }
.band.light .bridge-link a { color: var(--amber-deep); font-weight: 700; text-decoration: none; font-family: 'DM Sans', sans-serif; font-size: 0.92rem; border-bottom: 1px solid currentColor; }
.bridge-link { margin-top: 1.6em; }
/* Service cards */
.services { background: var(--paper); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 44px 0 0; background: var(--line); border: 1px solid var(--line); }
.card { background: var(--paper); padding: 32px 28px; }
.card.feature { background: var(--paper-2); }
.card-tag { font-family: 'DM Sans', sans-serif; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--amber-deep); font-weight: 700; margin: 0 0 14px; }
.card h3 { margin-bottom: 0.5em; } .card h3 { margin-bottom: 0.5em; }
.card p { font-size: 0.97rem; color: var(--ink-soft); } .card p { font-size: 0.98rem; color: var(--ink-soft); }
.card .outcome { color: var(--ink); font-weight: 700; margin-bottom: 0; } .card .outcome { color: var(--ink); font-weight: 500; font-style: italic; margin-bottom: 0; margin-top: 1em; }
.reassure { margin-top: 36px; font-family: 'Lora', serif; font-style: italic; color: var(--ink-soft); } .reassure { margin-top: 36px; font-style: italic; color: var(--ink-soft); }
/* Diagram */ /* Diagram */
.triangles { display: block; width: 100%; max-width: 720px; height: auto; margin: 36px auto 0; } .triangles { display: block; width: 100%; max-width: 720px; height: auto; margin: 40px auto 0; }
/* Who */ /* Who — hairline-separated rows */
.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 36px 0; } .people { margin: 40px 0; border-top: 1px solid var(--line); }
.person { background: rgba(243, 240, 234, 0.05); border: 1px solid var(--line-dark); border-radius: 14px; padding: 26px; } .person { padding: 30px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 2fr; gap: 32px; }
.person p { color: var(--cream-soft); } .person p { color: var(--ink-soft); margin: 0 0 0.7em; }
.person p:last-child { margin-bottom: 0; } .person p:last-child { margin-bottom: 0; }
.person a { color: var(--amber); text-decoration: none; font-weight: 500; } .person a { color: var(--amber-deep); text-decoration: none; font-weight: 700; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; border-bottom: 1px solid currentColor; }
.person-name { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700; color: #fff !important; margin-bottom: 0.5em; } .person-name { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; color: var(--ink) !important; margin: 0; }
.creed { .creed {
font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 1.45rem; line-height: 1.5; font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.7rem; line-height: 1.4;
margin: 1.8em 0 0; padding: 24px 30px; border-left: 3px solid var(--amber); margin: 1.6em 0 0; padding-left: 26px; border-left: 3px solid var(--amber); color: var(--ink); max-width: 24em;
background: rgba(243, 240, 234, 0.04); border-radius: 0 12px 12px 0; color: #fff;
} }
/* Contact */ /* Contact */
.contact { text-align: center; } .contact { text-align: center; }
.contact .eyebrow { justify-content: center; }
.contact .section-intro, .contact p { margin-left: auto; margin-right: auto; } .contact .section-intro, .contact p { margin-left: auto; margin-right: auto; }
.contact p:not(.actions) { max-width: 40em; } .contact h2 { max-width: 16em; margin-left: auto; margin-right: auto; }
.contact p:not(.actions) { max-width: 36em; color: var(--ink-soft); }
.actions.center { margin: 2em 0 0.8em; } .actions.center { margin: 2em 0 0.8em; }
.promise { font-family: 'Lora', serif; font-style: italic; color: var(--ink-soft); font-size: 0.95rem; } .promise { font-style: italic; color: var(--ink-soft); font-size: 0.95rem; }
/* Footer */ /* Footer — navy anchor with giant "open" watermark */
.site-footer { padding: 56px 0; text-align: center; color: var(--cream-soft); } .site-footer { padding: 0; background: var(--navy); position: relative; min-height: 380px; display: flex; align-items: flex-end; }
.site-footer p { margin: 6px 0; } .footer-watermark {
.footer-brand { position: absolute; left: 50%; bottom: -8%; transform: translateX(-50%);
width: 210px; height: 58px; margin: 0 auto 14px; background-color: var(--cream); width: 130%; height: 88%; pointer-events: none;
-webkit-mask-position: center; mask-position: center; background-color: var(--navy-2);
-webkit-mask: url(assets/brand/oc-mark.svg) no-repeat center / contain;
mask: url(assets/brand/oc-mark.svg) no-repeat center / contain;
} }
.footer-call a.tel { color: var(--amber); font-weight: 700; } .footer-inner { position: relative; width: 100%; padding: 56px 32px; }
.footer-legal { margin-top: 18px !important; color: rgba(243, 240, 234, 0.45); max-width: 52em; margin-left: auto; margin-right: auto; } .footer-brand { width: 188px; height: 42px; background-color: var(--cream); margin-bottom: 20px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 24px; font-family: 'DM Sans', sans-serif; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 18px; }
.footer-nav a { color: var(--cream-soft); text-decoration: none; }
.footer-nav a:hover { color: #fff; }
.footer-call { margin: 0 0 18px; }
.footer-call a.tel { color: var(--amber); font-weight: 700; font-family: 'DM Sans', sans-serif; }
.footer-legal { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; color: rgba(245, 242, 236, 0.45); margin: 0; max-width: 52em; }
/* Focus visibility */ /* Focus visibility */
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; } a:focus-visible, .btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 3px; }
/* Responsive */ /* Responsive */
@media (max-width: 860px) { @media (max-width: 860px) {
h1 { font-size: 2.4rem; } h1 { font-size: 2.7rem; }
h2 { font-size: 1.8rem; } h2 { font-size: 2rem; }
.statement-line { font-size: 2rem; }
.cards { grid-template-columns: 1fr; } .cards { grid-template-columns: 1fr; }
.people { grid-template-columns: 1fr; } .person { grid-template-columns: 1fr; gap: 10px; }
.hero { padding: 130px 0 80px; } .hero { padding: 130px 0 84px; }
.band { padding: 76px 0; }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
body { font-size: 17px; } body { font-size: 17px; }
.logo-mark { width: 140px; } .wrap { padding: 0 22px; }
.logo-mark { width: 146px; }
.nav-links a:not(.nav-cta):not(.nav-phone) { display: none; } .nav-links a:not(.nav-cta):not(.nav-phone) { display: none; }
} }