Perihelion Observatory — Dark Observatory About Page for Divi 5

Perihelion opens with a full-bleed hero on #080714, a near-black indigo that anchors the entire palette. A 13 px Sora uppercase eyebrow in muted lavender (#a8a3c8) labels the organisation, then the H1 steps to 104 px with a 1.02 em line height and textWrap: balance applied directly in the layout, dropping to 72 px on tablet and 44 px on phone through explicit breakpoint values rather than fluid scaling. Below a 1 px #2b2750 divider, a deliberate asymmetric row splits the grid 16/24 on the left for the mission paragraph (20 px Sora body, max-width 560 px) and 8/24 on the right for a single underlined link. Both columns override to full 24/24 width on phone and stack vertically, so the link always appears below the paragraph rather than beside it.

The second section places a Pexels night-sky photograph behind a 70 % dark gradient applied identically at both 0 % and 100 % stops, producing a flat veil that keeps image texture present without a directional fade competing with the white text. Inside, a CSS-grid Group module arranges four milestone cards across four columns (32 px column gap, 40 px row gap), collapsing to two columns on tablet and one on phone with a tighter 32 px row gap. Each card sets only a top border at 2 px #f6f3ff while keeping all other sides at 0 px width, so the rule serves as a typographic anchor for the 48 px year number (weight 700, -1 px letter-spacing, 1 em line height) without boxing the card in.

Section three shifts to #12102a, a fractionally lighter indigo, and builds a five-principle values list with native Icon and Group modules. Each row uses flexDirection: row with alignItems: flex-start and a 24 px column gap: a Font Awesome solid icon sits fixed on the left at 24 px while the text group grows to fill the remainder. Rows are separated by 1 px #2b2750 dividers, with a heavier 2 px #f1eefc rule above the first item giving the block a clean top edge. The H2 heading is constrained to max-width 720 px and left-aligned, consistent with the 640 px subtext container below it.

A founder quote section follows, using a full-bleed photograph with no gradient overlay so the image sits at full exposure. The open-quote character is a plain Text module set to 120 px and 0.8 em line height, providing the visual lead-in without a separate typographic module. The quote body runs at 42 px / 1.3 em with textWrap: balance, scaling to 26 px on phone, and attribution sits beneath a 64 px-wide 2 px divider. The fifth section returns to #080714 over a third photograph and left-aligns a contained #12102a card at max-width 520 px. The card uses sharp 0 px corner radius, a 1 px #f1eefc perimeter border, and an amber box-shadow at rgba(255,180,84,0.45), the only warm accent in an otherwise cool palette. The ghost button inverts on hover: transparent fill becomes solid #f1eefc while the label text flips to #080714.