Fernhill Botanicals — Minimal Plant_shop Our Story Page for Divi 5

The layout opens on a full-width section set against a deep forest-green background (#1f2b22), with generous asymmetric padding: 112px at the top and 168px at the bottom on desktop, compressing to 64px / 88px on phone. A 13px Karla uppercase eyebrow in sage cream establishes the page as a brand story before the h1 enters in Newsreader at 60px, tightened to -1px letter-spacing and set to textWrap: balance to prevent awkward orphan words at every breakpoint. A centered rule just 72px wide anchors the eye below the headline, then a constrained text block (maxWidth 640px) keeps the opening copy narrow and readable. A CSS curve divider in sage cream transitions the hero into the rest of the page at 100px on desktop, stepping down to 70px on tablet and 44px on phone so the shape reads proportionally across screen sizes.

The second section puts a full-bleed Pexels greenhouse photograph to work as atmosphere without sacrificing legibility: a uniform 70% dark overlay (rgba(24,34,26,0.7)) covers the image edge to edge, so all the light-colored type above it passes contrast regardless of what the photograph contains. Inside, a four-column CSS grid built from native Divi Group modules holds the milestone cards, with 32px column gaps and 40px row gaps. On tablet the grid collapses to two columns; on phone it becomes a single-column stack with a tighter 32px row gap. Each milestone card uses a 2px solid top border in #f6f9f1 as its primary visual separator, followed by a large Newsreader year number at 48px (responsive down to 36px on phone), an h3 heading at 20px, and a short Karla body paragraph at 16px. That three-tier hierarchy stays scannable regardless of column width because each text element has its own size step baked in at the module level.

The third section uses a true two-column row with asymmetric flex widths (9/24 and 15/24 of the available space) and a 72px column gap that gives the portrait room to breathe beside the letter copy. The portrait image is capped at 360px wide with a 4:5 aspect ratio. Its border radius mixes 999px on both top corners (creating a half-pill arch) with 32px on both bottom corners, landing somewhere between a conventional rectangle and a full arch. The right column carries three body paragraphs in Newsreader at 22px / 1.6em line height, the most generous font size on the page, chosen to make the founder's note feel like a personal letter rather than web copy. A muted italic signature in #566558 Newsreader closes the section. On phone both columns collapse to full width and stack vertically.

The fourth section returns to dark forest green and presents four core values as horizontal rows separated by 2px dividers. Each row is a flex container holding three sibling Group modules: a fixed-width 64px label column with a bold Karla step number (01 to 04), a flex-grow center column carrying the h3 in Newsreader at 34px, and a maxWidth 360px right column with Karla body copy at 17px. On phone the row direction flips to column so the number, heading, and supporting text stack naturally. The page closes with a full-bleed botanical photograph (no overlay) carrying an off-white card (#fbfcf8, 8px border radius, 1px sage-green border) positioned to the left at maxWidth 520px. The card contains an eyebrow, an h2 in Newsreader at 36px, a short Karla paragraph, a rule, and a rose-pink CTA button (#b83d63, 8px radius). That rose accent appears nowhere else in the design, making the call to action visually unambiguous without requiring any extra weight or size.