Instructions

Colours & type

Change it once, everywhere

All colours, font sizes, spacing and radii are Variables (Colors, Typography, Spacings). Edit a variable and every page updates. Section spacing uses the Layout variables, which have tablet and mobile modes, so the site stays balanced on every screen.

‍

Interactions

Native Webflow, no code

Animations are built with Webflow Interactions (GSAP). The Home page has Cards Interaction — find them in the Interactions panel and adjust timing there. The About page has FAQ Interaction — find them in the Interactions panel and adjust timing there.

‍

Attribute-based scroll reveal animation

Controlled using custom data attributes added inside the Webflow Settings panel. This animation smoothly reveals elements as they enter the viewport while scrolling. Each selected element starts hidden and gracefully appears when the user scrolls down. The effect triggers once per element for a smooth browsing experience.

• animate-banner=slide-top - This marks the specific element that should animate on page load.
• animate-banner=grow - This marks the specific element that should animate on page load.
• animate-banner=slide-left - This marks the specific element that should animate on page load.
• image-banner=reveal - This marks the specific element that should animate on page load.‍
• animate=grow - This marks the specific element that should animate.
• animate=slide-top - This marks the specific element that should animate.
• image=reveal - This marks the specific element that should animate.
• card=wrap - This acts as the parent scroll trigger container.
  
  • card=item - This marks the specific element that should animate.

‍

Changing fonts

To update fonts

To adjust the font family, open the Variables panel and select the font family you want to modify.

• Open the Variables panel.
• Open Site settings > Fonts and make your changes.
• After uploading your font in Site settings, go to the Variables panel and choose the new font family.

‍

Components

Shared pieces

Navbar, Footer, CTA and Button are components. Edit one and it updates on every page. The Button has Primary, Primary Border and White variants.

‍

Template support

We’re happy to help! Reach out via the Webflow Template Support page and we’ll respond soon.

To begin building your site, duplicate the Starter page and start editing or adding sections from other pages.