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

OC: match reference layout — full-width sections w/ 48px padding, left-aligned ~600px content column, reading max-widths (was centered 1100 column)

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-16 10:55:13 -07:00
parent c0fef0e18e
commit 5b287335df
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2 -2
View File
@@ -29,7 +29,7 @@
<main id="top"> <main id="top">
<section class="hero" data-bg="light"> <section class="hero" data-bg="light">
<div class="wrap"> <div class="wrap"><div class="hero-col">
<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 <em>easy part.</em></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>
@@ -38,7 +38,7 @@
<a class="btn link" 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></div>
</section> </section>
<section class="band dark statement" data-bg="dark" id="problem"> <section class="band dark statement" data-bg="dark" id="problem">
style.css
+6 -4
View File
@@ -32,8 +32,10 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; } .wrap { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 48px; }
.wrap.narrow { max-width: 820px; } .wrap.narrow { max-width: 1920px; }
.hero-col { max-width: 600px; }
.band.light p:not(.section-intro):not(.outcome) { max-width: 42em; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; line-height: 1.08; margin: 0 0 0.5em; color: var(--ink); } h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; line-height: 1.08; margin: 0 0 0.5em; color: var(--ink); }
h1 { font-size: 3.8rem; letter-spacing: -0.01em; } h1 { font-size: 3.8rem; letter-spacing: -0.01em; }
@@ -91,8 +93,8 @@ a.tel { text-decoration: none; }
/* Hero */ /* Hero */
.hero { background: var(--paper); padding: 176px 0 128px; } .hero { background: var(--paper); padding: 176px 0 128px; }
.hero h1 { max-width: 13em; margin-bottom: 0.35em; } .hero h1 { margin-bottom: 0.35em; }
.lead { font-size: 1.25rem; line-height: 1.7; color: var(--ink-soft); max-width: 28em; margin-bottom: 2.4em; } .lead { font-size: 1.25rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 2.4em; }
.actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.actions.center { justify-content: center; } .actions.center { justify-content: center; }