C

Instructions.

How to make Cifra your firm's site: details, content, charts and animations. Most changes are made once and update every page.

Getting started

  • Firm details. Replace Cifra, the entity names (Cifra Partners LLP, Cifra Wealth Ltd, Cifra Asesores, S.L.P.), addresses and registration numbers in the Nav, Footer and Contact CTA components. Each component is edited once and updates every page.
  • Pick your homes. Home (Tax & accounting), Wealth and Advisory share one design system. Keep one, two or all three. To make Wealth or Advisory your homepage, copy its sections into Home and delete the pages you do not use.
  • Figures. The Statement of the firm and the green ledger band are plain text on each home. Edit them in place.
  • Deadlines. Each deadline has a Due date, an Office and a Practice. Lists hide past dates on their own and filter by practice and office. For deadlines due in the next two weeks, set Status to Due soon and paste ✓ in Tick.
  • Services and cases. Each item belongs to a Practice. Every home shows only its own, ordered by the Order field. Each service page pulls its Lead adviser, Advisers, Related services and Further reading from the fields of the same name, so fill them in when you add a service. Case pages list the Advisers who led the work.
  • People, insights and legal pages. Each adviser page lists the services where they appear under Advisers and the guides where they are the Author. Insights are ordered by Date. Legal notice, Privacy, Cookies, Regulatory information and Complaints live in the Legal collection and share one template.
  • Forms. The Contact, Application (on Careers) and Newsletter forms send to Webflow form submissions. Add your notification email in Site settings, Forms.
  • Notices. Review the regulatory notice in the footer and the investment risk warning on the Wealth home with your compliance lead.

Layouts

Cifra comes with three versions of the Home, Fees and Firm pages, one per practice. Keep the set that fits your firm and delete the other pages, or mix sections between them: every section is built from the same classes.

Colours and type

Colours, font and sizes are Webflow variables. Open the Variables panel: the Brand collection holds the colours and the font, and the Responsive collection holds the type sizes and spacing, with their own values for tablet and mobile. Change a variable once and every page follows. The Style Guide shows them all.

Charts (inline SVG)

The quarterly chart on each home is inline SVG inside an Embed element (class chart-embed). To change the data, open the Embed and edit the height and y of each rect: bar height = value ÷ axis maximum × 280, and y = 294 − height. Update the desc text too, so screen readers read the new values.

How to Edit GSAP Animations

All animations are Webflow Interactions built with GSAP. Open them in the Interactions panel. Every one respects reduced motion.

Element Map

Interaction
Trigger
Animated selector
What it does
Rise cover and roll figures on load
Page load
.cover-title, .cover-lede, .cover-actions, .statement, .figure-roll
The headline, text and statement rise in; figures roll up from a mask.
Light figure words on scroll
Scroll, scrubbed
.figures-giant
Each word of the giant sentence lights from mint to white as you read.
Grow chart bars on view
Scroll into view
.chart-plot
The chart grows from the baseline.
Fill timeline rule on scroll
Scroll, scrubbed
.timeline-fill, .timeline-when, .timeline-marker
The rule fills left to right and each step lights up.
Fill reading line on scroll
Page scroll
.nav-progress
The thin green line under the nav shows reading progress.
Loop register strip and pause on hover
Page load, hover
.register-track
The registers strip scrolls in a loop and pauses on hover.
Play client area sign and upload on view
Scroll into view
.portal-cursor, .portal-sign, .portal-signed, .portal-upload-fill
The cursor signs the return and the upload bar fills.
Uncover case photos on view
Scroll into view
.case-photo
Case photos fade and settle into their frame.
Zoom office photo on hover
Hover
.office-photo
The office photo zooms in slightly.

Customizing Key Variables

Select the interaction, then the action, and change these values:

Setting
Value used
Duration
0.6 to 0.8 s on reveals; 48 s on the register loop
Ease
expo.out on reveals; linear (none) on scrubbed scrolls
Start
top 85% for reveals; top 80% to bottom 45% for the scrubbed sentence
Stagger
0.045 s between figures; 0.08 s between words

Removing GSAP Animations

  • Open the Interactions panel and delete the interaction, or remove its trigger.
  • Elements stay in their final state, so nothing disappears. The only exception is the case photos: if you delete their interaction, check that they show at full opacity.
  • To turn off motion on one breakpoint only, add a breakpoint condition (Don't animate) instead of deleting the interaction.