Law Firm

Quick Start

Upload the folder to any static host and open index.html. Keep the fifteen HTML files beside assets/ so relative links keep working. There is no build step, framework or package to install.

Serve the files over HTTP or HTTPS to see the page transitions. While editing, use any local static server (for example python3 -m http.server in the folder) and open http://localhost:8000/index.html. Opening a file straight from disk works too, but links then load pages normally without the transition.

GSAP and ScrollTrigger load from a CDN and the fonts (Rufina and Red Hat Text) from Google Fonts. Images, styles and scripts are bundled locally.

Using It With Your Own Design

1. Identity. Replace "Hollis Arden", the offices, phone numbers, email addresses and the fictional-firm note in the header and footer of each page (they are repeated in all fifteen files so each page stands alone). The footer ends on the top half of the firm name; change that word too.
2. Words. Choose the word each page opens on (see The Split Word). Short, confident words work best: SETTLED., EXPERTISE, a partner's surname.
3. Photographs. Swap the files in assets/img/ keeping the names, or change the paths, and rewrite the alt text to describe your photographs.
4. Practices and people. Rename the six practice rows in expertise.html, copy employment.html for each practice that needs its own page, and copy adaeze-okafor.html for each person who needs a profile.
5. Colour and type. Edit the colour tokens at the top of assets/style.css (see Palette). Change the Google Fonts link in each page if you change typefaces, then remeasure the two metrics described under The Split Word.
6. Enquiries. Connect the contact form to your own service before taking real enquiries (see Enquiry Form).

Everything visual lives in assets/style.css; everything interactive lives in assets/script.js, organised as one function per feature that returns early when its markup is absent. assets/page-router.js is the small page router underneath the transition (link handling, fetching, history, scroll and focus); you should not need to edit it. Delete a section from the HTML and the rest keeps working.

Pages and Configuration

File	Content
index.html	SETTLED. hero on vermilion and saffron, the firm with four figures and a studio photograph, Who we act for, practices and sectors on saffron, three people, three insights, call to action
expertise.html	Six expandable practice rows (matters, fee basis, lead partner), eight sectors, call to action
employment.html	A practice page: both-sides lists, four-step process, fixed-fee table, team, related insights
people.html	Nine people with a practice filter; ?practice=employment pre-selects a chip
adaeze-okafor.html	A partner profile: surname masthead, portrait, biography, contact, two client quotes, recent insights
insights.html	Featured article and a ruled list of eight, each linking to its article
who-owns-the-work.html	An article with author, list, pull quote and related reads
fixed-term-contracts.html, shareholders-agreement-clauses.html, lasting-powers-of-attorney.html, letter-before-action.html, leasing-a-studio.html, separating-with-a-business.html, directory-rankings.html	Seven more articles in the same layout, each with its own masthead word, byline and two related reads. To add one, copy an article, change the word and --chars, the copy and the row in insights.html
contact.html	Two offices with photographs, enquiry form

Hooks you will meet in the markup:

• data-page wraps each page's header, main and footer. Its data-word, data-label, data-tone and data-low attributes are what the transition carries while that page loads: the word, the small caps label, the colour above the seam and the colour below it (paper unless set).
• data-mast is the masthead; data-mast-top is its coloured upper part and data-mast-word the h1 the arriving word lands on. data-mast-chrome marks the header and text blocks that fade in after a landing.
• data-fit-scope with style="--chars: 8.1" sizes a split word (see The Split Word). Optional --word-max caps it (default 18rem).
• data-tone="saffron" on a link tells the transition which colour to rise in before the next page has loaded; data-low sets the lower colour (the home link uses saffron). Header links carry it already, so links to those pages without the attribute still get the right colour.
• data-actfor, data-actfor-item with data-top and data-bot colour names: the Who we act for sequence.
• data-practice on a <details> row; its id (#employment) opens it from a link.
• data-filter, data-filter-chip="employment" and data-practices="employment" on each person card: the people filter.
• data-reveal and data-reveal-group give a gentle rise on scroll; data-hero-fade and data-split-in mark the home hero's opening.

The Split Word

A split word is the same word twice. The upper copy (the page's h1) hangs from the bottom edge of its box and the lower copy (marked aria-hidden) from the top edge of its box; both place the middle of their capitals exactly on that edge. Put the two boxes on different colours and the seam runs through the word.

To change a page's word, edit the h1, the hidden copy below it and the data-word on the page wrapper, then set --chars. It is the word's width in average Rufina capitals: start from the letter count, then adjust until the page looks the same with JavaScript off (narrow letters like I and L count for less, M and W for more; SETTLED. is 7.03, EMPLOYMENT 10.67). With JavaScript the script measures the word and fits it exactly, but a close estimate matters: Back restores scroll before the script refits, so a wrong estimate shifts the restored position by the difference.

The two metrics --m (0.4935) and --cap-half (0.334) at the top of the stylesheet are Rufina's: where the middle of a capital sits in a line-height 1 box, and half a capital's height. A different display face needs both remeasured, or the seam will miss the middle of the letters.

Page Transition

Every same-origin link to a sibling .html page runs the same transition:

1. Out. A block rises from the bottom of the window: the destination's colour above, paper (or the page's lower colour) below. The colour comes from the link's data-tone.
2. Hold. The destination's word arrives in two halves from opposite sides and locks together on the seam, with its label above, while the next page is fetched and swapped in underneath.
3. In. The block splits. When the new page's masthead is in view, the coloured half shrinks until its edge sits on the masthead's seam and the word moves and resizes onto the masthead word, while the lower half drops away to reveal the page; the header and intro text then fade in. When the masthead is out of view (a link to #fees, or Back to a scrolled page) the two halves part off the top and bottom of the screen.

Back and Forward close the block from both edges instead of rising. Scroll positions are restored and the arriving page's heading receives focus and is announced.

Notes for editing:

• Pages are fetched, not reloaded, so scripts inside a fetched page do not run. Put new behaviour in assets/script.js as another init function called from initPage. Every page loads assets/page-router.js before assets/script.js; keep that order on a new page.
• The transition is the leave, hold and enter functions passed to PageRouter.create at the end of assets/script.js (raise, showWord and split); the header comment of assets/page-router.js lists everything they receive.
• Any sibling HTML file with a data-page wrapper joins the transition automatically. Add data-native-navigation to a link or container to opt out; downloads, new-tab clicks, external links and same-page anchors already behave normally.
• With the next page already fetched (links prefetch on hover and focus) a transition takes about two seconds. On a slow connection the word holds until the page is ready. A second click before the new page is in place goes straight to that page from the covered screen.

Who We Act For

On screens wider than 820px with motion allowed, the section pins for a few screens of scrolling. The first word slides into alignment as the section arrives; each further step passes the word on, cuts the seam to the next pair of colours and scrolls the next word into place. Edit the four data-actfor-item blocks: the word (twice), --chars, the caption, the practice line and the data-top/data-bot colours. On phones and with reduced motion the items stack, each on its own two colours, already aligned.

Practice Rows and People Filter

Practice rows are native <details> elements, so they open and close with or without JavaScript. With motion allowed they open as a saffron block rising from the row's base. A link to expertise.html#property opens that row on arrival.

The people filter shows the cards whose data-practices contains the chip's key, updates the count in a polite live region and writes ?practice= into the address so the filtered view can be shared. Give a person several practices with a space-separated list.

Enquiry Form

The form on contact.html collects a name, email, optional phone, nearest office, matter type and a description. It uses the browser's own validation, then shows a status message saying nothing was sent. It is not connected to anything. Set the form's action and method for your form service (Formspree, Netlify Forms or your practice management system) and remove the initEnquiry call in assets/script.js if the service handles the response page.

Palette

Token	Default	Role
--paper	#FBFAF6	Reading ground
--ink	#161514	All text, rules and outlined buttons
--vermilion	#F0603F	The firm: home, contact, calls to action (ink 5.6:1)
--saffron	#F2B441	Expertise and practice pages (ink 9.9:1)
--sage	#A8C9B0	People: index, profiles, card panels (ink 10.1:1)
--lilac	#C6B7EA	Insights and articles (ink 9.9:1)

Each colour has a matching -rgb triple; change both. Secondary text is ink at 74% (7.6:1 on paper, 5.5:1 or better on saffron, sage and lilac). Vermilion takes ink at full strength only: dimmed text fails on it. Colours are always flat fields with ink on them; the template uses no tints, gradients or shadows. A new colour needs at least 4.5:1 against the ink.

Type is Rufina for the split words and serif statements and Red Hat Text for labels, rows, buttons and body copy.

Accessibility and Fallbacks

• Real links everywhere, a skip link, visible focus, labelled form controls and one h1 per page. The lower copy of each split word is aria-hidden; the h1 carries a visually hidden continuation where the word alone would be unclear.
• The transition layer is aria-hidden. The arriving heading is focused and announced through a polite live region.
• Practice rows are native disclosures; filter chips are buttons with aria-pressed; the filter count is announced.
• Reduced motion swaps pages instantly, shows the hero and the act-for words aligned and still, and removes reveals.
• No JavaScript, an unavailable GSAP CDN or opening from file://: links load pages normally and all content is visible.

Dependencies

The demo is pinned to GSAP 3.15.0 with ScrollTrigger. Compatibility floor: GSAP 3.12+, with core and plugin on matching versions. No Lenis, no other plugins, no backend.

Images and Credits

The download contains fourteen cropped, graded WebP derivatives in assets/img/, listed with their sources in assets/img-manifest.json. Regenerate them from the manifest with the asset script used to build the template, or replace the files directly at the same names and sizes (portraits 800 × 1000, scenes 1600 × 1067).

All photographs are licensed through Pexels, which permits use in website templates. The portraits show models, not Hollis Arden's staff; the names are fictional.

File	Source	Subject
person-adaeze-okafor.webp	Pexels 36439572	Woman with curly hair laughing, black roll-neck
person-tom-brennan.webp	Pexels 37148308	Man in a dark suit and tie
person-rohan-mehta.webp	Pexels 39974547	Man in a tweed jacket
person-ruth-calder.webp	Pexels 15780889	Woman with grey hair in a black jacket
person-sofia-marquez.webp	Pexels 38197025	Woman with short hair smiling
person-daniel-asante.webp	Pexels 12311581	Man in a dark jacket
person-jia-chen.webp	Pexels 20051635	Woman in a black roll-neck, arms folded
person-niamh-doyle.webp	Pexels 12421121	Woman with hair up in a black jacket
person-geoffrey-arden.webp	Pexels 29598496	Older man with a grey beard in a suit
office-manchester.webp	Pexels 34443169	Red-brick and terracotta building, Manchester
office-bristol.webp	Pexels 31005383	Harbourside warehouses and bridge, Bristol
studio-fitting.webp	Pexels 36731577	Two women at a cutting table in a fashion studio
meeting-window.webp	Pexels 12903168	Two women planning at a window and whiteboard
designer-desk.webp	Pexels 7147665	Designer at a laptop with an open sketchbook

The portraits were converted to black and white so a mixed set of studio backdrops reads as one series against the flat colour panels; the scenes are lightly desaturated.