Day Arc Locations

Quick Start

1. Copy the <section class="dal" ...> element from index.html, between the copy from here and copy to here comments. Keep the small inline <script> just inside it (see Boot gate).
2. Copy assets/style.css, assets/script.js and assets/img/.
3. Load the fonts, the stylesheet and the scripts:

Code snippet omitted: it ships with the download.

GSAP and Flip are optional: without them every change is instant. Without script.js the section shows every place with its full address, links and static hours. There is no build step.

Everything in index.html outside the section (the page background in the <style> block) is demo context only.

Make it yours

Brand controls

Everything visual reads from variables on the section root in assets/style.css:

Variable	Default	Controls
--dal-ground	#0e2130	Section background
--dal-ground-2	#13293b	Chips and selects
--dal-ink	#edf0ea	Main text; the arcs are tints of it
--dal-muted	#a6b6bf	Secondary text
--dal-rule	rgba(237, 240, 234, 0.18)	Hairlines; keep it a tint of --dal-ink
--dal-accent	#ffb25e	Suns, lit hours, active chips, primary link
--dal-accent-ink	#1c1206	Text on the accent
--dal-closed	#6f8796	Rings of closed suns on the arc
--dal-font-display	Instrument Serif	Heading and place names
--dal-font-text	Martian Mono	Everything else
--dal-max	1360px	Content width
--dal-gutter, --dal-gap	fluid	Side padding and grid gap
--dal-radius	3px	Chips, selects and buttons

A light rebrand, set on the root or in your own stylesheet:

Code snippet omitted: it ships with the download.

Check the contrast of your own colours: --dal-muted on --dal-ground, and --dal-accent-ink on --dal-accent, both need at least 4.5:1.

Text and heading

The brand line, heading, lede and fine print are plain HTML in the section header and footer. The section heading is an h2 and each place name an h3; change the tags to suit your page, the styles hang off the classes. The <em> in the heading sets its second line in italic accent colour; remove it for a single-colour heading.

Locations

Each location is one <li data-dal-place> in the <ol data-dal-list>. Add, remove or reorder them freely; the filters, clocks, suns, counts and statuses are all derived from these items. Two to about nine read well in the grid. With a single location the filters and toggle button step aside and the visit details show open.

For each location, edit:

• id on the <li>, and the matching aria-controls / visit id and name id (keep them unique on the page).
• data-area: the area it is grouped under in the City filter and clocks (a city, neighbourhood, or region).
• data-tz: its IANA time zone, such as Europe/London, America/New_York, or Australia/Sydney. Open and closed states are computed in this zone regardless of visitor timezone.
• The area line, name, pitch, and amenities list. Each <li data-offer="key">Label</li> becomes a filter chip; locations sharing a key share a chip.
• The visit block: address, transit route, and booking/direction links.
• The hours table (below).

Hours

Each row of the hours table is read by the script and also shown to people:

Code snippet omitted: it ships with the download.

• data-days: any of mon tue wed thu fri sat sun, separated by spaces or commas.
• data-open / data-close: 24-hour local times. 24:00 means midnight at the end of the day. A close earlier than the open runs past midnight: 15:00 to 02:00 on Friday keeps the place open until 02:00 on Saturday morning, and the Saturday arc lights 00:00 to 02:00.
• data-closed: a closed day (optional; days with no row are closed too).
• Two sessions on one day (a lunch break) are two rows with the same day.

The visible text in <th> and <td> is what people read without JavaScript, so keep it in step with the attributes. The caption names the zone the hours are written in.

Links

Directions points at a Google Maps directions URL with the place's latitude and longitude, and Book a session at https://example.com/book/.... Both are examples: replace them with your own. Any map or booking service works; nothing is embedded and no API key is needed.

Photos

Each place has one photo in assets/img/, in two sizes:

Slot	Files	Size	Notes
Deptford Creek	deptford.webp, deptford-sm.webp	960x1200, 560x700	4:5 portrait
Hackney Wick	hackney.webp, hackney-sm.webp	same
Islands Brygge	brygge.webp, brygge-sm.webp	same
Nordhavn	nordhavn.webp, nordhavn-sm.webp	same
Sørenga	sorenga.webp, sorenga-sm.webp	same
Hernesaari	hernesaari.webp, hernesaari-sm.webp	same

To replace one, point the <img> src and srcset at your file and rewrite its alt. Any aspect ratio works: the frame is always 4:5 with an arched top, and the photo is cropped to fill it (object-fit: cover). If your subject is off-centre, set its focal point on the image:

Code snippet omitted: it ships with the download.

A single file is fine; drop the srcset and sizes if you only have one size. Keep the arch clear of the subject's head when you choose a crop: the top fifth of the frame is curved. The first two photos load eagerly and the rest lazily; if you reorder the places, move loading="eager" to whichever are in the first row.

Behaviour and options

• The arc is drawn by the script into [data-dal-dial]: midnight at both ends, noon at the top, dotted before 06:00 and after 21:00. There is one indicator per location at its local time; locations in the same zone stack inward. When a location is expanded, its active operating window highlights on the arc.
• Each arched photo carries a ring with that location's daily hours and an indicator at local time; in the expanded visit view the ring gains 06, noon, and 18 marks.
• Filters: City (single selection), Amenities (multi-match), and Schedule (Any time, Open now, or a specific day and time). The time list is the <select data-dal-time> in the markup; values are minutes after midnight.
• Open now statuses and markers refresh every 30 seconds.
• Hours & access expands one location at a time across the full row; opening another closes the active one.

API and events

Code snippet omitted: it ships with the download.

destroy() stops the clock, disconnects its observers, removes its listeners, generated filters, arcs, rings and suns, reverts its own GSAP work and returns the markup to the no-JavaScript state. It touches nothing outside its root. Every [data-day-arc] on the page initialises independently.

Boot gate

The one-line inline script inside the section adds dal--pending before the first paint, so the visit details collapse without a jump when the script is coming. If script.js has not taken over after four seconds (blocked, failed or slow), the class is removed and every visit plan is shown again. Remove the inline script if your policy forbids inline scripts; the section still works, with a brief reflow on load.

Accessibility and integration

• Hours & access is a native button with aria-expanded and aria-controls; closed visit plans are inert and aria-hidden. Filters are native radio buttons, checkboxes and selects in labelled fieldsets, and the result count is a polite live region.
• The arcs and suns are decorative (aria-hidden); every fact they show is also in text: the clocks under the heading, each place's status line and its hours table, with today's row marked.
• Reduced motion makes every change instant, including a change of preference while the page is open. Fast or reversed input settles on the last request.
• Without JavaScript every place shows its address, links and static hours.
• The layout responds to its own width (container queries named dal), so it works in a narrow column as well as full width: three columns from 1000px, two from 620px, one below. Under 1000px the heading moves under the arc; under 600px the arc drops its time labels because the clocks carry them.
• The section does not install smooth scrolling, change scroll behaviour or pin anything.

Dependencies and credits

• GSAP 3.15 and its Flip plugin, from jsDelivr. Optional.
• Instrument Serif and Martian Mono, SIL Open Font License, from Google Fonts.
• Photographs: generated concept images made for this section. They depict no real place, business or person; replace them before publishing.
• Kallio Saunas and all addresses, schedules, and links in the demo are fictional sample assets.