/* elite_seo — shared STRUCTURAL base. Mobile-first. NO theme colours. * * Every colour, font and palette decision is routed through a `--seo-*` * custom property. This file declares NO colour literals (the one * exception is the dev-only `.seo-section-label`, a debug affordance that * must look identical under every skin — see §debug below). * * The two fixed skins (skin_elite.css / skin_restoration.css) each define * the full token contract under their own `[data-skin="…"]` block and are * loaded AFTER this file, so their values win. The active skin is resolved * server-side (views._base_context: page.skin or site.seo_skin) and emitted * as ``. * * ── Token contract (a skin MUST set all of these) ────────────────────── * Palette : --seo-bg --seo-text --seo-text-muted --seo-heading * --seo-accent --seo-link --seo-divider --seo-hover-bg * Surfaces: --seo-section-bg --seo-section-border * --seo-card-bg --seo-card-bg-alt --seo-card-border --seo-input-border * Chrome : --seo-strip-bg --seo-strip-bg-hover --seo-strip-text --seo-strip-sep * Accents : --seo-chip-bg --seo-chip-text --seo-star * --seo-btn-bg --seo-btn-text * Type : --seo-font-body --seo-font-heading * Shape : --seo-radius --seo-gap --seo-section-pad --seo-section-margin * --seo-maxw */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--seo-font-body); margin: 0; padding: 0; color: var(--seo-text); background: var(--seo-bg); line-height: 1.55; } h1, h2, h3, h4 { font-family: var(--seo-font-heading); color: var(--seo-heading); line-height: 1.2; } a { color: var(--seo-link); } img { max-width: 100%; } /* Every section shares one centred, capped column so header, branch * contact, body, trust blocks and footer all line up at the same width. * (The dark top strip stays full-bleed — see .seo-top-strip below.) * On narrow viewports max-width is a no-op, so it's full-bleed on mobile. */ .seo-section { border: var(--seo-section-border); max-width: var(--seo-maxw); margin: var(--seo-section-margin) auto; padding: var(--seo-section-pad); background: var(--seo-section-bg); border-radius: var(--seo-radius); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 18px rgba(16, 24, 40, 0.05); } /* ── Section typography (modern hierarchy) ───────────────────────────── * Clean, confident headings inside every panel. Per-component headings * (e.g. cards) keep their own sizes via more specific rules. */ .seo-section > h2 { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.015em; color: var(--seo-heading); margin: 0 0 0.7em; } .seo-section > h3 { font-size: 1.2rem; font-weight: 700; color: var(--seo-heading); margin: 0 0 0.6em; } .seo-section > p { color: var(--seo-text); } @media (min-width: 768px) { .seo-section > h2 { font-size: 1.9rem; } } /* ── Hero (top of every page) ────────────────────────────────────────── * Full-bleed banner: H1 + summary + CTAs over a cover image (set inline * from page.resolve_image, with a skin overlay gradient). Mobile-first * full-viewport using svh so the mobile browser chrome never clips it. * min-height (not height) means long content extends instead of cropping — * "no cutoff at the bottom". Colour/overlay come from --seo-hero-* tokens * defined per skin. Structural only here. */ .seo-hero { position: relative; box-sizing: border-box; margin: 0; padding: 40px 16px; min-height: 100vh; /* fallback for old browsers */ min-height: 100svh; /* fits within the visible mobile viewport */ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background-color: var(--seo-hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--seo-hero-text); } .seo-hero--plain { background-image: linear-gradient(135deg, var(--seo-hero-bg), var(--seo-accent)); } /* Combo split hero — two image halves behind the content. Each half uses * background cover, so the image keeps its aspect ratio (centred, cropped * to fill) and is never stretched. Stacked top/bottom on mobile, side by * side from 768px up. A translucent overlay (::before) sits over the * images, the H1/CTAs on top. */ .seo-hero-split { position: absolute; inset: 0; display: flex; flex-direction: column; /* mobile: top / bottom */ z-index: 0; } .seo-hero-half { flex: 1 1 0; min-height: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .seo-hero--split::before { content: ""; position: absolute; inset: 0; background: var(--seo-hero-overlay); z-index: 1; } .seo-hero--split .seo-hero-inner { position: relative; z-index: 2; } .seo-hero--split .seo-section-label { z-index: 2; /* keeps the absolute placement from .seo-hero .seo-section-label */ } @media (min-width: 768px) { .seo-hero-split { flex-direction: row; } /* desktop: left / right */ } .seo-hero .seo-section-label { position: absolute; top: 8px; left: 8px; } .seo-hero-inner { max-width: var(--seo-maxw); width: 100%; margin: 0 auto; } .seo-hero h1 { color: var(--seo-hero-text); font-size: 2rem; margin: 0 0 0.5em; } .seo-hero .seo-hero-summary { color: var(--seo-hero-text); font-size: 1.05rem; max-width: 60ch; margin: 0 0 1.4em; } .seo-hero .seo-hero-summary p { margin: 0 0 0.6em; } .seo-hero .seo-hero-summary a { color: var(--seo-hero-text); } /* Hero context note (focus-pivot line) — light + muted over the dark hero, * replacing a hardcoded dark-grey that read poorly on the cover image. */ .seo-hero .seo-hero-note { font-size: 13px; color: var(--seo-hero-text); opacity: 0.85; margin: 0 0 1em; max-width: 60ch; } .seo-hero .seo-hero-note a { color: var(--seo-hero-text); text-decoration: underline; } .seo-hero .seo-hero-note strong { color: var(--seo-hero-text); } @media (min-width: 768px) { .seo-hero { min-height: 70vh; min-height: 70svh; padding: 56px 24px; } .seo-hero h1 { font-size: 2.6rem; } .seo-hero .seo-hero-summary { font-size: 1.15rem; } } /* ── Hero certification strip ────────────────────────────────────────── * Same logo set as the footer credentials row, pinned to the top of the * hero as a single full-width row. The logos share the width equally * (flex:1) so the row always fills the hero and scales with the viewport. * White chips so they read against any hero background. */ .seo-hero .seo-hero-certs { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; width: 100%; padding: 4px 6px; box-sizing: border-box; } .seo-hero .seo-hero-certs a { flex: 1 1 0; min-width: 0; height: 56px; /* uniform chip box for every logo */ display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 6px; padding: 2px 4px; box-sizing: border-box; } .seo-hero .seo-hero-certs img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; /* scale to fit the uniform box */ } /* Desktop: don't stretch full width — fixed-size chips, grouped at the left. */ @media (min-width: 768px) { .seo-hero .seo-hero-certs { justify-content: center; gap: 8px; padding: 8px 16px; } .seo-hero .seo-hero-certs a { flex: 0 0 auto; width: 104px; height: 48px; } } /* ── Hero Google rating panel ────────────────────────────────────────── * Overall score out of 5 with a star bar. The star bar overlays a gold * (--seo-star) copy of the stars, clipped to the rating percentage, on a * muted full set. Sits on the dark hero, so it uses a translucent chip. */ /* CTAs + rating share a column; the stack hugs the 3-button row width * (fit-content from 560px) so the rating panel below matches that width. */ .seo-hero-cta-stack { display: flex; flex-direction: column; } @media (min-width: 560px) { .seo-hero-cta-stack { width: fit-content; max-width: 100%; margin-inline: auto; } } .seo-hero .seo-google-panel { display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; padding: 8px 14px; box-sizing: border-box; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 10px; color: var(--seo-hero-text); font-size: 14px; } .seo-hero .seo-google-panel .ggl-mark { font-weight: 700; font-size: 16px; letter-spacing: -0.5px; } .ggl-b { color: #4285F4; } /* Google brand letters */ .ggl-r { color: #EA4335; } .ggl-y { color: #FBBC05; } .ggl-g { color: #34A853; } .seo-hero .seo-google-panel .ggl-score { font-weight: 800; font-size: 18px; } .seo-hero .seo-google-panel .ggl-count { opacity: 0.8; font-size: 12px; } .seo-stars { position: relative; display: inline-block; white-space: nowrap; font-size: 16px; letter-spacing: 1px; line-height: 1; } .seo-stars .seo-stars-empty { color: var(--seo-hero-text); opacity: 0.35; } .seo-stars .seo-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; width: var(--seo-star-pct, 0%); color: var(--seo-star); } /* ── CTA buttons (home hero + cta_primary/secondary) ─────────────────── * Mobile-first: stacked full-width buttons → inline row from 560px up. * Three hero variants reuse existing tokens (no new palette): call = * solid accent, enquiry = outline, booking = solid dark strip. */ .hero-cta-group { display: flex; flex-direction: row; /* 3 CTAs share one row, even on mobile */ flex-wrap: nowrap; gap: 8px; margin: 16px 0 4px; } .hero-cta, .seo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; padding: 10px 20px; border: 2px solid var(--seo-btn-bg); border-radius: var(--seo-radius); background: var(--seo-btn-bg); color: var(--seo-btn-text); font-family: inherit; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; transition: filter 0.15s ease, transform 0.15s ease; } .hero-cta:hover, .seo-btn:hover { filter: brightness(0.93); transform: translateY(-1px); } .hero-cta--call { background: var(--seo-accent); border-color: var(--seo-accent); color: var(--seo-btn-text); } .hero-cta--enquiry { background: transparent; border-color: var(--seo-accent); color: var(--seo-accent); } .hero-cta--enquiry:hover { background: var(--seo-hover-bg); filter: none; } /* Over the dark hero overlay the accent outline is low-contrast — use the * light hero text colour for the border + label so it reads. (On the light * body panel the accent version above still applies.) */ .seo-hero .hero-cta--enquiry { color: var(--seo-hero-text); border-color: var(--seo-hero-text); } .seo-hero .hero-cta--enquiry:hover { background: rgba(255, 255, 255, 0.15); filter: none; } .hero-cta--booking { background: var(--seo-strip-bg); border-color: var(--seo-strip-bg); color: var(--seo-strip-text); } /* In the 3-button group each button shares the row equally and stays on * one line (tighter padding so all three fit on a narrow phone). */ .hero-cta-group .hero-cta { flex: 1 1 0; width: auto; min-width: 0; padding: 10px 6px; white-space: nowrap; } @media (min-width: 560px) { .hero-cta-group { flex-wrap: wrap; gap: 10px; } .hero-cta-group .hero-cta { flex: 0 1 auto; padding: 10px 20px; } .seo-btn { width: auto; } } /* Outside the hero (trust panels, etc.) the 3-CTA row is centred. */ .seo-section .hero-cta-group { justify-content: center; margin-top: 20px; } /* Opt-out modifier — keeps the row left-aligned (e.g. branch contact panel). */ .seo-section .hero-cta-group--left { justify-content: flex-start; } /* ── Debug section labels (dev-only) ─────────────────────────────────── * Hidden by default; appended `[ HEADER ]` / `[ BODY: … ]` tags. Shown * only when `` (set via ?skindebug=1). These * colours are intentionally literal — the label is a build-out tool, not * part of any skin's palette, and must read identically under both skins. */ .seo-section-label { display: none; } [data-debug="labels"] .seo-section-label { display: inline-block; font-family: monospace; font-size: 11px; background: #222; color: #fff; padding: 2px 6px; margin-bottom: 8px; border-radius: 2px; letter-spacing: 0.5px; } /* Audit chips + the "In focus" pill / focus-context line (all parked under * the footer) share the same toggle as the panel labels — hidden by default, * revealed together via [data-debug="labels"] (the footer copyright button * flips it; off by default each session). The focus wrapper is gated on the * parent so the pill's inline display:inline-block can't override it. */ .seo-audit-chips { display: none; } [data-debug="labels"] .seo-audit-chips { display: block; } .seo-debug-affordances { display: none; } [data-debug="labels"] .seo-debug-affordances { display: block; } /* The footer copyright doubles as that toggle. Render it as the plain * inline text it replaces (no button chrome), but keep it focusable and * give a subtle affordance on hover / when active. Colourless: inherits the * footer's own colour token. */ .footer-labels-toggle { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; } .footer-labels-toggle:hover { text-decoration: underline dotted; } .footer-labels-toggle[aria-pressed="true"] { text-decoration: underline; } /* ── Header — full-width sticky bar ──────────────────────────────────── * Overrides the .seo-section card look: edge-to-edge white bar with a * subtle bottom shadow, content capped/centred by .header-inner, sticks to * the top on scroll. */ .seo-nav { max-width: none; margin: 0; border: 0; border-radius: 0; padding: 0 16px; background: var(--seo-section-bg); box-shadow: 0 1px 0 var(--seo-divider), 0 4px 14px rgba(16, 24, 40, 0.05); position: sticky; top: 0; z-index: 50; } .seo-nav .header-inner { max-width: var(--seo-maxw); margin: 0 auto; } .seo-nav ul { list-style: none; padding: 0; margin: 8px 0 0 0; } .seo-nav li { display: inline; margin-right: 12px; } /* ── Mobile nav — collapse the menu behind a hamburger ───────────────── * Priority is above-the-fold CTAs, not navigation, so on mobile the menu * links are hidden behind a toggle and cost ~0 vertical space. The phone * (a conversion CTA) stays visible. Desktop shows the inline menu and * hides the toggle. */ .header-bar-actions { display: flex; align-items: center; gap: 10px; width: 100%; /* mobile: full row so the menu btn hits the right edge */ justify-content: space-between; } @media (min-width: 768px) { .header-bar-actions { width: auto; justify-content: flex-end; } } .seo-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--seo-card-border); border-radius: var(--seo-radius); background: transparent; color: var(--seo-text); font-size: 22px; line-height: 1; cursor: pointer; } .seo-nav .seo-nav-links { display: none; flex-basis: 100%; } .seo-nav .seo-nav-links.is-open { display: block; padding-bottom: 8px; } .seo-nav .seo-nav-links li { display: block; margin: 0; } .seo-nav .seo-nav-links a { display: block; padding: 11px 4px; color: var(--seo-text); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--seo-divider); } @media (min-width: 768px) { .seo-nav-toggle { display: none; } /* Nav lives inline in the top bar, pushed to the right next to the phone button (margin-left:auto eats the free space after the brand). */ .seo-nav .seo-nav-links { display: block; flex-basis: auto; margin-left: auto; } .seo-nav .seo-nav-links ul { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; } .seo-nav .seo-nav-links li { display: inline; margin: 0; } .seo-nav .seo-nav-links a { display: inline-block; padding: 9px 13px; border: 0; border-radius: 8px; font-size: 14px; color: var(--seo-text); transition: background .15s ease, color .15s ease; } .seo-nav .seo-nav-links a:hover { background: var(--seo-hover-bg); color: var(--seo-accent); } } /* Scroll-to-top floating button */ #scroll-top-btn { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--seo-strip-bg); color: var(--seo-strip-text); border: none; font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 9999; align-items: center; justify-content: center; display: none; } #scroll-top-btn:hover { background: var(--seo-strip-bg-hover); } /* Top-of-page credential strip — text only, no logos. * Hidden on mobile to reclaim above-the-fold space (the same credentials * also live in the footer); shown from 768px up. */ .seo-top-strip { display: none; background: var(--seo-strip-bg); color: var(--seo-strip-text); font-size: 12px; letter-spacing: 0.5px; text-align: center; padding: 6px 12px; line-height: 1.4; } @media (min-width: 768px) { .seo-top-strip { display: block; } } .seo-top-strip a { color: var(--seo-strip-text); text-decoration: none; } .seo-top-strip a:hover { text-decoration: underline; } .seo-top-strip-sep { color: var(--seo-strip-sep); margin: 0 6px; } /* Header brand bar — logo + name/tagline + phone */ .seo-nav .header-brand-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 0 10px; } .seo-nav .header-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .seo-nav .header-brand-logo { height: 48px; width: auto; object-fit: contain; } .seo-nav .header-brand-text { display: flex; flex-direction: column; line-height: 1.1; } .seo-nav .header-brand-text strong { font-size: 18px; font-weight: 800; color: var(--seo-heading); } .seo-nav .header-brand-tagline { font-size: 11px; color: var(--seo-text-muted); } .seo-nav .header-phone { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--seo-accent); font-weight: 700; padding: 8px 14px; border: 1px solid var(--seo-card-border); border-radius: 999px; transition: background .15s ease, border-color .15s ease; } .seo-nav .header-phone:hover { background: var(--seo-hover-bg); border-color: var(--seo-accent); } .seo-nav .header-phone-sub { font-size: 12px; color: var(--seo-text-muted); font-weight: 500; } /* ── Footer — full-width dark band ───────────────────────────────────── * Overrides the .seo-section card look: edge-to-edge dark background, * light text; content is capped + centred by .footer-inner. */ .seo-footer { max-width: none; margin: 56px 0 0; border: 0; border-radius: 0; box-shadow: none; background: var(--seo-footer-bg); color: var(--seo-footer-text); padding: 48px 16px 28px; } .seo-footer .footer-inner { max-width: var(--seo-maxw); margin: 0 auto; } /* mobile-first: 1 col → 2 col → 4 col */ .seo-footer .footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 28px; } @media (min-width: 600px) { .seo-footer .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .seo-footer .footer-grid { grid-template-columns: repeat(4, 1fr); } } /* Footer CTA band — reuses the hero Call/Enquiry/Booking buttons, centred * at the very bottom of the footer. The buttons need dark-band overrides * (like .seo-hero) so the outline/booking variants read on the dark footer * instead of going muddy. */ .seo-footer .footer-cta { text-align: center; margin: 28px 0 4px; padding-top: 24px; border-top: 1px solid var(--seo-footer-border, rgba(255,255,255,.12)); } .seo-footer .footer-cta-lead { margin: 0 0 4px; font-weight: 800; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; color: var(--seo-footer-text); } @media (min-width: 560px) { .seo-footer .footer-cta-lead { font-size: 32px; } } .seo-footer .footer-cta .hero-cta-group { justify-content: center; margin: 12px 0 0; } /* Enquiry: light outline + light label on the dark band (accent-on-dark is muddy). */ .seo-footer .footer-cta .hero-cta--enquiry { background: transparent; border-color: var(--seo-footer-text); color: var(--seo-footer-text); } .seo-footer .footer-cta .hero-cta--enquiry:hover { background: rgba(255, 255, 255, 0.15); filter: none; } /* Booking: solid light button so it pops against the dark footer. */ .seo-footer .footer-cta .hero-cta--booking { background: #ffffff; border-color: #ffffff; color: #1a1a1a; } .seo-footer .footer-col h4 { margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--seo-footer-text); } .seo-footer .footer-col ul { list-style: none; padding: 0; margin: 0 0 8px; } .seo-footer .footer-col li { display: list-item !important; margin: 0; padding: 4px 0; font-size: 13px; } .seo-footer .footer-col p { margin: 6px 0; font-size: 13px; color: var(--seo-footer-muted); } .seo-footer a { color: var(--seo-footer-muted); text-decoration: none; } .seo-footer a:hover { color: var(--seo-footer-link); text-decoration: underline; } .seo-footer .footer-hotline a { color: var(--seo-footer-text); } .seo-footer .footer-brand-logo { max-height: 110px; width: auto; object-fit: contain; margin-bottom: 16px; display: block; } .seo-footer .footer-address, .seo-footer .footer-abn { font-size: 12px; color: var(--seo-footer-muted); margin: 4px 0; } .seo-footer .footer-branches-heading { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--seo-footer-text); margin: 16px 0 6px; } .seo-footer .footer-branches { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; } .seo-footer .footer-branches li { font-size: 12px; margin: 0; } /* Branches with no location page show as plain text — match the muted * link colour so the list reads consistently. */ .seo-footer .footer-branch-nolink { color: var(--seo-footer-muted); } /* Our branches — its own full-width band, one row above the credential logos. * Centred to match the centred logo row beneath it. (.footer-branches above * already flows the links as a wrapped horizontal row.) */ .seo-footer .footer-branches-row { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--seo-footer-border); text-align: center; } .seo-footer .footer-branches-row .footer-branches-heading { margin-top: 0; } .seo-footer .footer-branches-row .footer-branches { justify-content: center; } /* Certification / partner logos — on white chips so dark logos stay visible */ .seo-footer .footer-sponsors { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; padding: 26px 0 18px; border-top: 1px solid var(--seo-footer-border); margin-top: 16px; } .seo-footer .footer-sponsors img { height: 46px; width: auto; object-fit: contain; background: #fff; border-radius: 8px; padding: 6px 12px; } .seo-footer .footer-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 6px 0 20px; } .seo-footer .footer-socials a { font-size: 13px; padding: 6px 14px; border: 1px solid var(--seo-footer-border); border-radius: 999px; color: var(--seo-footer-text); text-decoration: none; } .seo-footer .footer-socials a:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; } .seo-footer .footer-bottom { border-top: 1px solid var(--seo-footer-border); padding-top: 18px; text-align: center; font-size: 12px; color: var(--seo-footer-muted); } .seo-footer .footer-bottom nav { margin-bottom: 8px; } .seo-footer .footer-policies { margin-top: 6px; margin-bottom: 10px; font-size: 11px; } .seo-grid { display: block; margin: 8px 0; } /* Plain service/location/post lists → modern hover cards (the AUTO panels * + home lists). */ .seo-grid:not(.loc-grid) { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; } @media (min-width: 720px) { .seo-grid:not(.loc-grid) { grid-template-columns: 1fr 1fr; } } .seo-grid:not(.loc-grid) > li { margin: 0; padding: 13px 15px; background: var(--seo-card-bg); border: 1px solid var(--seo-card-border); border-radius: var(--seo-radius); transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; } .seo-grid:not(.loc-grid) > li:hover { transform: translateY(-2px); border-color: var(--seo-accent); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10); } .seo-grid:not(.loc-grid) > li a { font-weight: 600; text-decoration: none; color: var(--seo-heading); } .seo-grid:not(.loc-grid) > li a:hover { color: var(--seo-accent); } .seo-grid:not(.loc-grid) > li small { color: var(--seo-text-muted); line-height: 1.5; } /* Sub-services ("What's included") — bordered cards in a grid, matching * the other card panels (products / reviews / sponsor panels). */ .subservice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; list-style: none; padding: 0; } .subservice-card { border: 1px solid var(--seo-card-border); background: var(--seo-card-bg); padding: 14px 16px; border-radius: var(--seo-radius); margin: 0; } .subservice-card strong { display: block; color: var(--seo-heading); margin-bottom: 4px; } .subservice-desc { font-size: 13px; color: var(--seo-text-muted); } /* Sub-service icon — sits above the name, tinted with the accent. */ .subservice-icon { display: inline-flex; color: var(--seo-accent); margin-bottom: 8px; } .subservice-icon .svc-icon-svg { width: 28px; height: 28px; } /* Dev-only palette legend — every available icon + its key. */ .svc-icon-palette { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--seo-card-border); } .svc-icon-palette .pal-title { width: 100%; font-size: 12px; color: var(--seo-text-muted); } .svc-icon-palette .pal-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; font-size: 11px; color: var(--seo-text-muted); text-align: center; } .svc-icon-palette .svc-icon-svg { width: 22px; height: 22px; color: var(--seo-accent); } .seo-grid li { margin: 4px 0; } /* Consistent soft-card + hover lift across the card components. */ .subservice-card, .featured-product-card, .google-review-card, .insurance-card, .sponsor-panel, .logo-index-card { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); transition: box-shadow .16s ease, transform .16s ease; } .subservice-card:hover, .featured-product-card:hover, .google-review-card:hover, .insurance-card:hover, .sponsor-panel:hover, .logo-index-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10); } /* Inline service icon in the AUTO service-list panels (other services, * services offered, home services). */ .svc-list-icon { display: inline-flex; vertical-align: middle; color: var(--seo-accent); margin-right: 6px; } .svc-list-icon .svc-icon-svg { width: 18px; height: 18px; } /* Location map + suburb chips */ .location-map { border: 0; border-radius: 6px; display: block; width: 100%; } /* Branch contact — details + map on one row from 768px up. The map is * hidden on mobile (the standalone service-area panel still covers it). */ .branch-contact-map { display: none; } @media (min-width: 768px) { .branch-contact-row { display: flex; gap: 24px; align-items: flex-start; } .branch-contact-details { flex: 1 1 0; min-width: 0; } .branch-contact-map { display: block; flex: 1 1 0; min-width: 0; } .branch-contact-map .location-map { height: 100%; min-height: 240px; } } /* Branch-contact details — heading + muted "(serving …)" subtitle, branch * name, then an icon contact list (pin / phone / mail), all token-driven. */ .branch-contact-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; } .branch-contact-sub { font-weight: 400; font-size: 13px; color: var(--seo-text-muted); } .branch-name { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--seo-heading); } .branch-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .branch-contact-item { display: flex; align-items: flex-start; gap: 10px; } .branch-contact-item a { color: var(--seo-link); text-decoration: none; } .branch-contact-item a:hover { text-decoration: underline; } .branch-contact-icon { display: inline-flex; flex: 0 0 auto; margin-top: 2px; color: var(--seo-accent); } .branch-contact-icon .svc-icon-svg { width: 18px; height: 18px; } .branch-contact-text { display: block; } .branch-directions { display: inline-block; margin-top: 4px; font-weight: 600; } /* Branches directory — grid of branch cards (locations index "Our branches" * panel). Each card reuses the .branch-contact-list icon rows above. Fixed * 1→2→3 columns so the layout is identical across domains. */ .branch-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 600px) { .branch-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .branch-grid { grid-template-columns: repeat(3, 1fr); } } .branch-card { margin: 0; padding: 16px; border: 1px solid var(--seo-card-border); background: var(--seo-card-bg); border-radius: var(--seo-radius); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); } .branch-card-name { margin: 0 0 10px; font-size: 16px; color: var(--seo-heading); } .suburb-chips { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; } .suburb-chips li { background: var(--seo-chip-bg); color: var(--seo-chip-text); padding: 4px 10px; border-radius: 14px; font-size: 12px; margin: 0; } .suburb-postcode { color: var(--seo-text-muted); font-size: 11px; margin-left: 4px; } /* Featured product cards — trust block on every page */ .featured-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 12px 0; } .featured-product-card { border: 1px solid var(--seo-card-border); background: var(--seo-card-bg); padding: 16px; border-radius: 4px; text-align: center; } .featured-product-img { width: 100%; height: 160px; object-fit: contain; display: block; margin-bottom: 10px; } .featured-product-card h3 { margin: 0 0 6px; font-size: 15px; } .featured-product-card p { font-size: 12px; color: var(--seo-text-muted); margin: 0 0 10px; min-height: 32px; } .featured-product-card .btn { display: inline-block; padding: 6px 14px; background: var(--seo-btn-bg); color: var(--seo-btn-text); text-decoration: none; font-size: 13px; border-radius: 3px; } /* Google review cards — trust block on every page */ .google-review-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* one row of 4 (view caps at 4) */ gap: 12px; margin: 12px 0; } @media (max-width: 900px) { .google-review-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .google-review-grid { grid-template-columns: 1fr; } } .google-review-card { border: 1px solid var(--seo-card-border); background: var(--seo-card-bg-alt); padding: 12px; border-radius: 4px; } .google-review-stars { color: var(--seo-star); font-size: 16px; letter-spacing: 1px; margin-bottom: 6px; } .google-review-source { color: var(--seo-text-muted); font-size: 11px; margin-left: 8px; letter-spacing: 0; } .google-review-text { font-size: 13px; color: var(--seo-text); margin: 0 0 8px; } .google-review-meta { font-size: 12px; color: var(--seo-text-muted); margin: 0; } /* Public logo-index pages (/our-certifications/, /our-clients/) */ .logo-index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 16px 0; } .logo-index-card { border: 1px solid var(--seo-card-border); background: var(--seo-card-bg); padding: 16px; border-radius: 4px; text-align: center; } .logo-index-card a { text-decoration: none; color: inherit; display: block; } .logo-index-card img { height: 70px; max-width: 100%; object-fit: contain; display: block; margin: 0 auto 8px; } .logo-index-name { display: block; font-size: 13px; color: var(--seo-text); font-weight: 600; } /* Client logo strip — "Trusted by" section on home */ .client-logo-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px; padding: 20px 0; } .client-logo-strip img { height: 120px; width: auto; object-fit: contain; opacity: 0.85; transition: opacity 0.2s; } @media (min-width: 768px) { .client-logo-strip img { height: 150px; } } .client-logo-strip a:hover img, .client-logo-strip img:hover { opacity: 1; } /* Mould inspection insert — content in a 3-column grid on desktop (1 col * mobile, 2 col tablet). Each column is its own .seo-body block; columns * top-align flush and the lead image fills its column (no wasted white * space). */ .mould-grid { display: grid; grid-template-columns: 1fr; gap: 4px 28px; align-items: start; } /* Sample-report download panel (second mould insert) */ .mould-sample { display: grid; grid-template-columns: 1fr; gap: 8px 28px; align-items: center; } @media (min-width: 600px) { .mould-sample { grid-template-columns: 2fr 1fr; } } .mould-sample-info { margin: 0; } .mould-sample-info .seo-body { margin: 0 0 14px; } .mould-sample-btn { display: inline-flex; } .mould-sample-action { display: flex; justify-content: center; } .mould-sample-note { margin-top: 6px; color: var(--seo-text-muted); } /* Clickable PDF first-page preview */ .mould-sample-thumb { position: relative; display: block; max-width: 240px; width: 100%; border: 1px solid var(--seo-card-border); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); background: #fff; transition: transform 0.15s ease, box-shadow 0.15s ease; } .mould-sample-thumb:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); } .mould-sample-thumb img { display: block; width: 100%; height: auto; } .mould-sample-badge { position: absolute; top: 8px; right: 8px; background: var(--seo-btn-bg); color: var(--seo-btn-text); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 4px; } @media (min-width: 600px) { .mould-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .mould-grid { grid-template-columns: repeat(3, 1fr); } } .mould-grid > .seo-body { margin: 0; } .mould-grid .seo-image { max-width: 100%; border-radius: var(--seo-radius); margin: 0 0 4px; } /* Mould inspection insert — main image with the accredited-lab logos * overlaid along the bottom (white chips over a dark gradient so they read * over the photo). */ .mould-image { position: relative; margin: 0 0 4px; border-radius: var(--seo-radius); overflow: hidden; } .mould-image .seo-image { margin: 0; border-radius: 0; display: block; } .mould-lab-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 26px 12px 10px; background: linear-gradient(to top, rgba(16, 24, 40, 0.82), rgba(16, 24, 40, 0)); } .mould-lab-overlay-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; } .mould-lab-overlay a { display: inline-flex; } .mould-lab-overlay img { height: 34px; width: auto; object-fit: contain; background: #fff; border-radius: 4px; padding: 4px 8px; } /* Insurance partner cards */ .insurance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 12px 0; } .insurance-card { border: 1px solid var(--seo-card-border); background: var(--seo-card-bg); padding: 16px; border-radius: 4px; text-align: center; } .insurance-logo { max-height: 70px; width: auto; object-fit: contain; margin-bottom: 8px; } .insurance-card h3 { margin: 0 0 6px; font-size: 14px; } .insurance-text { font-size: 12px; color: var(--seo-text-muted); margin-bottom: 8px; } /* Sponsor panel grid — three-column rich cards on home */ .sponsor-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 12px 0; } .sponsor-panel { border: 1px solid var(--seo-card-border); background: var(--seo-card-bg); padding: 16px; border-radius: 4px; } .sponsor-panel-thumb { position: relative; margin-bottom: 12px; } .sponsor-panel-img { width: 100%; height: 140px; object-fit: cover; display: block; border-radius: 3px; } /* "Official partner" Elite logo (top-right) + caption (bottom strip) overlaid * on each sponsor / voucher image. The white chip and the dark caption * gradient are fixed legibility backings for arbitrary photos — they must * stay light/dark regardless of skin, so they're intentional literals (like * the dev-only section label), not themeable surface tokens. */ .sponsor-panel-logo, .voucher-card-logo { position: absolute; right: 8px; top: 8px; width: 72px; height: auto; padding: 4px 7px; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.18); } .sponsor-panel-caption, .voucher-card-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; background: linear-gradient(to top, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0)); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); } .sponsor-panel h3 { margin: 0 0 8px; font-size: 16px; } .sponsor-panel h3 a { color: inherit; text-decoration: none; } .sponsor-panel-text { font-size: 13px; color: var(--seo-text); margin-bottom: 8px; } .sponsor-panel-link { font-size: 13px; font-weight: 600; } /* Partner vouchers — public /v2/partner-vouchers/ card grid. Card chrome * uses skin tokens so it sits cleanly on either skin; only the badge + * CTA accent are theme-driven (PartnerVoucher.theme: indigo / red / * emerald / amber / blue / slate — fixed palette, not per-skin). */ .voucher-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; } .voucher-card { display: flex; flex-direction: column; border: 1px solid var(--seo-card-border); background: var(--seo-card-bg); border-radius: var(--seo-radius); overflow: hidden; } .voucher-card-thumb { position: relative; display: block; } .voucher-card-thumb img:not(.voucher-card-logo) { display: block; width: 100%; height: 160px; object-fit: cover; } .voucher-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1 1 auto; } .voucher-card-badge { align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; background: var(--voucher-accent-bg, #4f46e5); color: var(--voucher-accent-text, #fff); } .voucher-card-title { margin: 0; font-size: 18px; } .voucher-card-text { font-size: 14px; color: var(--seo-text); } .voucher-card-expiry { margin: 0; font-size: 12px; color: var(--seo-text-muted); } .voucher-card-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: auto; padding: 10px 16px; border-radius: var(--seo-radius); background: var(--voucher-accent-bg, #4f46e5); color: var(--voucher-accent-text, #fff); font-weight: 700; font-size: 14px; text-decoration: none; } .voucher-card-cta:hover { filter: brightness(0.93); } /* Per-theme accent (fixed palette — reads on both skins). */ .voucher-card--theme-indigo { --voucher-accent-bg: #4f46e5; --voucher-accent-text: #fff; } .voucher-card--theme-red { --voucher-accent-bg: #dc2626; --voucher-accent-text: #fff; } .voucher-card--theme-emerald { --voucher-accent-bg: #059669; --voucher-accent-text: #fff; } .voucher-card--theme-amber { --voucher-accent-bg: #d97706; --voucher-accent-text: #fff; } .voucher-card--theme-blue { --voucher-accent-bg: #2563eb; --voucher-accent-text: #fff; } .voucher-card--theme-slate { --voucher-accent-bg: #475569; --voucher-accent-text: #fff; } /* Service-page lead image — a single image, centred and capped (not the * full panel width), with rounded corners. */ .service-hero-img { display: block; width: 100%; max-width: 480px; margin: 0 auto 16px; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--seo-card-border); border-radius: var(--seo-radius); background: var(--seo-card-bg-alt); } /* ── Services index — rich service cards (/v2/services/) ──────────────── * The dedicated services page gets roomier cards than the compact location * tiles: a cover image (or icon placeholder) on top, then a padded body * with an icon-title, description and a "View service" affordance — the * whole card is one clickable link. Explicit 1→2→3 column breakpoints * (not auto-fit) so the grid is structurally identical across domains * regardless of how many services a site has. */ /* Live search box above the services grid / locations list / blog index */ .service-search, .loc-search, .blog-search { margin: 12px 0 4px; } .loc-state-group[hidden], .blog-group[hidden] { display: none; } .region-grid > li[hidden], .seo-grid > li[hidden] { display: none; } .service-search-input, .loc-search-input, .blog-search-input { width: 100%; max-width: 420px; box-sizing: border-box; padding: 10px 14px; font-size: 15px; font-family: inherit; color: var(--seo-text); background: var(--seo-card-bg); border: 1px solid var(--seo-card-border); border-radius: var(--seo-radius); } .service-search-input:focus, .loc-search-input:focus, .blog-search-input:focus { outline: none; border-color: var(--seo-accent); } .service-search-empty, .loc-search-empty, .blog-search-empty { margin: 8px 0 0; color: var(--seo-text-muted); font-style: italic; } .service-index-grid { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: 1fr; gap: 16px; } .service-index-grid > li[hidden] { display: none; } @media (min-width: 560px) { .service-index-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .service-index-grid { grid-template-columns: repeat(3, 1fr); } } .service-index-grid > li { margin: 0; } .service-index-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--seo-card-bg); border: 1px solid var(--seo-card-border); border-radius: var(--seo-radius); overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; } .service-index-card:hover { transform: translateY(-3px); border-color: var(--seo-accent); box-shadow: 0 10px 24px rgba(16, 24, 40, 0.12); } .service-index-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--seo-card-bg-alt); } .service-index-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .service-index-card:hover .service-index-thumb img { transform: scale(1.05); } .service-index-thumb--placeholder { display: flex; align-items: center; justify-content: center; } .service-index-thumb--placeholder .svc-card-icon { color: var(--seo-accent); } .service-index-thumb--placeholder .svc-card-icon .svc-icon-svg { width: 48px; height: 48px; } .service-index-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1 1 auto; } .service-index-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--seo-heading); line-height: 1.25; } .service-index-title .svc-card-icon { color: var(--seo-accent); flex: 0 0 auto; display: inline-flex; } .service-index-title .svc-card-icon .svc-icon-svg { width: 20px; height: 20px; } .service-index-desc { font-size: 13px; color: var(--seo-text-muted); line-height: 1.5; } .service-index-cta { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 700; color: var(--seo-accent); } /* ── Locations index — region cards (/v2/locations/) ─────────────────── * Each top-level location is a card: a clickable header (map-pin marker + * region name) with its child locations as wrapped chip links beneath — * turning the old wall of plain links into a tidy, scannable directory. * One full-width card per row (not a 3-up grid) so the chips flow across * the whole width — states with only one or two regions don't leave empty * columns of white space. */ .region-grid { list-style: none; margin: 12px 0 0; padding: 0; } .region-card { display: block; margin: 0 0 16px; border: 1px solid var(--seo-card-border); background: var(--seo-card-bg); border-radius: var(--seo-radius); overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); } /* Region cover image — a banner of the main location's photo at the top of * the card (resolve_image: own › inherited › default). */ .region-card-media { display: block; overflow: hidden; } .region-card-media img { display: block; width: 100%; height: 160px; object-fit: cover; transition: transform .3s ease; } .region-card-media:hover img { transform: scale(1.03); } @media (max-width: 639px) { .region-card-media img { height: 120px; } } .region-card-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; text-decoration: none; font-weight: 700; color: var(--seo-heading); background: var(--seo-card-bg-alt); border-bottom: 1px solid var(--seo-divider); transition: color .15s ease; } .region-card-head:hover { color: var(--seo-accent); } .region-pin { display: inline-flex; flex: 0 0 auto; color: var(--seo-accent); } .region-pin .svc-icon-svg { width: 18px; height: 18px; } .region-card-name { font-size: 15px; line-height: 1.25; } .region-children { list-style: none; margin: 0; padding: 12px 14px 14px; display: flex; flex-wrap: wrap; gap: 6px; } .region-children li { margin: 0; } .region-children a { display: inline-block; padding: 4px 11px; font-size: 12px; line-height: 1.3; border-radius: 999px; background: var(--seo-chip-bg); color: var(--seo-chip-text); text-decoration: none; transition: background .15s ease, color .15s ease; } .region-children a:hover { background: var(--seo-accent); color: var(--seo-btn-text); } /* Breadcrumb — standalone strip below the hero, aligned to the content * column (it's not inside a .seo-section). */ .seo-breadcrumb { max-width: var(--seo-maxw); margin: 12px auto 0; padding: 0 16px; font-size: 13px; color: var(--seo-text-muted); } .seo-breadcrumb a { color: var(--seo-link); text-decoration: none; } .seo-breadcrumb a:hover { text-decoration: underline; } .seo-breadcrumb-sep { color: var(--seo-text-muted); margin: 0 6px; } .seo-image { width: 100%; height: auto; display: block; margin: 8px 0; border-radius: var(--seo-radius); } @media (min-width: 600px) { .seo-image { max-width: 320px; } } /* Rounded corners on inline body images (matches .seo-image / .seo-video). */ .seo-body img { border-radius: var(--seo-radius); } /* Click-to-play video facade (seeded YouTube — opens in a lightbox). * The dark scrim + white play glyph are universal video-control chrome, * not brand palette (same spirit as the dev-only .seo-section-label * exception), so they're literals rather than --seo-* tokens. */ .seo-video { position: relative; display: block; width: 100%; margin: 16px 0; aspect-ratio: 16 / 9; border-radius: var(--seo-radius); overflow: hidden; cursor: pointer; } .seo-video img { width: 100%; height: 100%; object-fit: cover; display: block; } .seo-video .seo-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 26px; line-height: 68px; text-align: center; padding-left: 4px; /* optically centre the ▶ glyph */ transition: background 0.2s ease, transform 0.2s ease; } .seo-video:hover .seo-video-play { background: rgba(0, 0, 0, 0.75); transform: translate(-50%, -50%) scale(1.08); } /* DB-authored body (SeoPage.body_html) — element-level structural rules * only. Skins layer typography + colour via [data-skin] .seo-body … */ /* Body-panel heading — title + subtitle above the body content */ .seo-body-head .seo-body-title { margin: 0 0 0.3em; font-size: 1.6rem; color: var(--seo-heading); } .seo-body-head .seo-body-subtitle { color: var(--seo-text-muted); font-size: 1.05rem; margin: 0; } .seo-body-head .seo-body-subtitle p { margin: 0 0 0.5em; } .seo-body { margin: 8px 0; } .seo-body h2 { font-size: 1.4rem; margin: 1.1em 0 0.4em; } .seo-body h3 { font-size: 1.15rem; margin: 1em 0 0.35em; } .seo-body p { margin: 0 0 0.85em; } .seo-body ul, .seo-body ol { margin: 0 0 0.85em; padding-left: 1.4em; } .seo-body li { margin: 0.2em 0; } .seo-body a { text-decoration: underline; } /* Narrower reading column + centred media for the authored body_html panel. * `--body` is set on the body
of every kind (the panel that holds * the body_html / lorem copy); `--blog` is the legacy alias kept on blog * posts. Both share the same width so the reading column is uniform across * all SEO pages — no per-kind branching. The sibling AUTO panels (maps, * suburbs, service/location lists) keep the full `--seo-maxw` width. */ .seo-section--body, .seo-section--blog { max-width: 760px; } .seo-section--body .seo-body img, .seo-section--body .seo-image, .seo-section--body .seo-video, .seo-section--blog .seo-body img, .seo-section--blog .seo-image, .seo-section--blog .seo-video { display: block; margin-left: auto; margin-right: auto; } /* ── Body-partial helpers (tokenised) ────────────────────────────────── * Small reusable classes that replace ad-hoc inline styles in the per-kind * body partials, so every colour/space decision flows through the skin * tokens (no literals, no per-page drift — same standard as the home page). */ /* Muted helper note (e.g. the locations-index filter notice). */ .seo-note { font-size: 13px; color: var(--seo-text-muted); margin: 0 0 4px; } .seo-note a { color: var(--seo-link); } /* Post date — muted meta line above a post title in list cards. */ .seo-post-date { display: block; color: var(--seo-text-muted); font-size: 12px; margin-bottom: 2px; } /* Extra top gap between per-state blocks on the locations index. */ .loc-state-heading { margin-top: 24px; } /* Focused-service row highlight on the location page "Services we offer" * list — tinted chip-bg pill + accent left border + an "In focus" tag, * replacing the old hardcoded-yellow inline style. */ .seo-grid:not(.loc-grid) > li.in-focus { background: var(--seo-chip-bg); border-color: var(--seo-accent); border-left: 3px solid var(--seo-accent); } .seo-grid:not(.loc-grid) > li.in-focus a { color: var(--seo-chip-text); } .in-focus-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; font-size: 11px; font-weight: 700; border-radius: 999px; background: var(--seo-accent); color: var(--seo-btn-text); vertical-align: middle; } /* ── Safety Data Sheets — download cards (/safety-data-sheets/) ───────── * File-icon + name + download-arrow rows, 1→2 columns. Token-driven so it * matches the active skin. */ .sds-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px) { .sds-grid { grid-template-columns: repeat(2, 1fr); } } .sds-grid > li { margin: 0; } .sds-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--seo-card-bg); border: 1px solid var(--seo-card-border); border-radius: var(--seo-radius); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); text-decoration: none; color: var(--seo-heading); transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; } .sds-card:hover { transform: translateY(-2px); border-color: var(--seo-accent); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10); } .sds-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; background: var(--seo-chip-bg); color: var(--seo-accent); } .sds-icon svg { width: 20px; height: 20px; } .sds-text { min-width: 0; flex: 1 1 auto; } .sds-name { display: block; font-weight: 700; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; } .sds-sub { display: block; font-size: 12px; color: var(--seo-text-muted); margin-top: 2px; } .sds-arrow { display: inline-flex; flex: 0 0 auto; color: var(--seo-text-muted); } .sds-arrow svg { width: 18px; height: 18px; } .sds-contact { margin-top: 24px; color: var(--seo-text-muted); font-size: 14px; }