Loam

II — What was decided

1. 01

   Mobile is the base case, not a breakpoint.

   The stylesheet is written for a phone first and widened at larger sizes. The tray docks to the bottom of the viewport with the safe-area inset respected, filter chips scroll sideways, and every control clears 40 to 44 pixels.

2. 02

   The tray is the spine.

   Tap Add and the card marks itself, a badge counts what is on the tray, a toast confirms in words, and a docked bar appears with a live total. The bar opens a sheet with quantity steppers, per-line removal, a note to the counter, the total, and a pickup estimate computed from the ticket: four minutes plus one per item.

   CheckState persists between visits and is re-validated on load — anything no longer on the menu is dropped. Nothing is ever charged.

3. 03

   Every figure is computed.

   Line prices, totals, the pickup time, the item counts in the copy — all of it comes from one catalogue file. Change a price there and the whole site follows. The currency is a single constant at the top of that file.

4. 04

   Service hours are real.

   Whether the door is open, how long until it closes and when it opens next are derived from the hours, not written by hand — and the kitchen keeps its own clock. Plates outside kitchen hours render dimmed and disabled, labelled with the kitchen’s own next start.

   CheckThe café’s opening and the kitchen’s are different clocks, and the site never conflates them.

5. 05

   One accent, and one “yes”.

   Ember is used with discipline: kickers, the price on the tray, the primary button. A single green is reserved for genuine yes states — the open-now dot and a card that is on the tray.

   CheckContrast was audited across 25 colour pairs; the tightest is 5.41:1, past AA.

6. 06

   Every state change says something.

   A toast, a badge, a count or a sentence. Reveals rise 14 pixels on a soft ease and never keep their opacity in a keyframe; injected markup is rescanned so nothing arrives invisible.