markup gets default padding. - Don't combine with Elementor's "Background Overlay" (it uses ::before too) or with bg-logo (both use ::after). For a dark version use bg-wow-dark. */ .bg-wow { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%); } .bg-wow:not(.elementor-element) { padding: clamp(52px, 7vw, 92px) 0 clamp(64px, 8vw, 104px); } body .bg-wow::before { content: ""; position: absolute; inset: -80px; width: auto; height: auto; z-index: -1; pointer-events: none; will-change: transform; opacity: 1; transition: none; border-radius: 0; /* reset Elementor's own ::before overlay rules (it sets width/height:100%, which stopped this layer short on the right and bottom) */ background: radial-gradient(circle 280px at 92% 8%, color-mix(in srgb, var(--sprout) 35%, transparent) 0%, transparent 70%), radial-gradient(circle 200px at 80% 104%, color-mix(in srgb, var(--lime-core) 50%, transparent) 0%, transparent 70%), radial-gradient(circle 240px at 40% 68%, color-mix(in srgb, var(--teal) 12%, transparent) 0%, transparent 70%); animation: wowDrift 24s ease-in-out infinite alternate; } body .bg-wow::after { content: ""; position: absolute; inset: 0; width: auto; height: auto; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(20,100,54,.14) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 40%, #000 5%, transparent 70%); mask-image: radial-gradient(ellipse 70% 80% at 80% 40%, #000 5%, transparent 70%); } @keyframes wowDrift { from { transform: translate(0,0) scale(1); } to { transform: translate(-40px,30px) scale(1.1); } } @media (prefers-reduced-motion: reduce) { body .bg-wow::before { animation: none; } } /* ============================================================ TITLE BAR (the gradient rule above section headings, as a class) ============================================================ The short gradient line that sits above headings in .section-head, as a class for any title: title-bar bar on the left (matches left-aligned text) title-bar-center bar centred (use with centred text) title-bar-right bar on the right (use with right-aligned text) Put it on an Elementor Heading widget (Advanced -> CSS Classes) — or on a raw

. Turns light green-yellow automatically inside bg-forest / bg-wow-dark / the footer; add title-bar-dark on any other dark green background. Tweak per heading: --title-bar-w (44px), --title-bar-h (4px), --title-bar-gap (18px). / body .title-bar::before, body .title-bar-center::before, body .title-bar-right::before { content: ""; display: block; position: static; opacity: 1; transition: none; transform: none; width: var(--title-bar-w, 44px); height: var(--title-bar-h, 4px); border-radius: 2px; margin: 0 auto var(--title-bar-gap, 18px) 0; background: var(--grad-cta); } body .title-bar-center::before { margin-left: auto; margin-right: auto; } body .title-bar-right::before { margin-left: auto; margin-right: 0; } / Dark green backgrounds: the bar switches to the light green-yellow gradient automatically inside bg-forest, bg-wow-dark and the theme footer, or when bg-forest / bg-wow-dark sits on the heading itself. Anywhere else on dark green (e.g. a container with a dark colour set in Elementor), add title-bar-dark. / body .bg-forest .title-bar::before, body .bg-forest .title-bar-center::before, body .bg-forest .title-bar-right::before, body .bg-wow-dark .title-bar::before, body .bg-wow-dark .title-bar-center::before, body .bg-wow-dark .title-bar-right::before, body .site-footer .title-bar::before, body .site-footer .title-bar-center::before, body .site-footer .title-bar-right::before, body .title-bar.bg-forest::before, body .title-bar-center.bg-forest::before, body .title-bar-right.bg-forest::before, body .title-bar.bg-wow-dark::before, body .title-bar-center.bg-wow-dark::before, body .title-bar-right.bg-wow-dark::before, body .title-bar-dark::before, body .title-bar-light::before { background: linear-gradient(120deg, var(--sprout), var(--lime-core)); } / ============================================================ DARK VERSION (bg-wow-dark) — same animated blobs + dotted grid on the dark green gradient ============================================================ Used by the theme footer; also usable on any Elementor Section/Container (Advanced -> CSS Classes -> bg-wow-dark), e.g. a dark header or an Elementor Theme Builder footer. Headings inside turn white. Same limits as bg-wow: don't combine with Elementor's Background Overlay or bg-logo; leave padding to Elementor. / .bg-wow-dark { position: relative; overflow: hidden; isolation: isolate; background: var(--grad-band); color: rgba(255,255,255,.82); } body .bg-wow-dark::before { content: ""; position: absolute; inset: -80px; width: auto; height: auto; z-index: -1; pointer-events: none; will-change: transform; opacity: 1; transition: none; border-radius: 0; background: radial-gradient(circle 300px at 92% 6%, color-mix(in srgb, var(--sprout) 24%, transparent) 0%, transparent 70%), radial-gradient(circle 220px at 78% 104%, color-mix(in srgb, var(--leaf) 26%, transparent) 0%, transparent 70%), radial-gradient(circle 260px at 34% 70%, color-mix(in srgb, var(--teal) 22%, transparent) 0%, transparent 70%); animation: wowDrift 24s ease-in-out infinite alternate; } body .bg-wow-dark::after { content: ""; position: absolute; inset: 0; width: auto; height: auto; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 40%, #000 5%, transparent 70%); mask-image: radial-gradient(ellipse 70% 80% at 80% 40%, #000 5%, transparent 70%); } body .bg-wow-dark h1, body .bg-wow-dark h2, body .bg-wow-dark h3, body .bg-wow-dark h4 { color: var(--white); } :where(.bg-wow-dark) p { color: rgba(255,255,255,.86); } @media (prefers-reduced-motion: reduce) { body .bg-wow-dark::before { animation: none; } } / ============================================================ FITTED BACKGROUND (bg-wow-fit) — for statement bands like "Our Focus" ============================================================ A different design from bg-wow: slow-flowing aurora glows + fine diagonal lines + soft inner shading. It fits the container exactly: every layer is inset:0 and takes the container's rounded corners, and the glows move by shifting inside their own box (no oversized layer, nothing sticks out or gets cut off), so it also works inside boxed / rounded / narrow containers. bg-wow-fit = dark green (white headings). bg-wow-fit-light = the light version: bg-wow-fit dark green bg-wow-fit-light light version (works on its own; also still works as: bg-wow-fit bg-wow-fit-light) Put it on the outer Section/Container (Advanced -> CSS Classes). Padding is left to Elementor. Same limits as bg-wow: no Elementor Background Overlay, and don't combine with bg-logo / bg-wow. / .bg-wow-fit, .bg-wow-fit-light { --wf-bg: var(--grad-band); --wf-a1: 28%; --wf-a2: 30%; --wf-a3: 26%; --wf-a4: 14%; --wf-line: rgba(255,255,255,.05); position: relative; overflow: hidden; isolation: isolate; background: var(--wf-bg); color: rgba(255,255,255,.86); box-shadow: inset 0 0 140px -30px rgba(0,0,0,.30); } .bg-wow-fit-light { --wf-bg: linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%); --wf-a1: 38%; --wf-a2: 16%; --wf-a3: 24%; --wf-a4: 50%; --wf-line: rgba(20,100,54,.06); color: var(--slate); box-shadow: none; } .bg-wow-fit:not(.elementor-element), .bg-wow-fit-light:not(.elementor-element) { padding: var(--section-pad) 0; } body .bg-wow-fit::before, body .bg-wow-fit-light::before { content: ""; position: absolute; inset: 0; width: auto; height: auto; z-index: -1; pointer-events: none; opacity: 1; transition: none; border-radius: inherit; background-repeat: no-repeat; background: radial-gradient(ellipse 42% 52% at 16% 24%, color-mix(in srgb, var(--sprout) var(--wf-a1), transparent), transparent 100%) 0% 0% / 120% 120% no-repeat, radial-gradient(ellipse 38% 48% at 86% 28%, color-mix(in srgb, var(--teal) var(--wf-a2), transparent), transparent 100%) 100% 0% / 120% 120% no-repeat, radial-gradient(ellipse 44% 40% at 66% 96%, color-mix(in srgb, var(--leaf) var(--wf-a3), transparent), transparent 100%) 0% 100% / 120% 120% no-repeat, radial-gradient(ellipse 22% 26% at 44% 8%, color-mix(in srgb, var(--lime-core) var(--wf-a4), transparent), transparent 100%) 50% 0% / 120% 120% no-repeat; animation: wowFitFlow 28s ease-in-out infinite alternate; } body .bg-wow-fit::after, body .bg-wow-fit-light::after { content: ""; position: absolute; inset: 0; width: auto; height: auto; z-index: -1; pointer-events: none; border-radius: inherit; background-image: repeating-linear-gradient(135deg, var(--wf-line) 0 1px, transparent 1px 22px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); } @keyframes wowFitFlow { from { background-position: 0% 0%, 100% 0%, 0% 100%, 50% 0%; } to { background-position: 100% 100%, 0% 100%, 100% 0%, 50% 100%; } } body .bg-wow-fit:not(.bg-wow-fit-light) h1, body .bg-wow-fit:not(.bg-wow-fit-light) h2, body .bg-wow-fit:not(.bg-wow-fit-light) h3, body .bg-wow-fit:not(.bg-wow-fit-light) h4 { color: var(--white); } :where(.bg-wow-fit:not(.bg-wow-fit-light)) p { color: rgba(255,255,255,.86); } body .bg-wow-fit:not(.bg-wow-fit-light) .title-bar::before, body .bg-wow-fit:not(.bg-wow-fit-light) .title-bar-center::before, body .bg-wow-fit:not(.bg-wow-fit-light) .title-bar-right::before { background: linear-gradient(120deg, var(--sprout), var(--lime-core)); } @media (prefers-reduced-motion: reduce) { body .bg-wow-fit::before, body .bg-wow-fit-light::before { animation: none; } } / ========================================================================== Layering: WordPress sticky header > services navigation > page sticky items (Elementor's own sticky elements default to z-index 99, which used to sit above the header and the navigation.) ========================================================================== / body .site-header, body .elementor-location-header, body .elementor-location-header .elementor-sticky--active { z-index: 1000; } body .elementor-sticky--active:not(.site-header):not(.elementor-location-header):not(:is(#services-navigation, .services-navigation)):not(.elementor-location-header ) { z-index: 400; } /* Mobile: elements made sticky inside the page stop being sticky. Exceptions: the site header / its navigation, and the services navigation (including a sticky container that holds it). / @media (max-width: 767px) { body .elementor-sticky:not(.site-header):not(.elementor-location-header):not(.elementor-location-header ):not(:is(#services-navigation, .services-navigation)):not(:has(:is(#services-navigation, .services-navigation))), body [data-settings='"sticky"']:not(.site-header):not(.elementor-location-header):not(.elementor-location-header ):not(:is(#services-navigation, .services-navigation)):not(:has(:is(#services-navigation, .services-navigation))) { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* Elementor inserts an empty spacer the size of the element while it is stuck. / body .elementor-stickyspacer:not(.elementor-location-header ) { display: none !important; } } /* ========================================================================== Services navigation Elementor "Icon List" widget. Name it either way - both work: Advanced -> CSS ID services-navigation Advanced -> CSS Classes services-navigation assets/js/services-nav.js adds .is-active to the item whose section is being read, which lights the left bar. :is() gives the class form the same specificity as the ID form, so Elementor's per-widget styles don't override it. ========================================================================== / body :is(#services-navigation, .services-navigation) { --svc-nav-top-fallback: calc(96px + var(--wp-admin--admin-bar--height, 0px)); } / Sticky under the site header on every screen size. --svc-nav-top is measured by the script (header height + admin bar). Add the extra class no-mobile-sticky to let it scroll away on phones. / body :is(#services-navigation, .services-navigation) { position: sticky; top: var(--svc-nav-top, var(--svc-nav-top-fallback)); z-index: 500; } @media (max-width: 767px) { body :is(#services-navigation, .services-navigation).no-mobile-sticky { position: static; } } body :is(#services-navigation, .services-navigation) ul { margin: 0; padding: 0; border: 0; list-style: none; } body :is(#services-navigation, .services-navigation) li { position: relative; padding: 8px 0 8px 18px; transition: background-color .2s ease; } / grey track: one slice per item, so the whole line shows even when nothing is lit / body :is(#services-navigation, .services-navigation) li::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); pointer-events: none; } / lit bar: drawn over the track while the item's section is being read / body :is(#services-navigation, .services-navigation) li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 1; background: var(--grad-mark); opacity: 0; transform: scaleY(.4); transition: opacity .25s ease, transform .25s ease; pointer-events: none; } body :is(#services-navigation, .services-navigation) li.is-active::before { opacity: 1; transform: scaleY(1); } body :is(#services-navigation, .services-navigation) li.is-active { background: linear-gradient(90deg, var(--mist), transparent); } body :is(#services-navigation, .services-navigation) .elementor-icon-list-text { transition: color .2s ease; } body :is(#services-navigation, .services-navigation) li:hover .elementor-icon-list-text, body :is(#services-navigation, .services-navigation) li:focus-within .elementor-icon-list-text { color: var(--pine); } body :is(#services-navigation, .services-navigation) li.is-active .elementor-icon-list-text, body :is(#services-navigation, .services-navigation) li.is-active a { color: var(--pine); font-weight: 600; } body :is(#services-navigation, .services-navigation) li.is-active .elementor-icon-list-icon i { color: var(--leaf); } body :is(#services-navigation, .services-navigation) li.is-active .elementor-icon-list-icon svg { fill: var(--leaf); color: var(--leaf); } / Built-in (non-Elementor) chip version used by page-services.php / body :is(#services-navigation, .services-navigation) .chip { transition: background-color .2s ease, border-color .2s ease, color .2s ease; } body :is(#services-navigation, .services-navigation) .chip:hover { border-color: var(--leaf); color: var(--pine); text-decoration: none; } body :is(#services-navigation, .services-navigation) .chip.is-active { background: var(--pine); border-color: var(--pine); color: var(--white); } @media (prefers-reduced-motion: reduce) { body :is(#services-navigation, .services-navigation) li, body :is(#services-navigation, .services-navigation) li::before, body :is(#services-navigation, .services-navigation) .elementor-icon-list-text, body :is(#services-navigation, .services-navigation) .chip { transition: none; } } / ========================================================================== WORDPRESS BUTTON BLOCK = theme .btn Core "Button" block: Fill style = .btn.btn-primary, Outline style = .btn.btn-secondary. Colours picked in the block editor (Background / Text) still win: such a button only gets the brand shape, font and hover, not the brand colours. Same Forest-band variants as .btn. ========================================================================== / body .wp-block-buttons { gap: 14px; } body .wp-block-button .wp-block-buttonlink, body .wp-block-button .wp-element-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; padding: 14px 26px; border-radius: 8px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15.5px; line-height: 1; cursor: pointer; border: 1.5px solid transparent; text-decoration: none !important; text-align: center; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } body .wp-block-button .wp-block-buttonlink:hover, body .wp-block-button .wp-element-button:hover { transform: translateY(-2px); } / Fill (default) = primary / body .wp-block-button:not(.is-style-outline) .wp-block-buttonlink { border: none; box-shadow: var(--shadow); } body .wp-block-button:not(.is-style-outline) .wp-block-buttonlink:not(.has-background) { background: var(--grad-cta); } body .wp-block-button:not(.is-style-outline) .wp-block-buttonlink:not(.has-text-color), body .wp-block-button:not(.is-style-outline) .wp-block-buttonlink:not(.has-text-color):hover { color: var(--white); } body .wp-block-button:not(.is-style-outline) .wp-block-buttonlink:hover { box-shadow: 0 16px 30px -16px rgba(11,59,34,.55); } / Outline = secondary / body .wp-block-button.is-style-outline > .wp-block-buttonlink { background: transparent; box-shadow: none; border: 1.5px solid currentColor; padding: 14px 26px; } body .wp-block-button.is-style-outline > .wp-block-buttonlink:not(.has-text-color) { color: var(--btn2-color); border-color: var(--btn2-color); } body .wp-block-button.is-style-outline > .wp-block-buttonlink:not(.has-text-color):hover { background: color-mix(in srgb, var(--btn2-color) 9%, transparent); color: var(--btn2-color); } / On the Forest gradient band (same exceptions as .btn) / body .bg-forest .wp-block-button:not(.is-style-outline) .wp-block-buttonlink:not(.has-background) { background: linear-gradient(120deg, var(--sprout), var(--leaf)); box-shadow: none; } body .bg-forest .wp-block-button:not(.is-style-outline) .wp-block-buttonlink:not(.has-text-color), body .bg-forest .wp-block-button:not(.is-style-outline) .wp-block-buttonlink:not(.has-text-color):hover { color: var(--forest); } body .bg-forest .wp-block-button.is-style-outline > .wp-block-buttonlink:not(.has-text-color) { color: var(--btn2-dark-color); border-color: color-mix(in srgb, var(--btn2-dark-color) 70%, transparent); } body .bg-forest .wp-block-button.is-style-outline > .wp-block-buttonlink:not(.has-text-color):hover { background: color-mix(in srgb, var(--btn2-dark-color) 12%, transparent); color: var(--btn2-dark-color); } / ========================================================================== POST GRIDS = theme .card + the hover-card top line, applied to EACH POST Applies automatically to: - the Query Loop / Post Template block when it is a grid - the Elementor "Posts" widget (Cards skin and Classic skin) - the Essential Addons "Post Grid" widget (each .eael-grid-post-holder is a card) Do NOT add "card" or "hover-card" to the widget itself: that styles the whole widget as one card. Opt a grid out with the CSS class no-card-style on the widget OR on any container around it. Query Loop: put the Featured Image first in the post template so it sits flush at the top of the card. Elementor Posts / Essential Addons: the widget's own Style tab controls (colours, typography, padding, border) still win when you set them. ========================================================================== / :is( .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) > .wp-block-post, .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-cards .elementor-postcard, .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-classic .elementor-post, .eael-post-grid .eael-grid-post-holder:not(.no-card-style ) ) { --hc-line: 3px; --border-top-width: 1px; --border-right-width: 1px; --border-bottom-width: 1px; --border-left-width: 1px; position: relative; box-sizing: border-box; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: none; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } :is(.wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) > .wp-block-post, .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-classic .elementor-post) { padding: 30px 26px; } :is(.elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-cards .elementor-postcard, .eael-post-grid .eael-grid-post-holder:not(.no-card-style )) { padding: 0; overflow: visible; } .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-cards .elementor-postcard .elementor-posttext { padding: 24px 26px 28px; margin: 0; } .eael-post-grid .eael-grid-post:not(.no-card-style ) .eael-entry-wrapper { padding: 30px 26px; } / hover: lift + shadow + green border, and a flat gradient line drawing along the top edge / :is( .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) > .wp-block-post, .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-cards .elementor-postcard, .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-classic .elementor-post, .eael-post-grid .eael-grid-post-holder:not(.no-card-style ) ):hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } :is( .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) > .wp-block-post, .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-cards .elementor-postcard, .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-classic .elementor-post, .eael-post-grid .eael-grid-post-holder:not(.no-card-style ) )::before { content: ""; display: block; position: absolute; z-index: 2; pointer-events: none; top: -1px; right: -1px; bottom: -1px; left: -1px; width: auto; height: auto; border: 0; border-radius: inherit; box-sizing: border-box; padding: 0; / flat line along the top edge only, drawn left to right; its ends follow the card's rounded shape / background: var(--grad-cta) top left / 0% var(--hc-line) no-repeat; opacity: 1; transform: none; transition: background-size .45s ease; } :is( .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) > .wp-block-post, .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-cards .elementor-postcard, .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-classic .elementor-post, .eael-post-grid .eael-grid-post-holder:not(.no-card-style ) ):hover::before { background-size: 100% var(--hc-line); } @media (prefers-reduced-motion: reduce) { :is( .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) > .wp-block-post, .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-cards .elementor-postcard, .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-classic .elementor-post, .eael-post-grid .eael-grid-post-holder:not(.no-card-style ) ), :is( .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) > .wp-block-post, .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-cards .elementor-postcard, .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-classic .elementor-post, .eael-post-grid .eael-grid-post-holder:not(.no-card-style ) ):hover { transform: none; transition: box-shadow .22s ease, border-color .22s ease; } } /* Featured image flush at the top of the card, corners following the card's radius / .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) > .wp-block-post .wp-block-post-featured-image { margin: -30px -26px 22px; } .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) > .wp-block-post .wp-block-post-featured-image img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius-m) - 1px) calc(var(--radius-m) - 1px) 0 0; } .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-classic .elementor-post .elementor-postthumbnaillink { display: block; margin: -30px -26px 20px; } .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-classic .elementor-post .elementor-postthumbnail, .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) .elementor-posts--skin-cards .elementor-postcard .elementor-postthumbnail, .eael-post-grid .eael-grid-post:not(.no-card-style ) .eael-entry-media, .eael-post-grid .eael-grid-post:not(.no-card-style ) .eael-entry-thumbnail { border-radius: calc(var(--radius-m) - 1px) calc(var(--radius-m) - 1px) 0 0; } .eael-post-grid .eael-grid-post:not(.no-card-style ) .eael-entry-media { overflow: hidden; } / Text = .card (Query Loop and Essential Addons; Elementor Posts keeps its own controls) / .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) > .wp-block-post .wp-block-post-title, .eael-post-grid .eael-grid-post:not(.no-card-style ) .eael-entry-title { font-size: clamp(19px, 1.1rem + .25vw, 20px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 8px; } .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) > .wp-block-post .wp-block-post-title a, .eael-post-grid .eael-grid-post:not(.no-card-style ) .eael-entry-title a { color: var(--ink); text-decoration: none; } .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) > .wp-block-post .wp-block-post-title a:hover, .eael-post-grid .eael-grid-post:not(.no-card-style ) .eael-entry-title a:hover { color: var(--pine); } .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) > .wp-block-post :is(.wp-block-post-date, .wp-block-post-author, .wp-block-post-terms), .eael-post-grid .eael-grid-post:not(.no-card-style ) .eael-entry-meta { font-size: 13.5px; margin: 0 0 10px; } .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) > .wp-block-post .wp-block-post-excerpt { margin: 0; } .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) > .wp-block-post .wp-block-post-excerptexcerpt, .eael-post-grid .eael-grid-post:not(.no-card-style ) .eael-grid-post-excerpt p { margin: 0; font-size: 15.5px; } .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) > .wp-block-post .wp-block-post-excerptmore-link, .eael-post-grid .eael-grid-post:not(.no-card-style ) .eael-post-elements-readmore-btn { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--pine); font-size: 15px; text-decoration: none; } / Grid spacing like .grid-3, including the same breakpoints (Query Loop / Elementor Posts) / .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ) { gap: var(--gap); list-style: none; margin-left: 0; margin-right: 0; padding-left: 0; } .elementor-widget-posts:not(.no-card-style):not(.no-card-style ) { --grid-column-gap: var(--gap); --grid-row-gap: var(--gap); } @media (max-width: 900px) { .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ).is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ).is-flex-container > .wp-block-post { width: calc(50% - var(--gap) / 2) !important; } } @media (max-width: 620px) { .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ).is-layout-grid { grid-template-columns: 1fr !important; } .wp-block-post-template:is(.is-layout-grid, .is-flex-container, [class="columns-"]):not(.no-card-style):not(.no-card-style ).is-flex-container > .wp-block-post { width: 100% !important; } } /* ========================================================================== Services navigation: breathing room on phones Without this the sticky list touches both screen edges on mobile. Change it for one page with an inline style: --svc-nav-gutter:12px ========================================================================== / @media (max-width: 767px) { body :is(#services-navigation, .services-navigation) { padding-left: var(--svc-nav-gutter, 20px); padding-right: var(--svc-nav-gutter, 20px); } } / ========================================================================== VERTICAL STEPPER (stepper stepper-vertical) ========================================================================== The Process Stepper turned on its side: numbered circles joined by a vertical line, title beside each circle with the text underneath. Same markup as the horizontal stepper, just add the class (also stays vertical on desktop):
...
...
...
On dark green: inside bg-forest / bg-wow-dark / bg-wow-fit it switches automatically; anywhere else add stepper-dark: class="stepper stepper-vertical stepper-dark" Dark text inside a dark container: add stepper-light. Any text colour: --step-title / --step-text (see below). / .stepper.stepper-vertical { flex-direction: column; gap: 0; } .stepper-vertical .step { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start; flex: none; padding: 0 0 30px; } .stepper-vertical .step:last-child { padding-bottom: 0; } .stepper-vertical .step .step-num { grid-row: 1 / span 2; margin: 0; } .stepper-vertical .step h3 { grid-column: 2; display: flex; align-items: center; min-height: 44px; margin: 0; font-size: 18px; } .stepper-vertical .step p { grid-column: 2; margin: 2px 0 0; max-width: none; } .stepper.stepper-vertical .step:not(:last-child)::after { display: block; content: ""; position: absolute; top: 44px; bottom: 0; left: 21px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--leaf), var(--line)); } / Text colours. Light backgrounds: heading colour for titles, body colour for the text. Any colour for one stepper: add an inline style on the stepper div, e.g. pure black style="--step-title:#000; --step-text:#000" / body .stepper-vertical .step h3 { color: var(--step-title, var(--ink)); } body .stepper-vertical .step p { color: var(--step-text, var(--slate)); } / Dark green backgrounds (automatic inside bg-forest / bg-wow-dark / bg-wow-fit, or with stepper-dark). Add stepper-light to keep dark text inside a dark container. / body :is(.bg-forest, .bg-wow-dark, .bg-wow-fit:not(.bg-wow-fit-light)) .stepper-vertical:not(.stepper-light) .step h3, body .stepper-vertical.stepper-dark .step h3 { color: var(--step-title, var(--white)); } body :is(.bg-forest, .bg-wow-dark, .bg-wow-fit:not(.bg-wow-fit-light)) .stepper-vertical:not(.stepper-light) .step p, body .stepper-vertical.stepper-dark .step p { color: var(--step-text, rgba(255,255,255,.82)); } body :is(.bg-forest, .bg-wow-dark, .bg-wow-fit:not(.bg-wow-fit-light)) .stepper.stepper-vertical:not(.stepper-light) .step:not(:last-child)::after, body .stepper.stepper-vertical.stepper-dark .step:not(:last-child)::after { background: linear-gradient(180deg, var(--leaf), rgba(255,255,255,.28)); } / ========================================================================== ELEMENTOR FORM WIDGET: matches the theme's own contact form ========================================================================== Labels, fields, dropdown, textarea, consent checkbox, note text and error/success messages take the same look as the .form-card / .field form in the theme templates. - Applies to every Elementor Form widget. Opt out for one form: Advanced -> CSS Classes -> form-plain - The card around the form is separate: add the class form-card to the Container that holds it. - Selectors are kept just above Elementor's defaults and BELOW the widget's Style tab, so anything you set in the form's Style tab still wins for that form. - The "We use the details you submit..." HTML field is moved under the button, like the template. / body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-group { margin-bottom: 18px; } body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-group .elementor-field-label { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 6px; color: var(--ink); } body .elementor-widget-form:where(:not(.form-plain)) .elementor-mark-required .elementor-field-label::after { content: ""; color: inherit; padding-left: .2em; } body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-group input.elementor-field:where(:not([type=checkbox],[type=radio],[type=submit],[type=hidden],[type=file])), body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-group textarea.elementor-field, body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-group select.elementor-field-textual { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-s); font-family: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); background-color: var(--paper); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-group input.elementor-field:where(:not([type=checkbox],[type=radio],[type=submit],[type=hidden],[type=file])):focus, body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-group textarea.elementor-field:focus, body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-group select.elementor-field-textual:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(28,134,168,.15); background-color: var(--white); } body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-group textarea.elementor-field { min-height: 130px; resize: vertical; } body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-group select.elementor-field-textual { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; } body .elementor-widget-form:where(:not(.form-plain)) .select-caret-down-wrapper { inset-inline-end: 16px; color: var(--slate); } body .elementor-widget-form:where(:not(.form-plain)) .select-caret-down-wrapper svg { width: 12px; height: 12px; fill: currentColor; } body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-type-acceptance .elementor-field-option { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--slate); } body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-type-acceptance .elementor-field-option input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--pine); } body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-type-acceptance .elementor-field-option label { font-size: 14px; font-weight: 400; color: var(--slate); } body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-type-acceptance .elementor-field-option label a { color: var(--link); text-decoration: underline; } body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-group.elementor-field-type-html { order: 99; margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--slate); text-align: center; } body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-group.e-form__buttons { order: 98; margin-bottom: 0; } body .elementor-widget-form:where(:not(.form-plain)) .elementor-message { font-size: 14px; line-height: 1.5; margin: 12px 0 0; text-align: center; } body .elementor-widget-form:where(:not(.form-plain)) .elementor-message.elementor-message-success { color: var(--pine); } body .elementor-widget-form:where(:not(.form-plain)) .elementor-message.elementor-message-danger { color: #b3261e; } @media (prefers-reduced-motion: reduce) { body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-group input.elementor-field:where(:not([type=checkbox],[type=radio],[type=submit],[type=hidden],[type=file])), body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-group textarea.elementor-field, body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-group select.elementor-field-textual { transition: none; } } /* Dropdown placeholder look (assets/js/select-placeholder.js adds .is-placeholder while the first, non-selectable option is showing). The open list keeps normal dark text. / body .elementor-widget-form:where(:not(.form-plain)) .elementor-field-group select.elementor-field-textual.is-placeholder, .field select.is-placeholder { color: var(--slate); } body .elementor-widget-form .elementor-field-group select option, .field select option { color: var(--ink); } / ========================================================================== STEPPER VARIANTS (v1.2.18): same markup as the Process Stepper, one extra class on the stepper div ========================================================================== Markup is always:

1
..
..
...
stepper-ladder steps climb down a staircase: each step is indented further, joined by a rail and rungs (up to 8 steps) stepper-zigzag a centre line with steps alternating left / right (single line on mobile) stepper-reveal animated: line draws, circles pop and text fades in one after another when scrolled into view. Works on its own (horizontal) or combined with stepper-vertical / stepper-ladder / stepper-zigzag. Dark green backgrounds: automatic inside bg-forest / bg-wow-dark / bg-wow-fit, or add stepper-dark; stepper-light keeps dark text. Text colours: --step-title / --step-text inline, like the vertical stepper. / / --- shared text colours (ladder + zigzag) --- / body :is(.stepper-ladder, .stepper-zigzag) .step h3 { color: var(--step-title, var(--ink)); } body :is(.stepper-ladder, .stepper-zigzag) .step p { color: var(--step-text, var(--slate)); } body :is(.bg-forest, .bg-wow-dark, .bg-wow-fit:not(.bg-wow-fit-light)) :is(.stepper-ladder, .stepper-zigzag):not(.stepper-light) .step h3, body :is(.stepper-ladder, .stepper-zigzag).stepper-dark .step h3 { color: var(--step-title, var(--white)); } body :is(.bg-forest, .bg-wow-dark, .bg-wow-fit:not(.bg-wow-fit-light)) :is(.stepper-ladder, .stepper-zigzag):not(.stepper-light) .step p, body :is(.stepper-ladder, .stepper-zigzag).stepper-dark .step p { color: var(--step-text, rgba(255,255,255,.82)); } / --- 1. LADDER --- / .stepper.stepper-ladder { --ladder-step: 44px; flex-direction: column; gap: 0; } .stepper-ladder .step { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start; flex: none; padding: 0 0 30px; } .stepper-ladder .step:last-child { padding-bottom: 0; } .stepper-ladder .step .step-num { grid-row: 1 / span 2; margin: 0; } .stepper-ladder .step h3 { grid-column: 2; display: flex; align-items: center; min-height: 44px; margin: 0; font-size: 18px; } .stepper-ladder .step p { grid-column: 2; margin: 2px 0 0; max-width: none; } .stepper-ladder .step:nth-child(2) { margin-left: var(--ladder-step); } .stepper-ladder .step:nth-child(3) { margin-left: calc(2 var(--ladder-step)); } .stepper-ladder .step:nth-child(4) { margin-left: calc(3 * var(--ladder-step)); } .stepper-ladder .step:nth-child(5) { margin-left: calc(4 * var(--ladder-step)); } .stepper-ladder .step:nth-child(6) { margin-left: calc(5 * var(--ladder-step)); } .stepper-ladder .step:nth-child(7) { margin-left: calc(6 * var(--ladder-step)); } .stepper-ladder .step:nth-child(8) { margin-left: calc(7 * var(--ladder-step)); } /* rail: down from this circle to the level of the next one; rung: across into the next circle / .stepper.stepper-ladder .step:not(:last-child)::after { display: block; content: ""; position: absolute; top: 44px; bottom: -21px; left: 21px; right: auto; width: 2px; height: auto; background: var(--leaf); } .stepper-ladder .step:not(:first-child)::before { content: ""; position: absolute; top: 21px; left: calc(21px - var(--ladder-step)); width: calc(var(--ladder-step) - 21px); height: 2px; background: var(--leaf); } @media (max-width: 820px) { .stepper.stepper-ladder { --ladder-step: 30px; gap: 0; } .stepper-ladder .step { align-items: start; column-gap: 14px; } .stepper-ladder .step p { margin: 2px 0 0; } } / --- 2. ZIGZAG --- / .stepper.stepper-zigzag { position: relative; flex-direction: column; gap: 0; } .stepper-zigzag::before { content: ""; position: absolute; left: 50%; top: 22px; bottom: 22px; width: 2px; transform: translateX(-1px); background: linear-gradient(180deg, var(--leaf), var(--line)); } .stepper-zigzag .step { display: block; flex: none; width: 50%; padding: 0 48px 36px 0; text-align: right; } .stepper-zigzag .step:last-child { padding-bottom: 0; } .stepper-zigzag .step:nth-child(even) { margin-left: 50%; padding: 0 0 36px 48px; text-align: left; } .stepper-zigzag .step:nth-child(even):last-child { padding-bottom: 0; } .stepper-zigzag .step .step-num { position: absolute; top: 0; right: -22px; margin: 0; } .stepper-zigzag .step:nth-child(even) .step-num { right: auto; left: -22px; } .stepper-zigzag .step h3 { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; margin: 0 0 4px; font-size: 18px; } .stepper-zigzag .step:nth-child(even) h3 { justify-content: flex-start; } .stepper-zigzag .step p { margin: 0; max-width: none; } .stepper.stepper-zigzag .step:not(:last-child)::after { display: none; } body :is(.bg-forest, .bg-wow-dark, .bg-wow-fit:not(.bg-wow-fit-light)) .stepper-zigzag:not(.stepper-light)::before, body .stepper-zigzag.stepper-dark::before { background: linear-gradient(180deg, var(--leaf), rgba(255,255,255,.28)); } @media (max-width: 820px) { .stepper.stepper-zigzag { gap: 0; } .stepper-zigzag::before { left: 21px; transform: none; } .stepper-zigzag .step, .stepper-zigzag .step:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 30px 62px; text-align: left; } .stepper-zigzag .step:last-child, .stepper-zigzag .step:nth-child(even):last-child { padding-bottom: 0; } .stepper-zigzag .step .step-num, .stepper-zigzag .step:nth-child(even) .step-num { left: 0; right: auto; } .stepper-zigzag .step h3, .stepper-zigzag .step:nth-child(even) h3 { justify-content: flex-start; margin: 0 0 4px; } } / --- 3. REVEAL (animated; assets/js/stepper-reveal.js adds .is-ready then .is-in on scroll) --- / .stepper-reveal.is-ready .step { --d: 0s; } .stepper-reveal.is-ready .step:nth-child(2) { --d: .35s; } .stepper-reveal.is-ready .step:nth-child(3) { --d: .7s; } .stepper-reveal.is-ready .step:nth-child(4) { --d: 1.05s; } .stepper-reveal.is-ready .step:nth-child(5) { --d: 1.4s; } .stepper-reveal.is-ready .step:nth-child(6) { --d: 1.75s; } .stepper-reveal.is-ready .step:nth-child(7) { --d: 2.1s; } .stepper-reveal.is-ready .step:nth-child(8) { --d: 2.45s; } .stepper-reveal.is-ready .step .step-num { opacity: 0; transform: scale(.4); } .stepper-reveal.is-ready .step h3, .stepper-reveal.is-ready .step p { opacity: 0; transform: translateY(14px); } .stepper-reveal.is-ready .step:not(:last-child)::after { transform: scaleX(0); transform-origin: left center; } .stepper-reveal.is-ready:is(.stepper-vertical, .stepper-ladder) .step:not(:last-child)::after { transform: scaleY(0); transform-origin: center top; } .stepper-reveal.is-ready.stepper-zigzag::before { transform: translateX(-1px) scaleY(0); transform-origin: center top; } .stepper-reveal.is-ready .step:not(:first-child)::before { opacity: 0; } .stepper-reveal.is-in .step .step-num { opacity: 1; transform: none; transition: opacity .45s ease var(--d), transform .6s cubic-bezier(.34,1.56,.64,1) var(--d); } .stepper-reveal.is-in .step h3 { opacity: 1; transform: none; transition: opacity .5s ease calc(var(--d) + .15s), transform .5s ease calc(var(--d) + .15s); } .stepper-reveal.is-in .step p { opacity: 1; transform: none; transition: opacity .5s ease calc(var(--d) + .3s), transform .5s ease calc(var(--d) + .3s); } .stepper-reveal.is-in .step:not(:last-child)::after, .stepper-reveal.is-ready.is-in:is(.stepper-vertical, .stepper-ladder) .step:not(:last-child)::after { transform: none; transition: transform .45s ease calc(var(--d) + .3s); } .stepper-reveal.is-in.stepper-zigzag::before { transform: translateX(-1px); transition: transform 1.6s ease .2s; } .stepper-reveal.is-in .step:not(:first-child)::before { opacity: 1; transition: opacity .3s ease var(--d); } @media (max-width: 820px) { .stepper-reveal.is-ready.stepper-zigzag::before { transform: scaleY(0); } .stepper-reveal.is-ready.is-in.stepper-zigzag::before { transform: none; } } @media (prefers-reduced-motion: reduce) { .stepper-reveal.is-ready .step , .stepper-reveal.is-ready .step, .stepper-reveal.is-ready::before { opacity: 1 !important; transform: none !important; transition: none !important; } .stepper-reveal.is-ready .step::after, .stepper-reveal.is-ready .step::before { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================================== STEPPER: PILL (stepper-pill) and CHEVRON FLOW (stepper-chevron) (v1.2.19) ========================================================================== Same markup as the Process Stepper:

1
..
..
...
stepper-pill (was stepper-bar, still works) soft white panels with a "STEP 1" pill, no bars or lines; panels rise in one after another. Up to 8 steps. Dark green backgrounds: automatic inside bg-forest / bg-wow-dark / bg-wow-fit, or add stepper-dark; stepper-light keeps dark text. Text colours: --step-title / --step-text inline (same as the vertical stepper). stepper-chevron interlocking arrow blocks that darken along the process (white text on green; points down on mobile). Best with 3 to 5 steps. / / --- PILL STEPPER (stepper-pill; the older name stepper-bar still works) --- No bars or lines: each step is a soft white panel with a "STEP 1" pill; panels rise in one after another on load. / :is(.stepper-pill, .stepper-bar) { --pill-sel: 1; } .stepper.stepper-pill, .stepper.stepper-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; } :is(.stepper-pill, .stepper-bar) .step { display: block; flex: none; position: relative; padding: 24px 22px 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; animation: stepper-pill-in .55s ease both; animation-delay: calc(var(--i, 0) .15s); } :is(.stepper-pill, .stepper-bar) .step:nth-child(1) { --i: 0; } :is(.stepper-pill, .stepper-bar) .step:nth-child(2) { --i: 1; } :is(.stepper-pill, .stepper-bar) .step:nth-child(3) { --i: 2; } :is(.stepper-pill, .stepper-bar) .step:nth-child(4) { --i: 3; } :is(.stepper-pill, .stepper-bar) .step:nth-child(5) { --i: 4; } :is(.stepper-pill, .stepper-bar) .step:nth-child(6) { --i: 5; } :is(.stepper-pill, .stepper-bar) .step:nth-child(7) { --i: 6; } :is(.stepper-pill, .stepper-bar) .step:nth-child(8) { --i: 7; } @keyframes stepper-pill-in { from { opacity: 0; transform: translateY(14px); } } :is(.stepper-pill, .stepper-bar) .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--leaf); } .stepper.stepper-pill .step::before, .stepper.stepper-pill .step::after, .stepper.stepper-bar .step::before, .stepper.stepper-bar .step::after { display: none; content: none; } :is(.stepper-pill, .stepper-bar) .step .step-num { display: inline-block; width: auto; height: auto; margin: 0 0 14px; padding: 7px 14px; border-radius: 99px; background: rgba(92,180,70,.16); box-shadow: none; color: var(--pine); z-index: auto; font: 700 12.5px/1 'Inter', sans-serif; letter-spacing: .08em; } :is(.stepper-pill, .stepper-bar) .step .step-num::before { content: "STEP "; } :is(.stepper-pill, .stepper-bar) .step h3 { margin: 0 0 6px; } :is(.stepper-pill, .stepper-bar) .step p { margin: 0; max-width: none; } body :is(.stepper-pill, .stepper-bar) .step h3 { color: var(--step-title, var(--ink)); } body :is(.stepper-pill, .stepper-bar) .step p { color: var(--step-text, var(--slate)); } /* dark green backgrounds: automatic inside bg-forest / bg-wow-dark / bg-wow-fit, or add stepper-dark; stepper-light keeps the light look / body :is(.bg-forest, .bg-wow-dark, .bg-wow-fit:not(.bg-wow-fit-light)) :is(.stepper-pill, .stepper-bar):not(.stepper-light) .step, body :is(.stepper-pill, .stepper-bar).stepper-dark .step { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); } body :is(.bg-forest, .bg-wow-dark, .bg-wow-fit:not(.bg-wow-fit-light)) :is(.stepper-pill, .stepper-bar):not(.stepper-light) .step h3, body :is(.stepper-pill, .stepper-bar).stepper-dark .step h3 { color: var(--step-title, var(--white)); } body :is(.bg-forest, .bg-wow-dark, .bg-wow-fit:not(.bg-wow-fit-light)) :is(.stepper-pill, .stepper-bar):not(.stepper-light) .step p, body :is(.stepper-pill, .stepper-bar).stepper-dark .step p { color: var(--step-text, rgba(255,255,255,.82)); } body :is(.bg-forest, .bg-wow-dark, .bg-wow-fit:not(.bg-wow-fit-light)) :is(.stepper-pill, .stepper-bar):not(.stepper-light) .step .step-num, body :is(.stepper-pill, .stepper-bar).stepper-dark .step .step-num { background: rgba(159,214,75,.18); color: var(--sprout); } @media (max-width: 820px) { .stepper.stepper-pill, .stepper.stepper-bar { grid-auto-flow: row; grid-auto-columns: auto; gap: 14px; } :is(.stepper-pill, .stepper-bar) .step { display: block; padding-right: 22px; } :is(.stepper-pill, .stepper-bar) .step .step-num { margin: 0 0 12px; } :is(.stepper-pill, .stepper-bar) .step p { grid-column: auto; margin: 0; } } @media (prefers-reduced-motion: reduce) { :is(.stepper-pill, .stepper-bar) .step { animation: none; transition: none; } :is(.stepper-pill, .stepper-bar) .step:hover { transform: none; } } / --- CHEVRON FLOW --- / .stepper.stepper-chevron { display: flex; gap: 0; } .stepper-chevron .step { display: block; flex: 1; margin-left: -12px; padding: 24px 34px 24px 46px; color: var(--white); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%); } .stepper-chevron .step:first-child { margin-left: 0; padding-left: 28px; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); } .stepper-chevron .step:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 26px 50%); } .stepper-chevron .step:first-child:last-child { clip-path: none; } .stepper-chevron .step:nth-child(1) { background: #0B3B22; } .stepper-chevron .step:nth-child(2) { background: #12552F; } .stepper-chevron .step:nth-child(3) { background: #146436; } .stepper-chevron .step:nth-child(n+4) { background: #1B7A43; } .stepper.stepper-chevron .step::after { display: none; } .stepper-chevron .step .step-num { display: inline-grid; place-items: center; width: 30px; height: 30px; margin: 0 0 10px; border: 2px solid var(--sprout); border-radius: 50%; background: transparent; box-shadow: none; color: var(--sprout); font-size: 14px; } body .stepper-chevron .step h3 { color: var(--white); margin: 0 0 6px; } body .stepper-chevron .step p { color: rgba(255,255,255,.85); margin: 0; max-width: none; } @media (max-width: 820px) { .stepper.stepper-chevron { flex-direction: column; gap: 0; } .stepper-chevron .step, .stepper-chevron .step:first-child, .stepper-chevron .step:last-child { margin: 0 0 -18px; padding: 22px 24px 36px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 50% 100%, 0 calc(100% - 18px)); } / earlier blocks sit on top so each arrow tip points into the next block / .stepper-chevron .step { position: relative; z-index: 1; } .stepper-chevron .step:nth-child(1) { z-index: 8; } .stepper-chevron .step:nth-child(2) { z-index: 7; } .stepper-chevron .step:nth-child(3) { z-index: 6; } .stepper-chevron .step:nth-child(4) { z-index: 5; } .stepper-chevron .step:nth-child(5) { z-index: 4; } .stepper-chevron .step:nth-child(6) { z-index: 3; } .stepper-chevron .step:nth-child(7) { z-index: 2; } .stepper-chevron .step:not(:first-child) { padding-top: 40px; } .stepper-chevron .step:last-child { margin-bottom: 0; padding-bottom: 24px; clip-path: none; } .stepper-chevron .step .step-num { margin: 0 0 10px; } .stepper-chevron .step p { grid-column: auto; margin: 0; } } / ========================================================================== STEPPER: RISE (stepper-rise) and GLOW DOTS (stepper-dots) (v1.2.22) ========================================================================== Same markup as the Process Stepper:

1
..
..
...
stepper-rise solid green tiles that get taller and darker with each step (white text; works on light or dark sections; up to 8 steps; stacks on mobile) stepper-dots centred gradient circles with a softly pulsing glow, joined by a dotted trail (no lines). 2 columns on tablets, 1 on phones. Dark green backgrounds: automatic inside bg-forest / bg-wow-dark / bg-wow-fit, or add stepper-dark; stepper-light keeps dark text. Text colours: --step-title / --step-text inline, like the vertical stepper. / / --- RISE --- / .stepper.stepper-rise { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; align-items: end; } .stepper-rise .step { display: flex; flex-direction: column; flex: none; padding: 22px 20px 24px; border-radius: var(--radius-m); color: var(--white); min-height: calc(190px + var(--i, 0) 56px); transition: transform .25s ease; } .stepper-rise .step:nth-child(1) { --i: 0; background: #1B7A43; } .stepper-rise .step:nth-child(2) { --i: 1; background: #146436; } .stepper-rise .step:nth-child(3) { --i: 2; background: #12552F; } .stepper-rise .step:nth-child(4) { --i: 3; background: #0B3B22; } .stepper-rise .step:nth-child(n+5) { background: #0B3B22; } .stepper-rise .step:nth-child(5) { --i: 4; } .stepper-rise .step:nth-child(6) { --i: 5; } .stepper-rise .step:nth-child(7) { --i: 6; } .stepper-rise .step:nth-child(8) { --i: 7; } .stepper-rise .step:hover { transform: translateY(-6px); } .stepper.stepper-rise .step::after { display: none; } .stepper-rise .step .step-num { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 0 auto; border: 2px solid var(--sprout); border-radius: 50%; background: transparent; box-shadow: none; color: var(--sprout); font-size: 15px; } body .stepper-rise .step h3 { color: var(--white); margin: 28px 0 6px; } body .stepper-rise .step p { color: rgba(255,255,255,.85); margin: 0; max-width: none; } @media (max-width: 820px) { .stepper.stepper-rise { grid-auto-flow: row; grid-auto-columns: auto; gap: 12px; align-items: stretch; } .stepper-rise .step { display: flex; align-items: flex-start; min-height: 0; padding-right: 20px; } .stepper-rise .step .step-num { margin: 0 0 14px; } body .stepper-rise .step h3 { margin: 0 0 6px; } .stepper-rise .step p { grid-column: auto; margin: 0; } .stepper-rise .step:hover { transform: none; } } /* --- GLOW DOTS --- / .stepper.stepper-dots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; text-align: center; } .stepper-dots .step { display: block; flex: none; position: relative; padding: 0 14px; } .stepper-dots .step:nth-child(1) { --i: 0; } .stepper-dots .step:nth-child(2) { --i: 1; } .stepper-dots .step:nth-child(3) { --i: 2; } .stepper-dots .step:nth-child(4) { --i: 3; } .stepper-dots .step:nth-child(5) { --i: 4; } .stepper-dots .step:nth-child(6) { --i: 5; } .stepper-dots .step:nth-child(7) { --i: 6; } .stepper-dots .step:nth-child(8) { --i: 7; } .stepper-dots .step .step-num { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 30px; border-radius: 50%; color: var(--white); font-size: 20px; box-shadow: 0 0 0 6px rgba(92,180,70,.18), 0 0 0 14px rgba(92,180,70,.08); animation: stepper-halo 3s ease-in-out infinite; animation-delay: calc(var(--i, 0) .5s); } @keyframes stepper-halo { 50% { box-shadow: 0 0 0 9px rgba(92,180,70,.24), 0 0 0 20px rgba(92,180,70,.06); } } .stepper.stepper-dots .step:not(:last-child)::after { display: block; content: ""; position: absolute; top: 25px; left: calc(50% + 50px); right: calc(-50% + 50px); width: auto; height: 6px; background: radial-gradient(circle, var(--leaf) 2.4px, transparent 3px) 0 50% / 14px 6px repeat-x; } .stepper-dots .step h3 { margin: 0 0 6px; } .stepper-dots .step p { margin: 0 auto; max-width: 30ch; } body .stepper-dots .step h3 { color: var(--step-title, var(--ink)); } body .stepper-dots .step p { color: var(--step-text, var(--slate)); } body :is(.bg-forest, .bg-wow-dark, .bg-wow-fit:not(.bg-wow-fit-light)) .stepper-dots:not(.stepper-light) .step h3, body .stepper-dots.stepper-dark .step h3 { color: var(--step-title, var(--white)); } body :is(.bg-forest, .bg-wow-dark, .bg-wow-fit:not(.bg-wow-fit-light)) .stepper-dots:not(.stepper-light) .step p, body .stepper-dots.stepper-dark .step p { color: var(--step-text, rgba(255,255,255,.82)); } @media (max-width: 820px) { .stepper.stepper-dots { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; gap: 36px 0; } .stepper.stepper-dots .step:not(:last-child)::after { display: none; } .stepper-dots .step .step-num { margin: 0 auto 30px; } .stepper-dots .step p { grid-column: auto; margin: 0 auto; } } @media (max-width: 520px) { .stepper.stepper-dots { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .stepper-dots .step .step-num { animation: none; } .stepper-rise .step { transition: none; } .stepper-rise .step:hover { transform: none; } } /* ========================================================================== SERVICES NAVIGATION IMAGE (v1.2.23) An image area whose picture changes with the lit services-navigation item. Put the class services-nav-image on a wrapper whose children each carry data-service="
". assets/js/services-nav.js shows the child that matches the section being read. ========================================================================== / .services-nav-image { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-l); background: var(--mist); } .services-nav-image [data-service] { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease; } .services-nav-image:not(.is-ready) [data-service]:first-child, .services-nav-image [data-service].is-active { opacity: 1; visibility: visible; } .services-nav-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .services-nav-image [data-service].is-active img { animation: svc-img-in .7s ease both; } @keyframes svc-img-in { from { transform: scale(1.05); } } / Theme Services page: image + chip row stay together under the site header / .svc-stage { position: sticky; top: var(--svc-nav-top, calc(96px + var(--wp-admin--admin-bar--height, 0px))); z-index: 500; margin-top: 18px; padding: 10px 0 12px; background: var(--paper); } .svc-stage .services-nav-image { aspect-ratio: auto; height: clamp(110px, 22vh, 190px); } body .svc-stage #services-navigation { position: static; margin-top: 12px; } @media (prefers-reduced-motion: reduce) { .services-nav-image [data-service] { transition: none; } .services-nav-image [data-service].is-active img { animation: none; } } / ========================================================================== SERVICES NAVIGATION CAROUSEL + STICKY BOX (v1.2.24) services-nav-carousel : class (or ID) on an Elementor Image Carousel / Slides widget; services-nav.js slides it to the picture for the lit services-navigation item (pictures in the same order as the links). services-sticky-box : class on a Container; sticks under the site header like the navigation. Add no-mobile-sticky to release on phones. ========================================================================== */ body :is(#services-nav-carousel, .services-nav-carousel) .swiper-slide img, body :is(#services-nav-carousel, .services-nav-carousel) .swiper-slide-image { display: block; width: 100%; height: clamp(160px, 28vh, 300px); object-fit: cover; border-radius: var(--radius-l); } .services-sticky-box { position: sticky; top: var(--svc-nav-top, calc(96px + var(--wp-admin--admin-bar--height, 0px))); z-index: 500; align-self: flex-start; background: var(--paper); } @media (max-width: 767px) { .services-sticky-box.no-mobile-sticky { position: static; } }