Wagtail Animal Clinic — Playful Veterinary Our Vets Page for Divi 5

The Wagtail Our Vets page is built across five distinct sections, each with its own background color and typographic register, all drawing from a three-color palette of deep navy-purple (#2b2457), warm cream (#fff7ec), and bright pink (#ff7aa5). The opening hero spans the full viewport on a navy ground, with a centered H1 at 60px in Fredoka that scales to 46px on tablet and 34px on phone, sitting above a cream divider constrained to 72px and a short paragraph held to 640px for a comfortable line length. The hero base dissolves into the next section via a 100px curve section divider (70px tablet, 44px phone), making the color transition feel like part of the layout rather than a hard cut.

The team grid uses the warm cream as its background and opens with an asymmetric split header: the headline column takes 14 of 24 grid units and the supporting copy takes 10, which puts deliberate visual weight on the left before the four portrait cards arrive. Each card locks its image to a 1:1 square aspect ratio with object-fit cover and no border radius, then follows it with a name and role group that uses a 3px solid navy top border as the single decorative accent. Column gap is 28px with a 40px row gap so the grid retains its rhythm when it wraps to two columns on tablet and a single column on phone.

The third section shifts to white and gives Dr. Cruz's portrait a 4:5 aspect ratio with an unusual border shape: both top corners at 999px radius and both bottom corners at 32px, contained within a 360px-wide centered group on the left. The right column spans 15 of 24 units and carries three short paragraphs of first-person copy at 22px Fredoka with a 1.6em line height, closed by an italic sign-off. A 72px column gap on desktop ensures neither side feels crowded, and the two columns collapse to a vertical stack on phone.

The values section returns to navy and presents four principles in a numbered list format: each row holds a fixed 64px-wide number column, a flex-grow heading column at 34px Fredoka, and a max-360px body column at 17px Nunito, all separated by full-width 3px cream dividers with 32px vertical padding above and below. On phone each horizontal row switches to a vertical stack. The closing CTA section places a white card (36px border radius on all corners, 2px solid navy border, hard 6px/6px/0px box-shadow) over a background photograph, with a pill-shaped pink button that swaps its background and text color on hover.