Trelane

What it is

A complete one-page site for a freight forwarder: a rotating dotted globe and fourteen destinations, a promise backed by counters, a loading yard where a reach stacker places a container, a truck crossing the screen, a road seen from above, a container ship, six services, testimonials, partner marks, insights, an FAQ and a full contact footer.

The page is deliberately cinematic without becoming a black box. The globe is drawn on a 2D canvas, the long loading sequence is driven by one scroll progress value, and the service rail remains a native scroll-snap carousel. There is no framework, no CDN and no build step: open index.html and the whole experience runs locally.

Every source stays readable and commented. It is a template to study, rename and reshape, not a compressed demo that only works on its original host.

What you change first

The colours — seven lines

Right at the top of assets/css/style.css:

--ink:        #111111;  /* text and dark panels */
--paper:      #ffffff;  /* light sections */
--surface:    #f4f4f4;  /* raised light surfaces */
--brand:      #3a00cc;  /* accent on white */
--brand-deep: #2a0099;  /* hover on white */
--brand-lift: #8a6bff;  /* accent on dark */
--signal:     #ff8a00;  /* globe routes and pins */

The accent comes in three values because one colour cannot keep enough contrast on white, black and photography at once. Change the trio together; --signal is separate because the amber routes must remain legible against the blue globe.

The name

Search for “Trelane” in index.html. No CSS class carries the brand name, and the logotype is type rather than a bitmap: a find-and-replace cannot break the layout.

The sizes

The complete type scale lives in the token block and is rebalanced only at the main breakpoints. Change --h2 once and every section heading follows; individual headings do not carry one-off media queries.

The fourteen effects, and how they’re built

The original timings and easing curves were measured, then rebuilt with small browser primitives. The long scenes share a single progress coordinate, so the crane, container, road, truck and ship stay aligned at every viewport size.

What you should know

• No external requests. Fonts, images, scripts and the globe data all live inside the template folder.
• Scroll reveals can't hide the content. The hidden state only exists after the enhancement script has run. With JavaScript removed, all 23 headings remain visible and all eight questions can still be opened.
• Zero inline styles, zero inline scripts. Verified by serving the folder with the strict policy from _headers, not assumed.
• The long scenes are measured. Automated checks verify that the globe stays inside the frame, the load touches the hook and stack, and the truck and ship remain visible across landscape, portrait and mobile formats.
• The body text is readable. It was raised to 16 px instead of reproducing the source’s 13.3 px body copy.
• Accessibility: skip link, announced menu state, native FAQ, keyboard-ready rail, visible focus, decorative scenes hidden from screen readers, and a complete reduced-motion state.
• Responsive checked at 390, 1440 and 2560 px, on load and after scrolling all the way down, with no horizontal overflow.

What isn't perfect

Better said here than left for you to find out.