Perihelion Observatory — Dark Observatory Home Page for Divi 5

The layout opens on a near-black canvas: #080714 set as a three-stop linear gradient angled at 150 degrees, barely warming to #12102a at mid-scroll before returning to pure void. That subtlety matters because the background is not flat, so text and bordered cards appear to float rather than sit against a wall. The hero splits into two equal columns: the left carries a Sora h1 at 60px with -1px tracking and text-wrap: balance, paired with a 14px uppercase eyebrow at 2px letter-spacing and a ghost CTA button. The right column stacks three stat cards (14 telescopes, 9-in-10 clear nights, 60k annual visitors), each in a #12102a panel with a 1px #f1eefc border and a warm amber diffuse box-shadow. On desktop those cards are nudged off-axis by CSS transforms (-3deg, 2deg, -1deg) and overlap each other via -40px negative top margins, creating a scattered-on-a-desk effect. On mobile the rotations zero out, the negative margins become positive gutters, and the columns stack vertically.

The second section uses a CSS Grid to present five celestial subjects, where the lead card (the Moon) spans both columns at a 2:1 aspect ratio while the remaining four sit at 4:3. Each card pairs a cover-fit photograph with an h3 title and a small uppercase frequency badge built from a divi/group with a 1px border and 12px Sora text. The section header is a flex row that pushes the h2 heading left and a ghost secondary button to the right, aligned to the baseline. On phone the grid collapses from two columns to one and the header stack goes vertical.

The events section runs three rows of paired cards. Visual accent is applied deliberately: one card per row breaks from the dark palette ("Telescope night" in amber #ffb454 with a crescent-moon Font Awesome icon; "Kids' club" in near-white #f1eefc with dark text) while neighbouring cards stay in #12102a. This colour-pop rhythm guides the eye without relying on photography for every cell. Type weight scales from 44px section headings down to 30px card headings and 17px body copy, maintaining a clear three-level hierarchy throughout.

The page closes on a full-bleed starfield photograph used as a CSS background-image on the section wrapper, with #080714 as a colour fallback. A single left-aligned card at max-width: 520px holds the final call to action, padded at 48px on all sides, with an eyebrow, an h2, a paragraph, a thin divi/divider module, and a ghost "Book a night" button. Responsive section padding is consistent across all five sections: 100px vertical on desktop, 72px on tablet, 48px on phone.