Brutalist Accordion Process - Dark Mode Interaction

Make a bold statement with the Brutalist Accordion Process widget. Inspired by the "Technical Brutalism" design trend popularized by top digital agencies and Awwwards winners, this component turns a standard process list into a high-impact interactive experience.

Designed specifically to avoid the pitfalls of position: sticky in iframe-based editors (like Elementor, Webflow, or custom CMS previews), this widget uses a robust Vertical Accordion pattern. This ensures 100% compatibility across all viewing environments while maintaining that premium, "locked-in" feel.

The aesthetic is unapologetically modern: a deep Jet Black background (#111111) provides high contrast for the crisp white typography and Acid Green accents (#CCFF00). When a user clicks a step, the panel expands smoothly to reveal rich content and a large, cinematic image, keeping the user focused on one concept at a time.

Key Features:

• Iframe-Safe Interaction: Uses CSS max-height transitions instead of sticky positioning, ensuring perfect functionality in all website builders and preview modes.
• Awwwards Aesthetic: Features a "Technical Brutalist" look with monospaced numbers, sharp borders, and high-contrast neon accents.
• Rich Text Support: The description area supports complex formatting (bullet points, bold text, multiple paragraphs) via data-richtext-editable.
• Auto-Numbering Logic: JavaScript automatically assigns 01, 02, 03 to steps, so you never have to manually update numbers when reordering.
• Smart Accordion Behavior: Automatically closes other panels when a new one is opened, keeping the interface clean and focused.
• Responsive Design: Stacks perfectly on mobile with adjusted tap targets and font sizes for optimal usability.