Style guide

CSM design system

Every colour, type style, button and component on chauffeurservicemelbourne.au, and the class that produces it. Built to Sahil’s WordPress Build Standard v1.0: colours are Customizer tokens, components are GenerateBlocks Pro global styles on the up- prefix, nothing lives in Additional CSS.

Registered records: 35. Compiled file: /wp-content/uploads/generateblocks/style-global.css. Private page, not indexed.

Colours

Set in Appearance → Customize → Colors → Global Colors. Every record references these as var(--token), never a typed hex, so a rebrand is one Customizer edit.

–accent

#1070d1
Brand blue. Buttons, links, the CTA band, list markers.
–accent-2

#1070d1
Second accent. Currently the same blue; reserved for hover states.
–base

#f0f0f0
Tinted section background (up-section–band, callouts, table header).
–base-2

#F7F7F7
Hairlines and borders on cards, table rows.
–base-3

#ffffff
White. Card faces, text on the accent band.
–contrast

#121212
Headings and button hover.
–contrast-2

#444444
Body text.
–contrast-3

#757575
Muted text: meta, taglines, list metadata.

Typography

Heading sizes come from the Customizer. The classes below adjust spacing and weight only.

H1 · the page title at the top of this page is the H1 sample; one per page, from the title element or the hero, class up-section__headline

H2 section heading

h2.up-section__headline · every section title

H3 card or item heading

h3 · inside up-who, up-steps, up-callout; styled by the parent record

Tagline label

p.up-section__tagline · uppercase kicker above a heading (border uses –accent-3, not yet defined on CSM)

Lead paragraph, 1.25rem, semi-bold, muted.

p.up-section__text--lg

Body paragraph, 1.125rem. This is the default for all running copy on the site.

p.up-section__text

Small paragraph, 1rem, for footnotes and table captions.

p.up-section__text--sm

Meta text, 0.875rem, muted, semi-bold. Used for these labels.

p.up-card__meta-text

Buttons

Two button styles carry the site. The three up-button--* records are inherited from Chauffeur Link and available if a page needs them.

Primary button Outline button Tertiary button

a.up-btn · a.up-btn.up-btn--line · a.up-btn.up-btn--tertiary (card links: text + arrow, no box) · hover: –contrast

CL primary CL secondary CL tertiary

a.up-button--primary · a.up-button--secondary · a.up-button--tertiary (from CL, unused on CSM so far)

Sections and layout

This section is a plain section.up-section. The grey ones above and below are section.up-section.up-section--band. Alternate them down a page. Inside every section sits one div.up-container, the only width authority (max-width from the Customizer container width, 20px gutters).

Padding: 3rem 2rem on desktop, 6rem 1.5rem under 768px (inherited from CL, worth revisiting). Records: up-section, up-section–band, up-container, up-section__inner (CL alias of container).

Hero

div.up-hero with .up-hero__body and .up-hero__img children. Two columns that wrap at 360px. The section supplies the vertical rhythm; the hero has none of its own.

Hero heading

Hero body copy, one or two paragraphs, then the action row.

Get a fixed quote See the fleet

Cards

ul.up-who · auto-fit grid, 240px minimum, white faces with a hairline. Children are li with an optional icon (span.gb-shape.ico, two-tone SVG on a –base tile: .b grey outline on white, .a accent stroke, .c accent dot), an h3, a p and optionally an action row with a tertiary button.

Fixed price

One quoted figure that includes GST, tolls and airport parking.

Learn more
Professional drivers

Safe Transport Victoria accredited, know the airport and the venues.

Learn more
On time

Flight tracked, traffic planned, at the door when it matters.

Learn more

Steps

ol.up-steps.up-steps--4 · numbered process cards, four across, two on tablet, one on phones. The number is span.num.

1
Ride details

Pickup, drop-off, date, time, passengers.
2
Vehicle

Tick the classes you would consider.
3
Your details

Name, email, mobile, flight number.
4
Quote

A fixed fare in writing, reply to confirm.

Callout and columned list

div.up-callout · tinted block with an accent left rule, for a group inside a section. ul.up-docs · three-column list with square accent markers; span.meta for the muted detail. Used for the suburb directory.

Inner Melbourne

Straight down the Tullamarine Freeway and CityLink, 25 to 45 minutes outside peak.

Melbourne 28.9 km, 33–43 min, from $124
Southbank 32.5 km, 30–40 min, from $131
Docklands 27.7 km, 28–38 min, from $123
Carlton 27.1 km, 32–42 min, from $123
Richmond 38.7 km, 39–49 min, from $142
Fitzroy 27.9 km, 33–43 min, from $123

Table

div.up-tscroll wrapping a core table block with class up-rates. Scrolls sideways on phones instead of breaking the page. GP’s table borders are zeroed inside the record.

Vehicle	Passengers	From (CBD)
Executive Sedan	3	$124
Luxury SUV	4	$145
People Mover	6–7	$171

FAQ accordion

div.up-faqwrap wrapping core details blocks. Native accordion, no script. The plus and minus are literal characters (RULE 4.5).

Is the price fixed?

Yes. Quoted before you book, tolls and GST included.

What if my flight is late?

We track the flight and move the pickup. No waiting charge.

CTA band: section.up-redband

Get a fixed quote

Fleet slider

div.up-fleet · a scroll-snap track of vehicle cards with round prev and next arrows. Swipes on a phone and drags on desktop with no script; the arrows are wired by a small site-wide footer script. Card: image, class name in the accent, models, passengers, bags.

Executive Sedan

Mercedes-Benz E-Class, Lexus ES300h

1–3 passengers

2 large bags
Premium Sedan

Mercedes-Benz S-Class, Audi A8

1–3 passengers

2 large bags
Luxury SUV

Audi Q7

1–4 passengers

4 large bags
People Mover

Mercedes-Benz V-Class

4–7 passengers

6 large bags

Header menu buttons

Two menu items become buttons by adding a class to the item, no block needed. up-nav-btn is the solid pill, up-nav-btn up-nav-btn--line the outline. The records cover the desktop bar and the mobile menu, so the buttons keep their shape when the menu collapses.

Call

Book now

Live in the header of this site. Hover: –contrast fill, white text. The samples above are static copies; the real ones are menu items.

All records

Thirty-five registered global styles. Sahil’s Fremantle export will replace the twelve CSM-authored components by name; pages need no change.

Record	What it is	Used on
`.up-section`	Section wrapper, vertical rhythm	every section
`.up-section--band`	Tinted background variant	alternate sections
`.up-container`	Max width + gutters	inside every section
`.up-section__headline`	H1/H2 spacing	all headings
`.up-section__text`	Body paragraph	all copy
`.up-section__text--lg / --sm`	Lead / small paragraph	as needed
`.up-section__tagline`	Uppercase kicker	not yet used
`.up-card__meta-text`	Muted meta line	labels, this page
`.up-btn / --line / --tertiary`	Solid / outline / text+arrow button	CTAs; tertiary on cards
`.up-button--primary/secondary/tertiary`	CL button set	unused
`.up-hero (+__body __img __sub __acts)`	Two-column hero	top of every page
`.up-who`	Card grid	why us, services, testimonials, meeting points
`.up-steps / .up-steps--4`	Numbered process cards	How booking works
`.up-callout`	Accent-ruled tinted block	suburb directory groups
`.up-docs`	Three-column list	suburb directory, cost factors
`.up-fleet`	Scroll-snap vehicle card slider with arrows	fleet, home
`.up-nav-btn / --line`	Header menu item as pill button	header, mobile menu
`.up-tscroll + .up-rates (+ --figures)`	Scrollable table; –figures right-aligns numeric columns	fares, vehicle specs
`.up-faqwrap`	FAQ accordion wrapper	all FAQ sections
`.up-redband`	Accent CTA strip	page foot
`.up-phero`	Page-title band: dynamic H1 + Yoast breadcrumb (GP Element 2710)	every real page
`.up-footer`	Four-column footer grid (GP Element 2715)	every page
`.up--box-shadow / .up--border-radius`	CL utilities	unused
`.up-section__h1--xl`	White XL H1 for dark heroes (CL)	unused: white on white here

CSM design system

Colours

–accent

–accent-2

–base

–base-2

–base-3

–contrast

–contrast-2

–contrast-3

Typography

H2 section heading

H3 card or item heading

Buttons

Sections and layout

Hero

Hero heading

Cards

Fixed price

Professional drivers

On time

Steps

Ride details

Vehicle

Your details

Quote

Callout and columned list

Inner Melbourne

Table

FAQ accordion

CTA band: section.up-redband

Fleet slider

Executive Sedan

Premium Sedan

Luxury SUV

People Mover

Header menu buttons

All records