Perihelion Observatory — Dark Observatory Visit and Tickets Page for Divi 5

The layout opens with a two-column header section set on #12102a — a deep indigo that reads as twilight sky rather than flat black. The left column (16/24 flex units) carries a breadcrumb trail and an H1 in Sora 700 at 52px with -1px letter-spacing; the right column (8/24 units) holds a single support line in muted lavender (#a8a3c8) at 18px. A 1px #2b2750 border runs beneath, separating sections without visual noise. On mobile the columns stack and the heading scales to 32px, keeping hierarchy intact.

The ticket comparison section drops to near-black #080714 — deliberately darker than the surrounding sections to frame the pricing cards as the page's focal point. A centered H2 at 44px introduces three equal-width cards. Two share the same #12102a background and ghost-button treatment; the middle "Telescope night" card breaks rank with a solid #ffb454 amber fill and a "Most popular" pill badge, creating an instant visual anchor. All three carry the same warm amber box-shadow (rgba(255,180,84,0.45)) so the glow unifies the row while the fill contrast does the highlighting work. Each card is structured identically: tier name, one-line description, a 44px price figure beside a smaller "per adult" label in baseline alignment, a #2b2750 divider, three icon-checked features, then a CTA button. The flexGrow/flexShrink sizing on the feature-list group pins buttons to the card bottom regardless of content length — a detail that survives real copy edits.

The third section uses an asymmetric split: a narrow 8/24 label column holds the heading stack, while a wider 16/24 column renders eight icon-checked amenities in a two-column CSS grid at Sora 17px. The grid collapses to a single column on mobile. That editorial imbalance — narrow heading, wide checklist — communicates confidence without extra decoration, and the consistent 100px desktop / 48px mobile padding across all sections keeps the breathing room feeling deliberate.

The page closes with a groups-and-schools enquiry section: a left column presents an H2, body text, and three feature rows; the right column frames a native Divi contact form inside a #080714 card with a 1px #f1eefc border and the same amber glow shadow running throughout. Form fields use #12102a backgrounds with #f1eefc borders, staying readable without departing from the palette. Every ghost button inverts to near-white fill on hover, consistent across all four CTAs on the page.