/* ============================================================ CQ Yard & Landscaping - design tokens ------------------------------------------------------------ Colour values are SAMPLED from the client's own assets, not invented. Sample points recorded beside each token. Typographic and spatial system follows the agreed reference (acaciadesign.com.au): editorial monochrome, deep left indent, hairline rules, slow one-shot fades. This file is the single source of truth. No section re-decides type, colour or spacing. ============================================================ */ /* ---------- Fonts (self-hosted, same files as the reference) ---------- */ @font-face { font-family: "PPEiko"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/PPEiko-Regular.woff2") format("woff2"); } @font-face { font-family: "PP Neue Montreal"; font-style: normal; font-weight: 300; font-display: swap; src: url("../assets/fonts/PPNeueMontreal-Light.woff2") format("woff2"); } @font-face { font-family: "PP Neue Montreal"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/PPNeueMontreal-Regular.woff2") format("woff2"); } @font-face { font-family: "PP Neue Montreal"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/PPNeueMontreal-Medium.woff2") format("woff2"); } :root { /* --------------------------------------------------------- COLOUR Every neutral below was sampled from logo.jpg or hero-climber.jpg. The accent is derived from the job photography (see note below). --------------------------------------------------------- */ --c-page: #F5F3F4; /* logo.jpg ground, sampled (20,20) + (800,800) */ --c-ink: #1B191A; /* logo.jpg darkest stroke, sampled */ --c-muted: #6C6C6C; /* eyebrows, captions, meta */ --c-line: #B6B2B3; /* hairline rules (1.35:1 on cream was too faint to read) */ --c-dark: #1F2022; /* hero-climber.jpg gum trunk, sampled (660,1200) */ --c-sky: #80858B; /* hero-climber.jpg avg lower third, sampled */ --c-sky-lt: #C2CCD8; /* hero-climber.jpg brightest sky, sampled (200,1200) */ /* Text and marks on the dark surfaces. Deliberately NOT #FFFFFF: pure white against a near-black flattens depth, and this ties the dark half of the page back to the logo's own cream ground. */ --c-cream: #F3F1F2; --c-dark-hi: #2C2E31; /* raised state on --c-dark surfaces */ --c-error: #F0A08A; /* form errors. 7.84:1 on --c-dark */ /* --------------------------------------------------------- ON-DARK LADDER The dark half of the page (hero copy, quote section, footer) was running on 18 different rgba(255,255,255,x) literals, four of which were doing the same "secondary text" job at .72/.78/.80/.82. That is the real palette down there, so it gets tokens like everything else. --------------------------------------------------------- */ --on-dark-1: rgba(243, 241, 242, .92); /* primary text on dark */ --on-dark-2: rgba(243, 241, 242, .78); /* secondary text */ --on-dark-3: rgba(243, 241, 242, .52); /* meta, labels, legal */ --line-on-dark: rgba(243, 241, 242, .16); /* hairlines and borders */ --line-on-dark-hi: rgba(243, 241, 242, .40); /* borders that must read */ --fill-on-dark: rgba(243, 241, 242, .06); /* input and panel fills */ /* The single accent, derived from the Queensland sky in the client's own job photography (#6498FD in job-01, #6390F7 in job-03) and then darkened along that hue until it clears WCAG AA. The literal sampled sky is far too light to carry white text: 2.82:1. Measured, not asserted: --c-accent-ink on --c-accent ...... 8.76:1 --c-accent on --c-page (cream) .... 8.92:1 Clearing AA on BOTH surfaces is the requirement, because the page alternates cream body sections with near-black hero and form sections, and a single accent has to survive both. RESERVED FOR: primary CTA fill, click-to-call, form focus ring. Used nowhere else on the page. */ --c-accent: #24446F; --c-accent-dk: #1B3557; /* accent :hover / :active */ --c-accent-ink: var(--c-cream); /* same off-white as --c-cream. 8.76:1 on --c-accent */ /* --------------------------------------------------------- TYPE --------------------------------------------------------- */ --f-display: "PPEiko", Georgia, serif; /* Arial is deliberately absent from the fallback chain - it is one of the banned faces, and leaving it in means some visitors render the page in it. */ --f-sans: "PP Neue Montreal", system-ui, -apple-system, "Segoe UI", sans-serif; /* Section display headings, matched to the reference (128px desktop / 54px mobile). Pulled back slightly from that ceiling so the H1 can outrank them - see below. */ --fs-display: clamp(3.25rem, 7.6vw, 6.5rem); --lh-display: 1.16; /* Hero headline. This was previously SMALLER than --fs-display, which inverted the page's hierarchy: "The work." (two words, no information) outranked the one line that tells a cold ad click what this business does and where. The H1 now leads. */ --fs-hero: clamp(2.5rem, 8.4vw, 5rem); --lh-hero: 1.08; --fs-lede: 1.25rem; --lh-lede: 1.55; --fs-body: 1rem; --lh-body: 1.5; --fs-small: 0.875rem; --lh-small: 1.4; --fs-eyebrow: 0.875rem; --ls-eyebrow: 4.2px; --fs-btn: 0.8125rem; --ls-btn: 1.6px; --fs-meta: 0.75rem; --ls-meta: 1.2px; /* --------------------------------------------------------- SPACE Desktop keeps the reference's deep asymmetric gutter. Mobile drops the indent entirely. --------------------------------------------------------- */ --pad-left: 170px; /* desktop section left gutter */ --pad-right: 100px; --indent: 150px; /* second-level step for copy and grids */ --sec-top: 120px; /* desktop vertical section rhythm */ --pad-mobile: 20px; --sec-top-mobile: 72px; --gap-xs: 8px; --gap-sm: 16px; --gap-md: 24px; --gap-lg: 40px; --gap-xl: 64px; --maxw-lede: 34rem; /* readable measure for body copy */ /* --------------------------------------------------------- SHAPE One system: sharp. Nothing on this page has a corner radius except the logo mark, which is round because the mark is round. --------------------------------------------------------- */ --radius: 0; /* --------------------------------------------------------- MOTION Restrained. One-shot reveals only, matching the reference. Fully collapsed under prefers-reduced-motion. --------------------------------------------------------- */ --dur-reveal: 2s; --dur-quick: .3s; --ease-float: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* --------------------------------------------------------- LAYERS --------------------------------------------------------- */ --z-hero-copy: 1; --z-header: 3; --z-callbar: 20; } @media (max-width: 1024px) { :root { --pad-left: var(--pad-mobile); --pad-right: var(--pad-mobile); --indent: 0px; --sec-top: var(--sec-top-mobile); /* Hero sizing on phones is constrained by height as well as width - a short phone needs smaller type or the copy eats the screen. That constraint MUST come from svh, never from a height media query: the mobile URL bar collapses as you scroll, which grows innerHeight, which re-triggers a max-height query mid-scroll. That is what made the headline visibly jump size while scrolling. svh is pinned to the small (chrome-visible) viewport, so it does not move when the bar does. */ --fs-hero: clamp(1.9rem, min(9vw, 5.4svh), 2.75rem); /* These three are plain fixed values on purpose. They could be svh clamps, but svh cannot be verified in a headless browser (no URL bar, so the small viewport moves with the window) and an unverified stability fix is worth less than a provably stable one. Chosen to work at 667px tall and up. */ --hero-pad-top: 96px; --hero-gap: 20px; --hero-scrim: 88px; } }