How the Saltbush Livestock Transport page was built

Why this converts

The concept

Saltbush Livestock Transport carts sheep, lambs and cattle out of a Wagin home yard, to the Katanning saleyards, to a Harvey district processor, or on to the eastern states. Live sheep export by sea is legislated to end on 1 May 2028; the page's single argument is that the same crate, the same crew and the same booking line already run the freight task that replaces it — farm to processor, not farm to Fremantle — without saying a political word about the decision itself.

Palette

Dawn in a Wagin loading yard: the crate is galvanised steel, the road is laterite, and the paddock in February — the season this page is written for — is bone, not green. Nothing in the palette is a farm green for that reason. Every hex and every ratio below is copied from contrast-w56.log, not hand-computed, and each token is used only on the grounds that log declares for it — a rule the map broke twice in the first draft (see Hardening, below) before it was fixed.

• Paper #F8F5EEGround · ink 15.99:1, muted 7.33:1, pindanInk 7.17:1
• Panel #EBE5D8Cards & tiles · ink 13.87:1, muted 6.36:1
• Band #21201CDark sections · paperOnDark 14.97:1
• Band hover #151411Dark hover state · paperOnDark 16.92:1
• Pindan #9C3B18The laterite road · CTA fill · paperOnDark 6.32:1
• Pindan hover #7E2F13CTA hover · paperOnDark 8.37:1
• Map land #F0EADCService-area map · ink 14.52:1, galvInk 7.14:1
• Map water #C9D6D4Lake Dumbleyung · ink 11.65:1
• Galv ink #35505CThe galvanised crate · on paper 7.86:1, mapLand 7.14:1
• Pindan ink #8E3616Warm accent text, paper/panel only · 7.17:1 / 6.22:1

Two tokens carry a hard rule the build had to earn rather than assume: pindan and markPindan are licensed on paper and panel, never on the map — the log marks pindanInk/markPindan on mapLand as a forbidden ground even though the raw ratio (5.7–6.5:1) would pass, because the palette author never declared that pairing. The two destination pins on the service-area map are therefore cased: a small paper-coloured halo sits behind each pindan dot so the colour's real ground is paper, not the map fill, and the route lines and their labels run in galvInk instead — weight and dash pattern mark Saltbush's own routes out from the background road network, not an unlicensed colour.

Type

Bitter 700 carries every heading — a slab serif out of agricultural print, set tight and in sentence case, doing the one moment of typographic bravery on the hero line (“Sheep loaded at dawn, unloaded where you said.”). Asap 400/600 carries the body and the numerals in the deck card, chosen for a geometric, legible face that holds up at the small sizes a phone screen in a paddock demands.

The deck — arithmetic and structure

Two inputs, one card: a head-count slider from 50 to 2,000 in steps of 10, and three destination buttons with approximate road distances from the Wagin yard (Katanning 56 km, Harvey district processor 195 km, Muchea Livestock Centre 265 km, all rounded). The model, stated on the page in one sentence: a B-double stock crate is four decks at 105 head a deck, 420 head a load; cartage is $8.00 a loaded kilometre with a $650 minimum a load, priced on the loaded run because Saltbush wears the empty return.

loads   = ceil(head / 420)
total   = max(loads × distance × 8.00, loads × 650)
perHead = total / head
empty   = loads × 420 − head
airCost = empty / (loads × 420) × total     ← the give-away, in dollars

The slider reaches 196 head positions × 3 destinations = 588 cells, too many to enumerate, so check-w56.mjs names twelve cells and proves four structural properties instead. All twelve are reproduced by the running page and all four properties are proved against the page's own model, not a re-derivation:

(a) Loads step only at the reachable multiples of 420

Swept across the full 50–2,000 range in the page's own model: loads increases exactly at head = 430, 850, 1,270 and 1,690 — the first slider positions (step 10) past 420, 840, 1,260 and 1,680 — and nowhere else.

(b) Total is constant inside a load band

For every destination, swept in tens across the whole range: whenever two adjacent slider positions share the same loads, they share the same total, with zero exceptions across all three destinations.

(c) Exact per-head falls inside a band and jumps up at every boundary — the displayed figure only weakly

The exact (unrounded) per-head figure is strictly lower at every position than the one before it inside the same load band, and strictly higher the instant a new load is needed. The two-decimal figure printed on the page is not: above roughly 1,300 head, two adjacent ten-head positions can round to the same cent, so the calculator's help text says the price moves “in bands, not on every notch” rather than claiming continuous movement it cannot show.

(d) Air cost is exactly zero at a full load

At head = 420, 840, 1,260 and 1,680 — every point where the truck is exactly full — the give-away figure is $0 and the give-away line is hidden, verified directly against window.__livestocktransport.

The give-away itself fires once a whole deck (105 head) is riding empty: hidden at 400 head to Muchea (empty 20), showing by 410 head (empty 110). At 200 head to Muchea the card reads $340 of this quote is empty deck and prints the full-load rate ($5.05 a head) beside the $10.60 this quote actually costs, so the farmer can see exactly what waiting for a second consignment is worth.

Why the card prints the cost of empty deck space

A carrier that prices only the loaded run has no reason to ever mention an empty deck — the invoice looks the same either way. Saltbush's card says the number anyway, because the alternative is a farmer doing the division themselves on the drive home and drawing their own conclusion about what else might be padded. Naming the air and offering to split the run with another consignment costs Saltbush a filled truck every time a farmer takes the offer; it is deliberately a worse deal for Saltbush in the short run, which is exactly what makes it worth more as a piece of copy than any adjective on the page.

Techniques

• The deck illustration is twenty <use> elements referencing two fully-painted <defs> symbols (#tickOn, #tickOff) — a <use> carries no paint of its own, so “filled” and “empty” are two separate defs, and only the hidden attribute toggles between them (el.hidden is an HTMLElement IDL property and does nothing on an SVGElement). Fill count is normalised across the whole run — illustrative of how full the trip is, not a literal seating chart.
• The service-area map is procedural SVG: a lake path, straight road lines to nine named towns, and two long dashed routes to the off-frame processor and livestock centre. Every colour on it is one the contrast log declares for the map ground.
• Motion is CSS, not a rAF loop — the route dash-offset and the give-away tick pulse are browser-timed keyframe animations, inherently wall-clock rather than frame-accumulated. Both are removed entirely under prefers-reduced-motion: reduce (they live inside a no-preference media query, so a reduced-motion visitor never loads them) and both pause via a body.paused class toggled on visibilitychange.
• Form and validation are plain HTML5 constraint validation plus a hand-rolled confirm state — no network call is made or faked; submitting swaps the form for a local confirmation panel built from the values just typed.

Local SEO we would implement for the real business

None of this ships on the demonstration page — fictional structured data in a real index is dishonest markup. For a real livestock carrier it is the first thing we would add, alongside a verified Google Business Profile, consistent name-address-phone across every rural directory, and a review feed the schema reads from rather than a hand-typed block.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Saltbush Livestock Transport",
  "description": "Livestock cartage for sheep, lambs and cattle out of Wagin, WA.",
  "url": "https://saltbushlivestock.com.au/",
  "telephone": "+61 8 XXXX XXXX",
  "priceRange": "$$",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "the real one, once it is a real business",
    "addressLocality": "Wagin",
    "addressRegion": "WA",
    "postalCode": "6315",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -33.30, "longitude": 117.35 },
  "areaServed": [
    { "@type": "City", "name": "Wagin" },
    { "@type": "City", "name": "Katanning" },
    { "@type": "City", "name": "Narrogin" },
    { "@type": "AdministrativeArea", "name": "Great Southern, WA" }
  ],
  "makesOffer": [
    { "@type": "Offer", "name": "Sheep & lamb cartage", "priceSpecification": {
        "@type": "UnitPriceSpecification", "price": "8.00", "priceCurrency": "AUD", "unitText": "per loaded km" } },
    { "@type": "Offer", "name": "Cattle cartage", "priceSpecification": {
        "@type": "UnitPriceSpecification", "price": "9.50", "priceCurrency": "AUD", "unitText": "per loaded km" } }
  ],
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "62"
  },
  "review": [
    { "@type": "Review",
      "author": { "@type": "Person", "name": "a real, consenting customer" },
      "reviewRating": { "@type": "Rating", "ratingValue": "5" },
      "reviewBody": "their words, pulled from the review feed, never written by us" }
  ]
}
</script>

What we verified, and what we dropped

The brief carved out four figures that may not be published unless verified at source: NHVAS, the Livestock Loading Scheme, effective-mass limits, and Main Roads WA figures. We could not verify a current, citable figure for any of the four inside this build, so none of them appear on the page — no accreditation badge, no mass limit, no permit reference. The trust strip instead uses years-operating, insurance and GPS-tracking claims, which are demonstration copy on a page that says plainly it is fictional. We did verify, via web search against DAFF and ABC News reporting, that the live sheep export phase-out is real legislation, that 1 May 2028 is the correct end date, and that $107 million was the transition package announced alongside the legislation in 2024 (a later announcement increased federal support further; the page quotes the figure named in the original legislation announcement, as the brief specified). The national Is it fit to load? guide is real and current (Meat & Livestock Australia / Animal Health Australia); the FAQ names it without quoting any of its numeric thresholds, per the carve-out.

Three passes

Pass 1 — Craft

Built the page, ran the 12-cell arithmetic sweep and the four structural properties against the live model, and found two real defects by looking at the rendered output rather than trusting green asserts: the give-away banner printed “of this quote” twice ($340 of this quote of this quote is empty deck — a copy-paste between the static markup and the JS string), and the three destination buttons overflowed the deck card's own border at the 1200×750 thumbnail width, because a viewport-width media query forced three grid columns onto a column that is only ~430px wide at that breakpoint regardless of viewport. Fixed the copy duplication and replaced the fixed grid with a flex-wrap layout so the buttons wrap to fit whatever the card's actual width is, at any viewport.

Pass 2 — Depth

Re-read the palette contract line by line against every colour actually used in the markup, not just the ones in the concept document, and found the map was breaking the token/ground rule twice: the two destination pins used markPindan/pindan directly on the map fill, and three text labels used pindanInk on the map fill — both explicitly marked FORBIDDEN in contrast-w56.log despite passing the raw ratio, because that pairing was never declared. Cased the two pins in a small paper-coloured halo (their real ground becomes paper, which the log does license) and recoloured every route line and map label to galvInk, differentiating Saltbush's own routes from the background road network by weight and dash rather than by an unlicensed colour. Added the second-read detail: once the give-away fires, the empty ticks in the deck illustration breathe on a slow two-and-a-half-second cycle, so a returning visitor notices the drawing is answering the sentence beside it, not just decorating it. Added a 1px lift on primary-button hover for tactile feedback.

Pass 3 — Hardening

Verified in a real headless browser rather than by inspection: prefers-reduced-motion: reduce collapses both the route dash animation and the new tick-breathing animation to near-zero duration; tabbing reaches a visible focus ring; toggling document.hidden applies the body.paused class that halts both CSS animations; and the page holds zero horizontal overflow at 320, 375, 480, 768, 1024 and 1440px. Re-ran the full arithmetic and structural sweep and the form-drive (empty submit blocks on seven required fields; a filled submit reaches the confirmation panel) after every change in this pass, all green.

What would change for a real client

The photos would be real — the actual crate, the actual yard at first light, the actual crew — replacing every procedural SVG on this page. The reviews would come from a managed feed (Google, or a review platform), not hand-written demo copy. Bookings would land in a real system rather than a browser-only confirmation: for a WA transport operator that almost always means integrating fleet telematics the client is likely already running — Geotab for vehicle tracking and driver behaviour, or MTData for fleet and livestock-run management — so the “GPS-tracked every load” trust line on this page becomes a live map fed by the client's existing hardware instead of a claim. The enquiry form would post to the client's CRM or dispatch board rather than to nothing, and the LocalBusiness schema above would ship for real, driven by the same review feed.