Dark Glass Conference Landing Page for Divi 5: Signal Summit

Signal Summit opens on a full-bleed dark hero with a near-black background (#07050f) and a faint squares pattern overlay in #2d2552 that adds dimensional texture without competing with the type. The single centered column carries a 96px Space Grotesk h1 with textWrap: balance and -1px letter-spacing, stepping down to 64px at tablet and 42px on mobile via three independent breakpoint values in the heading module. Below it, a group constrained to 600px max-width holds the event dateline in muted lavender (#a9a2c8) at 20px and 1.6em line-height, followed by the violet CTA button (#9b7bff) with a matching 1px solid border and a hover inversion that swaps fill and text colors. Vertical section padding steps in three stages (128px to 88px to 64px) to keep the hero generous at every viewport size.

The layout's structural logic alternates two background tones across eight sections: the primary #07050f for most content and the slightly lifted #16112a for the newsletter section and the Standard and Team pricing cards. This two-stop contrast creates visible section breaks without relying on borders or dividers. The single accent color, violet #9b7bff, appears at exactly three structural moments: the timeline step dots, the featured Workshop pricing card fill, and the closing CTA band, giving the scroll consistent visual punctuation without overusing the color. A deliberate brightness break occurs in the stats section, which uses a light #f4f1ff background to surface attendance figures in black at 96px, providing a contrast pause that improves readability mid-scroll.

The schedule section uses a custom flex-based vertical timeline built entirely from native Divi group, heading, and text modules. Each event row is a horizontal flex group: a narrow left column holds a 14x14px violet dot group and a 2px-wide flex-grow line in #2d2552, while the right column carries a small-caps time label (13px, 2px letter-spacing, #a9a2c8), an h3 session name in #f4f1ff at 24px, and a 17px body note. Four steps run across Day One (Doors and coffee, Opening talks, Workshops and expo hall, Evening on the terrace), with the layout noting that Day Two mirrors the same rhythm. On mobile, the columns stack and horizontal inner padding zeroes out so the dot column stays flush left.

Speaker cards sit in a four-column grid with a strict 1:1 image aspect ratio enforced by objectFit: cover, so any portrait or square crop fills cleanly without layout shift. A 2px white top border separates the name block from the photo, and the role line renders in 13px uppercase small-caps at #a9a2c8, keeping it readable but clearly subordinate to the name. Pricing presents three equal cards (Standard at $340, Workshop at $520, Team of five at $1,450) in a row that wraps to full width on tablet and stacks on mobile; the Workshop card signals the recommended tier with a solid #9b7bff fill and reversed dark text, requiring no separate badge component beyond the column background. The page closes with a six-item Divi accordion FAQ centered at 800px max-width, each item using a 20px rounded border and a #16112a open-state background to lift active answers off the dark field.