/* ============================================================ Primary Tree Surgeons Ltd — stylesheet White-first, single green accent, warm neutrals. NO BLUE anywhere. Fonts: Cinzel (logotype + headings, from the van livery) + Figtree (body). Zero-JS: the mobile nav is a checkbox-driven off-canvas panel. ============================================================ */ /* ---------- 0. Brand type ---------- The vans and workwear carry "PRIMARY TREE SURGEONS LTD" in inscriptional roman capitals under the oak-sprig mark. Cinzel is the closest thing on Google Fonts to that lettering, so it carries the logotype AND the headings — one brand face rather than a logo font bolted onto an unrelated display face. Cinzel has no true lowercase: its lowercase glyphs are small capitals. That is the point. Headings written in sentence case come out as CAP + small caps, which reads as carved stone without the shoutiness of full caps on a long line. The old site's "PTS" font is kept in fonts/ for reference only — not loaded. */ /* ---------- 1. Tokens ---------- */ :root { /* Green — the only accent */ --pts-c-green: #1E6B3A; --pts-c-green-dark: #14512B; --pts-c-green-deep: #0E3A1F; --pts-c-green-tint: #F1F7F2; --pts-c-green-tint-2: #DCEBE0; /* Warm neutrals — every grey has R >= G >= B */ --pts-c-white: #FFFFFF; --pts-c-off-white: #FAF8F4; --pts-c-sand: #F2EEE6; --pts-c-line: #E4E0D9; --pts-c-line-strong: #8F887B; --pts-c-text-muted: #5C5A54; --pts-c-text: #1B1A17; --pts-c-star: #B8730E; /* decorative only */ --pts-c-error: #A32B1E; /* form errors only */ --pts-c-focus: #14512B; --pts-font-display: "Cinzel", "Trajan Pro", "Iowan Old Style", Georgia, serif; --pts-font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --pts-fs-h1: clamp(2.25rem, 1.55rem + 3.1vw, 4rem); --pts-fs-h2: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem); --pts-fs-h3: clamp(1.3125rem, 1.15rem + 0.7vw, 1.75rem); --pts-fs-h4: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem); --pts-fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); --pts-fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --pts-fs-small: 0.875rem; --pts-fs-micro: 0.75rem; --pts-lh-tight: 1.08; --pts-lh-heading: 1.2; --pts-lh-snug: 1.35; --pts-lh-body: 1.65; --pts-ls-h1: -0.02em; --pts-ls-h: -0.01em; --pts-ls-eyebrow: 0.12em; --pts-ls-btn: 0.01em; --pts-measure: 68ch; --pts-sp-1: .25rem; --pts-sp-2: .5rem; --pts-sp-3: .75rem; --pts-sp-4: 1rem; --pts-sp-5: 1.5rem; --pts-sp-6: 2rem; --pts-sp-7: 3rem; --pts-sp-8: 4rem; --pts-sp-9: 6rem; --pts-container: 1180px; --pts-container-narrow: 780px; --pts-gutter: clamp(1.25rem, 5vw, 3rem); --pts-section-y: clamp(3.5rem, 2.2rem + 5.5vw, 7rem); --pts-r-btn: 5px; --pts-r-img: 20px; --pts-r-img-lg: 24px; --pts-r-card: 16px; --pts-r-field: 6px; --pts-r-pill: 999px; --pts-shadow-sm: 0 1px 2px rgba(27,26,23,.05), 0 1px 3px rgba(27,26,23,.04); --pts-shadow-md: 0 6px 20px -6px rgba(27,26,23,.10); --pts-shadow-header: 0 1px 0 var(--pts-c-line), 0 6px 18px -12px rgba(27,26,23,.18); --pts-ease: cubic-bezier(.2,.6,.2,1); --pts-dur-fast: .15s; --pts-dur: .2s; --pts-header-h: 68px; } @media (min-width: 1024px) { :root { --pts-header-h: 84px; } } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -moz-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: auto; } body { margin: 0; font-family: var(--pts-font-body); font-size: var(--pts-fs-body); line-height: var(--pts-lh-body); color: var(--pts-c-text); background: var(--pts-c-white); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0; padding: 0; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--pts-c-green-tint-2); color: var(--pts-c-text); } :target { scroll-margin-top: calc(var(--pts-header-h) + 1.5rem); } /* ---------- 3. Type ---------- */ h1, h2, h3, h4 { font-family: var(--pts-font-display); color: var(--pts-c-text); margin: 0 0 var(--pts-sp-4); text-wrap: balance; } h1 { font-size: var(--pts-fs-h1); font-weight: 700; line-height: var(--pts-lh-tight); letter-spacing: var(--pts-ls-h1); } h2 { font-size: var(--pts-fs-h2); font-weight: 700; line-height: var(--pts-lh-heading); letter-spacing: var(--pts-ls-h); } h3 { font-size: var(--pts-fs-h3); font-weight: 600; line-height: var(--pts-lh-snug); letter-spacing: var(--pts-ls-h); } h4 { font-size: var(--pts-fs-h4); font-weight: 600; line-height: var(--pts-lh-snug); } p { max-width: var(--pts-measure); margin: 0 0 var(--pts-sp-4); text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--pts-c-green); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--pts-c-green-dark); } .pts-lead { font-size: var(--pts-fs-lead); line-height: var(--pts-lh-snug); color: var(--pts-c-text-muted); max-width: 58ch; } .pts-eyebrow { display: block; font-size: var(--pts-fs-micro); font-weight: 600; letter-spacing: var(--pts-ls-eyebrow); text-transform: uppercase; color: var(--pts-c-green); margin-bottom: var(--pts-sp-2); } small, .pts-u-small { font-size: var(--pts-fs-small); line-height: var(--pts-lh-snug); color: var(--pts-c-text-muted); } .pts-u-muted { color: var(--pts-c-text-muted); } .pts-u-center { text-align: center; } .pts-u-center p, .pts-u-center .pts-lead { margin-inline: auto; } .pts-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pts-skip-link { position: absolute; left: var(--pts-sp-4); top: -100px; z-index: 100; background: var(--pts-c-green-deep); color: #fff; padding: var(--pts-sp-3) var(--pts-sp-4); border-radius: var(--pts-r-btn); text-decoration: none; } .pts-skip-link:focus { top: var(--pts-sp-3); color: #fff; } /* ---------- 4. Layout ---------- */ .pts-container { width: 100%; max-width: var(--pts-container); margin-inline: auto; padding-inline: var(--pts-gutter); } .pts-container--narrow { max-width: var(--pts-container-narrow); } .pts-section { padding-block: var(--pts-section-y); } .pts-section--tint { background: var(--pts-c-green-tint); } .pts-section--offwhite { background: var(--pts-c-off-white); } .pts-section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); } .pts-stack > * + * { margin-top: var(--pts-sp-5); } .pts-section-head { max-width: 60ch; margin-bottom: var(--pts-sp-7); } .pts-section-head.pts-u-center { margin-inline: auto; } .pts-grid { display: grid; gap: var(--pts-sp-5); } @media (min-width: 640px) { .pts-grid-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 640px) { .pts-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .pts-grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--pts-sp-6); } } @media (min-width: 900px) { .pts-grid-2 { gap: var(--pts-sp-6); } } .pts-split { display: grid; gap: var(--pts-sp-6); align-items: center; } @media (min-width: 900px) { .pts-split { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); } .pts-split--media-first > .pts-split__media { order: -1; } } /* ---------- 5. Buttons ---------- */ .pts-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--pts-sp-2); font-family: var(--pts-font-body); font-size: 1rem; font-weight: 600; letter-spacing: var(--pts-ls-btn); line-height: 1; text-decoration: none; cursor: pointer; padding: .9375rem 1.5rem; min-height: 48px; border-radius: var(--pts-r-btn); border: 2px solid transparent; transition: background-color var(--pts-dur) var(--pts-ease), border-color var(--pts-dur) var(--pts-ease), color var(--pts-dur) var(--pts-ease), transform var(--pts-dur) var(--pts-ease); } .pts-btn svg { flex: 0 0 auto; } .pts-btn--primary { background: var(--pts-c-green); color: #fff; } .pts-btn--primary:hover { background: var(--pts-c-green-dark); color: #fff; } .pts-btn--primary:active { background: var(--pts-c-green-deep); transform: translateY(1px); } .pts-btn--secondary { background: transparent; color: var(--pts-c-green); border-color: var(--pts-c-green); } .pts-btn--secondary:hover { background: var(--pts-c-green-tint); border-color: var(--pts-c-green-dark); color: var(--pts-c-green-dark); } .pts-btn--onDark { background: #fff; color: var(--pts-c-green-deep); } .pts-btn--onDark:hover { background: var(--pts-c-green-tint); color: var(--pts-c-green-deep); } .pts-btn--outlineDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .pts-btn--outlineDark:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; } .pts-btn--lg { padding: 1.0625rem 1.875rem; font-size: 1.0625rem; min-height: 54px; } .pts-btn--block { display: flex; width: 100%; } .pts-btn-row { display: flex; flex-wrap: wrap; gap: var(--pts-sp-3); } :where(a, button, input, select, textarea, summary, label):focus-visible { outline: 3px solid var(--pts-c-focus); outline-offset: 2px; border-radius: 3px; } /* ---------- 6. Header + nav ---------- */ .pts-header { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: var(--pts-shadow-header); } .pts-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--pts-sp-5); min-height: var(--pts-header-h); } /* The wordmark must never be squeezed into the row beside it — a nowrap flex item that is allowed to shrink overflows its box and lands on top of its neighbour. */ .pts-brand { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; color: var(--pts-c-green-deep); flex: 0 0 auto; min-width: 0; } .pts-header__actions { flex: 0 0 auto; } /* Second header row: the nav on its own full-width line. */ .pts-header__bar { display: none; border-top: 1px solid var(--pts-c-line); } @media (min-width: 1024px) { .pts-header__bar { display: block; } } /* The client's own oak-sprig artwork — a wide horizontal mark, so it is sized by height and lets its width follow. */ .pts-brand__mark { height: 26px; width: auto; flex: 0 0 auto; } @media (min-width: 1024px) { .pts-brand__mark { height: 32px; } } .pts-brand__text { display: flex; flex-direction: column; line-height: 1; } /* The logotype: full inscriptional caps, as painted on the vans. */ .pts-brand__name { font-family: var(--pts-font-display); font-weight: 600; font-size: clamp(.9375rem, .82rem + .42vw, 1.1875rem); line-height: 1.05; letter-spacing: .07em; text-transform: uppercase; color: var(--pts-c-green-deep); white-space: nowrap; } /* On a narrow phone the mark plus a single-line wordmark plus the Menu button do not fit, so the name breaks over two lines — which is how the van reads anyway. */ @media (max-width: 559px) { .pts-brand__mark { height: 22px; } .pts-brand__name { white-space: normal; font-size: .8125rem; letter-spacing: .05em; } } /* The strapline is letter-split in the markup and laid out as a flex row, so it stretches to exactly the width of the wordmark above it at any size — the classic lockup. Word gap gets a fixed share so it stays readable as two words. */ .pts-brand__text { display: grid; justify-items: stretch; min-width: 0; } .pts-brand__sub { display: flex; justify-content: space-between; font-family: var(--pts-font-body); font-size: .5rem; font-weight: 600; letter-spacing: 0; text-transform: uppercase; color: var(--pts-c-text-muted); margin-top: .45rem; } .pts-brand__gap { flex: 0 0 .5em; } @media (min-width: 1024px) { .pts-brand__sub { font-size: .5625rem; } } /* When the wordmark wraps (narrow phones, footer column) the stretch has nothing sensible to stretch to, so fall back to plain letter-spacing. */ .pts-brand__sub:has(+ *) { min-width: 0; } @media (max-width: 559px) { .pts-brand__sub { justify-content: flex-start; letter-spacing: .14em; } .pts-brand__gap { flex-basis: .55em; } } /* Small phones (360–420px are the common ones) — the header was overflowing and pushing the Menu button off the right edge. The floor was the strapline: as a flex row of one span per letter it cannot wrap, so it set a ~189px min-content width that the brand could never shrink below. Laying the letters out as inline text lets them reflow, and the brand is allowed to shrink. */ @media (max-width: 479px) { .pts-brand { flex: 0 1 auto; min-width: 0; } .pts-brand__text { min-width: 0; } .pts-brand__sub { display: block; letter-spacing: .1em; } .pts-brand__gap { display: inline; } .pts-brand__gap::before { content: "\2002"; } /* Icon-only menu button. The label is redundant next to three bars and costs ~45px. */ .pts-nav__btn-label { display: none; } .pts-nav__btn { padding: .5rem; width: 44px; justify-content: center; } } .pts-footer__brand .pts-brand__sub { justify-content: flex-start; letter-spacing: .14em; } .pts-footer__brand .pts-brand__gap, .pts-nav__panel .pts-brand__gap { flex-basis: .55em; } .pts-nav__panel .pts-brand__sub { justify-content: flex-start; letter-spacing: .14em; } .pts-header__actions { display: flex; align-items: center; gap: var(--pts-sp-4); } .pts-header__phone { display: none; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; color: var(--pts-c-green-deep); white-space: nowrap; } .pts-header__phone:hover { color: var(--pts-c-green); } @media (min-width: 560px) { .pts-header__phone { display: inline-flex; } } /* Desktop nav — its own full-width row inside .pts-header__bar, so seven items and the full "Housing Associations" label all fit without shrinking anything. */ .pts-nav { display: none; } @media (min-width: 1024px) { .pts-nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.25rem); } .pts-nav a { font-weight: 500; white-space: nowrap; color: var(--pts-c-text); text-decoration: none; padding: .8125rem 0; border-bottom: 2px solid transparent; transition: color var(--pts-dur) var(--pts-ease), border-color var(--pts-dur) var(--pts-ease); } .pts-nav a:hover { color: var(--pts-c-green); border-bottom-color: var(--pts-c-green); } .pts-nav a[aria-current="page"] { color: var(--pts-c-green); border-bottom-color: var(--pts-c-green); } } /* zero-JS off-canvas panel */ #pts-nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .pts-nav__btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .5rem .75rem; cursor: pointer; border: 1px solid var(--pts-c-line); border-radius: var(--pts-r-btn); font-size: var(--pts-fs-small); font-weight: 600; color: var(--pts-c-green-deep); background: #fff; } .pts-nav__btn:hover { border-color: var(--pts-c-line-strong); } .pts-nav__bars { display: grid; gap: 4px; } .pts-nav__bars span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } @media (min-width: 1024px) { .pts-nav__btn { display: none; } } .pts-nav__panel { position: fixed; inset: 0; z-index: 60; background: var(--pts-c-green-deep); color: #fff; transform: translateX(100%); transition: transform .28s var(--pts-ease); overflow-y: auto; padding: var(--pts-sp-5) var(--pts-gutter) var(--pts-sp-8); visibility: hidden; } #pts-nav-toggle:checked ~ .pts-nav__panel { transform: translateX(0); visibility: visible; } body:has(#pts-nav-toggle:checked) { overflow: hidden; } .pts-nav__panel-head { display: flex; align-items: center; justify-content: space-between; min-height: var(--pts-header-h); } .pts-nav__panel-head .pts-brand__name, .pts-nav__panel-head .pts-brand { color: #fff; } .pts-nav__panel-head .pts-brand__name { color: #fff; } .pts-nav__panel-head .pts-brand__sub { color: rgba(255,255,255,.6); } .pts-nav__panel-head .pts-brand__mark { color: #fff; } .pts-nav__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: var(--pts-r-btn); background: transparent; } .pts-nav__close:hover { background: rgba(255,255,255,.1); } .pts-nav__links { list-style: none; margin: var(--pts-sp-5) 0 var(--pts-sp-6); } .pts-nav__links a { display: block; color: #fff; text-decoration: none; font-family: var(--pts-font-display); font-weight: 600; font-size: var(--pts-fs-h3); padding: var(--pts-sp-4) 0; border-bottom: 1px solid rgba(255,255,255,.15); } .pts-nav__links a:hover { color: var(--pts-c-green-tint-2); } .pts-nav__panel-cta { display: grid; gap: var(--pts-sp-3); } .pts-nav__panel-note { margin-top: var(--pts-sp-5); color: rgba(255,255,255,.75); font-size: var(--pts-fs-small); } @media (min-width: 1024px) { .pts-nav__panel { display: none; } } /* ---------- 7. Hero ---------- */ .pts-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem); } .pts-hero__inner { display: grid; gap: var(--pts-sp-6); align-items: center; } @media (min-width: 960px) { .pts-hero__inner { grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); } } .pts-hero h1 { margin-bottom: var(--pts-sp-5); } .pts-hero .pts-lead { margin-bottom: var(--pts-sp-6); } .pts-hero__points { list-style: none; display: grid; gap: var(--pts-sp-2); margin: 0 0 var(--pts-sp-6); } .pts-hero__points li { display: flex; gap: .625rem; align-items: flex-start; font-weight: 500; } .pts-hero__points svg { flex: 0 0 auto; margin-top: .3rem; color: var(--pts-c-green); } .pts-img { border-radius: var(--pts-r-img); overflow: hidden; background: var(--pts-c-sand); } .pts-img > img { width: 100%; height: 100%; object-fit: cover; } /* Photographs run tall rather than letterboxed — a tree is a vertical subject. */ .pts-img--hero { border-radius: var(--pts-r-img-lg); aspect-ratio: 4/3; } @media (min-width: 900px) { .pts-img--hero { aspect-ratio: 4/5; } } /* Card images are a thumbnail band, not a feature. A ratio here scales with the column, which in a two-up grid makes them enormous — a fixed height keeps them the same modest size whether the card sits in a 2-col or 3-col row. */ .pts-img--card { border-radius: 0; aspect-ratio: auto; height: 170px; } @media (min-width: 1000px) { .pts-img--card { height: 200px; } } .pts-img--square { aspect-ratio: 1/1; } .pts-img--wide { aspect-ratio: 4/3; } @media (min-width: 900px) { .pts-img--wide { aspect-ratio: 1/1; } } .pts-img--portrait { aspect-ratio: 4/5; } /* placeholder used where no photograph has been supplied yet */ .pts-img--placeholder { display: grid; place-items: center; background: var(--pts-c-green-tint); color: var(--pts-c-green); border: 1px dashed var(--pts-c-green-tint-2); } .pts-img--placeholder span { font-size: var(--pts-fs-micro); font-weight: 600; letter-spacing: var(--pts-ls-eyebrow); text-transform: uppercase; padding: var(--pts-sp-4); text-align: center; } /* ---------- 8. Cards ---------- */ .pts-card { background: #fff; border: 1px solid var(--pts-c-line); border-radius: var(--pts-r-card); padding: var(--pts-sp-5); box-shadow: var(--pts-shadow-sm); transition: box-shadow var(--pts-dur) var(--pts-ease), transform var(--pts-dur) var(--pts-ease), border-color var(--pts-dur) var(--pts-ease); } .pts-card:hover { box-shadow: var(--pts-shadow-md); border-color: var(--pts-c-green-tint-2); transform: translateY(-2px); } .pts-card h3 { margin-bottom: var(--pts-sp-3); } .pts-card p { margin-bottom: 0; } .pts-card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .pts-card--media .pts-card__body { padding: var(--pts-sp-5); display: flex; flex-direction: column; flex: 1; } .pts-card--media .pts-card__body p { flex: 1; margin-bottom: var(--pts-sp-4); } .pts-card--flat { box-shadow: none; } .pts-card--flat:hover { transform: none; box-shadow: var(--pts-shadow-sm); } .pts-card__icon { width: 48px; height: 48px; display: grid; place-items: center; background: var(--pts-c-green-tint); color: var(--pts-c-green); border-radius: 12px; margin-bottom: var(--pts-sp-4); } .pts-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; text-decoration: none; } .pts-card__link:hover { text-decoration: underline; } .pts-card__link svg { transition: transform var(--pts-dur) var(--pts-ease); } .pts-card__link:hover svg { transform: translateX(3px); } /* service list — compact, no photos needed */ .pts-services { list-style: none; display: grid; gap: var(--pts-sp-4); } @media (min-width: 640px) { .pts-services { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .pts-services { grid-template-columns: repeat(3, 1fr); gap: var(--pts-sp-5); } } .pts-service { background: #fff; border: 1px solid var(--pts-c-line); border-radius: var(--pts-r-card); padding: var(--pts-sp-5); display: flex; gap: var(--pts-sp-4); align-items: flex-start; transition: border-color var(--pts-dur) var(--pts-ease), box-shadow var(--pts-dur) var(--pts-ease); } .pts-service:hover { border-color: var(--pts-c-green-tint-2); box-shadow: var(--pts-shadow-md); } .pts-service__icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; background: var(--pts-c-green-tint); color: var(--pts-c-green); border-radius: 10px; } .pts-service h3 { font-size: var(--pts-fs-h4); margin-bottom: var(--pts-sp-2); } .pts-service p { font-size: var(--pts-fs-small); color: var(--pts-c-text-muted); margin: 0; } /* tick list */ .pts-ticks { list-style: none; display: grid; gap: var(--pts-sp-3); } .pts-ticks li { display: flex; gap: .625rem; align-items: flex-start; } .pts-ticks svg { flex: 0 0 auto; margin-top: .35rem; color: var(--pts-c-green); } .pts-ticks li > span { min-width: 0; } /* Term + explanation. Stacked, never side by side — a bold label and its description on one line wrap into a ragged mess as soon as the column narrows. */ .pts-terms { list-style: none; display: grid; gap: var(--pts-sp-4); } .pts-term { display: flex; gap: .75rem; align-items: flex-start; } .pts-term__tick { flex: 0 0 auto; display: flex; margin-top: .3rem; color: var(--pts-c-green); } .pts-term__body { display: grid; gap: .125rem; min-width: 0; } .pts-term__name { font-weight: 600; color: var(--pts-c-text); } .pts-term__desc { color: var(--pts-c-text-muted); font-size: var(--pts-fs-small); line-height: var(--pts-lh-snug); } @media (min-width: 700px) { .pts-terms { gap: var(--pts-sp-5); } .pts-terms--2col { grid-template-columns: repeat(2, 1fr); column-gap: var(--pts-sp-6); } } /* ---------- 9. Accreditations ---------- */ .pts-accred { background: var(--pts-c-off-white); padding-block: var(--pts-sp-7); border-block: 1px solid var(--pts-c-line); } .pts-accred__title { font-size: var(--pts-fs-micro); font-weight: 600; letter-spacing: var(--pts-ls-eyebrow); text-transform: uppercase; color: var(--pts-c-text-muted); text-align: center; margin-bottom: var(--pts-sp-5); } .pts-accred__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--pts-sp-5) var(--pts-sp-7); list-style: none; } /* Source PNGs are trimmed to their artwork, so a fixed optical height lines them up properly. Greyscale at rest keeps other people's brand colours — including the blue in the Wildlife Trust badge — out of the palette until you hover. */ .pts-accred__list img { height: 44px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1); opacity: .68; transition: filter .25s var(--pts-ease), opacity .25s var(--pts-ease); } .pts-accred__list li:hover img { filter: grayscale(0); opacity: 1; } @media (min-width: 768px) { .pts-accred__list img { height: 52px; } } .pts-accred__text { display: grid; place-items: center; height: 52px; padding: 0 var(--pts-sp-4); border: 1px solid var(--pts-c-line-strong); border-radius: var(--pts-r-btn); font-size: var(--pts-fs-small); font-weight: 600; color: var(--pts-c-text-muted); text-align: center; line-height: 1.25; } /* ---------- 9b. Credential badges ---------- */ .pts-badges-band { background: var(--pts-c-green-tint); } .pts-badges { list-style: none; display: grid; gap: var(--pts-sp-4); } @media (min-width: 560px) { .pts-badges { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .pts-badges { grid-template-columns: repeat(3, 1fr); gap: var(--pts-sp-5); } } .pts-badge { background: #fff; border: 1px solid var(--pts-c-green-tint-2); border-radius: var(--pts-r-card); padding: var(--pts-sp-5); display: grid; gap: .35rem; text-align: center; } .pts-badge__big { font-family: var(--pts-font-display); font-weight: 700; font-size: clamp(1.125rem, 1rem + .55vw, 1.4375rem); line-height: 1.15; color: var(--pts-c-green-dark); letter-spacing: var(--pts-ls-h); } .pts-badge__small { font-size: var(--pts-fs-small); color: var(--pts-c-text-muted); line-height: var(--pts-lh-snug); } /* ---------- 10. Trust bar ---------- */ .pts-trustbar { border-bottom: 1px solid var(--pts-c-line); background: #fff; } .pts-trustbar ul { list-style: none; display: grid; gap: var(--pts-sp-4); padding-block: var(--pts-sp-5); } @media (min-width: 700px) { .pts-trustbar ul { grid-template-columns: repeat(4, 1fr); gap: var(--pts-sp-5); } } .pts-trustbar li { display: flex; gap: .625rem; align-items: flex-start; font-size: var(--pts-fs-small); font-weight: 500; } .pts-trustbar svg { flex: 0 0 auto; margin-top: .2rem; color: var(--pts-c-green); } /* ---------- 11. Quotes ---------- */ .pts-quotes { display: grid; gap: var(--pts-sp-5); } @media (min-width: 800px) { .pts-quotes { grid-template-columns: repeat(2, 1fr); } } /* No coloured edge stripe — plain card, even padding. */ .pts-quote { background: #fff; border: 1px solid var(--pts-c-line); border-radius: var(--pts-r-card); padding: var(--pts-sp-5); margin: 0; } .pts-quote__text { font-family: var(--pts-font-display); font-weight: 600; font-size: var(--pts-fs-h4); line-height: var(--pts-lh-snug); margin: 0 0 var(--pts-sp-4); max-width: none; } .pts-quote__meta { font-size: var(--pts-fs-small); color: var(--pts-c-text-muted); font-style: normal; } .pts-quote__name { font-weight: 600; color: var(--pts-c-text); } /* ---------- 12. Case studies ---------- */ .pts-case { background: #fff; border: 1px solid var(--pts-c-line); border-radius: var(--pts-r-card); padding: var(--pts-sp-6); } .pts-case h3 { margin-bottom: var(--pts-sp-3); } .pts-case__tag { display: inline-block; margin-bottom: var(--pts-sp-4); background: var(--pts-c-green-tint); color: var(--pts-c-green-dark); border-radius: var(--pts-r-pill); padding: .3rem .75rem; font-size: var(--pts-fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } /* ---------- 13. CTA band ---------- */ /* Two related greens, not one: the CTA band sits a shade lighter than the footer so it reads as its own block rather than the top of the footer. */ .pts-cta { background: var(--pts-c-green-dark); color: #fff; padding-block: var(--pts-section-y); } .pts-cta h2 { color: #fff; } .pts-cta p { color: rgba(255,255,255,.86); } .pts-cta a:not(.pts-btn) { color: #fff; } .pts-cta__inner { display: grid; gap: var(--pts-sp-5); } @media (min-width: 900px) { .pts-cta__inner { grid-template-columns: 1fr auto; align-items: center; gap: var(--pts-sp-7); } } .pts-cta__actions { display: flex; flex-wrap: wrap; gap: var(--pts-sp-3); } /* ---------- 14. Areas ---------- */ .pts-areas { list-style: none; display: flex; flex-wrap: wrap; gap: var(--pts-sp-2); } .pts-areas li { background: #fff; border: 1px solid var(--pts-c-line); border-radius: var(--pts-r-pill); padding: .45rem 1rem; font-size: var(--pts-fs-small); font-weight: 500; } /* ---------- 15. Contact details + form ---------- */ .pts-contact-grid { display: grid; gap: var(--pts-sp-6); } @media (min-width: 900px) { .pts-contact-grid { grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } } .pts-contact-col { display: grid; gap: var(--pts-sp-5); align-content: start; } .pts-contact-hidden { display: none; } /* The form stays put while the left column scrolls past it. */ @media (min-width: 900px) { .pts-contact-form-col { position: sticky; top: calc(var(--pts-header-h) + 1.5rem); } } .pts-card__h { font-size: var(--pts-fs-h3); margin-bottom: var(--pts-sp-4); } .pts-card--areas { background: var(--pts-c-green-tint); border-color: var(--pts-c-green-tint-2); box-shadow: none; } .pts-card--areas:hover { transform: none; box-shadow: none; } .pts-card--areas .pts-areas li { background: #fff; border-color: var(--pts-c-green-tint-2); } .pts-addr { font-style: normal; margin-top: .5rem; font-size: var(--pts-fs-small); line-height: var(--pts-lh-body); } .pts-detail__value--sm { font-size: var(--pts-fs-body); word-break: break-word; } .pts-req { color: var(--pts-c-error); } /* ---------- 15b. Multi-step enquiry form ---------- */ .pts-steps { list-style: none; display: flex; align-items: center; gap: .5rem; margin-bottom: var(--pts-sp-5); } .pts-steps__dot { display: flex; align-items: center; gap: .5rem; color: var(--pts-c-text-muted); font-size: var(--pts-fs-small); font-weight: 600; } .pts-steps__num { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--pts-c-line-strong); font-size: .8125rem; } .pts-steps__dot.pts-is-current { color: var(--pts-c-green-dark); } .pts-steps__dot.pts-is-current .pts-steps__num { background: var(--pts-c-green); border-color: var(--pts-c-green); color: #fff; } .pts-steps__dot.pts-is-done .pts-steps__num { background: var(--pts-c-green-tint-2); border-color: var(--pts-c-green-tint-2); color: var(--pts-c-green-dark); } .pts-steps__sep { flex: 1 1 auto; height: 1px; background: var(--pts-c-line); } .pts-steps__lbl { display: none; } @media (min-width: 520px) { .pts-steps__lbl { display: inline; } } .pts-form-step { border: 0; margin: 0; padding: 0; min-width: 0; } .pts-form-step + .pts-form-step { margin-top: var(--pts-sp-6); padding-top: var(--pts-sp-6); border-top: 1px solid var(--pts-c-line); } .pts-form-step h3 { margin-bottom: var(--pts-sp-2); } .pts-step__sub { font-size: var(--pts-fs-small); color: var(--pts-c-text-muted); margin-bottom: var(--pts-sp-5); } .pts-choices { display: grid; gap: var(--pts-sp-3); } @media (min-width: 480px) { .pts-choices { grid-template-columns: repeat(2, 1fr); } } .pts-choice { position: relative; display: block; cursor: pointer; } .pts-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; } .pts-choice__body { display: grid; gap: .125rem; height: 100%; padding: var(--pts-sp-4); border: 1px solid var(--pts-c-line); border-radius: var(--pts-r-card); background: #fff; transition: border-color var(--pts-dur) var(--pts-ease), background-color var(--pts-dur) var(--pts-ease); } .pts-choice__ic { color: var(--pts-c-green); margin-bottom: .375rem; } .pts-choice__ic svg { width: 26px; height: 26px; } .pts-choice__t { font-weight: 600; line-height: 1.25; } .pts-choice__d { font-size: var(--pts-fs-small); color: var(--pts-c-text-muted); line-height: var(--pts-lh-snug); } .pts-choice:hover .pts-choice__body { border-color: var(--pts-c-line-strong); } .pts-choice input:checked + .pts-choice__body { border-color: var(--pts-c-green); background: var(--pts-c-green-tint); } .pts-choice input:focus-visible + .pts-choice__body { outline: 3px solid var(--pts-c-focus); outline-offset: 2px; } .pts-pills { display: flex; flex-wrap: wrap; gap: .5rem; } .pts-pill { position: relative; display: inline-flex; cursor: pointer; } .pts-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; } .pts-pill span { display: inline-flex; align-items: center; min-height: 42px; padding: .5rem 1rem; border: 1px solid var(--pts-c-line-strong); border-radius: var(--pts-r-pill); font-size: var(--pts-fs-small); font-weight: 500; background: #fff; transition: border-color var(--pts-dur) var(--pts-ease), background-color var(--pts-dur) var(--pts-ease), color var(--pts-dur) var(--pts-ease); } .pts-pill:hover span { border-color: var(--pts-c-text-muted); } .pts-pill input:checked + span { background: var(--pts-c-green); border-color: var(--pts-c-green); color: #fff; } .pts-pill input:focus-visible + span { outline: 3px solid var(--pts-c-focus); outline-offset: 2px; } .pts-form-status { margin-top: var(--pts-sp-4); font-size: var(--pts-fs-small); } .pts-form-status--error { color: var(--pts-c-error); font-weight: 500; } .pts-detail-list { list-style: none; display: grid; gap: var(--pts-sp-4); } .pts-detail-list li { display: flex; gap: var(--pts-sp-4); align-items: flex-start; } .pts-detail-list svg { flex: 0 0 auto; margin-top: .25rem; color: var(--pts-c-green); } .pts-detail-list dt, .pts-detail-list .pts-detail__label { display: block; font-size: var(--pts-fs-micro); font-weight: 600; letter-spacing: var(--pts-ls-eyebrow); text-transform: uppercase; color: var(--pts-c-text-muted); } .pts-detail__value { font-weight: 600; font-size: var(--pts-fs-h4); } .pts-detail__value a { text-decoration: none; } .pts-detail__value a:hover { text-decoration: underline; } .pts-form-card { background: #fff; border: 1px solid var(--pts-c-line); border-radius: var(--pts-r-card); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--pts-shadow-sm); } .pts-field { display: block; margin-bottom: var(--pts-sp-5); } .pts-field__label { display: block; font-size: var(--pts-fs-small); font-weight: 600; margin-bottom: var(--pts-sp-2); } .pts-field__hint { display: block; font-size: var(--pts-fs-small); color: var(--pts-c-text-muted); margin-top: var(--pts-sp-2); } .pts-input, .pts-select, .pts-textarea { width: 100%; font-size: 1rem; color: var(--pts-c-text); background: #fff; border: 1px solid var(--pts-c-line-strong); border-radius: var(--pts-r-field); padding: .75rem .875rem; min-height: 48px; transition: border-color var(--pts-dur-fast) var(--pts-ease), box-shadow var(--pts-dur-fast) var(--pts-ease); } .pts-textarea { min-height: 140px; resize: vertical; line-height: var(--pts-lh-body); } .pts-input::placeholder, .pts-textarea::placeholder { color: var(--pts-c-text-muted); opacity: 1; } .pts-input:hover, .pts-select:hover, .pts-textarea:hover { border-color: var(--pts-c-text-muted); } .pts-input:focus, .pts-select:focus, .pts-textarea:focus { border-color: var(--pts-c-green); box-shadow: 0 0 0 3px var(--pts-c-green-tint-2); outline: none; } .pts-input:focus-visible, .pts-select:focus-visible, .pts-textarea:focus-visible { outline: 3px solid var(--pts-c-focus); outline-offset: 2px; } .pts-input[aria-invalid="true"], .pts-textarea[aria-invalid="true"] { border-color: var(--pts-c-error); } .pts-field__error { color: var(--pts-c-error); font-size: var(--pts-fs-small); font-weight: 500; margin-top: var(--pts-sp-2); } .pts-field-row { display: grid; gap: var(--pts-sp-4); } @media (min-width: 560px) { .pts-field-row { grid-template-columns: 1fr 1fr; gap: var(--pts-sp-5); } } .pts-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.pts-w3.pts-org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235C5A54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem; } .pts-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- 16. Footer ---------- */ .pts-footer { background: var(--pts-c-green-deep); color: rgba(255,255,255,.82); padding-block: var(--pts-sp-8) var(--pts-sp-5); } .pts-footer h2, .pts-footer h3 { color: #fff; font-size: var(--pts-fs-micro); font-family: var(--pts-font-body); font-weight: 600; letter-spacing: var(--pts-ls-eyebrow); text-transform: uppercase; margin-bottom: var(--pts-sp-4); color: rgba(255,255,255,.6); } .pts-footer a { color: #fff; text-decoration: none; } .pts-footer a:hover { color: var(--pts-c-green-tint-2); text-decoration: underline; } .pts-footer__grid { display: grid; gap: var(--pts-sp-6); } @media (min-width: 700px) { .pts-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } @media (min-width: 1000px) { .pts-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--pts-sp-7); } } /* The footer brand sits in a narrow grid column, so the wordmark has to wrap rather than run over the next column. */ .pts-footer__brand .pts-brand { flex-wrap: wrap; } .pts-footer__brand .pts-brand__name { color: #fff; white-space: normal; } .pts-footer__brand .pts-brand__sub { color: rgba(255,255,255,.55); } .pts-footer__brand .pts-brand__mark { color: #fff; } .pts-footer ul { list-style: none; display: grid; gap: var(--pts-sp-3); font-size: var(--pts-fs-small); } .pts-footer address { font-style: normal; font-size: var(--pts-fs-small); line-height: var(--pts-lh-body); } .pts-footer__bottom { margin-top: var(--pts-sp-7); padding-top: var(--pts-sp-5); border-top: 1px solid rgba(255,255,255,.15); display: flex; flex-wrap: wrap; gap: var(--pts-sp-3) var(--pts-sp-5); justify-content: space-between; align-items: center; font-size: var(--pts-fs-small); color: rgba(255,255,255,.7); } /* ---------- 17. Page header (interior pages) ---------- */ .pts-pagehead { background: var(--pts-c-green-tint); padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); } .pts-pagehead h1 { margin-bottom: var(--pts-sp-4); } .pts-pagehead .pts-lead { margin-bottom: 0; } .pts-crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; font-size: var(--pts-fs-small); color: var(--pts-c-text-muted); margin-bottom: var(--pts-sp-4); } .pts-crumbs a { text-decoration: none; } .pts-crumbs a:hover { text-decoration: underline; } .pts-crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--pts-c-line-strong); } /* ---------- 18. Motion ---------- */ main { animation: pageIn .18s var(--pts-ease) both; } @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media print { .pts-header, .pts-nav__panel, .pts-cta, .pts-footer__bottom { display: none; } body { color: #000; } } /* ---------- Zero-JS branch reveal ---------- Platform rule 7: public pages ship no JavaScript. Branch visibility is pure CSS — :has() on the checked step-1 radio. Where :has() is unsupported the fallback is "every question visible", which is a long form but a working one, never a broken one. These keys MUST match NEEDS in request-fields.ts; request-branches.test.ts pins the data side of that contract. */ .pts-enquiry [data-when] { display: none; } .pts-enquiry:has(#pts-need-fell:checked) [data-when~="fell"], .pts-enquiry:has(#pts-need-prune:checked) [data-when~="prune"], .pts-enquiry:has(#pts-need-hedge:checked) [data-when~="hedge"], .pts-enquiry:has(#pts-need-stump:checked) [data-when~="stump"], .pts-enquiry:has(#pts-need-survey:checked) [data-when~="survey"], .pts-enquiry:has(#pts-need-commercial:checked) [data-when~="commercial"], .pts-enquiry:has(#pts-need-logs:checked) [data-when~="logs"], .pts-enquiry:has(#pts-need-other:checked) [data-when~="other"] { display: block; } /* ---------- One step at a time, still without JavaScript ---------- Three hidden radios drive which fieldset is visible; Next and Back are