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:
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user