@charset "utf-8"; /* ========================================================================== URANGAN CARAVAN STORAGE — site.css Shared design system. One file, no framework, no resets from CDN. DESIGN STORY The yard is pale concrete with painted bay lines, eucalypt-green Colorbond sheds and a very blue Queensland sky. The repeating structural device in this system is the "bay line": a thick sun-yellow rule on the leading edge of a block, echoing the painted markings on a 9m x 3m site. Use it to mark something real (a storage option, a key fact) — never as decoration. --------------------------------------------------------------------------- COLOUR TOKENS (:root, auto-flip in dark mode) --blue #0855A6 brand blue, in use on signage. Links, headings accent. --blue-deep #063C77 pressed/hover state for blue --blue-wash #DCEAF8 pale sky tint surface --ink #0D2742 primary text + dark bands (navy, not grey-black) --ink-soft #4A5F74 secondary/muted text (AA on white and concrete) --sun #F6B52C warm accent + primary CTA fill. Always takes --ink text. --sun-deep #D4940F hover state for sun --eucalypt #7E8C5F Colorbond green. BORDERS/RULES ONLY, never text. --euc-deep #3E4A2E dark green band background, takes --paper text --euc-tint #E6EADC pale green surface --concrete #E9E7E0 pale warm-grey page/section surface --concrete-2 #D9D5CA concrete borders + dividers --paper #FFFFFF card surfaces Semantic aliases used by components (these are what flip in dark mode): --bg --surface --surface-2 --text --text-soft --line --link --link-hover SPACING / SIZING --space-section vertical padding on .section (override per modifier) --gutter page side gutter (16px floor, grows on wide screens) --wrap max content width (1200px) / --wrap-narrow (760px) --radius / --radius-sm / --radius-lg --bay thickness of the bay-line rule (6px) TYPE --font-display "Big Shoulders Display" — condensed wayfinding/depot face. Headings, the phone number, and big stat numerals only. It is narrow: safe at very large sizes on a 360px phone. --font-text "Hanken Grotesk" — round, open, high-legibility workhorse. Everything else. Never set display face below ~1.2rem. Fluid steps: --fs-xs --fs-sm --fs-base --fs-lede --fs-h3 --fs-h2 --fs-h1 --------------------------------------------------------------------------- COMPONENT CLASSES (build sibling pages against these) LAYOUT .wrap centred container, max --wrap, side gutters .wrap--narrow max --wrap-narrow, for prose pages .section a page band. Vertical rhythm via --space-section. Default background is transparent (page concrete). .section--tight reduced vertical padding .section--paper white/raised surface .section--concrete pale concrete surface .section--ink navy band, light text .section--euc dark eucalypt band, light text .section--sun sun-yellow band, ink text (use once per page) .section-head heading cluster at the top of a section .grid base grid, gap --space-5 .grid--2 .grid--3 .grid--4 column counts (collapse to 1 on mobile) .grid--split 60/40 two-column (collapses to 1) .stack vertical flow; children get --flow margin-top .full-bleed escapes .wrap to full viewport width TYPE .eyebrow short descriptive line above a heading, with leading rule. Sentence case — do not set it in tracked-out capitals. .display display-face heading treatment (applied to h1/h2 by default) .lede larger intro paragraph .measure caps line length to ~62ch / .measure--wide ~72ch .note small print / qualifier text .stat wrapper .stat__num (display face, huge) .stat__label .badge small solid label chip (.badge--sun .badge--euc .badge--blue) ACTIONS (every CTA on this site is a tel: or mailto: link — no checkout) .btn base button, 48px min touch target .btn--primary sun fill, ink text — the main call-to-action .btn--ink navy fill, white text .btn--ghost transparent, current-colour border .btn--lg larger padding + display face .btn--block full width .btn-row wraps a group of buttons with consistent gaps .link-plain underlined inline link, inherits colour CONTENT BLOCKS .card surface block, bordered .card--bay adds the sun bay-line on the leading edge .card--flat no border, surface tint only .card__media / .card__body / .card__title / .card__foot .media image wrapper, 16:9, rounded, covers .media--wide 21:9 .media--tall 4:3 .media--fill no fixed ratio; fills the height of its grid cell (use beside a column of text so no tint shows) .specs definition list of hard facts (dt/dd, ruled rows) .ticks list with drawn check marks (no icon font) .rate price block .rate__amount .rate__unit .rate__note .strip horizontal run of facts .strip__item .factlist ruled list of label/value pairs (used for NAP) .rule horizontal divider in --line CHROME (copy the
and