Financial Advisor Template

Quick Start

1. Keep the shipped structure:

Code snippet omitted: it ships with the download.

2. Replace the fictional firm name, adviser biography, address, email and telephone number in index.html.
3. Point the consultation links at your booking form, CRM or email address.
4. Replace the regulatory placeholder in the footer with wording approved for your firm and jurisdiction.
5. For production, change the last local script tag to:

Code snippet omitted: it ships with the download.

Deploy the folder to any static host.

Sections and Removal

Each section is independent. Delete its complete <section> block; the script guards every lookup and skips what is absent.

• Navigation — update the wordmark and links. Remove links to any section you delete.
• Hero — edit the promise, proof points and CTA. Its interactive route is authored inline SVG; each waypoint's data-kicker, data-title and data-copy values feed the detail panel.
• #plan — the life-plan timeline and projection. Keep this section if you want the signature interaction.
• #services — rule-separated planning areas. Add, remove or reorder <li> elements without changing JavaScript.
• #scenarios — three narrative client situations. The stepped offsets are visual only and collapse into a normal mobile stack.
• #adviser — biography, credentials and designed credential mark. Replace every fictional qualification with accurate information.
• #consultation — practical first-meeting copy and CTA link.
• Footer — contact details and regulatory/disclaimer placeholders.

If you remove #plan, no timeline code runs. If you retain it, keep the data-life-plan, data-milestone, track, handle and output hooks.

Editing Milestones

A milestone is one .milestone block:

Code snippet omitted: it ships with the download.

• data-name is used in the summary and spoken slider value.
• aria-valuemin and aria-valuemax set that milestone's range.
• aria-valuenow sets its default age.
• Update aria-valuetext, the visible [data-age-output], and the three static .age-bounds labels to match.
• Update the matching no-JS handle position and fill width in style.css/markup. Percentage is (default - min) / (max - min) × 100.
• The projection uses a shared 25–75 age scale in makeProjection() in assets/script.js. Change allMin and allMax there if your ranges fall outside it.
• data-current-age="38" on [data-life-plan] drives “years until” and the 15-year priority count. In a real site this can remain an example or be populated from a consented user input.

The SVG in index.html is the no-JS default. If you alter the defaults, update its line, band, point transforms, description and static summary so the unscripted document tells the same story. Loading the edited page with JavaScript will show the computed geometry you can copy from the inspector.

Palette

The six colours and matching RGB triples live at the top of assets/style.css:

Code snippet omitted: it ships with the download.

Every translucent colour is built from an RGB triple. Edit each hex and its --*-rgb value together. The stylesheet header records every measured foreground/surface pair, including dim text. Recheck those composited pairs after a reskin. The chartreuse signal safely carries ink or deep-blue text and is used as a bright marker on ocean blue.

Typography uses only Vollkorn for display and Alegreya Sans for reading, labels and tabular figures. Update both the Google Fonts link and the two font tokens if you change them.

Accessibility

• Hero route waypoints support hover, tap, focus, Enter/Space and arrow-key navigation; the route detail is exposed as live text.
• Every age marker is a keyboard-operable role="slider" with visible focus and current aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext.
• Arrow keys move one year. PageUp/PageDown move five years. Home and End select the bounds.
• Touch handling reads coordinates from the raw event, commits nothing on press and changes the plan only after horizontal intent is proven. Vertical swipes that start on a rail continue scrolling.
• The live summary has a concise computed label. The SVG also has a title and description; update both if milestones change.
• The skip link, semantic headings, lists, links and sufficient contrast work without animation.

Reduced Motion and No-JS

prefers-reduced-motion is honoured in CSS and JavaScript. The timeline remains fully interactive, but route, figure and recommendation updates happen instantly. Lenis is not created.

With JavaScript disabled, the complete default plan is already in the HTML: all four handles, the labelled SVG projection, summary figures, recommendation and disclaimer remain readable. The synchronous has-js class only gates reveal targets; if GSAP, ScrollTrigger or Draggable is blocked, script.js removes that class and restores the plain document.

Dependencies

Loaded as plain CDN scripts in index.html:

• GSAP core 3.15.0
• ScrollTrigger 3.15.0 — scroll reveals
• Draggable 3.15.0 — timeline rails
• Lenis 1.3.17 — optional smooth scrolling

Lenis is optional. Delete its CDN tag and native scrolling continues to work. GSAP, ScrollTrigger and Draggable are required for enhancement; if any is unavailable, the static fallback remains.

Disclaimer Guidance

The shipped language deliberately avoids promised outcomes and describes the projection as illustrative. Before publishing:

• replace all fictional regulatory, qualification and contact details;
• have a compliance professional review the hero claims, service descriptions, CTAs and footer;
• state the firm's authorised status, complaints route, privacy policy and company details where required;
• keep the timeline disclaimer near the interaction;
• do not relabel the timing band as expected returns or present it as a personal forecast without an appropriate, reviewed advice process.

This template is a website starting point, not financial, legal, tax or compliance advice.