/* global bits shared across every fennec block */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* the header template-part wrapper does the sticking (it's a direct child of the tall page root) */ :root { --fennec-abar: 0px; } body.admin-bar { --fennec-abar: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --fennec-abar: 46px; } } @media screen and (max-width: 600px) { body.admin-bar { --fennec-abar: 0px; } } .fennec-headwrap { position: sticky; top: var(--fennec-abar); z-index: 50; } body .fennec-head__mobile { top: var(--fennec-abar); } body .fennec-lightbox { top: var(--fennec-abar); } .fennec-head__mobile-chat { margin-top: .9rem; text-align: center; } [data-fennec-chat] .fennec-chat__label { display: inline-block; } @media screen and (max-width: 640px) { body .fennec-lightbox__stage { max-height: calc(100vh - var(--fennec-abar)); } } /* jump-links (e.g. footer → #faqs) clear the sticky header */ [id] { scroll-margin-top: calc(90px + var(--fennec-abar)); } /* full-bleed sections butt together — no white block-gap slivers between them or the footer. each fennec section carries its own vertical padding. */ .wp-site-blocks > * { margin-block-start: 0; } .wp-block-post-content { margin-block: 0; } .wp-block-post-content > [class*="wp-block-fennec-"] { margin-block: 0; } :where(a, button, input, .fennec-btn):focus-visible { outline: 3px solid var(--wp--preset--color--primary, #fa6500); outline-offset: 3px; } /* eyebrow */ .fennec-eyebrow { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--primary-deep, #c2410c); display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; } .fennec-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--wp--preset--color--primary, #fa6500); box-shadow: 0 0 0 4px rgba(250, 101, 0, 0.16); } /* buttons */ .fennec-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--wp--preset--font-family--heading); font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; padding: 0.8em 1.6em; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .fennec-btn:active { transform: translateY(1px); } .fennec-btn.is-primary { background: var(--wp--preset--color--primary, #fa6500); color: #fff; border-color: var(--wp--preset--color--primary, #fa6500); } .fennec-btn.is-primary:hover { background: var(--wp--preset--color--primary-deep, #c2410c); border-color: var(--wp--preset--color--primary-deep, #c2410c); box-shadow: 0 8px 20px -10px rgba(194, 65, 12, 0.6); } .fennec-btn.is-secondary { background: transparent; color: var(--wp--preset--color--dark, #594238); border-color: var(--wp--preset--color--border, #efe3dd); } .fennec-btn.is-secondary:hover { border-color: var(--wp--preset--color--primary, #fa6500); color: var(--wp--preset--color--primary-deep, #c2410c); } .fennec-btn.is-light { background: #fff; color: var(--wp--preset--color--primary-deep, #c2410c); border-color: #fff; } .fennec-btn.is-light:hover { background: var(--wp--preset--color--light, #fff8f6); border-color: var(--wp--preset--color--light, #fff8f6); } /* ---- scroll reveal (only armed when .fennec-anim is on ) ---- */ .fennec-reveal { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms); } .fennec-anim .fennec-reveal { opacity: 0; transform: translateY(22px); } .fennec-anim .fennec-reveal.is-in { opacity: 1; transform: none; } /* job-sheet tick that draws itself in when its row appears */ .fennec-check path { stroke-dasharray: 26; stroke-dashoffset: 0; } .fennec-anim .fennec-reveal .fennec-check path { stroke-dashoffset: 26; } .fennec-anim .fennec-reveal.is-in .fennec-check path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s ease calc(0.15s + var(--i, 0) * 70ms); } /* signed-off stamp presses on when the footer appears */ @keyframes fennec-stamp { 0% { transform: rotate(-1.5deg) scale(1.7); opacity: 0; } 55% { opacity: 1; } 100% { transform: rotate(-1.5deg) scale(1); opacity: 1; } } .fennec-anim .fennec-reveal.is-in .fennec-footer__stamp { animation: fennec-stamp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; } /* parallax layers */ [data-parallax] { will-change: transform; } /* service page header — job-sheet tint band above the body */ .fennec-servicehead { background: radial-gradient(120% 130% at 88% 0%, #fff1e9 0%, var(--wp--preset--color--light, #fff8f6) 60%); border-bottom: 1px solid var(--wp--preset--color--border, #efe3dd); padding-block: clamp(2.75rem, 6vw, 4.5rem); } /* one left-aligned column, matches the other blocks' width so nothing escapes to the edge */ .fennec-servicehead__inner { width: min(100% - 3rem, 960px); margin-inline: auto; text-align: left; } .fennec-servicehead__inner > * { text-align: left; margin-inline: 0; } .fennec-servicehead .fennec-eyebrow { margin: 0 0 1rem; } .fennec-servicehead .fennec-eyebrow a { color: inherit; text-decoration: none; } .fennec-servicehead .fennec-eyebrow a:hover { color: var(--wp--preset--color--primary, #fa6500); } .fennec-servicehead .wp-block-post-title { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.1; margin: 0 0 1.1rem; max-width: 20ch; } .fennec-servicehead .wp-block-post-excerpt { margin: 0; } .fennec-servicehead .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--muted, #8a7a6f); font-size: clamp(1.08rem, 1.8vw, 1.28rem); line-height: 1.6; max-width: 62ch; margin: 0; } .fennec-servicehead .wp-block-post-excerpt__more-link { display: none; } /* back to top */ .fennec-totop { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 40; width: 48px; height: 48px; border-radius: 50%; background: var(--wp--preset--color--dark, #594238); color: #fff; border: 0; display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; box-shadow: 0 12px 26px -12px rgba(89, 66, 56, 0.65); transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s ease; } .fennec-totop.is-shown { opacity: 1; transform: none; pointer-events: auto; } .fennec-totop:hover { background: var(--wp--preset--color--primary, #fa6500); } .fennec-totop svg { width: 22px; height: 22px; } @media (prefers-reduced-motion: reduce) { .fennec-anim .fennec-reveal, .fennec-anim .fennec-reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; } .fennec-check path { stroke-dashoffset: 0 !important; } .fennec-anim .fennec-reveal.is-in .fennec-footer__stamp { animation: none; } [data-parallax] { transform: none !important; } } /* mobile: centre content + buttons everywhere (header & footer keep their own layout). selectors are parent-scoped so they win over the single-class block styles. */ @media (max-width: 700px) { .fennec-hero .fennec-hero__inner { gap: 3rem; } .fennec-hero .fennec-hero__copy { text-align: center; } .fennec-hero .fennec-hero__actions { justify-content: center; } /* list-style modules stay left-aligned on mobile (override the post-content centring below) */ main .wp-block-post-content .fennec-worksheet, main .wp-block-post-content .fennec-faq, main .wp-block-post-content .fennec-hub { text-align: left; } .fennec-coverage .fennec-coverage__intro { text-align: center; } .fennec-coverage .fennec-coverage__towns { justify-content: center; } .fennec-cta .fennec-cta__inner { justify-content: center; text-align: center; } .fennec-reviews .fennec-reviews__head { flex-direction: column; align-items: center; text-align: center; } .fennec-reviews .fennec-review { text-align: center; } .fennec-reviews .fennec-review figcaption { justify-content: center; } .fennec-gallery .fennec-gallery__head { text-align: center; } .fennec-gallery figcaption { text-align: center; } main .wp-block-post-content { text-align: center; } }