Phase 1 · Skeleton
Every value below is copied from the compiled Webflow bundle incapture/css/ or the FAN Site 2026 palette, not chosen. This page renders them at real size so parity can be judged by eye rather than by diff.
The two outlined swatches are the pair that has already been swapped once.teal-light #6fd0d0 is the bright accent for dark backgrounds;teal-tint #e6f5f5 is the pale section wash. They are named by function so it cannot happen again.
Roboto, self-hosted as a variable font. Webflow also loads Inter, which is referenced zero times in 123KB of CSS, so it is not carried over.
Only the steps that genuinely repeat are tokens. Resize the window: all four are fluid. Sections with bespoke sizes keep them; they are listed at the foot of tokens.css so a later pass does not tidy them away.
A boutique RIA platform
You can vote with your feet.
Independence, without the isolation
Keep your clients
Breaking away from a wirehouse or broker-dealer? See how First Advisors National helps advisors go independent and keep their clients, economics, and brand.
The 300 weight is what gives the site its thin editorial feel. Losing it changes the character of the whole thing.
We never forget
This section is the rhythm. Vertical padding isclamp(64px, 8vw, 104px), the wrap is 1180px max withclamp(24px, 4vw, 46px) gutters. The tinted band behind this text is --fan-surface-teal; the one above is--fan-surface-warm.
Hover both. The lift uses --fan-ease-lift; the pill and its shadow are the signature teal elevation, not a neutral grey drop.
34ms cubic-bezier(.2,.7,.3,1) with the teal panel shadow.
16px is the dominant card radius, 8 uses in the bundle.
One per page, all verbatim. They sit close enough to each other that eyeballing a replacement looks right and is not, so they are pinned as tokens.
--fan-hero-home--fan-hero-indep--fan-hero-how--fan-hero-story--fan-hero-advisors--fan-hero-faq--fan-hero-contact--fan-hero-baseReset, element defaults and the two layout primitives now live inbase.css. Two Webflow scripts are absorbed into it and stop existing: fantype2026 (the wrap guards below) andfanlinkfix (the iOS tel: and mailto: colour override).
h1, h2, h3text-wrap: balanceappliedptext-wrap: prettyapplied.wrapmax-width 1180pxapplied.sectionpadding-block 104px at 1440appliedConfirmed by reading computed style in the browser, not by inspecting the source. Worth knowing: I could not make balance change a single line break in Chromium 151, headed or headless, even on trivially balanceable text, although it resolves correctly to text-wrap-style: balance. It is carried anyway because it is exactly what the live site ships today, so it is parity either way, and it costs nothing.
fantype2026 enumerated ten class names because Webflow could not rely on the markup. We own the markup, and all ten render as a paragraph, so a single element selector covers the list and the script disappears. Press Tab to see the focus ring, which is new: the live site only ever styled focus on form fields, in an off-palette blue.