Zephyra — a modern Webflow template for renewable energy and climate-tech

Zephyra is a dark, modern template for companies that generate, measure or finance clean energy. It opens with a scroll-pinned hero stage, three statements that fade in as you scroll, and an interactive technology section. Background videos, a CMS-driven case-study rail and a clear, credible tone suit a business that needs to earn trust from operators, lenders and buyers.

Who it's for

• Solar, wind, hydro and storage developers and operators
• Climate-tech, energy-data and measurement (MRV) companies
• Sustainability, ESG and energy consultancies
• Any B2B company that sells verified results to an expert audience

Pages

• Main pages: Home, About, Solutions, Case Studies, Blog and Contact
• CMS template pages: Solution, Case Study and Blog Post
• Utility pages: Privacy Policy, Terms of Use, a custom 404 and a password page
• Documentation pages: Instructions, Style Guide, Changelog and Licenses

CMS

• Solutions: each has its own page with stats, capabilities, a case-study slider and a "How it works" story
• Case Studies: client, location, capacity and year, three result stats, a pull quote, and a link to the solution used
• Insights (blog): category, date, excerpt, rich-text body and a "More from the Desk" section
• Every card list is a Collection List, so new items appear on their own
• Meta title, meta description and structured data come from each item's fields

Highlights

• A scroll-pinned Home stage: the hero hands over to three statements, then to a technology accordion
• A short branded preloader on Home
• 7 native background videos, each with a pause button
• Case-study rail and swipe-and-scroll slider; solution, case and insight cards with hover motion
• Contact form with a styled select and a custom consent checkbox
• Separate tablet and phone layouts, with carousels and 2-up grids where they fit
• Loops, marquees and floats stay still for visitors who turn on Reduce motion

Built the Webflow way

• Motion: every animation is a native Webflow Interaction, with no animation scripts and no custom JavaScript
• Variables: colour, typography, spacing, radius and sizes, with four modes (Desktop, Tablet, Mobile Landscape, Mobile Portrait), so responsive values change in one place
• Components: Navigation, Footer, and a Button with six variants (Primary, Solid, Solid Wide, Accent, Navigation, Drawer) and Text and Link properties
• Clean structure: a clear class system with section prefixes, global base styles for headings, paragraphs, lists and rich text, and one H1 per page
• Fonts: Geist and Geist Mono, open-source under the SIL Open Font License, uploaded to the project

Documentation

• The Instructions page covers the preloader, every interaction, variables and modes, fonts, background videos, CMS collections and every hidden or collapsed element.
• The Style Guide shows the full type scale, colours, buttons and rich-text samples.
• The Licenses page credits every font, icon set, photo source and the AI-made background videos.