Instructions

How the template is organised

Every section has its own class prefix — hero_, vision_, solutions_, sectors_, tech_, cases_, insights_ and so on — and shared pieces use eyebrow_pill and util_. Edit text and images directly on the canvas; changing a class in the Style panel updates every element that uses it.

Navigation, Footer and Button are components: edit them once and every page follows. Every call to action is the Button component (Buttons folder) with six variants — Primary, Solid, Solid Wide, Accent, Navigation and Drawer — and Text and Link properties: select a button, pick its variant and edit its text and link in the right-hand panel. The Pages menu in the navigation links every page, including this one, the Style Guide, the Changelog and the Licenses page.

Change the logo, text and colours

The preloader plays every time the Home page loads. In the Navigator it is Preloader Wrapper, the first element in the Home page body. It is set to Display: None and Opacity: 0 so it never covers the canvas; its interaction shows it on the live site. To edit it, temporarily set Display to Flex and Opacity to 100%, make your changes, then set both back.

Logo and text: Preloader Mark holds the wordmark “ZEPHYRA”. Type your own name, or replace the heading with an image of your logo. The bar at the bottom is Preloader Fill inside Preloader Track.

Colours: the background is on preloader_wrapper, the wordmark on preloader_mark, and the bar on preloader_fill and preloader_track.

Timing: Interactions panel → Play preloader and reveal home hero on page load. It grows the bar, fades the curtain out and then brings in the hero; change each action’s duration or start time there.

To remove the preloader, delete Preloader Wrapper and, in Play preloader and reveal home hero on page load, the actions that animate the mark, the fill and the curtain. Keep the hero actions so the Home hero still fades in.

Where the animations live

All motion is built with native Webflow Interactions — there is no animation code to edit. Open the Interactions panel: every name says what moves and when, for example Fade up team grid on scroll, Reveal sectors title word by word, Zoom team portrait on hover, Bob stage scan image in a loop and Open and close the phone menu. Fade up and Reveal … word by word run as content scrolls into view; Pop in … is the Home collage; Draw is the line icons and the timeline; Highlight, Zoom, Turn, Lift and Slide are hovers; Bob, Pulse, Rotate and Scroll … in a loop are the ambient motion and the marquees. The logo sits in its own dark pill, like the menu and the Let’s Talk button, so it stays readable over every section without changing colour. Every timed animation runs 0.8 s or less, and loops and marquees stay still for visitors who turn on Reduce motion.

Select one to change its duration, delay, distance or easing. Most reveals are triggered by a class, so every element with that class shares the animation — remove the class from an element, or edit the trigger, to leave it out.

The Home hero is one pinned section. Fade out home hero as the stage scrolls moves the hero, scan and technology layers, and Show first, second and third stage statement while scrolling fade the three statements in and out. Their start and end points are percentages of the Stage section’s height — change those to move each moment.

Everything that opens on click also opens from the keyboard. The phone menu button (nav_toggle) is a real button, the Pages and Solutions menus each have a button (nav_hit) that their click interactions listen to, and every technology step and FAQ question has a transparent button (acc_hit) laid over its row. Press Tab to reach them and Enter or Space to open and close. Keep these buttons when you restyle the rows, and give a new row its own acc_hit button with an aria-label that names the question.

Elements you won’t see at first

A few elements stay hidden until a visitor opens them, so they don’t show on the canvas at first. Select them in the Navigator to edit them. For the ones hidden with Display: None, set Display to Flex or Grid while you work, then set it back.

Preloader (Home) — Preloader Wrapper is set to Display: None and Opacity: 0 and is shown on load by Play preloader and reveal home hero on page load. See the Preloader section above.

Home stage (Home) — the hero, the three statements (stage_line) and the technology layer (stage_tech, with stage_scrim behind it) share one pinned box. So they don’t pile up on the canvas, stage_line, stage_tech and stage_scrim are set to Opacity: 0; Show first, second and third stage statement while scrolling and Fade out home hero as the stage scrolls fade them in and slide the technology layer in from the left. To edit one, select it in the Navigator, set Opacity to 100%, make your changes, then set it back to 0.

Phone menu (Navigation component) — nav_drawer and the close icon, nav_toggle-close, are hidden until the menu button is tapped; Open and close the phone menu shows them and hides the burger icon.

Solutions dropdown and Pages panel (Navigation component) — nav_solutions and nav_panel are hidden until their link is hovered (Open solutions menu on hover, Open pages menu on hover).

Technology accordion (Home) — each step’s text, process_body, is collapsed until the step is clicked; the is-open combo class shows it (Open technology accordion item on click, Close technology accordion item on click). The icons swap too: process_icon-minus is hidden on closed steps, and the plus icon (process_icon with is-open) is hidden on the open one.

FAQ answers (Solutions) — each faq_body is collapsed until its question is clicked; the is-open combo class shows it (Open and close FAQ answer on click). The icons swap the same way: faq_minus is hidden on closed rows, and faq_plus with is-open is hidden on the open row.

Line icons (Home and About) — the outline icons whose paths use draw_path look empty on the canvas, because each stroke starts undrawn; Draw line icons when they scroll into view adds is-drawn to draw them. To see one while you edit, add the is-drawn combo class to its paths, then remove it again. The Interaction states group on the Style Guide shows them fully drawn.

Why Zephyra list (Solutions) — why_grid is hidden on desktop, where the orbit shows the same points, and replaces the orbit at 991 px and below. Switch to the Tablet breakpoint to edit it.

Contact form messages — the success and error messages appear only after the form is sent. Select the form and switch its State in Element settings to edit them.

Change colours, type and spacing in one place

Colours, font families, font sizes, font weights, line heights, letter spacing, spacing, corner radii and key sizes are variables in the Variables panel (the Zephyra collection), in folders named Color, Font Family, Font Size, Font Weight, Line Height, Letter Spacing, Spacing, Radius, Size and Max Width — for example Color / Brand / Lime, Font Size / Heading 2, Font Weight / Medium, Spacing / Page Gutter, Radius / Pill and Max Width / Container. Names describe a role or a step on a scale, never a raw value, so you can change a value without renaming anything. Change a value once and every element that uses it updates.

There are four modes: Base mode (desktop), Tablet (991px and below), Mobile Landscape (767px and below) and Mobile Portrait (478px and below). They switch automatically with the breakpoint, so responsive sizes live in the modes: Heading 1 is 72 px on desktop, 48 px on tablet and 40 px on phones, and Spacing / Page Gutter is 28, 24 and 20 px. Pick a mode tab in the Variables panel to change a tablet or phone value.

The scale steps (Spacing / Extra Large, Radius / Medium, Font Weight / Semibold and so on) are the same in every mode, and colour tints run from Ghost, the most transparent, up to Solid or Bright. Keep variables linked — to change a single element, add a class override or a new variable rather than unlinking one — and don’t delete variables that are in use.

Geist and Geist Mono

Both families are uploaded under Site settings → Fonts and applied through two variables: Font Family / Sans (Geist) and Font Family / Mono (Geist Mono). Geist Mono is used for eyebrows, labels, numbers and buttons.

To use your own typeface, upload the font files under Site settings → Fonts (or connect Google or Adobe Fonts), then point the two Font Family variables at the new families — every heading, paragraph and label follows. Check a few headings afterwards: the type scale and letter spacing were tuned for Geist.

Replace a background video

The looping backdrops are Webflow Background Video elements with the bg_video class: three on Home (vision, sectors and technology), two on About (hero and stats) and two on Solutions (hero and testimonial). Each plays muted on a loop and has a pause/play button, so visitors can stop the motion. Webflow makes the poster image from the video's first frame.

To replace a clip, select the Background Video in the Navigator, open Element settings and click Replace video (MP4, WebM, MOV or OGG under 30 MB; short loops work best). Keep Loop, Autoplay and Include play/pause button ticked. The button is styled with bg_video-button and its combo classes, which move it clear of overlays and the heroes’ parallax. Scrims that darken a video sit inside its Background Video so the button stays on top; the technology video is dimmed and the About turbine video is shown uncropped through their own classes, so a replacement clip picks up the same treatment.

Swap in your own logos

The logo marquee on the About page uses 24 original marks drawn for this template — no real brands. Each one is an SVG image with the logos_logo class. Replace the image in each logos_logo element with your partners’ logos; the strip holds two identical groups of 24 so it can loop seamlessly, so update both groups in the same order. Scroll partner logos in a loop in the Interactions panel sets the scroll speed, with its own on tablet and on phones versions for smaller screens.

Solutions, Case Studies and Insights

Solutions — one page per item at /solution/<slug>, from the Solutions Template: Name, Number (sets the order), Card headline (the title on the Home solution cards), Lead, Image, three stats (value and label), Body, four capabilities (title and text), a Case Study reference, and Meta title and Meta description for search results.

Case Studies — the Case Studies list and one page per item at /case-study/<slug>: Name, Sort order (sets the order on every list), Category, Lead, Image, Client, Location, Capacity, Year, three result stats, Body, the Quote with its Person, Role and Person Image, a Solution reference shown as “Solution used”, and Meta title and Meta description.

Insights — the blog at /blog and one post per item at /insight/<slug>, from the Insights Template: Name, Category, Date (lists show the newest first), Dateline, Excerpt, Image, Body, and Meta title and Meta description.

Every card list is a Collection List bound to these collections — the solutions, case-study rail and latest insights on Home, the solution cards on the Solutions page, the Case Studies and Blog lists, and More from the Desk on each post — so new items appear on their own. The case-study slider on each solution page is a swipe-and-scroll track without arrows, ordered by Sort order. The only hand-made links are the solution links in the navigation dropdown, the phone menu and the footer: Webflow doesn’t allow Collection Lists inside components that are used on CMS template pages, so update those three when you add, rename or remove a solution.

The long-form text on CMS pages is styled on the Style Guide page. Its two Rich text samples carry the same classes as the CMS bodies: pd_body for insights, cd_body for case studies and solutions. Select a heading, paragraph, list, link or image inside a sample and edit its All … selector nested inside that class; the change reaches every CMS page that uses it. Keep both samples on the Style Guide so these styles stay easy to find.

What the custom code does

Site settings → Custom code holds a single font-smoothing rule in the Head; the Footer is empty, and the template runs no JavaScript of its own. The styles live on classes, the FAQ and accordions are click interactions, the phone menu opens and closes from its own button, and scrolling is the browser’s own — no smooth-scroll library is loaded.

The only page-level code sits in Page settings → Custom code → Head. The documentation pages — Licenses, Changelog, Instructions and the Style Guide — each carry a noindex tag that keeps them out of search results; keep it, or delete it if you want those pages indexed. The Solutions, Case Studies and Insights templates each carry a JSON-LD block that fills in every item’s structured data — title, description, image and link, plus the date on insights — from its CMS fields; if you rename or remove one of those fields, update the matching line there. Nothing in the template animates through code: all motion is in the Interactions panel.

Fonts, icons, imagery and code

Geist and Geist Mono are released under the SIL Open Font License 1.1, the icons are Lucide (ISC License), the photography comes from Unsplash, Pexels and Pixabay, the background video loops were made with ChatGPT (OpenAI) for this template, and motion runs on the GSAP 3.15.0 that Webflow Interactions load. The full terms and links are on the Licenses page.