Instructions

Navbar

Component placed directly in the Body, outside page_wrapper, because it stays fixed to the top of the screen.

page_wrapper and page_content

Wrap everything else on the page. Only the navigation sits outside page_content, so sections and the Footer go inside it.

main

Holds the page sections. The Footer component sits after main, still inside page_content.

New pages

Duplicate an existing page, or copy the Navbar, page_wrapper and Footer from Home, then add your sections inside main.

Color

Brand, text, line and border colours. Espresso, Paper and Lilac set the overall look.

Font Family and Font Weight

Serif (Newsreader), Sans (Instrument Sans) and Script (Caveat), with weights from Light to Semibold.

Font Size, Line Height and Letter Spacing

Every text size in the template. Sizes switch automatically on smaller screens through the Tablet, Mobile Landscape and Mobile Portrait modes.

Spacing and Radius

Spacing from Tiny to Extra Giant, section padding and the page Gutter, plus corner radii. Section padding and the Gutter also change per breakpoint.

Base styles

Body, headings, paragraphs, links and lists are styled with these variables, so new text you add already matches the template.

Change a font

Upload the new font in Site settings → Fonts, then set the matching Font Family variable to it. Keep the weights you use (300 to 600).

Button

Props: Text, Link and Variant. Use Primary or Ghost on light backgrounds, Light or Line on dark ones, and Nav in the navigation bar.

Navbar

Logo, links, phone number, the Book a free call button and the tablet and phone menu.

Footer

A statement, email and phone with an availability note, four link columns (Visit shows the local time), social links, a back-to-top button and the large Verdix wordmark, which is plain text you can retype.

CTA

The closing band on Home, About, Practice Areas, Case Studies, FAQ, Pricing and the Case Study page. Props: Title, Lead and Image (a torn-paper picture about 900 px wide). The two buttons inside are Button components; edit them inside the CTA to change them on every page.

Logo

The Navbar holds two logo images: the light one shows over dark sections and the dark one over light sections. Replace both and keep their alt text set to your brand name. The Footer wordmark is text.

Submissions

Arrive in Site settings → Forms and are emailed to the addresses you add there. Webflow forms only send on a published site.

Fields

Name, Email, Topic, Message and the consent box are required; Phone is optional. Each label is linked to its field through the for attribute, so keep the two in step if you rename a field ID.

Topic list

Select the "What is it about?" dropdown and edit its options in the settings panel.

Messages

Select the form and switch its state to Success or Error in the settings panel to edit the thank-you and error messages.

Fee guide

Each practice area is a card (vx_price-card). Each service is a row (vx_price-row) with a name, a short note and a price. Duplicate a row to add a service or delete one to remove it. On phones the cards become a swipe carousel automatically. The three cards at the top are the same fee cards as on Home, so edit their text and button links the same way.

FAQ questions

Each question is an accordion item (vx_faq-item). The question is in vx_faq-q and the answer in vx_faq-text. Duplicate an item to add a question; it opens and closes automatically.

data-vx-theme

Every section has this custom attribute set to dark or light. When a section passes under the navigation bar, the bar switches to match. Give every new section one of the two values.

See-through bar

The bar is frosted glass: a blurred layer (.vx_nav ::before) and a tint in the current theme colour (::after, opacity 0.55) fade out towards its bottom edge, so content shows through as you scroll.

Insights

Feeds the "Notes on work and the law" list on Home (newest three posts by Published date), the Insights page (the newest post as a large card, then the rest) and the Insight template page. Fields: Summary, Cover image, Cover image alt text, Category, Published date, Reading time, Body and Meta description. Every field has a short help text in the CMS.

Practice Areas

Feeds the Practice Areas page (sorted by the Order field) and the Practice Area template page: header, photo, Body text, author box and a card for every area. Each Home “Learn more” button links to its area page, so update that link if you rename a slug. Fields: Summary, Image, Image alt text, Body, Order and Meta description (the page’s search description, 150 to 160 characters).

Case Studies

Feeds the Case Studies page and the Case Study template page. Fields: Client, Client detail, Area, Summary, Outcome, Result and Result label (the large number on cards and the template), Timeline, Fee, Client quote with Quote name and Quote role, Cover image with Cover image alt text, Body, Featured (turn it on for one item to show it in the large card at the top of the Case Studies page), Order (lower numbers are listed first) and Meta description (the template page’s search description, 150 to 160 characters).

data-vx-reveal

Fades the element up once when it scrolls into view.

data-vx-stagger

Does the same to each child of the element in turn, such as cards in a grid.

data-vx-float

Makes the hero card and the statement coin float gently up and down.

data-vx-spin

Turns the coin in the statement section as it scrolls past.

Reason cards

In "Legal advice, without the runaround" the cards move on by themselves every autoplay seconds (2 by default, 0 turns it off) and pause while a visitor hovers over or focuses the section. The pause button after the dots stops and restarts them. The dots jump to a card and show its figure; using a dot, dragging the cards with a mouse or scrolling them stops the autoplay. The last stop always starts a card at the left edge; cards that slide past it fade out. The section fades from dark to light as it scrolls in, when the section above it is dark.

Client quotes

The white panel holds one quote per client with the matching photo beside it. The dots switch quotes; they also move on by themselves every quotes seconds (4 by default, 0 turns it off) and pause while a visitor hovers over or focuses the section. The pause button after the dots stops and restarts them, and using a dot stops the autoplay too.

From first call steps

Each step, 01 to 04, shows its own photo and case card. The steps move on every stepTime seconds (5 by default, 0 turns it off) while a line fills under the active step. Hovering pauses it, the pause button under the list stops and restarts it, and clicking a step opens it and stops the autoplay. Set each card’s progress bar with its data-vx-progress attribute, a percentage.

Footer

The large wordmark rises into place as the footer scrolls in, and the dot beside "Taking new cases" pulses. The round arrow button scrolls back to the top. Any element with data-vx-clock set to a time zone, such as Europe/London, shows the current time there; its own text shows until the script runs.

FAQ

Add data-open="true" to an FAQ item to show it open when the page loads.

Pinned sections

On screens 992 px and wider, Practice areas and How I work pin while you scroll. In How I work, each step slides its title to the middle of the list, fades in its own photo and card, and fades the other titles to the opacity set by dim (0.46 keeps WCAG AA contrast). Change the step length with stepScroll. Smaller screens show both sections as plain lists.

Settings

The KNOBS block at the top of the script sets the menu, FAQ and fade speeds, the How I work step length and dim level, how long each reason card, client quote and step stays (autoplay, quotes and stepTime), and how far and how fast the hero card and the coin float (float and floatTime, seconds per float up or down).

Remove motion

Don’t delete the script: it also runs the phone menu, the FAQ and the sliders. See How to Edit GSAP Animations below for safe ways to turn effects off.

Element map

• .vx_faq-item, .vx_faq-row and .vx_faq-a: the FAQ accordion (module 2).
• .vx_nav, .vx_nav-toggle, .vx_menu and [data-vx-theme]: the navigation colour switch and the tablet and phone menu (module 3).
• .vx_areas, .vx_areas-visual, .vx_area and .vx_areas-slide: the pinned practice-area pictures on screens 992 px and wider (module 4).
• .vx_method and its -title, -card, -blurb and -photo children: the pinned How I work steps on screens 992 px and wider (module 5).
• .vx_steps, .vx_step, .vx_steps-photo, .vx_steps-card, .vx_step-bar and [data-vx-progress]: the From first call steps (module 5b).
• .vx_why, .vx_why-track, .vx_why-card and .vx_why-dot: the Legal advice cards (module 6).
• .vx_quote, .vx_quote-slide, .vx_quote-image and .vx_quote-dot: the client quotes (module 7).
• .vx_autoplay: the pause and play button of the three sliders.
• [data-vx-reveal], [data-vx-stagger], [data-vx-float] and [data-vx-spin]: fade-ups, staggered fade-ups, the floating hero card and coin, and the coin spin (module 8).
• .vx_footer-word, .vx_footer-dot, .vx_footer-totop and [data-vx-clock]: the footer wordmark, pulsing dot, back-to-top button and local clock (module 9).

Change timing

var K = {
  fade: 0.6,        // cross-fade time of photos, cards and quotes
  autoplay: 2,      // seconds per Legal advice card (0 turns autoplay off)
  quotes: 4,        // seconds per client quote (0 turns autoplay off)
  stepTime: 5,      // seconds per From first call step (0 turns autoplay off)
  stepScroll: 0.7   // screen heights of scrolling per How I work step
};

Fade-up speed and start

gsap.from(el, {
  autoAlpha: 0, y: 28,
  duration: 0.8,                  // seconds
  ease: EASE_OUT,                 // "power3.out"
  scrollTrigger: { trigger: el, start: "top 88%", once: true }
});

Easing

var EASE = window.CustomEase
  ? CustomEase.create("verdix", "0.38,0.005,0.215,1")
  : "power3.inOut";

Turn off one effect

  accordions();   // FAQ open and close
  areas();
  method();
  steps();        // From first call steps
  nav();          // navigation colour and phone menu
  why();          // Legal advice cards
  quote();        // client quotes
  motion();       // fade-ups, floats and coin
  // footer();    // turned off: wordmark rise, dot pulse and clock stop
  wire();

Removing GSAP Animations

Reduced motion

Visitors whose device asks for reduced motion get no fade-ups or floats; the pinned sections and sliders switch instantly instead of fading, and the three sliders start paused. The dots and the play button still work.

Replace an image

Select it, choose a new image in its settings and write alt text that describes it. Upload WebP or AVIF files at about twice the size they show on screen (about 2600 px wide for full-width photos) and keep each file under 150 KB; AVIF keeps large photos sharp at that size.

Home hero

The hero card holds two photos: vx_hero-image, the wide photo shown on tablets and desktops, and vx_hero-portrait, a portrait crop shown on phones (767 px and narrower). Replace both, give them the same alt text and keep the face in the top third of the portrait so the headline does not cover it. The phone photo loads first and the wide one loads lazily, so phones never download it.

How I work images

Each How I work step has its own rounded photo, shown whole inside its frame. Swap any of them for your own; a WebP or PNG with rounded corners on a transparent background keeps the same edge.

Decorative images

The cut-out photos use empty alt text so screen readers skip them. Keep it empty if you swap them.

Photo tone

Every photo is graded to one warm, low-key tone: soft contrast, low saturation and warm brown shadows. Grade new photos the same way so they sit well beside the Espresso and Paper colours.

Client portal illustration

The client portal section on Home (document uploads, private messages, a case timeline and fees) is a designed illustration, not a working feature, and no portal comes with the template. A real portal needs a client-portal or practice-management service with secure log-ins, file storage and messaging, linked from the section’s button or built in by a developer.

Share images

Each page has its own 1200 × 630 JPEG for link previews on LinkedIn, X and other sites, set in Page settings → Open Graph image. Replace them with your own. The Insight, Practice Area and Case Study template pages use their listing page’s image, because link previews need JPEG or PNG and the CMS photos are AVIF or WebP.