Section Shopify#1 of 16 — actual visual styling that matches the Figma hero.
Layout:
• 2-column grid (text 1.05fr / media 1fr) from 990px, stacks below
• Image-left variant flips columns via .fortified-hero--image-left
• min-height: clamp(420px, 50vw, 620px) so hero has real presence
Typography:
• Eyebrow: schema fg at 55% opacity (no more tan)
• H1: Brother 1816 900, clamp(40, 6vw, 72), line-height 0.95
• Body: clamp(15, 1.1vw, 17), max 46ch, 85% opacity
CTAs:
• Pill-shaped 10px radius, 14×28 padding, 48px min-height
• Primary uses schema --color-primary-button-*
• Secondary uses schema --color-secondary-button-*
Media column:
• Image rendered at max-width 560px with -3° tilt + drop-shadow
• Hover straightens the tilt
• Placeholder when no image: radial-gradient + rotated pill that
suggests packaging-bottle silhouette, tinted by --fortified-accent
Decorative elements:
• Two soft accent circles bleed past edges (top-right + bottom-left)
at 4% opacity, sized 320px / 240px, hint at the Figma's branded
background art without competing for attention
Responsive:
• Below 750px: image scales to 360px with no tilt, CTAs stack
full-width
All colors source from the assigned Shopify color scheme. Accent
shading uses --fortified-accent (the per-section Highlight color
picker; defaults to teal).
See all upstream commits: https://github.com/Shopify/horizon-private/compare/031b1c73990845d0eb3d88ef82954df03a09c69f...9856422ff5c3b3762afbbd1df1feaa7e96c6621a