Nautical tourism · Light

Charter

A whole day told in hours: drone shots tied to the scroll with the time ticking in the corner, titles that mix calligraphy and condensed serif, and then the boat's technical blueprint in midnight blue and a clock-dial that turns into a price table on cream paper.

Palette

--bg#F4EFE6
cream paper of the itinerary and price sections
--night#0B2834
midnight blue of the boat blueprint and the dial
--accent#2BB5A0
clock arc, blueprint dots, active tab
--accent-2#E0763C
outlined booking button, route on the map, milestones
--text#1A1F22
headlines on paper
--text-light#F6F2EA
headlines over video and midnight blue
--text-2#63675F
captions, inactive dial hours (5.0:1 on paper; #8FA6AE on --night)

Typography

Display: condensed transitional serif, 400, normal case, tracking -2%, clamp(40px, 4.4vw, 72px), paired with a calligraphic script for the opening hour/expression of the title (same size, 15% larger) — suggestions: Instrument Serif / Newsreader Condensed + Pinyon Script / Great Vibes
Body: neutral grotesque 400, 11–13px, line-height 1.5 — suggestions: Inter / Manrope
Support/labels: grotesque 9px UPPERCASE tracking 0.2em for places, dimensions and blueprint captions; digital clock in tabular-nums — suggestions: Inter / IBM Plex Mono
Treatments: title as "calligraphic hour + serif phrase ending in an ellipsis"; large digital clock in the corner; price in condensed serif at the center of the dial.

Sections

Nav — icon + letter-spaced name on the left; 4 small links and an outlined "book" button on the right.
Hero / pinned day — full-screen drone video (four shots: morning from above, midday from the side, sunset from astern, night with underwater lighting); calligraphy+serif title at the bottom left, 2-line caption, location as a label on the right; digital clock at the bottom right; hour ruler at the bottom.
Night dial — midnight-blue background; a porthole-like circle with the last scene inside and minute marks around it; large time below.
The boat — calligraphy+serif title, text on the right, tabs (flybridge / deck / cabins) and a technical blueprint of the boat in light line work on midnight blue with room callouts; then spec numbers.
Itinerary — on paper: list of times with places on the left and an illustrated sepia-toned map with a dashed orange route on the right.
Price — large arc dial with the hours of the day and marked events; price in the center; calligraphy+serif title on the left; text and orange outlined button on the right.
Closing — wide sunset photo with a calligraphic title emerging.

Motion and interaction

Scroll-tied day: pin ~400vh, canvas frame sequence covering 4 shots; digital clock interpolates 07:00 → 22:00; hour ruler fills.
Title swap: in each shot, the calligraphy writes itself on (mask left to right, 600 ms) and the serif phrase rises in lines.
Porthole: scroll → the video closes into a circle (clip-path circle 150%→18%) with marks rotating.
Blueprint: tabs switch the deck; line work draws with stroke-dashoffset; turquoise dots pulse; callouts enter with a line.
Route on the map: scroll scrub → dashed orange line advances between stops; list item lights up.
Price clock: scroll → turquoise arc grows from 7h to 22h (stroke-dashoffset) with the triangular hand sweeping along; events light up as they are reached.

Components

Outlined button: 1px border, 2px radius, 10px text; orange version on paper.
Digital clock: tabular-nums 11px, white, bottom right corner.
Hour ruler: 1px line with markers and fill.
Mixed title: word/hour in script + phrase in condensed serif.
Blueprint callout: 6px turquoise dot + 1px line + 9px label and subtitle.
Itinerary row: mono time + place, 1px divider, active in orange.
Dial: circle with 60 marks, 3px progress arc, event labels at the hours.