PNG has hard alpha cutoff edges — adds left (0%→14%) and top (0%→10%)
linear-gradient masks via mask-composite:intersect so both edges fade
simultaneously into the cream background, matching Figma's seamless look.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Figma exports the hero image as a PNG with alpha channel — the background
is already transparent. Switched from <img mix-blend-multiply> to a
background-image div (background-size: contain, right center) so the
transparent PNG blends seamlessly into the cream section background with
no visible edge. Background-image also scales better for responsive.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
White/light areas of the photo dissolve into #f5f0e8 without needing
a PNG with alpha transparency.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Dark bg (#111). Top divider is a 3px div in #30302c (not a CSS border).
Three justify-between columns: Lora SemiBold logo with gold period (#fdb705),
Lora Regular @handle centered (added weight 400 to Lora config), Inter 14px
legal links with gap-6. Footer sits outside <main> so mt-auto pushes it down.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Cream card (bg-[#f8f3ec], rounded-xl) inside section padding of 80px.
Left copy column has fixed w-[38.25rem] (612px) with icon (-rotate-4)
and Lora heading; right form column is flex-1 with email input +
orange submit button side by side, privacy note below. Input and button
share items-stretch so they align to equal height.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Two-column layout: left column stacks serif statement above a row of
Caveat quote (flex-1) + 2px golden divider + author bio (shrink-0).
Signature image is absolute-positioned just below the three Caveat lines
(top: 6.44rem = 3 × 32px line-height). Right column is a full-height
overflow-hidden container with object-cover author photo.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Fine 1px #d9d9d9 border with rounded-xl on all cards. Featured card
uses overflow-hidden to clip thumbnail flush left; secondary cards give
each thumbnail its own rounded-xl so it sits neatly inside the py-2
padded wrapper. Arrow uses standard → instead of unsupported U+1F816.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Marco