Client results: add before/after screenshots + headshot attributions

Upgrade the text-only #results case studies with the real before/after work
images and client headshots (Fred Hobeyn / Jim Szlabon). Side-by-side on desktop,
stacks on mobile (<=640px). SW (Georgia/steel) styling. Staging branch only.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-17 13:59:22 -07:00
parent 457e9e94ba
commit 71c15ff7e6
8 changed files with 43 additions and 0 deletions
+15
View File
@@ -160,6 +160,21 @@ blockquote {
border-left: 4px solid var(--steel); border-radius: 0 6px 6px 0;
}
blockquote p { margin: 0; font-style: italic; color: var(--ink-soft); }
.case-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0 4px; }
.case-shot { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.case-shot-label { font-family: Verdana, Geneva, sans-serif; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--steel-deep); font-weight: bold; }
.case-shot-frame { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel); height: 300px; }
.case-shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.case-cite { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.case-headshot { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid var(--line); background: var(--paper); }
.case-headshot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.case-cite-text { display: flex; flex-direction: column; line-height: 1.3; }
.case-name { font-family: Verdana, Geneva, sans-serif; font-size: 0.86rem; font-weight: bold; color: var(--ink); }
.case-role { font-family: Verdana, Geneva, sans-serif; font-size: 0.76rem; color: var(--ink-soft); }
@media (max-width: 640px) {
.case-shots { grid-template-columns: 1fr; gap: 16px; }
.case-shot-frame { height: 210px; }
}
/* Process */
.steps { list-style: none; counter-reset: step; margin: 36px 0 0; padding: 0; }