so clicks scroll the table on mobile. Keep appearance identical to the pre-button span. */
appearance: none;
background: transparent;
border: 0;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: default;
}
.tpr-comparison-table-vs:focus-visible {
outline: 2px solid #0F2902;
outline-offset: 2px;
border-radius: 50%;
}
.tpr-comparison-table-vs svg {
display: block;
width: 44px;
height: 44px;
}
/* [cross] / [tick] shortcodes: inline icons in cells */
.tpr-comparison-table .tpr-comparison-table-icon {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
line-height: 0;
}
.tpr-comparison-table .tpr-comparison-table-icon__img {
display: block;
width: 38px;
height: auto;
max-width: 100%;
}
/* Table: 30px radius on top corners; overflow visible so header images can extend above */
.tpr-comparison-table table {
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
width: 100%;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
overflow: visible !important;
}
.tpr-comparison-table td,
.tpr-comparison-table th {
box-sizing: border-box;
padding: 20px 30px;
}
/* Column widths: text columns 3/4, price columns 1/4 (per column group).
* overflow: visible so price text from next column can overlap into this column. */
.tpr-comparison-table td:nth-child(1),
.tpr-comparison-table td:nth-child(3) {
width: 37.5%;
padding-left: 30px;
overflow: visible;
}
/* Price columns: allow text to overflow into the column to the left */
.tpr-comparison-table td:nth-child(2),
.tpr-comparison-table td:nth-child(4) {
width: 12.5%;
min-width: 140px;
white-space: nowrap;
padding-right: 30px;
overflow: visible;
}
.tpr-comparison-table th:nth-child(2),
.tpr-comparison-table th:nth-child(4) {
overflow: visible;
}
.tpr-comparison-table thead th {
color: #fff !important;
font-size: 20px;
padding: 20px 30px;
vertical-align: top;
text-align: left;
}
/* First header (colspan 2): "Do it yourself" – background #3F5435 */
.tpr-comparison-table thead th:first-child {
background-color: #3F5435 !important;
border-right: none;
}
/* Second header (colspan 2): "Have us do it for you" – background #0F2902, 2px gap from first.
* Extra left padding so text clears the VS circle that overlaps this column. */
.tpr-comparison-table thead th:last-child {
background-color: #0F2902 !important;
border-left: 2px solid #f0f0f0;
padding-left: 35px !important;
}
/* 2px divider between column groups: extend from header through body and footer */
.tpr-comparison-table tbody td:nth-child(3),
.tpr-comparison-table tfoot td:nth-child(3) {
border-left: 2px solid #f0f0f0;
}
/* Rounded top corners on outer table header cells */
.tpr-comparison-table thead th:first-child {
border-top-left-radius: 30px;
}
.tpr-comparison-table thead th:last-child {
border-top-right-radius: 30px;
}
/* First body row: match 30px radius so light grey doesn’t show sharp corners behind header */
.tpr-comparison-table tbody tr:first-child td:first-child {
border-top-left-radius: 30px;
}
.tpr-comparison-table tbody tr:first-child td:last-child {
border-top-right-radius: 30px;
}
/* Row stripes and fixed row height */
.tpr-comparison-table tbody tr:nth-child(odd) td {
background-color: #EFF4F0;
}
.tpr-comparison-table tbody tr:nth-child(even) td {
background-color: #fff;
}
.tpr-comparison-table tbody td {
height: 60px;
vertical-align: middle;
}
.tpr-comparison-table tfoot td {
vertical-align: middle;
}
/* Footer: lime background; one visual block per column group (desktop: label left, price right) */
.tpr-comparison-table tfoot tr td {
background-color: #D2FC51 !important;
padding: 20px 30px !important;
}
/* Remove border between label and price within each group so they read as one block */
.tpr-comparison-table tfoot td:nth-child(1),
.tpr-comparison-table tfoot td:nth-child(3) {
border-right: none !important;
padding-right: 0.5rem !important;
text-align: left;
overflow: visible;
}
/* Footer price cells: align right edge with body prices above; overflow left into label column */
.tpr-comparison-table tfoot tr td:nth-child(2),
.tpr-comparison-table tfoot tr td:nth-child(4) {
font-size: 20px;
padding: 20px 30px !important;
padding-left: 0 !important;
text-align: right;
white-space: nowrap;
overflow: visible;
transform: translateX(-24px);
box-shadow: 24px 0 0 0 #D2FC51;
}
/* First footer price cell: left-align and add gap so it never overlaps "Total cost" in next column */
.tpr-comparison-table tfoot tr td:nth-child(2) {
text-align: left !important;
transform: none;
box-shadow: none;
padding-right: 24px !important;
min-width: 0;
}
/* Footer merged cells (after JS): flex inner; font-size inherit overrides nth-child(2)/:nth-child(4) 20px on the merged right cell so both labels match (price span keeps 20px). */
.tpr-comparison-table tfoot tr td.tpr-comparison-table-foot-has-price {
transform: none !important;
box-shadow: none !important;
padding-left: 30px !important;
padding-right: 30px !important;
font-size: inherit;
}
.tpr-comparison-table tfoot tr td.tpr-comparison-table-foot-has-price:first-child {
padding-right: 2rem !important;
}
.tpr-comparison-table tfoot tr td.tpr-comparison-table-foot-has-price:last-child {
padding-left: 2rem !important;
}
.tpr-comparison-table tfoot tr td.tpr-comparison-table-foot-has-price .tpr-comparison-table-foot-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-width: 0;
}
.tpr-comparison-table tfoot tr td.tpr-comparison-table-foot-has-price .tpr-comparison-table-foot-label {
white-space: nowrap;
font-size: inherit;
font-weight: inherit;
}
.tpr-comparison-table tfoot tr td.tpr-comparison-table-foot-has-price .tpr-comparison-table-foot-label strong,
.tpr-comparison-table tfoot tr td.tpr-comparison-table-foot-has-price .tpr-comparison-table-foot-label b {
font-weight: 600;
}
.tpr-comparison-table tfoot tr td.tpr-comparison-table-foot-has-price .tpr-comparison-table-foot-price {
flex-shrink: 0;
white-space: nowrap;
font-size: 20px;
font-weight: 600;
}
/* Comparison table: slightly smaller type on tablet and down (desktop >1024px unchanged) */
@media (max-width: 1024px) {
.tpr-comparison-table thead th {
font-size: 17px !important;
}
.tpr-comparison-table td,
.tpr-comparison-table th {
font-size: 15px !important;
}
.tpr-comparison-table tfoot tr td:nth-child(2),
.tpr-comparison-table tfoot tr td:nth-child(4) {
font-size: 17px !important;
}
.tpr-comparison-table tfoot tr td.tpr-comparison-table-foot-has-price .tpr-comparison-table-foot-price {
font-size: 17px !important;
}
.tpr-comparison-table tfoot tr td.tpr-comparison-table-foot-has-price .tpr-comparison-table-foot-label {
font-size: 15px !important;
}
}
/*
* Case study / project (single-projects): the UAGB root already constrains its
* inner-blocks-wrap to `max-width: min(100%, 90%)` via the editor content-width
* setting, which matches the rest of the 90% body content. Stacking an extra
* `var(--tpr-content-inset)` of horizontal padding on top (previous behavior)
* pushed the card's inner content noticeably narrower than the surrounding
* copy on tablet/phone. Defer to the block's own 90% width — no override here.
*/
/* Mobile: show column 1 (label+price) at full viewport width; columns 3+4 revealed by horizontal scroll. VS circle is pinned at right edge as a scroll cue. */
@media (max-width: 767px) {
/* Outer Spectra container: no scroll (figure handles it). overflow-y visible so header images extend above. */
.wp-block-uagb-container:has(.tpr-comparison-table),
.wp-block-group:has(.tpr-comparison-table) {
overflow-x: visible !important;
overflow-y: visible !important;
}
/* Figure is the horizontal scroll container. Make it position: static on mobile so the VS circle's containing block becomes .tpr-comparison-table-wrapper (which does not scroll) — VS then stays pinned at the wrapper's right edge while the table scrolls underneath. */
.tpr-comparison-table {
position: static !important;
-webkit-overflow-scrolling: touch;
width: 100%;
scroll-snap-type: x mandatory;
}
.tpr-comparison-table table {
table-layout: fixed;
width: 200% !important;
min-width: 200%;
}
.tpr-comparison-table td,
.tpr-comparison-table th {
padding: 14px 16px !important;
font-size: 14px !important;
}
.tpr-comparison-table thead th {
font-size: 15px !important;
padding: 14px 16px !important;
text-align: left !important;
vertical-align: middle !important;
}
.tpr-comparison-table thead th:last-child {
padding-left: 80px !important;
scroll-snap-align: start;
}
.tpr-comparison-table thead th:first-child {
scroll-snap-align: start;
}
/* Label columns: 35% of 200% table = 70% viewport */
.tpr-comparison-table tbody td:nth-child(1),
.tpr-comparison-table tbody td:nth-child(3),
.tpr-comparison-table tfoot td:nth-child(1),
.tpr-comparison-table tfoot td:nth-child(3) {
width: 35% !important;
padding-left: 16px !important;
padding-right: 8px !important;
scroll-snap-align: start;
}
/* Price columns: 15% of 200% table = 30% viewport */
.tpr-comparison-table tbody td:nth-child(2),
.tpr-comparison-table tbody td:nth-child(4),
.tpr-comparison-table tfoot td:nth-child(2),
.tpr-comparison-table tfoot td:nth-child(4) {
min-width: 0 !important;
width: 15% !important;
padding-left: 8px !important;
padding-right: 16px !important;
font-size: 14px !important;
}
.tpr-comparison-table tbody td {
height: auto !important;
min-height: 48px;
}
/* Mobile footer: label + price stay side-by-side (not stacked) since the wider 2-view layout gives each cell room */
.tpr-comparison-table tfoot tr td.tpr-comparison-table-foot-has-price .tpr-comparison-table-foot-label {
font-size: 13px !important;
}
.tpr-comparison-table tfoot tr td.tpr-comparison-table-foot-has-price .tpr-comparison-table-foot-price {
font-size: 15px !important;
}
/* VS circle: containing block is now .tpr-comparison-table-wrapper (not the scrolling figure). Pin to right edge of wrapper so it stays visible during horizontal scroll. Acts as a click-to-scroll button on mobile. */
.tpr-comparison-table-vs {
left: auto !important;
right: 12px !important;
top: 30px;
transform: translateY(-50%) !important;
transition: left 0.25s ease, right 0.25s ease;
cursor: pointer;
}
.tpr-comparison-table-vs svg {
width: 42px;
height: 42px;
}
/* Scroll cue: "Scroll" text + right-pointing chevron next to VS, gentle pulse. Both positioned on the LEFT of VS in the default state. */
.tpr-comparison-table-vs::before {
content: "Scroll";
position: absolute;
top: 50%;
right: calc(100% + 22px);
left: auto;
transform: translateY(-50%);
font-size: 12px;
font-weight: 600;
color: #ffffff;
white-space: nowrap;
transition: opacity 0.2s ease;
}
.tpr-comparison-table-vs::after {
content: "";
position: absolute;
top: 50%;
right: calc(100% + 6px);
left: auto;
width: 10px;
height: 10px;
border-top: 3px solid #ffffff;
border-right: 3px solid #ffffff;
border-left: none;
border-bottom: none;
transform: translateY(-50%) rotate(45deg);
animation: tpr-vs-chevron-pulse 1.4s ease-in-out infinite;
}
/* Scrolled state (JS toggles .tpr-scrolled on wrapper once user scrolls past ~25% of figure width). VS flips to the LEFT edge so it sits before the "Have us do it for you" header; chevron + Scroll text flip to the right of VS and chevron reverses direction. */
.tpr-scrolled .tpr-comparison-table-vs {
left: 12px !important;
right: auto !important;
}
.tpr-scrolled .tpr-comparison-table-vs::before {
opacity: 0;
}
.tpr-scrolled .tpr-comparison-table-vs::after {
left: calc(100% + 6px);
right: auto;
transform: translateY(-50%) rotate(225deg);
animation-name: tpr-vs-chevron-pulse-rev;
}
/* Mobile footer: align "Total cost" label flush-left with body labels above (16px) so the first character lines up with "Hire a 1.5m...". Mirror for the second column group. */
.tpr-comparison-table tfoot tr td.tpr-comparison-table-foot-has-price,
.tpr-comparison-table tfoot tr td.tpr-comparison-table-foot-has-price:first-child,
.tpr-comparison-table tfoot tr td.tpr-comparison-table-foot-has-price:last-child {
padding-left: 16px !important;
padding-right: 16px !important;
}
/*
* Accordion panel often has inline 5% padding — zero horizontal on mobile so the comparison
* table matches body column alignment and gains width. (Vertical padding unchanged.)
*/
.wp-block-accordion-panel:has(.tpr-comparison-table) {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Spectra wrappers around the table: drop side padding so the figure can span the panel */
.wp-block-accordion-panel:has(.tpr-comparison-table) .wp-block-uagb-container:has(.tpr-comparison-table-wrapper) {
padding-left: 0 !important;
padding-right: 0 !important;
}
.wp-block-accordion-panel:has(.tpr-comparison-table)
.wp-block-uagb-container:has(.tpr-comparison-table-wrapper)
> .uagb-container-inner-blocks-wrap,
.wp-block-accordion-panel:has(.tpr-comparison-table)
.wp-block-uagb-container:has(.tpr-comparison-table-wrapper)
> .uagb-container-inner-block {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*
* Case study: keep the comparison table at the same ~90% inner width as the rest of the
* site on mobile (no full-viewport breakout).
*/
#case-study-feature:has(.tpr-comparison-table) {
overflow-x: visible !important;
}
#case-study-feature .tpr-comparison-table-wrapper {
width: 90% !important;
max-width: 90% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
position: relative;
}
#case-study-feature .wp-block-uagb-container:has(.tpr-comparison-table),
#case-study-feature .wp-block-group:has(.tpr-comparison-table),
#case-study-feature .uagb-container-inner-blocks-wrap:has(.tpr-comparison-table-wrapper) {
overflow-x: visible !important;
}
/*
* Case study root: Spectra often keeps the inner wrap as row/grid below desktop, so the
* quote block (e.g. .uagb-block-471e691e) stays in a second column and sits off-screen right
* beside the full-bleed table. Force a single column stack for all direct section blocks.
*/
#case-study-feature.uagb-layout-grid > .uagb-container-inner-blocks-wrap,
#case-study-feature.uagb-layout-grid > .uagb-container-inner-block,
#case-study-feature > .uagb-container-inner-blocks-wrap,
#case-study-feature > .uagb-container-inner-block {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
grid-template-columns: none !important;
grid-auto-columns: unset !important;
grid-auto-flow: unset !important;
}
#case-study-feature.uagb-layout-grid > .uagb-container-inner-blocks-wrap > *,
#case-study-feature.uagb-layout-grid > .uagb-container-inner-block > *,
#case-study-feature > .uagb-container-inner-blocks-wrap > *,
#case-study-feature > .uagb-container-inner-block > * {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
align-self: stretch !important;
}
}
/* Chevron pulse animation for mobile VS scroll cue: right-pointing chevron nudges toward VS (leftward) since it sits on the left of VS in the default state. */
@keyframes tpr-vs-chevron-pulse {
0%, 100% {
opacity: 0.55;
transform: translateY(-50%) translateX(0) rotate(45deg);
}
50% {
opacity: 1;
transform: translateY(-50%) translateX(-4px) rotate(45deg);
}
}
/* Reversed: left-pointing chevron (scrolled state) nudges rightward toward VS. */
@keyframes tpr-vs-chevron-pulse-rev {
0%, 100% {
opacity: 0.55;
transform: translateY(-50%) translateX(0) rotate(225deg);
}
50% {
opacity: 1;
transform: translateY(-50%) translateX(4px) rotate(225deg);
}
}
/* Mobile-only 5% left indent. Apply via Gutenberg "Additional CSS class" to paragraphs that need to keep their indent when the table goes edge-to-edge. */
@media (max-width: 767px) {
.tpr-mobile-indent {
padding-left: 5%;
}
}
/* Table header images: in wrapper outside figure so they extend above without expanding header */
.tpr-comparison-table-wrapper {
--tpr-table-header-height: 80px;
position: relative;
overflow: visible;
}
.wp-block-uagb-container:has(.tpr-comparison-table),
.wp-block-group:has(.tpr-comparison-table) {
overflow-y: visible !important;
}
/* Accordion: allow header images to extend above table when comparison table is inside panel */
.wp-block-accordion:has(.tpr-comparison-table),
.wp-block-accordion-item:has(.tpr-comparison-table),
.wp-block-accordion-panel:has(.tpr-comparison-table) {
overflow: visible !important;
}
.tpr-comparison-table-wrapper .tpr-table-before-image,
.tpr-comparison-table-wrapper .tpr-table-after-image {
position: absolute;
bottom: calc(100% - var(--tpr-table-header-height, 80px));
line-height: 0;
pointer-events: none;
z-index: 2;
}
.tpr-comparison-table-wrapper .tpr-table-before-image {
right: calc(50% + 30px);
margin-bottom: 2px;
}
.tpr-comparison-table-wrapper .tpr-table-after-image {
right: 20px;
margin-bottom: -2px;
}
.tpr-table-before-image img{
height: 150px;
width: auto;
display: block;
object-fit: contain;
object-position: bottom;
vertical-align: bottom;
}
.tpr-table-after-image img {
height: 190px;
width: auto;
display: block;
object-fit: contain;
object-position: bottom;
vertical-align: bottom;
}
@media (max-width: 970px) {
.tpr-comparison-table-wrapper .tpr-table-before-image,
.tpr-comparison-table-wrapper .tpr-table-after-image {
display: none;
}
}
/* ==========================================================================
TPR Trusted logos – white boxes, 12px radius, auto-scrolling carousel (Figma)
========================================================================== */
/* Carousel viewport: hide overflow so only one strip is visible */
.tpr-logo-carousel,
.tpr-logo-carousel.tpr-trusted-logos-carousel {
overflow-x: hidden;
overflow-y: visible;
}
/* Clip track overflow at responsive sizes so logos don't push page width */
#logo-scroll-section,
#logo-scroll-section .wp-block-uagb-container {
overflow-x: hidden;
}
.tpr-logo-carousel .tpr-trusted-logos__viewport {
overflow-x: hidden;
width: 100%;
}
/* Track: flex row, duplicated for infinite scroll (JS sets width) */
.tpr-logo-carousel .tpr-trusted-logos__track {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 1rem;
width: max-content;
animation: tpr-trusted-logos-scroll 40s linear infinite;
}
.tpr-logo-carousel.tpr-trusted-logos--paused .tpr-trusted-logos__track {
animation-play-state: paused;
}
@keyframes tpr-trusted-logos-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Each logo in a white box, 12px radius (per Figma) */
.tpr-logo-carousel .tpr-trusted-logos__item {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 12px;
padding: 1rem 1.5rem;
min-width: 140px;
height: 80px;
box-sizing: border-box;
overflow: visible;
}
/* Inner wrapper (figure/a): centre content vertically and horizontally, don’t overflow */
.tpr-logo-carousel .tpr-trusted-logos__item > * {
display: flex !important;
align-items: center !important;
justify-content: center !important;
align-self: stretch;
min-height: 0;
max-width: 100%;
width: 100%;
}
/* Nested flex containers (e.g. UAGB): force vertical centre so logo + text don’t sit at top */
.tpr-logo-carousel .tpr-trusted-logos__item [class*="uagb"],
.tpr-logo-carousel .tpr-trusted-logos__item .wp-block-group {
align-items: center !important;
}
/* Direct wrapper of logo img/svg: flex + centre so short logos sit in the middle */
.tpr-logo-carousel .tpr-trusted-logos__item :has(> img),
.tpr-logo-carousel .tpr-trusted-logos__item :has(> svg) {
display: flex !important;
align-items: center !important;
}
/* JS wraps each img/svg in this cell; cell is centred in box so short logos sit in the middle */
.tpr-logo-carousel .tpr-trusted-logos__logo-cell {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
flex-shrink: 0;
box-shadow: none !important;
}
/* Remove any inherited shadow from gallery/image blocks */
.tpr-logo-carousel.tpr-trusted-logos-carousel figure,
.tpr-logo-carousel.tpr-trusted-logos-carousel .wp-block-image,
.tpr-logo-carousel.tpr-trusted-logos-carousel .tpr-trusted-logos__item {
box-shadow: none !important;
}
/* Shrink logos to fit; fixed max height so none are cut off (80px box − 2×1rem padding = 48px) */
/* Shrink logos to fit; 80px box − 2×1rem padding = 48px max height */
.tpr-logo-carousel .tpr-trusted-logos__item img,
.tpr-logo-carousel .tpr-trusted-logos__item svg {
display: block;
max-width: 100%;
max-height: 48px;
width: auto;
height: auto;
object-fit: contain;
object-position: center;
vertical-align: middle;
/* Centre short logos vertically instead of letting them sit at top */
align-self: center;
}
/* ==========================================================================
TPR Testimonial carousel – star rating, content styling, conditional name/logo
Scope: .tpr-testimonial-carousel (add to container)
========================================================================== */
/* Star rating: inline SVG stars, #0F2902, 16px */
.tpr-testimonial-carousel .tpr-star-rating-display {
display: inline-flex;
align-items: center;
gap: 0.15em;
color: #0F2902 !important;
font-size: 16px !important;
line-height: 1;
}
.tpr-testimonial-carousel .tpr-star-rating-display .tpr-star-icon {
display: inline-flex;
align-items: center;
color: #0F2902 !important;
}
/* Empty stars: muted opacity to appear outline-like */
.tpr-testimonial-carousel .tpr-star-rating-display .tpr-star-empty {
opacity: 0.25;
}
/* ==========================================================================
TPR Reviews – 5 stars in a row (single Icon block with class .tpr-reviews-5-stars)
JS clones the SVG 5× so the same star from the editor is used.
========================================================================== */
.tpr-reviews-5-stars,
.tpr-reviews-5-stars.uagb-svg-wrapper {
display: inline-flex !important;
align-items: center;
}
.tpr-reviews-5-stars__wrap {
display: inline-flex;
align-items: center;
gap: 0.15em;
}
/* Override UAGB Icon block size – force 25px so stars display correctly */
.tpr-reviews-5-stars svg,
.tpr-reviews-5-stars__wrap svg,
.uagb-icon-wrapper.tpr-reviews-5-stars svg {
flex-shrink: 0;
width: 25px !important;
height: 25px !important;
min-width: 25px !important;
min-height: 25px !important;
}
/* Testimonial content: bold, bolded text #879480 (add .tpr-testimonial-content to block) */
.tpr-testimonial-content,
.tpr-testimonial-content p,
.tpr-testimonial-content .uagb-heading-text,
.tpr-testimonial-content .uagb-desc-text {
font-weight: 700;
}
.tpr-testimonial-content strong,
.tpr-testimonial-content b,
.tpr-testimonial-content strong span,
.tpr-testimonial-content b span {
color: #57694E !important;
}
/* Testimonial name (from [tpr_testimonial_name] shortcode) – match heading style */
.tpr-testimonial-carousel .tpr-testimonial-name {
display: block;
font-size: var(--wp--preset--font-size--large, 1.25rem);
font-weight: 700;
color: #0F2902;
}
/* When data-tpr-show-logo="1" (logo ACF exists), hide name heading and show logo image. */
.tpr-testimonial-carousel .uagb-loop-post-inner [data-tpr-show-logo="1"] .wp-block-uagb-advanced-heading:first-of-type,
.tpr-testimonial-carousel .uagb-loop-post-inner [data-tpr-show-logo="1"] .wp-block-uagb-advanced-heading:first-of-type h1,
.tpr-testimonial-carousel .uagb-loop-post-inner [data-tpr-show-logo="1"] .wp-block-uagb-advanced-heading:first-of-type h2,
.tpr-testimonial-carousel .uagb-loop-post-inner [data-tpr-show-logo="1"] .wp-block-uagb-advanced-heading:first-of-type h3,
.tpr-testimonial-carousel .uagb-loop-post-inner [data-tpr-show-logo="1"] .wp-block-uagb-advanced-heading:first-of-type h4,
.tpr-testimonial-carousel .uagb-loop-post-inner [data-tpr-show-logo="1"] .wp-block-uagb-advanced-heading:first-of-type h5,
.tpr-testimonial-carousel .uagb-loop-post-inner [data-tpr-show-logo="1"] .wp-block-uagb-advanced-heading:first-of-type h6 {
display: none !important;
}
/* Testimonial logo: 145×145px circle, force 1:1 aspect ratio (override UAGB/flex stretch) */
.tpr-testimonial-carousel .tpr-testimonial-logo,
.tpr-testimonial-carousel figure.wp-block-uagb-image.tpr-testimonial-logo {
width: 145px !important;
height: 145px !important;
min-width: 145px !important;
min-height: 145px !important;
max-width: 145px !important;
max-height: 145px !important;
flex: 0 0 145px !important;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f5f5;
margin: 0;
}
.tpr-testimonial-carousel .tpr-testimonial-logo img,
.tpr-testimonial-carousel .tpr-testimonial-logo .wp-block-uagb-image__img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
aspect-ratio: 1 / 1;
object-fit: contain;
object-position: center;
padding: 12%;
box-sizing: border-box;
}
/* Fallback: alt text (post title) inside circle when no image */
.tpr-testimonial-carousel .tpr-testimonial-logo .tpr-testimonial-image-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 0.5rem;
text-align: center;
font-size: 20px;
font-weight: 700;
color: #0F2902;
line-height: 1.1;
word-break: break-word;
}
/* ==========================================================================
TPR Testimonial section – align with page content, LHS lines up with card content
========================================================================== */
/* Grid: same left inset as page content so section aligns with content above */
.uagb-layout-grid.uagb-block-08eee7c7 {
padding-left: var(--tpr-content-inset, max(1.5rem, 5vw)) !important;
box-sizing: border-box;
}
/* Left column: no extra left padding (section/grid already provides content inset) */
.tpr-testimonial-lhs-content {
width: 90%;
max-width: 90%;
min-width: 0;
margin-left: 0;
padding-left: 0 !important;
padding-inline-start: 0 !important;
box-sizing: border-box;
}
/* Keep all content (heading, paragraph, image, arrows) within the 90% container */
.tpr-testimonial-lhs-content > * {
max-width: 100%;
box-sizing: border-box;
}
/* Tablet and mobile: LHS content in 2 columns – text left, Google logo right (aligned to right).
* Grid is on the first column wrapper so that with display:contents on LHS, the inner blocks become grid items. */
@media (max-width: 1024px) {
/* First child of the layout grid = LHS column wrapper; make it a 2-column grid */
.uagb-layout-grid:has(.tpr-testimonial-carousel-wrapper) > .uagb-container-inner-blocks-wrap > *:first-child {
display: grid !important;
grid-template-columns: 1fr auto;
gap: 1rem;
align-items: start;
width: 100% !important;
max-width: 100% !important;
}
/* LHS content wrapper: collapse so its children participate in the grid above */
.uagb-layout-grid:has(.tpr-testimonial-carousel-wrapper) .tpr-testimonial-lhs-content {
display: contents !important;
}
/* Grid items are .tpr-testimonial-lhs-content’s children (they participate in the grid via display:contents). Text in col 1. */
.uagb-layout-grid:has(.tpr-testimonial-carousel-wrapper) .tpr-testimonial-lhs-content > *:not(:has(.tpr-google-review-logo)) {
grid-column: 1;
min-width: 0;
}
/* Block that contains the Google logo: second column, right-aligned */
.uagb-layout-grid:has(.tpr-testimonial-carousel-wrapper) .tpr-testimonial-lhs-content > *:has(.tpr-google-review-logo) {
grid-column: 2;
justify-self: end;
}
/* Arrows inside LHS: span full width below the 2-column row */
.uagb-layout-grid:has(.tpr-testimonial-carousel-wrapper) .tpr-testimonial-lhs-content > .tpr-testimonial-carousel-arrows {
grid-column: 1 / -1;
}
.uagb-layout-grid:has(.tpr-testimonial-carousel-wrapper) .tpr-testimonial-lhs-content .tpr-google-review-logo {
margin-left: 0 !important;
margin-right: 0 !important;
float: none !important;
}
}
/* Parent clips overflow so carousel extends off right */
.uagb-container-inner-block:has(.tpr-testimonial-carousel),
.wp-block-group:has(.tpr-testimonial-carousel-wrapper) {
overflow-x: hidden;
}
/* Grid with testimonial: left column keeps min-width so carousel doesn't overlap */
.uagb-layout-grid:has(.tpr-testimonial-carousel-wrapper) > .uagb-container-inner-blocks-wrap > *:first-child {
min-width: min(280px, 100%);
}
/* Carousel wrapper: extends to far right edge of screen. No left margin so it starts at grid column; grid already has content inset. */
.tpr-testimonial-carousel-wrapper {
position: relative;
max-width: none;
min-width: 0;
margin-left: 0;
margin-right: calc(50% - 50vw - var(--wp--style--root--padding-right, 0px));
width: calc(100% + 50vw - 50% + var(--wp--style--root--padding-right, 0px));
}
/* Loop container: horizontal scroll; 2 items visible by default (3 at 1600px+ below) */
.tpr-testimonial-carousel .uagb-loop-container {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 1.5rem;
padding-right: 1rem;
}
.tpr-testimonial-carousel .uagb-loop-container::-webkit-scrollbar {
display: none;
}
/* Each testimonial: two cards visible (one 1.5rem gap between columns) */
.tpr-testimonial-carousel .uagb-loop-container .uagb-loop-post {
flex: 0 0 calc((100% - 1.5rem) / 2);
min-width: min(320px, calc((100vw - 1.5rem) / 2));
scroll-snap-align: start;
}
/* Large desktop (matches site-wide 1600px+ breakpoint): three cards across (two 1.5rem gaps) */
@media (min-width: 1600px) {
.tpr-testimonial-carousel .uagb-loop-container .uagb-loop-post {
flex: 0 0 calc((100% - 3rem) / 3);
min-width: 0;
}
}
/* Arrows: placed where shortcode [tpr-testimonial-carousel-arrows] is used */
.tpr-testimonial-carousel-arrows {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
}
.tpr-testimonial-carousel-nav {
width: 3rem;
height: 3rem;
border: 1px solid transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: #0F2902;
color: #fff;
transition: background-color 0.2s, color 0.2s, transform 0.2s, opacity 0.2s;
padding: 0;
}
.tpr-testimonial-carousel-nav:hover:not(.is-disabled) {
transform: scale(1.05);
background-color: #D2FC51;
color: #0F2902;
}
.tpr-testimonial-carousel-nav:hover:not(.is-disabled) > i {
color: #0F2902;
}
.tpr-testimonial-carousel-nav:hover:not(.is-disabled) > svg {
fill: #0F2902;
}
.tpr-testimonial-carousel-nav.is-disabled {
background-color: rgba(15, 41, 2, 0.1) !important;
cursor: not-allowed;
opacity: 0.6;
}
.tpr-testimonial-carousel-nav > i {
font-size: 1rem;
line-height: 1;
color: #fff;
}
.tpr-testimonial-carousel-nav > svg {
width: 1rem;
height: 1rem;
fill: #fff;
}
/* Mobile: one testimonial at a time, horizontal scroll, arrows underneath */
@media (max-width: 767px) {
.tpr-testimonial-carousel-wrapper {
overflow-x: hidden;
width: 100% !important;
margin-right: 0 !important;
}
.tpr-testimonial-carousel .uagb-loop-container {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
}
.tpr-testimonial-carousel .uagb-loop-container .uagb-loop-post {
flex: 0 0 100% !important;
min-width: 100% !important;
}
/* Arrows below carousel: testimonials-slider or any parent with both wrapper + arrows */
#testimonials-slider,
.wp-block-group:has(.tpr-testimonial-carousel-wrapper):has(.tpr-testimonial-carousel-arrows) {
display: flex;
flex-direction: column;
}
#testimonials-slider .tpr-testimonial-carousel-wrapper,
.wp-block-group:has(.tpr-testimonial-carousel-wrapper):has(.tpr-testimonial-carousel-arrows) .tpr-testimonial-carousel-wrapper {
order: 1;
}
#testimonials-slider .tpr-testimonial-carousel-arrows,
.wp-block-group:has(.tpr-testimonial-carousel-wrapper):has(.tpr-testimonial-carousel-arrows) .tpr-testimonial-carousel-arrows {
order: 2;
justify-content: flex-start;
margin-top: 1rem;
}
/* LHS intro copy: breathing room vs viewport / carousel (editor sets padding 0 on this group). */
#testimonials-slider .tpr-testimonial-lhs-content > .wp-block-group.has-global-padding.is-layout-constrained {
padding-right: 5% !important;
}
}
/* When testimonial section stacks (single column), move arrows below the carousel. */
@media (max-width: 1024px) {
.uagb-layout-grid:has(.tpr-testimonial-carousel-wrapper) > .uagb-container-inner-blocks-wrap {
display: flex !important;
flex-direction: column;
}
/* LHS content uses 2-column grid (text left, logo right) – see .tpr-testimonial-lhs-content rules above; no display: contents */
/* First stacked item (LHS content) full width so its internal grid can span and align logo right */
.uagb-layout-grid:has(.tpr-testimonial-carousel-wrapper) > .uagb-container-inner-blocks-wrap > .tpr-testimonial-lhs-content {
width: 100% !important;
max-width: 100% !important;
order: 0;
}
.uagb-layout-grid:has(.tpr-testimonial-carousel-wrapper) > .uagb-container-inner-blocks-wrap > *:not(.tpr-testimonial-carousel-wrapper):not(.tpr-testimonial-carousel-arrows):not(.tpr-testimonial-lhs-content) {
width: 90%;
max-width: 90%;
margin-left: 0;
padding-left: 1.5rem !important;
order: 0;
}
.uagb-layout-grid:has(.tpr-testimonial-carousel-wrapper) .tpr-testimonial-carousel-wrapper {
order: 1;
}
.uagb-layout-grid:has(.tpr-testimonial-carousel-wrapper) .tpr-testimonial-carousel-arrows {
order: 2;
}
}
/* ==========================================================================
Footer reveal: parallax effect. The reveal text and copyright bar sit
fixed at the viewport bottom but are clipped inside the footer via
clip-path. #tpr-footer-primary has a solid background and scrolls over
them like a curtain, naturally revealing the content behind it.
Large-desktop spacing and short-viewport fallbacks are handled in CSS below.
========================================================================== */
/* Override parent theme: footer sits directly below content, no white gap */
.wp-site-blocks footer {
margin-top: 0 !important;
}
/* Page content (not the site header) sits above the footer's clipped reveal layer */
.wp-site-blocks > *:not(footer):not(header) {
position: relative;
z-index: 1;
}
/*
* Spectra header (template part): “Transparent header” / “Sticky header” in the editor add
* .swt-transparent-header (position: absolute; z-index: 999) or .swt-sticky-header (fixed).
* Do not set position here — it would override Spectra and break overlap site-wide.
* Only headers without those classes get a stacking context for the footer parallax layer below.
*/
.wp-site-blocks > header.wp-block-template-part:not(.swt-transparent-header):not(.swt-sticky-header) {
position: relative;
z-index: 10;
}
/* Clip fixed children to the footer's bounds – enables the parallax reveal.
position: relative + z-index: 0 keeps it below the sticky CTA bar (z-index: 999999).
Bottom clip extended below footer: any content that lives below the footer in flow
(modal roots, injected third-party widgets) inflates docHeight past footer.bottom, so
at max scroll the footer's rect ends ~belowFooter px above the viewport bottom. Without
the negative inset, the fixed copyright bar gets clipped there and shows body white as
a thin strip. Top/sides stay `0` — parallax reveal logic only needs vertical clipping. */
footer.wp-block-template-part {
position: relative;
z-index: 0;
clip-path: inset(0 0 -100vh 0);
/* Desktop parallax: --tpr-footer-reveal-pad set by tpr-footer-reveal.js (tighter than 95vh). */
padding-bottom: var(--tpr-footer-reveal-pad, min(1600px, 95vh));
}
/* All content before the reveal sits above the fixed reveal layer */
footer #tpr-footer-primary,
footer > *:not(.tpr-footer-reveal-text):not(.tpr-footer-reveal-text ~ *) {
position: relative;
z-index: 2;
}
/* Reveal text: fixed at viewport bottom, clipped by footer */
footer .tpr-footer-reveal-text {
position: fixed;
bottom: 100px;
left: 0;
right: 0;
z-index: 1;
/*
* Pack block content to the lower edge of this fixed layer. Spectra/UAGB often
* applies a large min-height (vh-based) on root containers, which otherwise
* leaves a tall empty band above the sticky quote bar on wide viewports.
*/
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
min-height: 0 !important;
box-sizing: border-box;
}
footer .tpr-footer-reveal-text.uagb-is-root-container,
footer .tpr-footer-reveal-text .uagb-is-root-container {
min-height: 0 !important;
}
/*
* Spectra often sets a tall min-height on nested wrappers; that leaves a huge empty
* band *below* the logos inside the fixed layer. Collapse it and pack inner columns
* to the bottom without changing horizontal logo rows (wrap stays flex/grid as authored).
*/
footer .tpr-footer-reveal-text > .uagb-container-inner-block,
footer .tpr-footer-reveal-text > .wp-block-uagb-container,
footer .tpr-footer-reveal-text > .wp-block-group {
min-height: 0 !important;
display: flex;
flex-direction: column;
justify-content: flex-end;
flex: 0 1 auto;
}
footer .tpr-footer-reveal-text .uagb-container-inner-blocks-wrap {
min-height: 0 !important;
flex: 0 1 auto;
align-content: end;
box-sizing: border-box;
}
/*
* Footer reveal mission line (core paragraph with has-xxxx-large-font-size): below the
* large-desktop breakpoint (matches min-width: 1920px tier above), use 40px so laptop
* widths are not dominated by theme xxxx-large; 1920px+ keeps the authored size.
*/
@media (min-width: 1025px) and (max-width: 1919px) {
footer .tpr-footer-reveal-text p.has-xxxx-large-font-size {
font-size: 40px !important;
}
}
/*
* Parallax mode: collapse the reveal block's authored padding-bottom. Spectra/UAGB stores
* the block with `padding: 2% 0 5%`, and in parallax the reveal is `position: fixed;
* bottom: 104px`, so the 5% (~70–100px on wide viewports) rendered as an empty band
* between the logos and the copyright / sticky CTA bar. With padding-bottom: 0 the
* default flex-end on .tpr-footer-reveal-text packs content tight against the reveal's
* bottom edge; padding-top stays authored (breathing room above the logos preserved).
*/
body:not(.tpr-footer-reveal--static) footer .tpr-footer-reveal-text {
padding-bottom: 0 !important;
}
/* Large desktop: extra air between primary footer and the fixed reveal. */
@media (min-width: 1536px) {
footer #tpr-footer-primary {
padding-bottom: clamp(2.75rem, 4.5vw, 4.75rem) !important;
}
}
@media (min-width: 1920px) {
footer #tpr-footer-primary {
padding-bottom: clamp(3.25rem, 5vw, 5.5rem) !important;
}
}
/*
* Sticky CTA / copyright strip is `position: fixed; bottom: 0; min-height: 100px` (higher z-index
* than reveal), so align reveal's bottom exactly with the copyright bar's top — otherwise the
* transparent footer between them shows the body's white background as a thin bar.
*/
body:has(.tpr-gf-cta-block.tpr-gf-cta-sticky) footer .tpr-footer-reveal-text {
bottom: 100px;
}
/* Copyright bar: fixed at very bottom, clipped by footer */
footer .tpr-footer-reveal-text + .wp-block-uagb-container,
footer .tpr-footer-reveal-text + * {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
padding-bottom: env(safe-area-inset-bottom, 0);
box-sizing: border-box;
}
/* When sticky CTA bar is present: copyright bar extends behind CTA */
body:has(.tpr-gf-cta-block.tpr-gf-cta-sticky) footer .tpr-footer-reveal-text + .wp-block-uagb-container,
body:has(.tpr-gf-cta-block.tpr-gf-cta-sticky) footer .tpr-footer-reveal-text + * {
bottom: 0;
min-height: 100px;
}
/* At 960px and below: copyright bar 150px high, text aligned to top */
@media (max-width: 960px) {
body:has(.tpr-gf-cta-block.tpr-gf-cta-sticky) footer .tpr-footer-reveal-text + .wp-block-uagb-container,
body:has(.tpr-gf-cta-block.tpr-gf-cta-sticky) footer .tpr-footer-reveal-text + * {
min-height: 150px;
display: flex;
align-items: flex-start;
}
body:has(.tpr-gf-cta-block.tpr-gf-cta-sticky) footer .tpr-footer-reveal-text + .wp-block-uagb-container [class*="uagb-container-inner"],
body:has(.tpr-gf-cta-block.tpr-gf-cta-sticky) footer .tpr-footer-reveal-text + * [class*="uagb-container-inner"] {
align-self: flex-start;
width: 100%;
}
}
/* Tablet and mobile (≤1024px): no parallax, everything scrolls in normal flow */
@media (max-width: 1024px) {
footer.wp-block-template-part {
clip-path: none;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
footer .tpr-footer-reveal-text,
footer .tpr-footer-reveal-text + .wp-block-uagb-container,
footer .tpr-footer-reveal-text + * {
position: static !important;
}
footer .tpr-footer-reveal-text {
padding-bottom: revert !important;
}
footer .tpr-footer-reveal-text + .wp-block-uagb-container,
footer .tpr-footer-reveal-text + *,
footer > *:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
footer .tpr-footer-reveal-text > .uagb-container-inner-block,
footer .tpr-footer-reveal-text > .wp-block-uagb-container,
footer .tpr-footer-reveal-text > .wp-block-group {
display: revert !important;
flex-direction: revert !important;
justify-content: revert !important;
flex: revert !important;
}
footer .tpr-footer-reveal-text .uagb-container-inner-blocks-wrap,
footer .tpr-footer-reveal-text .uagb-container-inner-block .uagb-container-inner-blocks-wrap {
align-content: revert !important;
padding-top: revert !important;
}
}
/* Mobile: slightly smaller mission line (≈5px under Spectra xxxx-large fluid) + space below reveal block */
@media (max-width: 767px) {
footer .tpr-footer-reveal-text {
padding-bottom: 5% !important;
box-sizing: border-box;
}
footer .tpr-footer-reveal-text p.has-xxxx-large-font-size {
font-size: calc(clamp(40px, 6.6vw, 56px) - 5px) !important;
}
}
/*
* Very short viewports (desktop widths only): DISABLED for now — re-enable by
* uncommenting the @media block below. Was: max-height + min-width turns off
* clip-path / fixed reveal so tall copy is not clipped; tall-copy is also
* handled by JS (.tpr-footer-reveal--static).
*
* @media (max-height: 800px) and (min-width: 1025px) {
* footer.wp-block-template-part {
* clip-path: none;
* padding-bottom: 0 !important;
* margin-bottom: 0 !important;
* }
*
* footer .tpr-footer-reveal-text,
* footer .tpr-footer-reveal-text + .wp-block-uagb-container,
* footer .tpr-footer-reveal-text + * {
* position: static !important;
* }
*
* footer .tpr-footer-reveal-text + .wp-block-uagb-container,
* footer .tpr-footer-reveal-text + *,
* footer > *:last-child {
* margin-bottom: 0 !important;
* padding-bottom: 0 !important;
* }
*
* footer .tpr-footer-reveal-text {
* display: block;
* min-height: 0 !important;
* padding-bottom: revert !important;
* }
*
* footer .tpr-footer-reveal-text > .uagb-container-inner-block,
* footer .tpr-footer-reveal-text > .wp-block-uagb-container,
* footer .tpr-footer-reveal-text > .wp-block-group {
* display: revert !important;
* flex-direction: revert !important;
* justify-content: revert !important;
* flex: revert !important;
* }
*
* footer .tpr-footer-reveal-text .uagb-container-inner-blocks-wrap,
* footer .tpr-footer-reveal-text .uagb-container-inner-block .uagb-container-inner-blocks-wrap {
* align-content: revert !important;
* padding-top: revert !important;
* }
* }
*/
/*
* JS adds this class when reveal stack is taller than the viewport can show
* without clipping (see tpr-footer-reveal.js). Same layout as short-viewport CSS.
*/
@media (min-width: 1025px) {
body.tpr-footer-reveal--static footer.wp-block-template-part {
clip-path: none;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
body.tpr-footer-reveal--static footer .tpr-footer-reveal-text,
body.tpr-footer-reveal--static footer .tpr-footer-reveal-text + .wp-block-uagb-container,
body.tpr-footer-reveal--static footer .tpr-footer-reveal-text + * {
position: static !important;
}
body.tpr-footer-reveal--static footer .tpr-footer-reveal-text + .wp-block-uagb-container,
body.tpr-footer-reveal--static footer .tpr-footer-reveal-text + *,
body.tpr-footer-reveal--static footer > *:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body.tpr-footer-reveal--static footer .tpr-footer-reveal-text {
display: block;
min-height: 0 !important;
padding-bottom: revert !important;
}
body.tpr-footer-reveal--static footer .tpr-footer-reveal-text > .uagb-container-inner-block,
body.tpr-footer-reveal--static footer .tpr-footer-reveal-text > .wp-block-uagb-container,
body.tpr-footer-reveal--static footer .tpr-footer-reveal-text > .wp-block-group {
display: revert !important;
flex-direction: revert !important;
justify-content: revert !important;
flex: revert !important;
}
body.tpr-footer-reveal--static footer .tpr-footer-reveal-text .uagb-container-inner-blocks-wrap,
body.tpr-footer-reveal--static footer .tpr-footer-reveal-text .uagb-container-inner-block .uagb-container-inner-blocks-wrap {
align-content: revert !important;
padding-top: revert !important;
}
}
/* ==========================================================================
Footer accordion – columns become expandable accordions when footer stacks
(≤976px — UAGB's tablet breakpoint, where the footer grid collapses into a single
column; JS adds .tpr-footer-accordion-active in the same range)
========================================================================== */
@media (max-width: 976px) {
#tpr-footer-primary.tpr-footer-accordion-active .tpr-footer-accordion {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 4px !important;
}
#tpr-footer-primary.tpr-footer-accordion-active .tpr-footer-accordion:last-child {
margin-bottom: 0 !important;
}
/* First item gets a top divider + breathing room from the social icons row above it; the
trigger keeps the same 6px vertical padding the others use so all rows are the same height. */
#tpr-footer-primary.tpr-footer-accordion-active .tpr-footer-accordion-first {
border-top: 1px solid rgba(255, 255, 255, 0.2);
margin-top: 1.5rem;
}
/*
* Spectra often sets different padding per column (mobile % on one footer column, top/bottom
* pad on another). Strip ALL insets on accordion columns so every trigger row sits flush with
* the dividers above/below — otherwise "About" etc. renders a bigger gap than "Resources".
*
* Target the raw DOM (not the JS-added .tpr-footer-accordion-active / data-ready attrs): WP
* Rocket RUCSS prunes selectors it can't match in the static HTML, and those markers only
* appear after tpr-footer-accordion.js runs. Matching the unprocessed column keeps the rule
* in the critical CSS.
*/
#tpr-footer-primary .wp-block-uagb-container {
padding: 0 !important;
padding-inline: 0 !important;
padding-block: 0 !important;
margin: 0 !important;
margin-inline: 0 !important;
margin-block: 0 !important;
}
/* Stack accordions without UAGB block-gap inflating row spacing; zero inner horizontal padding too.
Same RUCSS reasoning as above: avoid JS-added selectors so the rule survives critical-CSS pruning. */
#tpr-footer-primary .wp-block-uagb-container > .uagb-container-inner-blocks-wrap,
#tpr-footer-primary .wp-block-uagb-container > .uagb-container-inner-block {
gap: 0.25rem !important;
row-gap: 0.25rem !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-inline-start: 0 !important;
padding-inline-end: 0 !important;
}
/*
* UAGB puts each footer column inside its own wp-block-uagb-container and the OUTER grid
* wrapper (.uagb-container-inner-blocks-wrap) spaces the stacked columns apart. Margin-bottom
* on an accordion inside a grid row doesn't reliably push the next row down (grid-auto-rows
* sizes to content-box, not margin-box), so drive the gap with row-gap directly — this is
* what produces the consistent space between every accordion row.
*/
#tpr-footer-primary.tpr-footer-accordion-active .uagb-container-inner-blocks-wrap {
row-gap: 10px !important;
}
.tpr-footer-accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 6px 0;
background: none;
border: none;
color: inherit;
font: inherit;
font-weight: 700;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.tpr-footer-accordion__trigger:hover,
.tpr-footer-accordion__trigger:focus {
outline: none;
}
.tpr-footer-accordion__trigger-inner {
flex: 1 1 auto;
min-width: 0;
text-align: left;
margin: 0;
}
/* Editor heading may be UAGB advanced heading (margins / text-align differ from plain ). */
#tpr-footer-primary .tpr-footer-accordion__trigger-inner .wp-block-uagb-advanced-heading,
#tpr-footer-primary .tpr-footer-accordion__trigger-inner .uagb-heading-text {
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.tpr-footer-accordion__chevron {
flex-shrink: 0;
margin-left: 0.5rem;
transition: transform 0.2s ease;
}
.tpr-footer-accordion--open .tpr-footer-accordion__chevron {
transform: rotate(180deg);
}
.tpr-footer-accordion__panel {
overflow: hidden;
max-height: 0;
transition: max-height 0.25s ease;
}
.tpr-footer-accordion--open .tpr-footer-accordion__panel {
max-height: 500px; /* Enough for typical link lists */
}
.tpr-footer-accordion__panel > * {
padding-bottom: 0.45rem;
}
.tpr-footer-accordion__panel > *:last-child {
padding-bottom: 0.65rem;
}
/* WP Core Navigation block with `is-responsive` (e.g. About column) renders a hamburger
below ≈600px and hides the inline list. Inside the footer accordion panel we already
provide the disclosure via the trigger, so force the list inline and hide the second
hamburger button + its modal chrome. */
.tpr-footer-accordion__panel .wp-block-navigation__responsive-container-open {
display: none !important;
}
.tpr-footer-accordion__panel .wp-block-navigation__responsive-container {
display: block !important;
position: static !important;
background: transparent !important;
padding: 0 !important;
}
.tpr-footer-accordion__panel .wp-block-navigation__responsive-container-close {
display: none !important;
}
.tpr-footer-accordion__panel .wp-block-navigation__responsive-container .wp-block-navigation__container {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.25rem !important;
}
}
/* ==========================================================================
Footer logos – use backend-set height per logo, width auto for aspect ratio
Each Image block’s Width/Height in the editor controls that logo’s size.
========================================================================== */
footer .tpr-footer-logos {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 1rem;
height: fit-content;
min-height: 0;
/* !important to beat UAGB's per-block padding rule (.uagb-block-d7a60375 { padding: 0 }). */
padding-bottom: clamp(1.5rem, 4vw, 2.5rem) !important;
}
/* Mobile + tablet logo layout – see tropical_plant_rentals_footer_logos_mobile_layout() in functions.php */
/* Don't let row-2 logos flex-grow across empty space — keep them flush-left and adjacent so the
* row visually starts at the same x as row 1's first logo. Selector includes html body to beat
* the mobile layout CSS emitted from functions.php (tropical_plant_rentals_footer_logos_mobile_layout)
* which forces `flex: 1 1 0` on children 2–4 for a 4-logo layout. With only 3 logos the stretch
* pushes the small badge into the middle of empty space. */
html body footer .tpr-footer-logos-wrap > [class*="tpr-footer-individual-logo-"],
html body footer .tpr-footer-logos > [class*="tpr-footer-individual-logo-"],
html body footer [class*="tpr-footer-individual-logo-"] {
flex: 0 0 auto !important;
width: fit-content !important;
min-width: 0 !important;
max-width: 350px !important;
}
footer [class*="tpr-footer-individual-logo-"] .wp-block-uagb-image__figure,
footer [class*="tpr-footer-individual-logo-"] figure {
width: fit-content !important;
max-width: 350px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
footer [class*="tpr-footer-individual-logo-"] img,
footer [class*="tpr-footer-individual-logo-"] svg {
width: auto !important;
max-width: 350px !important;
object-fit: contain !important;
/* Anchor the visible logo to the left edge of the image box. With object-fit:contain the
* rendered content is centred by default, which leaves transparent padding on the left for
* wider-than-tall logos (e.g. IPA) and pushes the icon inward — breaking the visual
* alignment with the row above. */
object-position: left center !important;
display: block !important;
}
footer .tpr-footer-individual-logo-70,
footer .tpr-footer-individual-logo-70 .wp-block-uagb-image__figure,
footer .tpr-footer-individual-logo-70 figure {
height: 70px !important;
max-height: 70px !important;
}
footer .tpr-footer-individual-logo-70 img,
footer .tpr-footer-individual-logo-70 svg {
height: 70px !important;
max-height: 70px !important;
}
footer .tpr-footer-individual-logo-80,
footer .tpr-footer-individual-logo-80 .wp-block-uagb-image__figure,
footer .tpr-footer-individual-logo-80 figure {
height: 80px !important;
max-height: 80px !important;
max-width: 220px !important;
}
footer .tpr-footer-individual-logo-80 img,
footer .tpr-footer-individual-logo-80 svg {
height: 80px !important;
max-height: 80px !important;
max-width: 220px !important;
}
footer .tpr-footer-individual-logo-170,
footer .tpr-footer-individual-logo-170 .wp-block-uagb-image__figure,
footer .tpr-footer-individual-logo-170 figure {
height: 170px !important;
max-height: 170px !important;
}
footer .tpr-footer-individual-logo-170 img,
footer .tpr-footer-individual-logo-170 svg {
height: 170px !important;
max-height: 170px !important;
}
/* ==========================================================================
Get Started modal – full-screen overlay, X close
========================================================================== */
.tpr-get-started-modal {
position: fixed;
inset: 0;
z-index: 1001000; /* Above header chrome (was 1000001) and nav overlay (100000) */
visibility: hidden;
opacity: 0;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.tpr-get-started-modal:not(.is-open),
.tpr-get-started-modal:not(.is-open) * {
pointer-events: none !important;
}
.tpr-get-started-modal.is-open {
visibility: visible;
opacity: 1;
pointer-events: auto !important;
}
/* Beat theme / builder CSS that keeps opacity/visibility at “closed” while JS adds .is-open */
#tpr-get-started-modal.tpr-get-started-modal.is-open {
visibility: visible !important;
opacity: 1 !important;
}
/*
* Do not use .is-open * { pointer-events: auto } — __inner sits above __overlay (full viewport).
* With pointer-events on the inner shell, “dimmed” clicks hit inner instead of overlay, so
* click-outside-to-close never runs and the page feels frozen (scroll locked, no visible UI).
*/
.tpr-get-started-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.75);
cursor: pointer;
pointer-events: auto !important;
}
.tpr-get-started-modal__inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
/* Clicks pass through to __overlay except on __content (see below). */
pointer-events: none !important;
/* No background – the page content blocks provide their own */
}
/* Close button: direct child of modal, fixed; z-index above modal content + GF datepicker (1000003) */
.tpr-get-started-modal__close {
position: fixed;
top: calc(var(--tpr-header-height, 60px) + 0.5rem);
right: 0.75rem;
z-index: 1001010;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding: 0.4rem;
box-sizing: border-box;
background: #D2FC51;
border: none;
border-radius: 50%;
cursor: pointer;
color: #0F2902;
line-height: 0;
outline: none;
transition: background 0.2s ease;
-webkit-tap-highlight-color: transparent;
pointer-events: auto !important;
}
/* SVG icon inside close button: inherit pointer-events so clicks pass to the button */
.tpr-get-started-modal__close svg,
.tpr-get-started-modal__close path,
.tpr-get-started-modal__close line {
pointer-events: none !important;
}
.tpr-get-started-modal__close:hover,
.tpr-get-started-modal__close:focus {
background: #ffffff;
outline: none;
}
.tpr-get-started-modal__content {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
position: relative;
z-index: 1;
pointer-events: auto !important;
/* Reduce scroll chaining into the locked page; smoother momentum on iOS */
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* Page content: let blocks dictate all layout and backgrounds */
.tpr-get-started-modal__page-content {
width: 100%;
box-sizing: border-box;
pointer-events: auto !important;
}
/* alignfull blocks must fill the modal width */
.tpr-get-started-modal__page-content .alignfull,
.tpr-get-started-modal__page-content .uagb-is-root-container {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Remove any entry-content padding that would indent blocks */
.tpr-get-started-modal__page-content .entry-content,
.tpr-get-started-modal__page-content .wp-block-post-content {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: none !important;
}
/* Keep header below the modal stacking context so the dialog and dimmed overlay cover the page */
body.tpr-get-started-modal-open header.wp-block-template-part {
z-index: auto !important;
}
/* Over dark modal overlay, use default (light) header treatment even on header_dark pages */
body.tpr-get-started-modal-open.tpr-header-dark header .wp-block-navigation-item__content,
body.tpr-get-started-modal-open.tpr-header-dark header .wp-block-navigation a,
body.tpr-get-started-modal-open.tpr-header-dark header .wp-block-navigation .wp-block-navigation-item__label {
color: #fff !important;
}
body.tpr-get-started-modal-open.tpr-header-dark header .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon,
body.tpr-get-started-modal-open.tpr-header-dark header .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon svg {
color: #fff !important;
fill: #fff !important;
}
body.tpr-get-started-modal-open.tpr-header-dark header .wp-block-navigation .tpr-mega-menu .wp-block-navigation__submenu-container > li:not(.tpr-menu-sub-heading):not(.tpr-menu-italic-heading) .wp-block-navigation-item__content,
body.tpr-get-started-modal-open.tpr-header-dark header .wp-block-navigation .tpr-mega-menu .wp-block-navigation__submenu-container > li:not(.tpr-menu-sub-heading):not(.tpr-menu-italic-heading) .wp-block-navigation-item__label,
body.tpr-get-started-modal-open.tpr-header-dark header .wp-block-navigation .tpr-mega-menu .wp-block-navigation__submenu-container > li:not(.tpr-menu-sub-heading):not(.tpr-menu-italic-heading) a {
color: #879480 !important;
}
body.tpr-get-started-modal-open.tpr-header-dark header .wp-block-navigation .tpr-mega-menu .tpr-menu-sub-heading .wp-block-navigation-item__content,
body.tpr-get-started-modal-open.tpr-header-dark header .wp-block-navigation .tpr-mega-menu .tpr-menu-sub-heading .wp-block-navigation-item__label,
body.tpr-get-started-modal-open.tpr-header-dark header .wp-block-navigation .tpr-mega-menu .tpr-menu-sub-heading a {
color: #fff !important;
}
body.tpr-get-started-modal-open.tpr-header-dark header .wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__button,
body.tpr-get-started-modal-open.tpr-header-dark header .wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__button svg {
color: #fff !important;
fill: #fff !important;
}
body.tpr-get-started-modal-open.tpr-header-dark header a[href^="tel:"] {
color: #fff !important;
}
body.tpr-get-started-modal-open.tpr-header-dark header a[href^="tel:"] svg {
fill: #fff !important;
stroke: #fff !important;
}
body.tpr-get-started-modal-open.tpr-header-dark header .wp-block-navigation__responsive-container-open svg {
fill: none !important;
stroke: #fff !important;
}
body.tpr-get-started-modal-open.tpr-header-dark header .wp-block-navigation__responsive-container-close svg {
fill: none !important;
stroke: #fff !important;
}
body.tpr-get-started-modal-open {
overflow: visible;
}
/*
* Singular /get-started/ page (main column): CTA redirects append ?action=…&solution=…
* Modal-only rules below target #tpr-get-started-modal; the visible page content is in main / .wp-block-post-content.
* When intent is not Get a quote / Get in touch, hide quote + contact shells there only (footer modal unchanged).
*/
body.tpr-get-started-page-informational-flow main .tpr-get-started-form-panel--quote,
body.tpr-get-started-page-informational-flow main .tpr-get-started-form-panel--contact,
body.tpr-get-started-page-informational-flow main .tpr-contact-form-toggle,
body.tpr-get-started-page-informational-flow main .tpr-get-in-touch-form,
body.tpr-get-started-page-informational-flow main #gform_wrapper_2,
body.tpr-get-started-page-informational-flow main #gform_wrapper_5,
body.tpr-get-started-page-informational-flow main form#gform_2,
body.tpr-get-started-page-informational-flow main form#gform_5,
body.tpr-get-started-page-informational-flow main .gform_wrapper.gform-theme--framework[data-form-id="2"],
body.tpr-get-started-page-informational-flow main .gform_wrapper.gform-theme--framework[data-form-id="5"],
body.tpr-get-started-page-informational-flow .wp-block-post-content .tpr-get-started-form-panel--quote,
body.tpr-get-started-page-informational-flow .wp-block-post-content .tpr-get-started-form-panel--contact,
body.tpr-get-started-page-informational-flow .wp-block-post-content .tpr-contact-form-toggle,
body.tpr-get-started-page-informational-flow .wp-block-post-content .tpr-get-in-touch-form,
body.tpr-get-started-page-informational-flow .wp-block-post-content #gform_wrapper_2,
body.tpr-get-started-page-informational-flow .wp-block-post-content #gform_wrapper_5,
body.tpr-get-started-page-informational-flow .wp-block-post-content form#gform_2,
body.tpr-get-started-page-informational-flow .wp-block-post-content form#gform_5,
body.tpr-get-started-page-informational-flow .wp-block-post-content .gform_wrapper.gform-theme--framework[data-form-id="2"],
body.tpr-get-started-page-informational-flow .wp-block-post-content .gform_wrapper.gform-theme--framework[data-form-id="5"],
body.tpr-get-started-page-informational-flow .entry-content .tpr-get-started-form-panel--quote,
body.tpr-get-started-page-informational-flow .entry-content .tpr-get-started-form-panel--contact,
body.tpr-get-started-page-informational-flow .entry-content #gform_wrapper_2,
body.tpr-get-started-page-informational-flow .entry-content #gform_wrapper_5 {
display: none !important;
}
/* Quote GF (form 2) inside theme quote shell only — avoids hiding the same ID inside .tpr-contact-form-toggle */
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--quote-revealed) .tpr-get-started-modal__page-content .tpr-get-started-form-panel--quote #gform_wrapper_2,
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--quote-revealed) .tpr-get-started-modal__page-content .tpr-get-started-form-panel--quote form#gform_2,
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--quote-revealed) .tpr-get-started-modal__page-content .tpr-get-started-form-panel--quote .gform_wrapper.gform-theme--framework[data-form-id="2"] {
display: none !important;
}
/* Same as GF 5 below: if DOM wrap missed, still hide quote markup until --quote-revealed (modal __page-content only). */
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--quote-revealed) .tpr-get-started-modal__page-content #gform_wrapper_2,
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--quote-revealed) .tpr-get-started-modal__page-content form#gform_2,
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--quote-revealed) .tpr-get-started-modal__page-content .gform_wrapper.gform-theme--framework[data-form-id="2"] {
display: none !important;
}
/*
* GF often prints style="display:none" on #gform_wrapper_2 (conditional logic / section defaults at render).
* When --quote-revealed, our rules above no longer force display:none — but inline display:none still wins
* over normal author rules, so the quote form stays invisible inside the white shell until overridden here.
*/
.tpr-get-started-modal.is-open.tpr-get-started-modal--quote-revealed .tpr-get-started-modal__page-content #gform_wrapper_2.gform_wrapper,
.tpr-get-started-modal.is-open.tpr-get-started-modal--quote-revealed .tpr-get-started-modal__page-content form#gform_2 {
display: block !important;
}
/* Same inline-GF-hide issue on inline Get Started sections (full page / blocks with .tpr-get-started-flow). */
.tpr-get-started-flow.tpr-get-started-flow--quote-revealed #gform_wrapper_2.gform_wrapper,
.tpr-get-started-flow.tpr-get-started-flow--quote-revealed form#gform_2 {
display: block !important;
}
/*
* Get in touch (GF 5): hide contact shell + optional editor wrappers until CTA submit.
* Theme wraps #gform_wrapper_5 in .tpr-get-started-form-panel--contact; unwrapped fallbacks if DOM parse misses.
*/
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--contact-revealed) .tpr-get-started-modal__page-content .tpr-contact-form-toggle,
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--contact-revealed) .tpr-get-started-modal__page-content .tpr-get-in-touch-form,
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--contact-revealed) .tpr-get-started-modal__page-content .tpr-get-started-form-panel--contact #gform_wrapper_5,
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--contact-revealed) .tpr-get-started-modal__page-content .tpr-get-started-form-panel--contact form#gform_5,
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--contact-revealed) .tpr-get-started-modal__page-content #gform_wrapper_5,
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--contact-revealed) .tpr-get-started-modal__page-content form#gform_5,
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--contact-revealed) .tpr-get-started-modal__page-content .gform_wrapper.gform-theme--framework[data-form-id="5"] {
display: none !important;
}
/*
* Form shells are injected in PHP (tpr_get_started_modal_wrap_form_panels): quote vs contact hide independently.
* Optional: add class tpr-get-started-form-panel only (no --quote/--contact) in the editor for a custom block.
*/
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--quote-revealed)
.tpr-get-started-modal__page-content
.tpr-get-started-form-panel--quote,
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--contact-revealed)
.tpr-get-started-modal__page-content
.tpr-get-started-form-panel--contact,
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--quote-revealed):not(.tpr-get-started-modal--contact-revealed)
.tpr-get-started-modal__page-content
.tpr-get-started-form-panel:not(.tpr-get-started-form-panel--quote):not(.tpr-get-started-form-panel--contact) {
display: none !important;
}
/*
* Editor sometimes wraps the panel in an extra .tpr-get-started-form-shell parent. Hiding only the inner
* .tpr-get-started-form-panel leaves the outer shell (padding + white bg) visible as an empty box.
* :has(> …) targets that outer wrapper only (single combined div has gform children, not a nested panel).
*/
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--quote-revealed)
.tpr-get-started-modal__page-content
.tpr-get-started-form-shell:has(> .tpr-get-started-form-panel--quote) {
display: none !important;
}
.tpr-get-started-modal.is-open:not(.tpr-get-started-modal--contact-revealed)
.tpr-get-started-modal__page-content
.tpr-get-started-form-shell:has(> .tpr-get-started-form-panel--contact) {
display: none !important;
}
.tpr-get-started-flow:not(.tpr-get-started-flow--quote-revealed) .tpr-get-started-form-shell:has(> .tpr-get-started-form-panel--quote),
.tpr-get-started-flow:not(.tpr-get-started-flow--contact-revealed) .tpr-get-started-form-shell:has(> .tpr-get-started-form-panel--contact) {
display: none !important;
}
/*
* Inline “Get started” section (any page): add class tpr-get-started-flow on a Group (or wrapper) in the editor
* around the CTA + quote/contact forms. Same hide/reveal behaviour as the modal; reveal via CTA submit or ?action= / ?input_5=.
*/
.tpr-get-started-flow:not(.tpr-get-started-flow--quote-revealed) .tpr-get-started-form-panel--quote #gform_wrapper_2,
.tpr-get-started-flow:not(.tpr-get-started-flow--quote-revealed) .tpr-get-started-form-panel--quote form#gform_2,
.tpr-get-started-flow:not(.tpr-get-started-flow--quote-revealed) .tpr-get-started-form-panel--quote .gform_wrapper.gform-theme--framework[data-form-id="2"] {
display: none !important;
}
.tpr-get-started-flow:not(.tpr-get-started-flow--contact-revealed) .tpr-contact-form-toggle,
.tpr-get-started-flow:not(.tpr-get-started-flow--contact-revealed) .tpr-get-in-touch-form,
.tpr-get-started-flow:not(.tpr-get-started-flow--contact-revealed) .tpr-get-started-form-panel--contact #gform_wrapper_5,
.tpr-get-started-flow:not(.tpr-get-started-flow--contact-revealed) .tpr-get-started-form-panel--contact form#gform_5,
.tpr-get-started-flow:not(.tpr-get-started-flow--contact-revealed) #gform_wrapper_5,
.tpr-get-started-flow:not(.tpr-get-started-flow--contact-revealed) form#gform_5,
.tpr-get-started-flow:not(.tpr-get-started-flow--contact-revealed) .gform_wrapper.gform-theme--framework[data-form-id="5"] {
display: none !important;
}
.tpr-get-started-flow:not(.tpr-get-started-flow--quote-revealed) .tpr-get-started-form-panel--quote,
.tpr-get-started-flow:not(.tpr-get-started-flow--contact-revealed) .tpr-get-started-form-panel--contact,
.tpr-get-started-flow:not(.tpr-get-started-flow--quote-revealed):not(.tpr-get-started-flow--contact-revealed)
.tpr-get-started-form-panel:not(.tpr-get-started-form-panel--quote):not(.tpr-get-started-form-panel--contact) {
display: none !important;
}
/*
* Modal clones keep .tpr-get-started-flow on #tpr-get-started; the rules above load after modal-only rules
* and can hide quote/contact even when #tpr-get-started-modal has --*-revealed. JS mirrors classes onto
* #tpr-get-started; these selectors are a fallback if that lags (Chosen/GF init order).
*/
#tpr-get-started-modal.tpr-get-started-modal--quote-revealed
#tpr-get-started.tpr-get-started-flow
.tpr-get-started-form-shell:has(> .tpr-get-started-form-panel--quote),
#tpr-get-started-modal.tpr-get-started-modal--quote-revealed
#tpr-get-started.tpr-get-started-flow
.tpr-get-started-form-panel--quote,
#tpr-get-started-modal.tpr-get-started-modal--quote-revealed
#tpr-get-started.tpr-get-started-flow
.tpr-get-started-form-panel--quote
#gform_wrapper_2,
#tpr-get-started-modal.tpr-get-started-modal--quote-revealed
#tpr-get-started.tpr-get-started-flow
.tpr-get-started-form-panel--quote
form#gform_2,
#tpr-get-started-modal.tpr-get-started-modal--quote-revealed
#tpr-get-started.tpr-get-started-flow
.tpr-get-started-form-panel--quote
.gform_wrapper.gform-theme--framework[data-form-id="2"] {
display: block !important;
}
#tpr-get-started-modal.tpr-get-started-modal--contact-revealed
#tpr-get-started.tpr-get-started-flow
.tpr-get-started-form-shell:has(> .tpr-get-started-form-panel--contact),
#tpr-get-started-modal.tpr-get-started-modal--contact-revealed
#tpr-get-started.tpr-get-started-flow
.tpr-get-started-form-panel--contact,
#tpr-get-started-modal.tpr-get-started-modal--contact-revealed
#tpr-get-started.tpr-get-started-flow
.tpr-contact-form-toggle,
#tpr-get-started-modal.tpr-get-started-modal--contact-revealed
#tpr-get-started.tpr-get-started-flow
.tpr-get-in-touch-form,
#tpr-get-started-modal.tpr-get-started-modal--contact-revealed
#tpr-get-started.tpr-get-started-flow
.tpr-get-started-form-panel--contact
#gform_wrapper_5,
#tpr-get-started-modal.tpr-get-started-modal--contact-revealed
#tpr-get-started.tpr-get-started-flow
.tpr-get-started-form-panel--contact
form#gform_5,
#tpr-get-started-modal.tpr-get-started-modal--contact-revealed
#tpr-get-started.tpr-get-started-flow
#gform_wrapper_5,
#tpr-get-started-modal.tpr-get-started-modal--contact-revealed
#tpr-get-started.tpr-get-started-flow
form#gform_5,
#tpr-get-started-modal.tpr-get-started-modal--contact-revealed
#tpr-get-started.tpr-get-started-flow
.gform_wrapper.gform-theme--framework[data-form-id="5"] {
display: block !important;
}
/* White card around GF 2 (quote) / GF 5 (get in touch): ~5% inset on all sides (width 90% + margin 5% auto). Same in modal and inline #tpr-get-started flow. */
.tpr-get-started-modal .tpr-get-started-form-shell {
box-sizing: border-box;
width: 90%;
max-width: min(64rem, 90%);
position: relative;
left: auto;
transform: none;
margin: 5% auto;
padding: 5% !important;
background: #fff;
border-radius: 1.25rem;
box-shadow: none;
color: #0f2902;
overflow: hidden;
}
.tpr-get-started-flow .tpr-get-started-form-shell {
box-sizing: border-box;
width: 90%;
max-width: 90%;
margin: 5% auto;
padding: 5% !important;
background: #fff;
border-radius: 1.25rem;
color: #0f2902;
}
/* Responsive: parent container already caps at 90% content width, so let the shell fill it instead of double-insetting. */
@media (max-width: 767px) {
.tpr-get-started-modal .tpr-get-started-form-shell,
.tpr-get-started-flow .tpr-get-started-form-shell {
width: 100%;
max-width: 100%;
margin-inline: 0;
}
}
/* Quote / contact GF wrappers: no outer padding (theme shell + GF Orbital both add inset) */
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2.gform_wrapper,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5.gform_wrapper,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2.gform_wrapper,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5.gform_wrapper {
max-width: 56rem;
margin-left: auto !important;
margin-right: auto !important;
margin-block: 0 !important;
padding: 0 !important;
}
.tpr-get-started-flow .tpr-get-started-form-shell #gform_2,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_5,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_2,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_5 {
padding: 0 !important;
margin: 0 !important;
}
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 .gform_heading,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 .gform_heading,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gform_heading,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gform_heading {
margin-top: 0 !important;
margin-bottom: 0.75rem;
padding-top: 0 !important;
padding-block-start: 0 !important;
padding-inline: 0 !important;
}
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 .gform_title,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 .gform_title,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gform_title,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gform_title {
margin-top: 0 !important;
margin-block-start: 0 !important;
padding-top: 0 !important;
padding-block-start: 0 !important;
}
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gform_description,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gform_description {
margin-block-start: 0 !important;
}
/* Same as pill CTA (GF 3): hide “* indicates required” in modal forms */
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gform_required_legend,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gform_required_legend {
display: none !important;
}
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 .gform_body,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 .gform-body,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 .gform_body,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 .gform-body,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gform_body,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gform-body,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gform_body,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gform-body {
margin-block-start: 0 !important;
padding: 0 !important;
}
/* Stacked field rows in modal + inline flow — GF 2 & 5 only (CTA #gform_wrapper_3 is outside this shell) */
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gform_fields,
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gform_fields,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 .gform_fields,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 .gform_fields {
gap: 20px 1rem !important;
row-gap: 20px !important;
column-gap: 1rem !important;
padding: 0 !important;
margin: 0 !important;
}
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gfield,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gfield {
flex-shrink: 1 !important;
min-width: 0 !important;
}
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .ginput_container,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .ginput_container_select .chosen-container-single,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .ginput_container,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .ginput_container_select .chosen-container-single {
min-width: 0;
}
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .ginput_container select,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .ginput_container select,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 .ginput_container select,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 .ginput_container select {
overflow: visible;
line-height: 1.45 !important;
}
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .chosen-container-single .chosen-single span,
.tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .chosen-container-single .chosen-single span,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 .chosen-container-single .chosen-single span,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 .chosen-container-single .chosen-single span {
overflow: hidden !important;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
min-width: 0;
line-height: 1.45 !important;
max-height: none !important;
}
/*
* Modal: Gravity Forms Orbital uses CSS variables on .gform-theme--framework. Theme + custom.css load in
;
* modal forms 2 & 5 are enqueued via tpr_enqueue_gf_assets_for_get_started_modal_forms() so variables apply.
*/
#tpr-get-started-modal #gform_wrapper_2.gform_wrapper.gform-theme--framework,
#tpr-get-started-modal #gform_wrapper_5.gform_wrapper.gform-theme--framework,
.tpr-get-started-flow #gform_wrapper_2.gform_wrapper.gform-theme--framework,
.tpr-get-started-flow #gform_wrapper_5.gform_wrapper.gform-theme--framework {
--gf-ctrl-bg-color: #E7EAE6;
--gf-ctrl-border-color: transparent;
--gf-ctrl-border-color-focus: #0f2902;
--gf-ctrl-border-width: 1px;
--gf-ctrl-radius: 50px;
--gf-ctrl-padding-x: 1.1rem;
--gf-ctrl-padding-y: 0.65rem;
--gf-color-in-ctrl-contrast: #0f2902;
--gf-ctrl-textarea-radius: 1rem;
}
/*
* Modal + inline flow: backup field rules (shell optional; attribute selectors miss inputs with no type="").
*/
html body #tpr-get-started-modal #gform_wrapper_2 .gfield .ginput_container:not(.ginput_container_select):not(.ginput_container_fileupload):not(.ginput_container_multiselect) input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="image"]),
html body #tpr-get-started-modal #gform_wrapper_5 .gfield .ginput_container:not(.ginput_container_select):not(.ginput_container_fileupload):not(.ginput_container_multiselect) input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="image"]),
html body #tpr-get-started-modal #gform_wrapper_2 .gfield .ginput_container_date input,
html body #tpr-get-started-modal #gform_wrapper_5 .gfield .ginput_container_date input,
html body #tpr-get-started-modal #gform_wrapper_2 textarea,
html body #tpr-get-started-modal #gform_wrapper_5 textarea,
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 input[type="text"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 input[type="email"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 input[type="tel"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 input[type="url"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 input[type="number"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 input[type="date"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 input[type="password"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 textarea,
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 input[type="text"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 input[type="email"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 input[type="tel"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 input[type="url"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 input[type="number"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 input[type="date"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 input[type="password"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 textarea,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 input[type="text"],
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 input[type="email"],
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 input[type="tel"],
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 input[type="url"],
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 input[type="number"],
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 input[type="date"],
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 input[type="password"],
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 textarea,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 input[type="text"],
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 input[type="email"],
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 input[type="tel"],
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 input[type="url"],
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 input[type="number"],
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 input[type="date"],
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 input[type="password"],
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0.65rem 1.1rem !important;
min-height: 2.75rem;
border: 1px solid transparent !important;
border-radius: 50px !important;
background-color: #E7EAE6 !important;
font-family: inherit;
font-size: 1rem !important;
line-height: 1.4 !important;
color: #0f2902 !important;
box-shadow: none !important;
-webkit-appearance: none;
appearance: none;
}
/* Textareas: keep softer rounding (pill radius looks wrong on multi-line) */
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 textarea,
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 textarea,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 textarea,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 textarea,
html body #tpr-get-started-modal #gform_wrapper_2 textarea,
html body #tpr-get-started-modal #gform_wrapper_5 textarea {
border-radius: 1rem !important;
}
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 textarea,
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 textarea,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 textarea,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 textarea {
min-height: 7rem;
resize: vertical;
}
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .ginput_container_date:not(.gform-grid-col) > input,
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .ginput_container_date:not(.gform-grid-col) > input,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 .ginput_container_date:not(.gform-grid-col) > input,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 .ginput_container_date:not(.gform-grid-col) > input {
min-height: 2.75rem;
--gf-local-width: 100% !important;
width: 100% !important;
max-width: 100% !important;
}
/*
* Date fields: Orbital often sizes the text datepicker to placeholder width (“dd”); dropdown-date segments use
* .gform-grid-col and were excluded from the full-width rules above — normalize layout in modal + inline flow.
*/
#tpr-get-started-modal .tpr-get-started-modal__page-content #gform_wrapper_2 .ginput_container_date,
.tpr-get-started-flow #gform_wrapper_2 .ginput_container_date {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
#tpr-get-started-modal .tpr-get-started-modal__page-content #gform_wrapper_2 .ginput_container_date:not(.gform-grid-col),
.tpr-get-started-flow #gform_wrapper_2 .ginput_container_date:not(.gform-grid-col) {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
#tpr-get-started-modal .tpr-get-started-modal__page-content #gform_wrapper_2 input.gform-datepicker,
#tpr-get-started-modal .tpr-get-started-modal__page-content #gform_wrapper_2 .ginput_container_date input[type="text"],
.tpr-get-started-flow #gform_wrapper_2 input.gform-datepicker,
.tpr-get-started-flow #gform_wrapper_2 .ginput_container_date input[type="text"] {
min-width: min(100%, 18rem) !important;
width: 100% !important;
max-width: 100% !important;
--gf-local-width: 100% !important;
flex: 1 1 auto !important;
}
#tpr-get-started-modal .tpr-get-started-modal__page-content #gform_wrapper_2 .ginput_container_date .gform-grid-col,
.tpr-get-started-flow #gform_wrapper_2 .ginput_container_date .gform-grid-col {
flex: 1 1 5.5rem !important;
min-width: 4.5rem !important;
max-width: 100% !important;
box-sizing: border-box;
}
#tpr-get-started-modal .tpr-get-started-modal__page-content #gform_wrapper_2 .ginput_container_date .gform-grid-col select,
.tpr-get-started-flow #gform_wrapper_2 .ginput_container_date .gform-grid-col select {
width: 100% !important;
max-width: 100% !important;
min-height: 2.75rem;
box-sizing: border-box;
}
/*
* Datepicker (field 12 etc.): GF Orbital theme + --gf-local-width often shrink the text input to ~2ch (“dd”).
* html/body + data-form-index beats late-loaded theme utilities in practice.
*/
html body #tpr-get-started-modal #gform_wrapper_2[data-form-index="0"] .gfield--input-type-datepicker .ginput_container_date,
html body .tpr-get-started-flow #gform_wrapper_2[data-form-index="0"] .gfield--input-type-datepicker .ginput_container_date {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0.5rem !important;
box-sizing: border-box !important;
}
html body #tpr-get-started-modal #gform_wrapper_2[data-form-index="0"] .gfield--input-type-datepicker .ginput_container_date > input.gform-datepicker,
html body #tpr-get-started-modal #gform_wrapper_2[data-form-index="0"] .gfield--input-type-datepicker .ginput_container_date > input.datepicker,
html body .tpr-get-started-flow #gform_wrapper_2[data-form-index="0"] .gfield--input-type-datepicker .ginput_container_date > input.gform-datepicker,
html body .tpr-get-started-flow #gform_wrapper_2[data-form-index="0"] .gfield--input-type-datepicker .ginput_container_date > input.datepicker {
width: 100% !important;
max-width: 100% !important;
min-width: min(100%, 22rem) !important;
min-height: 2.75rem !important;
--gf-local-width: 100% !important;
flex: 1 1 auto !important;
box-sizing: border-box !important;
}
html body #tpr-get-started-modal #gform_wrapper_2:not([data-form-index]) .gfield--input-type-datepicker .ginput_container_date > input.gform-datepicker,
html body .tpr-get-started-flow #gform_wrapper_2:not([data-form-index]) .gfield--input-type-datepicker .ginput_container_date > input.gform-datepicker {
width: 100% !important;
max-width: 100% !important;
min-width: min(100%, 22rem) !important;
min-height: 2.75rem !important;
--gf-local-width: 100% !important;
box-sizing: border-box !important;
}
/*
* “How soon…” (field 12): GF Orbital uses inline-size: var(--gf-local-width) (often auto on datepickers).
* width:100% alone does not override logical inline-size — set both + stretch the grid cell.
*/
/*
* Override Postcode (7/12) + Date (5/12) → 6+6 so the row matches Name + Phone (half + half).
* Desktop/tablet only — below 641px the date field would truncate its dd/mm/yyyy placeholder in half a column.
*/
@media (min-width: 641px) {
html body #tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 #field_2_12,
html body .tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 #field_2_12,
html body #tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 #field_5_12,
html body .tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 #field_5_12,
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 #field_2_12,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 #field_2_12,
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 #field_5_12,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 #field_5_12 {
grid-column: span 6 !important;
--gf-local-width: 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
inline-size: 100% !important;
max-inline-size: 100% !important;
min-inline-size: 0 !important;
justify-self: stretch !important;
}
/* Postcode field directly before field 12: widen from 7/12 to 6/12 so the pair totals 12. */
html body #tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gfield--width-seven-twelfths:has(+ #field_2_12),
html body .tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 .gfield--width-seven-twelfths:has(+ #field_2_12),
html body #tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gfield--width-seven-twelfths:has(+ #field_5_12),
html body .tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 .gfield--width-seven-twelfths:has(+ #field_5_12) {
grid-column: span 6 !important;
}
}
/* Below 641px: stack Postcode + Date full-width so the date placeholder "dd/mm/yyyy" doesn't clip. */
@media (max-width: 640px) {
html body #tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 #field_2_12,
html body .tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 #field_2_12,
html body #tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 #field_5_12,
html body .tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 #field_5_12,
html body #tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 #field_2_6,
html body .tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 #field_2_6,
html body #tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 #field_5_6,
html body .tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 #field_5_6 {
grid-column: span 12 !important;
}
}
/*
* Hide the native up/down spinner on number inputs in forms 2 & 5 (Business Postcode).
* These only serve as field input, not stepping, so the chevrons are visual noise.
*/
#gform_wrapper_2 input[type="number"]::-webkit-outer-spin-button,
#gform_wrapper_2 input[type="number"]::-webkit-inner-spin-button,
#gform_wrapper_5 input[type="number"]::-webkit-outer-spin-button,
#gform_wrapper_5 input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
display: none;
margin: 0;
}
#gform_wrapper_2 input[type="number"],
#gform_wrapper_5 input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
html body #tpr-get-started-modal .tpr-get-started-form-shell #field_2_12 .gform-theme-field-control,
html body .tpr-get-started-flow .tpr-get-started-form-shell #field_2_12 .gform-theme-field-control,
html body #tpr-get-started-modal .tpr-get-started-form-shell #field_5_12 .gform-theme-field-control,
html body .tpr-get-started-flow .tpr-get-started-form-shell #field_5_12 .gform-theme-field-control,
#tpr-get-started-modal .tpr-get-started-form-shell #field_2_12 .gform-theme-field-control,
.tpr-get-started-flow .tpr-get-started-form-shell #field_2_12 .gform-theme-field-control,
#tpr-get-started-modal .tpr-get-started-form-shell #field_5_12 .gform-theme-field-control,
.tpr-get-started-flow .tpr-get-started-form-shell #field_5_12 .gform-theme-field-control {
--gf-local-width: 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
inline-size: 100% !important;
max-inline-size: 100% !important;
min-inline-size: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
#tpr-get-started-modal .tpr-get-started-form-shell #field_2_12 .ginput_container,
.tpr-get-started-flow .tpr-get-started-form-shell #field_2_12 .ginput_container,
#tpr-get-started-modal .tpr-get-started-form-shell #field_5_12 .ginput_container,
.tpr-get-started-flow .tpr-get-started-form-shell #field_5_12 .ginput_container {
--gf-local-width: 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
inline-size: 100% !important;
max-inline-size: 100% !important;
min-inline-size: 0 !important;
}
html body #tpr-get-started-modal .tpr-get-started-form-shell #field_2_12 .ginput_container_date:not(.gform-grid-col),
html body .tpr-get-started-flow .tpr-get-started-form-shell #field_2_12 .ginput_container_date:not(.gform-grid-col),
html body #tpr-get-started-modal .tpr-get-started-form-shell #field_5_12 .ginput_container_date:not(.gform-grid-col),
html body .tpr-get-started-flow .tpr-get-started-form-shell #field_5_12 .ginput_container_date:not(.gform-grid-col),
#tpr-get-started-modal .tpr-get-started-form-shell #field_2_12 .ginput_container_date:not(.gform-grid-col),
.tpr-get-started-flow .tpr-get-started-form-shell #field_2_12 .ginput_container_date:not(.gform-grid-col),
#tpr-get-started-modal .tpr-get-started-form-shell #field_5_12 .ginput_container_date:not(.gform-grid-col),
.tpr-get-started-flow .tpr-get-started-form-shell #field_5_12 .ginput_container_date:not(.gform-grid-col) {
--gf-local-width: 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
inline-size: 100% !important;
max-inline-size: 100% !important;
min-inline-size: 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 0.5rem !important;
min-height: 2.75rem !important;
padding: 0 1.1rem !important;
margin: 0 !important;
background-color: #e7eae6 !important;
border: 1px solid transparent !important;
border-radius: 50px !important;
}
#tpr-get-started-modal .tpr-get-started-form-shell #field_2_12 .ginput_container_date:focus-within,
.tpr-get-started-flow .tpr-get-started-form-shell #field_2_12 .ginput_container_date:focus-within,
#tpr-get-started-modal .tpr-get-started-form-shell #field_5_12 .ginput_container_date:focus-within,
.tpr-get-started-flow .tpr-get-started-form-shell #field_5_12 .ginput_container_date:focus-within {
border-color: #0f2902 !important;
border-width: 2px !important;
}
html body #tpr-get-started-modal .tpr-get-started-form-shell #field_2_12 .ginput_container_date:not(.gform-grid-col) > input,
html body #tpr-get-started-modal .tpr-get-started-form-shell #field_2_12 .ginput_container_date:not(.gform-grid-col) input.gform-datepicker,
html body #tpr-get-started-modal .tpr-get-started-form-shell #field_2_12 .ginput_container_date:not(.gform-grid-col) input.datepicker,
html body .tpr-get-started-flow .tpr-get-started-form-shell #field_2_12 .ginput_container_date:not(.gform-grid-col) > input,
html body .tpr-get-started-flow .tpr-get-started-form-shell #field_2_12 .ginput_container_date:not(.gform-grid-col) input.gform-datepicker,
html body .tpr-get-started-flow .tpr-get-started-form-shell #field_2_12 .ginput_container_date:not(.gform-grid-col) input.datepicker,
html body #tpr-get-started-modal .tpr-get-started-form-shell #field_5_12 .ginput_container_date:not(.gform-grid-col) > input,
html body #tpr-get-started-modal .tpr-get-started-form-shell #field_5_12 .ginput_container_date:not(.gform-grid-col) input.gform-datepicker,
html body .tpr-get-started-flow .tpr-get-started-form-shell #field_5_12 .ginput_container_date:not(.gform-grid-col) > input,
html body .tpr-get-started-flow .tpr-get-started-form-shell #field_5_12 .ginput_container_date:not(.gform-grid-col) input.gform-datepicker,
#tpr-get-started-modal .tpr-get-started-form-shell #field_2_12 .ginput_container_date:not(.gform-grid-col) > input,
#tpr-get-started-modal .tpr-get-started-form-shell #field_2_12 .ginput_container_date:not(.gform-grid-col) input.gform-datepicker,
#tpr-get-started-modal .tpr-get-started-form-shell #field_2_12 .ginput_container_date:not(.gform-grid-col) input.datepicker,
.tpr-get-started-flow .tpr-get-started-form-shell #field_2_12 .ginput_container_date:not(.gform-grid-col) > input,
.tpr-get-started-flow .tpr-get-started-form-shell #field_2_12 .ginput_container_date:not(.gform-grid-col) input.gform-datepicker,
.tpr-get-started-flow .tpr-get-started-form-shell #field_2_12 .ginput_container_date:not(.gform-grid-col) input.datepicker,
#tpr-get-started-modal .tpr-get-started-form-shell #field_5_12 .ginput_container_date:not(.gform-grid-col) > input,
#tpr-get-started-modal .tpr-get-started-form-shell #field_5_12 .ginput_container_date:not(.gform-grid-col) input.gform-datepicker,
.tpr-get-started-flow .tpr-get-started-form-shell #field_5_12 .ginput_container_date:not(.gform-grid-col) > input,
.tpr-get-started-flow .tpr-get-started-form-shell #field_5_12 .ginput_container_date:not(.gform-grid-col) input.gform-datepicker {
flex: 1 1 auto !important;
min-width: 0 !important;
min-inline-size: 0 !important;
width: 100% !important;
max-width: 100% !important;
inline-size: 100% !important;
max-inline-size: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
--gf-local-width: 100% !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #0f2902 !important;
font-size: 1rem !important;
line-height: 1.4 !important;
-webkit-appearance: none !important;
appearance: none !important;
}
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gfield--type-select .ginput_container select,
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gfield--type-select .ginput_container select,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 .gfield--type-select .ginput_container select,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 .gfield--type-select .ginput_container select {
width: 100% !important;
max-width: 100%;
box-sizing: border-box;
padding: 0.7rem 2rem 0.7rem 1.1rem !important;
min-height: 2.75rem;
line-height: 1.45 !important;
border: 1px solid transparent !important;
border-radius: 50px !important;
background-color: #E7EAE6 !important;
font-family: inherit;
font-size: 1rem !important;
color: #0f2902 !important;
box-shadow: none !important;
-webkit-appearance: none;
appearance: none;
overflow: visible;
}
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .ginput_container_select .chosen-container-single .chosen-single,
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .ginput_container_select .chosen-container-single .chosen-single,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 .ginput_container_select .chosen-container-single .chosen-single,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 .ginput_container_select .chosen-container-single .chosen-single {
display: flex !important;
align-items: center !important;
min-height: 2.75rem !important;
line-height: 1.45 !important;
padding: 0.65rem 2rem 0.65rem 1.1rem !important;
border: 1px solid transparent !important;
border-radius: 50px !important;
background: #E7EAE6 !important;
background-image: none !important;
box-shadow: none !important;
overflow: visible !important;
}
/* Validation messages: smaller font */
#tpr-get-started-modal .gform_wrapper .validation_message,
#tpr-get-started-modal .gform_wrapper .gfield_validation_message,
.tpr-get-started-flow .gform_wrapper .validation_message,
.tpr-get-started-flow .gform_wrapper .gfield_validation_message {
font-size: 12px !important;
}
/* Top-level submission error: match field validation style and push to bottom */
#tpr-get-started-modal .gform_wrapper.gform_validation_error,
.tpr-get-started-flow .gform_wrapper.gform_validation_error {
display: flex !important;
flex-direction: column !important;
}
#tpr-get-started-modal .gform_wrapper [id$="_validation_container"],
.tpr-get-started-flow .gform_wrapper [id$="_validation_container"] {
order: 99 !important;
margin: 0.5rem 0 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
box-shadow: none !important;
}
#tpr-get-started-modal .gform_wrapper .gform_submission_error,
.tpr-get-started-flow .gform_wrapper .gform_submission_error {
font-size: 12px !important;
font-weight: 400 !important;
color: #c02b0a !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
border: none !important;
background: none !important;
}
/* Field layout: preserve GF editor column widths (half-width fields side-by-side) */
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gform_fields,
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gform_fields,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_2 .gform_fields,
.tpr-get-started-flow .tpr-get-started-form-shell #gform_wrapper_5 .gform_fields {
display: grid !important;
grid-template-columns: repeat(12, 1fr) !important;
}
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-full,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-full {
grid-column: span 12 !important;
}
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-half,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-half {
grid-column: span 6 !important;
}
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-third,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-third {
grid-column: span 4 !important;
}
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-quarter,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-quarter {
grid-column: span 3 !important;
}
/*
* GF get_css_grid_class() also emits five/seven-twelfths, two-thirds, etc. Without span rules those fields
* default to a single 1fr track (~60px beside a 7/12 postcode + 5/12 date row).
*/
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-eleven-twelfths,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-eleven-twelfths {
grid-column: span 11 !important;
}
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-five-sixths,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-five-sixths {
grid-column: span 10 !important;
}
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-three-quarter,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-three-quarter {
grid-column: span 9 !important;
}
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-two-thirds,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-two-thirds {
grid-column: span 8 !important;
}
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-seven-twelfths,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-seven-twelfths {
grid-column: span 7 !important;
}
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-five-twelfths,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-five-twelfths {
grid-column: span 5 !important;
}
@media (max-width: 600px) {
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-half,
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-third,
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-quarter,
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-eleven-twelfths,
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-five-sixths,
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-three-quarter,
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-two-thirds,
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-seven-twelfths,
#tpr-get-started-modal .tpr-get-started-form-shell .gfield--width-five-twelfths,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-half,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-third,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-quarter,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-eleven-twelfths,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-five-sixths,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-three-quarter,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-two-thirds,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-seven-twelfths,
.tpr-get-started-flow .tpr-get-started-form-shell .gfield--width-five-twelfths {
grid-column: span 12 !important;
}
}
/* Modal submit: explicit background-size so arrow is not squished (UAGB/GF overrides can stretch) */
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gform_footer input[type="submit"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gform_footer button[type="submit"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gform_footer button.gform_button,
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gfield--type-submit input[type="submit"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gfield--type-submit button[type="submit"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_2 .gfield--type-submit button.gform_button,
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gform_footer input[type="submit"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gform_footer button[type="submit"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gform_footer button.gform_button,
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gfield--type-submit input[type="submit"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gfield--type-submit button[type="submit"],
#tpr-get-started-modal .tpr-get-started-form-shell #gform_wrapper_5 .gfield--type-submit button.gform_button {
background-size: 40px 32px !important;
}
/*
* GF / jQuery UI: #ui-datepicker-div is appended to body. Keep above modal chrome when Get Started is open.
* Do not force position: fixed — the dialog scrolls inside .tpr-get-started-modal__content; fixed pins the
* calendar to the viewport while the date field moves (see get-started-modal.js: close picker on scroll).
*
* Hidden default: jQuery UI's base stylesheet is not enqueued on the frontend, so without this the
* empty #ui-datepicker-div renders as a normal block at the end of , pushing document height
* past the footer and creating a white strip below the copyright bar on tablet/mobile. jQuery UI's
* Datepicker JS uses `.show()` (inline `display: block`) which still overrides this rule.
*/
#ui-datepicker-div {
display: none;
}
/* Same stacking as full-page /get-started/: calendar portals to body with position:fixed (see get-started-modal.js). */
body.tpr-get-started-modal-open #ui-datepicker-div.ui-datepicker {
z-index: 1001025 !important;
position: fixed !important;
}
/*
* Minimal “unstyled calendar” fallback only when GF theme classes are missing (RUCSS, etc.).
* When .gform-theme--framework / .gravity-theme / .gform-legacy-datepicker are present, GF Orbital matches /get-started/.
*/
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) {
box-sizing: border-box;
width: auto;
min-width: 16rem;
max-width: min(22rem, calc(100vw - 2rem));
font-size: 0.875rem;
line-height: 1.35;
color: #0f2902 !important;
background: #ffffff !important;
border: 1px solid rgba(15, 41, 2, 0.18) !important;
border-radius: 12px !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14) !important;
padding: 0.5rem 0.65rem 0.65rem !important;
}
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) .ui-datepicker-header {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.35rem 0.5rem;
padding: 0 0 0.45rem;
margin: 0 0 0.35rem;
border-bottom: 1px solid rgba(15, 41, 2, 0.12);
}
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) .ui-datepicker-prev,
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) .ui-datepicker-next {
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
cursor: pointer;
}
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) .ui-datepicker-prev {
grid-column: 1;
grid-row: 1;
}
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) .ui-datepicker-next {
grid-column: 3;
grid-row: 1;
}
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) .ui-datepicker-title {
grid-column: 2;
grid-row: 1;
justify-self: center;
margin: 0 !important;
line-height: 1.3 !important;
text-align: center;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.35rem;
}
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) select.ui-datepicker-month,
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) select.ui-datepicker-year {
margin: 0 0.1rem !important;
padding: 0.2rem 0.35rem !important;
border-radius: 6px !important;
border: 1px solid rgba(15, 41, 2, 0.25) !important;
background-color: #fff !important;
color: #0f2902 !important;
font-weight: 600 !important;
}
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) table {
width: 100%;
border-collapse: collapse;
margin: 0.15rem 0 0;
}
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) th {
font-weight: 700;
color: #0f2902;
padding: 0.35rem 0.1rem;
font-size: 0.8rem;
}
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) td {
padding: 0.12rem;
text-align: center;
border: none;
}
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) td a,
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) td span {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 2.1em;
min-height: 2.1em;
padding: 0.1rem;
border-radius: 6px;
text-decoration: none !important;
box-sizing: border-box;
}
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) td a {
color: #0f2902 !important;
background: rgba(15, 41, 2, 0.06) !important;
}
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) td a:hover,
#ui-datepicker-div.ui-datepicker:not(.gform-theme--framework):not(.gform-legacy-datepicker):not(.gravity-theme) td a:focus {
background: rgba(15, 41, 2, 0.12) !important;
}
/*
* Gravity Forms Orbital / framework datepicker (#ui-datepicker-div gets .gform-theme--framework in JS).
* Month/year: white fields. Today (unselected): white cell. Selected date: brand dark green #0F2902.
*/
.gform-theme--framework.ui-datepicker select.ui-datepicker-month,
.gform-theme--framework.ui-datepicker select.ui-datepicker-year,
#ui-datepicker-div.gform-theme--framework select.ui-datepicker-month,
#ui-datepicker-div.gform-theme--framework select.ui-datepicker-year {
background-color: #fff !important;
color: #0f2902 !important;
}
.gform-theme--framework.ui-datepicker table .ui-datepicker-today a,
.gform-theme--framework.ui-datepicker table .ui-datepicker-today span,
#ui-datepicker-div.gform-theme--framework table .ui-datepicker-today a,
#ui-datepicker-div.gform-theme--framework table .ui-datepicker-today span {
--gf-local-bg-color: #fff !important;
background-color: #fff !important;
color: #0f2902 !important;
}
.gform-theme--framework.ui-datepicker table .ui-datepicker-current-day a,
.gform-theme--framework.ui-datepicker table .ui-datepicker-current-day span,
#ui-datepicker-div.gform-theme--framework table .ui-datepicker-current-day a,
#ui-datepicker-div.gform-theme--framework table .ui-datepicker-current-day span {
--gf-local-bg-color: #0f2902 !important;
background-color: #0f2902 !important;
color: #fff !important;
}
.gform-theme--framework.ui-datepicker table .ui-datepicker-current-day a:hover,
.gform-theme--framework.ui-datepicker table .ui-datepicker-current-day a:focus,
#ui-datepicker-div.gform-theme--framework table .ui-datepicker-current-day a:hover,
#ui-datepicker-div.gform-theme--framework table .ui-datepicker-current-day a:focus {
--gf-local-bg-color: #0f2902 !important;
background-color: #0f2902 !important;
color: #fff !important;
}
/* Legacy GF datepicker (forms using legacy theme) */
.gform-legacy-datepicker.ui-datepicker:not(.gform-preview-datepicker) .ui-datepicker-header .ui-datepicker-month,
.gform-legacy-datepicker.ui-datepicker:not(.gform-preview-datepicker) .ui-datepicker-header .ui-datepicker-year {
background-color: #fff !important;
color: #0f2902 !important;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-calendar .ui-state-active {
background: #0f2902 !important;
background-image: none !important;
border-color: #0f2902 !important;
color: #fff !important;
}
/* ==========================================================================
No-JS fallbacks: page usable when JavaScript is disabled or fails
========================================================================== */
/* No-JS: hide accordion arrow icons site-wide (they point at chevrons that need JS) */
body.no-js .wp-block-uagb-image.tpr-Accordian-Arrow,
body.no-js .wp-block-uagb-image.tpr-Accordion-Arrow {
display: none !important;
}
body.no-js #benefits .benefits-content-container,
body.no-js #benefits-accordians .benefits-content-container {
max-height: none !important;
opacity: 1 !important;
}
/* Core accordion (benefits): load expanded by default, hide expand/close chevrons when no JS */
body.no-js #benefits .wp-block-accordion-heading__toggle-icon,
body.no-js #benefits-accordians .wp-block-accordion-heading__toggle-icon,
body.no-js .wp-block-accordion .wp-block-accordion-heading__toggle-icon {
display: none !important;
}
body.no-js #benefits .wp-block-accordion-panel[aria-hidden="true"],
body.no-js #benefits .wp-block-accordion-panel[inert],
body.no-js #benefits-accordians .wp-block-accordion-panel[aria-hidden="true"],
body.no-js #benefits-accordians .wp-block-accordion-panel[inert],
body.no-js .wp-block-accordion .wp-block-accordion-panel[aria-hidden="true"],
body.no-js .wp-block-accordion .wp-block-accordion-panel[inert] {
display: block !important;
margin-block-start: 1em;
}
/* Stats counter: show end value (UAGB counter animates via JS; without JS show static value) */
body.no-js .wp-block-uagb-counter .uagb-counter-block-number {
display: none !important;
}
body.no-js .wp-block-uagb-counter .tpr-counter-static-value {
display: inline !important;
}
.tpr-counter-static-value {
display: none;
}
/* Service tabs no-JS: hide tab buttons, keep tab content visible as-is */
body.no-js .uagb-tabs__wrap .uagb-tabs__panel,
body.no-js #solution-selector-tabs .uagb-tabs__wrap .uagb-tabs__panel {
display: none !important;
}
/* Show all tab body containers (content) */
body.no-js .uagb-tabs__wrap .uagb-tabs__body-container,
body.no-js .uagb-tabs__wrap [class*="uagb-inner-tab-"],
body.no-js #solution-selector-tabs .uagb-tabs__wrap .uagb-tabs__body-container,
body.no-js #solution-selector-tabs .uagb-tabs__wrap [class*="uagb-inner-tab-"] {
display: block !important;
}
/* Footer reveal: no-js fallback – disable clip-path, scroll normally */
body.no-js footer.wp-block-template-part {
clip-path: none;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
body.no-js footer .tpr-footer-reveal-text,
body.no-js footer .tpr-footer-reveal-text + .wp-block-uagb-container,
body.no-js footer .tpr-footer-reveal-text + * {
position: static !important;
}
body.no-js footer .tpr-footer-reveal-text + .wp-block-uagb-container,
body.no-js footer .tpr-footer-reveal-text + *,
body.no-js footer > *:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Pagination buttons (1, 2, Next): dark text when no JS (better contrast on lime bg) */
body.no-js .uagb-loop-pagination .wp-block-button__link,
body.no-js .uagb-loop-pagination .wp-block-button__link *,
body.no-js .uagb-loop-pagination .page-numbers,
body.no-js .uagb-loop-pagination .page-numbers *,
body.no-js .uagb-loop-pagination a,
body.no-js .uagb-loop-pagination a *,
body.no-js .uagb-loop-pagination .wp-block-query-pagination-next,
body.no-js .uagb-loop-pagination .wp-block-query-pagination-next *,
body.no-js .uagb-loop-pagination .wp-block-query-pagination-previous,
body.no-js .uagb-loop-pagination .wp-block-query-pagination-previous *,
body.no-js .wp-block-query-pagination .wp-block-button__link,
body.no-js .wp-block-query-pagination .wp-block-button__link *,
body.no-js .wp-block-query-pagination .page-numbers,
body.no-js .wp-block-query-pagination .page-numbers *,
body.no-js .wp-block-query-pagination a,
body.no-js .wp-block-query-pagination a *,
body.no-js .wp-block-query-pagination .wp-block-query-pagination-next,
body.no-js .wp-block-query-pagination .wp-block-query-pagination-next *,
body.no-js .wp-block-query-pagination .wp-block-query-pagination-previous,
body.no-js .wp-block-query-pagination .wp-block-query-pagination-previous *,
body.no-js .uagb-post-pagination-wrap .page-numbers,
body.no-js .uagb-post-pagination-wrap .page-numbers * {
color: #0F2902 !important;
}
/* Override inline styles and block editor color classes */
body.no-js .uagb-loop-pagination [style*="color"],
body.no-js .uagb-loop-pagination [class*="has-"][class*="-color"],
body.no-js .wp-block-query-pagination [style*="color"],
body.no-js .wp-block-query-pagination [class*="has-"][class*="-color"],
body.no-js .uagb-post-pagination-wrap [style*="color"],
body.no-js .uagb-post-pagination-wrap [class*="has-"][class*="-color"] {
color: #0F2902 !important;
}
/* Arrow icons: SVG fill and text-based arrows (» etc.) */
body.no-js .uagb-loop-pagination svg,
body.no-js .wp-block-query-pagination svg,
body.no-js .uagb-post-pagination-wrap svg {
fill: #0F2902 !important;
}
body.no-js .uagb-loop-pagination .wp-block-query-pagination-next-arrow,
body.no-js .uagb-loop-pagination .wp-block-query-pagination-previous-arrow,
body.no-js .wp-block-query-pagination .wp-block-query-pagination-next-arrow,
body.no-js .wp-block-query-pagination .wp-block-query-pagination-previous-arrow {
color: #0F2902 !important;
}
/* Yoast breadcrumbs: static positioning in video hero (margin nudge at end of file — grid cell is the block wrapper) */
.tpr-video-banner .yoast-breadcrumbs,
.tpr-video-text-container .yoast-breadcrumbs,
.tpr-video-banner .wp-block-yoast-seo-breadcrumbs,
.tpr-video-text-container .wp-block-yoast-seo-breadcrumbs {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
}
/*
* Video hero: UAGB “layout grid” + `grid-template-rows: minmax(1px,1fr)` / narrow `%` columns load after the theme
* and beat earlier grid-only overrides. On pages like indoor-plant-hire the copy block (e.g. uagb-block-fd12d56e)
* has **no** inner `.uagb-container-inner-blocks-wrap` — headings are direct children of that grid, so rules that
* only targeted `… > .uagb-layout-grid > .uagb-container-inner-blocks-wrap` never applied. Use flex column on the
* hero inner wrap and on the nested copy container so breadcrumbs + H1 stack full-width regardless of block id.
*/
html body .wp-block-uagb-container.tpr-video-text-container.uagb-layout-grid.uagb-is-root-container > .uagb-container-inner-blocks-wrap,
html body .wp-block-uagb-container.tpr-video-text-container.uagb-layout-grid.uagb-is-root-container > .uagb-container-inner-block {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
align-content: flex-start !important;
/* Do not override Spectra inner width: editor sets --inner-content-custom-width + max-width on this wrap */
width: 100% !important;
max-width: var(--inner-content-custom-width, min(100%, 90%)) !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
grid-template-columns: unset !important;
grid-template-rows: unset !important;
grid-auto-columns: unset !important;
grid-auto-rows: unset !important;
}
/* Nested Spectra “copy stack” container (direct child of inner wrap; grid lives on this element, not on a wrap) */
html body .wp-block-uagb-container.tpr-video-text-container > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container.uagb-layout-grid,
html body .wp-block-uagb-container.tpr-video-text-container > .uagb-container-inner-block > .wp-block-uagb-container.uagb-layout-grid {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
grid-template-columns: unset !important;
grid-template-rows: unset !important;
grid-auto-columns: unset !important;
grid-auto-rows: unset !important;
}
/* Tablet + mobile: tighten vertical rhythm between H1 / subhead / body copy in the hero “copy stack” (e.g. uagb-block-fd12d56e). */
@media (max-width: 1024px) {
html body .wp-block-uagb-container.tpr-video-text-container > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container.uagb-layout-grid,
html body .wp-block-uagb-container.tpr-video-text-container > .uagb-container-inner-block > .wp-block-uagb-container.uagb-layout-grid {
gap: 0.35rem !important;
row-gap: 0.35rem !important;
}
html body .wp-block-uagb-container.tpr-video-text-container > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container.uagb-layout-grid > .wp-block-uagb-advanced-heading,
html body .wp-block-uagb-container.tpr-video-text-container > .uagb-container-inner-block > .wp-block-uagb-container.uagb-layout-grid > .wp-block-uagb-advanced-heading {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
html body .wp-block-uagb-container.tpr-video-text-container .tpr-yoast-breadcrumb-shift {
margin-bottom: 0 !important;
}
}
html body .wp-block-uagb-container.tpr-video-text-container.uagb-layout-grid > .uagb-container-inner-blocks-wrap > .tpr-yoast-breadcrumb-shift,
html body .wp-block-uagb-container.tpr-video-text-container.uagb-layout-grid > .uagb-container-inner-block > .tpr-yoast-breadcrumb-shift,
html body .wp-block-uagb-container.tpr-video-text-container.uagb-layout-grid > .uagb-container-inner-blocks-wrap > .wp-block-yoast-seo-breadcrumbs,
html body .wp-block-uagb-container.tpr-video-text-container.uagb-layout-grid > .uagb-container-inner-block > .wp-block-yoast-seo-breadcrumbs {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
align-self: stretch !important;
}
/* Yoast breadcrumbs: white at 0.5 opacity, no underline */
.yoast-breadcrumbs,
.yoast-breadcrumbs a,
.wp-block-yoast-seo-breadcrumbs,
.wp-block-yoast-seo-breadcrumbs a {
color: rgba(255, 255, 255, 0.5) !important;
text-decoration: none !important;
}
.yoast-breadcrumbs a:hover,
.wp-block-yoast-seo-breadcrumbs a:hover {
color: rgba(255, 255, 255, 1) !important;
text-decoration: none !important;
}
/* Header dark mode: breadcrumbs use #3F5435 */
body.tpr-header-dark .yoast-breadcrumbs,
body.tpr-header-dark .yoast-breadcrumbs a,
body.tpr-header-dark .wp-block-yoast-seo-breadcrumbs,
body.tpr-header-dark .wp-block-yoast-seo-breadcrumbs a {
color: #3F5435 !important;
}
body.tpr-header-dark .yoast-breadcrumbs a:hover,
body.tpr-header-dark .wp-block-yoast-seo-breadcrumbs a:hover {
color: #3F5435 !important;
}
/* Single blog post: centre Yoast trail (see tpr_wrap_yoast_breadcrumb_block → .tpr-yoast-breadcrumb-shift) */
body.single-post .tpr-yoast-breadcrumb-shift,
body.single-post .wp-block-yoast-seo-breadcrumbs {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
box-sizing: border-box;
}
body.single-post .tpr-yoast-breadcrumb-shift .yoast-breadcrumbs,
body.single-post .wp-block-yoast-seo-breadcrumbs .yoast-breadcrumbs {
text-align: center;
}
/* Spectra row: let the breadcrumb cell span the row so flex centreing isn’t squeezed to the start column */
body.single-post .uagb-container-inner-blocks-wrap > .tpr-yoast-breadcrumb-shift,
body.single-post .uagb-container-inner-blocks-wrap > .wp-block-yoast-seo-breadcrumbs {
flex: 1 1 100%;
min-width: 0;
max-width: 100%;
}
/*
* Mobile (≤767px): UAGB flips the inner wrap to flex-direction: column +
* flex-wrap: wrap. The `flex: 1 1 100%` above then resolves to flex-basis:
* 100% of the parent's main-axis (height), so the breadcrumb cell stretches
* to fill the whole column and the pill/heading/description wrap into a
* second column off the right edge of the viewport. Reset the flex basis at
* this breakpoint so siblings stay in the same column.
*/
@media (max-width: 767px) {
body.single-post .uagb-container-inner-blocks-wrap > .tpr-yoast-breadcrumb-shift,
body.single-post .uagb-container-inner-blocks-wrap > .wp-block-yoast-seo-breadcrumbs {
flex: 0 0 auto;
}
}
/* Core group / column: same full-width cue when breadcrumbs are direct children */
body.single-post .wp-block-group__inner-container > .tpr-yoast-breadcrumb-shift,
body.single-post .wp-block-group__inner-container > .wp-block-yoast-seo-breadcrumbs,
body.single-post .wp-block-column > .tpr-yoast-breadcrumb-shift,
body.single-post .wp-block-column > .wp-block-yoast-seo-breadcrumbs {
width: 100% !important;
max-width: 100% !important;
}
/*
* FAQ singular (`faqs`): default left-aligned breadcrumbs + entry (see functions.php).
* Scoped with :not(.tpr-faq-centred-content) so opt-in filter + body class can restore centred layout.
*/
body.single-faqs:not(.tpr-faq-centred-content) .tpr-yoast-breadcrumb-shift,
body.single-faqs:not(.tpr-faq-centred-content) .wp-block-yoast-seo-breadcrumbs {
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left;
box-sizing: border-box;
}
body.single-faqs:not(.tpr-faq-centred-content) .tpr-yoast-breadcrumb-shift .yoast-breadcrumbs,
body.single-faqs:not(.tpr-faq-centred-content) .wp-block-yoast-seo-breadcrumbs .yoast-breadcrumbs {
text-align: left;
}
body.single-faqs:not(.tpr-faq-centred-content) .uagb-container-inner-blocks-wrap > .tpr-yoast-breadcrumb-shift,
body.single-faqs:not(.tpr-faq-centred-content) .uagb-container-inner-blocks-wrap > .wp-block-yoast-seo-breadcrumbs {
flex: 1 1 100%;
min-width: 0;
max-width: 100%;
}
/* Mobile column-wrap fix — see note on single-post equivalent above (≤767px). */
@media (max-width: 767px) {
body.single-faqs:not(.tpr-faq-centred-content) .uagb-container-inner-blocks-wrap > .tpr-yoast-breadcrumb-shift,
body.single-faqs:not(.tpr-faq-centred-content) .uagb-container-inner-blocks-wrap > .wp-block-yoast-seo-breadcrumbs {
flex: 0 0 auto;
}
}
/* Breathing room between answer text and footer on tablet + mobile */
@media (max-width: 1024px) {
body.single-faqs .wp-site-blocks > .wp-block-uagb-container.uagb-is-root-container {
padding-bottom: 5%;
}
}
body.single-faqs:not(.tpr-faq-centred-content) .wp-block-group__inner-container > .tpr-yoast-breadcrumb-shift,
body.single-faqs:not(.tpr-faq-centred-content) .wp-block-group__inner-container > .wp-block-yoast-seo-breadcrumbs,
body.single-faqs:not(.tpr-faq-centred-content) .wp-block-column > .tpr-yoast-breadcrumb-shift,
body.single-faqs:not(.tpr-faq-centred-content) .wp-block-column > .wp-block-yoast-seo-breadcrumbs {
width: 100% !important;
max-width: 100% !important;
}
body.single-faqs:not(.tpr-faq-centred-content) .wp-block-post-content,
body.single-faqs:not(.tpr-faq-centred-content) .entry-content,
body.single-faqs:not(.tpr-faq-centred-content) .wp-block-post-content .wp-block-uagb-advanced-heading,
body.single-faqs:not(.tpr-faq-centred-content) .entry-content .wp-block-uagb-advanced-heading,
body.single-faqs:not(.tpr-faq-centred-content) .wp-block-post-title {
text-align: left;
}
/* Opt-in: centred FAQ layout (add_filter( 'tpr_enable_faq_centred_content_body_class', '__return_true' )) */
body.tpr-faq-centred-content .tpr-yoast-breadcrumb-shift,
body.tpr-faq-centred-content .wp-block-yoast-seo-breadcrumbs {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
box-sizing: border-box;
}
body.tpr-faq-centred-content .tpr-yoast-breadcrumb-shift .yoast-breadcrumbs,
body.tpr-faq-centred-content .wp-block-yoast-seo-breadcrumbs .yoast-breadcrumbs {
text-align: center;
}
body.tpr-faq-centred-content .uagb-container-inner-blocks-wrap > .tpr-yoast-breadcrumb-shift,
body.tpr-faq-centred-content .uagb-container-inner-blocks-wrap > .wp-block-yoast-seo-breadcrumbs {
flex: 1 1 100%;
min-width: 0;
max-width: 100%;
}
/* Mobile column-wrap fix — see note on single-post equivalent above (≤767px). */
@media (max-width: 767px) {
body.tpr-faq-centred-content .uagb-container-inner-blocks-wrap > .tpr-yoast-breadcrumb-shift,
body.tpr-faq-centred-content .uagb-container-inner-blocks-wrap > .wp-block-yoast-seo-breadcrumbs {
flex: 0 0 auto;
}
}
body.tpr-faq-centred-content .wp-block-group__inner-container > .tpr-yoast-breadcrumb-shift,
body.tpr-faq-centred-content .wp-block-group__inner-container > .wp-block-yoast-seo-breadcrumbs,
body.tpr-faq-centred-content .wp-block-column > .tpr-yoast-breadcrumb-shift,
body.tpr-faq-centred-content .wp-block-column > .wp-block-yoast-seo-breadcrumbs {
width: 100% !important;
max-width: 100% !important;
}
body.tpr-faq-centred-content .wp-block-post-content,
body.tpr-faq-centred-content .entry-content {
text-align: center;
}
body.tpr-faq-centred-content .wp-block-post-content .wp-block-uagb-advanced-heading,
body.tpr-faq-centred-content .entry-content .wp-block-uagb-advanced-heading {
text-align: center;
}
body.tpr-faq-centred-content .wp-block-post-title {
text-align: center;
}
/* ==========================================================================
TPR Background Underlap – extend sage green container up behind stat boxes
========================================================================== */
#stat-boxes-v2 .wp-block-uagb-container.tpr-background-underlap {
margin-top: -230px;
padding-top: 230px;
position: relative;
z-index: 0;
}
/* Stat boxes sit on top of the underlapping background */
#stat-boxes-v2 > .wp-block-uagb-container:not(.tpr-background-underlap) {
position: relative;
z-index: 1;
}
/* Responsive: reduce underlap on tablet/mobile where the section above is shorter */
@media (max-width: 1024px) {
#stat-boxes-v2 .wp-block-uagb-container.tpr-background-underlap {
margin-top: -120px;
padding-top: 120px;
}
}
@media (max-width: 767px) {
#stat-boxes-v2 .wp-block-uagb-container.tpr-background-underlap {
margin-top: 0;
padding-top: 0;
}
}
/* ==========================================================================
TPR Process steps – number badge + white circle + connecting line (screenshot)
Editor (Spectra): outer row = Container with Grid + Additional CSS class tpr-process.
Each white circle wrapper = Additional CSS class tpr-process-image-container (required for
circle sizing, icon alignment, and step auto-class). Optional: tpr-process-number,
tpr-process-icon, tpr-process-step-last on last step.
UAGB Heading: set Separator to “None” if you see extra short rules under titles (or rely on
.uagb-separator rules below). Lime row connector is the grid ::before rule below (not a separate div).
========================================================================== */
/* Size tokens: line position uses circle size + margin so it stays centered on wide viewports */
.tpr-process:has(.tpr-process-image-container),
:is(.uagb-layout-grid:has(.tpr-process-image-container), .uagb-layout-grid.tpr-process) {
/* Equal-width columns: line spans (n−1)/n of row width between circle 1 right-edge and circle N left-edge. */
--tpr-process-step-count: 5;
--tpr-process-circle-size: 100px;
--tpr-process-number-badge: 36px;
--tpr-process-icon-img: 55px;
--tpr-process-line-y-offset: 18px;
/* Extra Y when circle center sits below inner-wrap top (wrapper padding / grid) */
--tpr-process-line-vertical-nudge: 0px;
/* Fine vertical shift for connector; smaller below 1600px so laptop line isn’t too low */
--tpr-process-line-y-extra: 10px;
/* Horizontal offset of the circle's left edge inside its column (matches .tpr-process-image-container margin-left). */
--tpr-process-circle-offset-left: 18px;
/* Spectra layout-grid column-gap (default set in editor = 20px). Used by the connector line calc. */
--tpr-process-column-gap: 20px;
/* Desktop grid: min height of row 1 so body copy starts on the same baseline in every column */
--tpr-process-column-copy-start-min: calc(18px + var(--tpr-process-circle-size, 100px) + 1.25rem);
/* Row 2: reserve ~2 lines for lime step titles so body copy (row 3) lines up when one title wraps */
--tpr-process-heading-cell-min: 4.25rem;
}
/*
* Number inside white circle: circle gets margin-left: 0 (see image-container rule), so the
* connector's horizontal offset collapses to 0 too. .tpr-process-grid is added server-side.
*/
.uagb-layout-grid:has(.tpr-process-image-container .tpr-process-number),
.tpr-process:has(.tpr-process-image-container .tpr-process-number) {
--tpr-process-line-y-offset: 0px;
--tpr-process-line-vertical-nudge: calc(var(--tpr-process-circle-size, 100px) * 0.48 + 14px);
--tpr-process-circle-offset-left: 0px;
}
@media (min-width: 1440px) {
.tpr-process:has(.tpr-process-image-container),
:is(.uagb-layout-grid:has(.tpr-process-image-container), .uagb-layout-grid.tpr-process) {
--tpr-process-circle-size: 128px;
--tpr-process-number-badge: 44px;
--tpr-process-icon-img: 72px;
--tpr-process-circle-offset-left: 22px;
--tpr-process-column-copy-start-min: calc(22px + var(--tpr-process-circle-size, 128px) + 1.25rem);
--tpr-process-heading-cell-min: 4.85rem;
}
.uagb-layout-grid:has(.tpr-process-image-container .tpr-process-number),
.tpr-process:has(.tpr-process-image-container .tpr-process-number) {
--tpr-process-circle-offset-left: 0px;
}
}
/* Connector vertical tuning at very wide viewports */
@media (min-width: 1600px) {
.tpr-process:has(.tpr-process-image-container),
:is(.uagb-layout-grid:has(.tpr-process-image-container), .uagb-layout-grid.tpr-process) {
--tpr-process-line-y-offset: 25px;
--tpr-process-line-y-extra: 10px;
}
.uagb-layout-grid:has(.tpr-process-image-container .tpr-process-number),
.tpr-process:has(.tpr-process-image-container .tpr-process-number) {
--tpr-process-line-y-offset: 25px;
}
}
.tpr-process-step {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* Small lime-green circle with step number – ensure perfect circle */
.tpr-process-number {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: var(--tpr-process-number-badge, 36px) !important;
height: var(--tpr-process-number-badge, 36px) !important;
min-width: var(--tpr-process-number-badge, 36px) !important;
min-height: var(--tpr-process-number-badge, 36px) !important;
max-width: var(--tpr-process-number-badge, 36px) !important;
max-height: var(--tpr-process-number-badge, 36px) !important;
aspect-ratio: 1 !important;
border-radius: 50% !important;
padding: 0 !important;
box-sizing: border-box !important;
background-color: #D2FC51 !important;
color: #0F2902 !important;
font-weight: 700;
font-size: 1.125rem;
line-height: 1;
position: absolute;
top: 12px;
left: -48px;
z-index: 2;
}
@media (min-width: 1440px) {
.tpr-process-number {
font-size: 1.3125rem;
top: 14px;
left: -58px;
}
}
/* Large white circle with icon */
/* Selector has to match Spectra's `.wp-block-uagb-container.uagb-layout-grid > .wp-block-uagb-container { width: unset !important }` specificity (4 classes + combinator) so the circle stays round when dropped into a layout-grid cell that would otherwise stretch it into an ellipse. */
/* Background color and border intentionally NOT set here — per-block editor attributes (`.uagb-block-*` block CSS) should flow through so each step can set its own colour and border in the editor. Only the shape (circle via border-radius: 50%) is enforced. */
.tpr-process-image-container,
.wp-block-uagb-container.uagb-layout-grid > .wp-block-uagb-container.tpr-process-image-container {
width: var(--tpr-process-circle-size, 100px) !important;
height: var(--tpr-process-circle-size, 100px) !important;
min-width: var(--tpr-process-circle-size, 100px) !important;
min-height: var(--tpr-process-circle-size, 100px) !important;
max-width: var(--tpr-process-circle-size, 100px) !important;
max-height: var(--tpr-process-circle-size, 100px) !important;
aspect-ratio: 1 !important;
flex: 0 0 auto !important;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-top: 18px;
margin-left: 18px;
overflow: visible;
}
@media (min-width: 1440px) {
.tpr-process-image-container {
margin-top: 22px;
margin-left: 22px;
}
}
/* When number is inside the image container, no horizontal margin needed */
.tpr-process-image-container:has(.tpr-process-number) {
margin-top: 0;
margin-left: 0;
}
/* Center icon/image within the white circle */
.tpr-process-image-container .wp-block-uagb-image,
.tpr-process-image-container .wp-block-uagb-image__figure,
.tpr-process-image-container figure {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
width: 100%;
height: 100%;
}
/* Icons centered in circle. (The old optical-shift translate pulled icons ~-30px Y which dragged
them into the top half of the circle — flex center already aligns them correctly.) */
.tpr-process-image-container:has(.tpr-process-icon) figure,
.tpr-process-image-container:has(.tpr-process-icon) .wp-block-uagb-image__figure {
line-height: 0 !important;
}
.tpr-process-image-container:has(.tpr-process-icon) img {
display: block !important;
}
.tpr-process-image-container img,
.tpr-process-image-container .tpr-process-icon img,
.tpr-process-icon,
.tpr-process-icon img {
object-fit: contain !important;
width: var(--tpr-process-icon-img, 55px) !important;
height: var(--tpr-process-icon-img, 55px) !important;
min-width: var(--tpr-process-icon-img, 55px) !important;
min-height: var(--tpr-process-icon-img, 55px) !important;
}
/* Remove per-icon connecting lines */
.tpr-process-image-container::after {
display: none;
}
/* Process container: full width for green background; only inner content constrained to 90% */
.tpr-process-container {
overflow: visible;
}
/* Constrain grid to 90% – step columns use full width so headings fit.
Horizontal padding intentionally omitted: editor-set padding flows through. */
.tpr-process-container > .uagb-container-inner-block,
.tpr-process-container > .uagb-container-inner-blocks-wrap,
.tpr-process-container > [class*="uagb-container-inner"],
.tpr-process-container .tpr-process {
max-width: 90% !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* Main heading only (not step headings) – constrain to 90% */
.tpr-process-container > .wp-block-uagb-advanced-heading,
.tpr-process-container > header.wp-block-uagb-advanced-heading {
max-width: 90% !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* Single line behind process icons (equal columns): 3px solid between 1st and last circle centres */
.tpr-process:has(.tpr-process-image-container),
:is(.uagb-layout-grid:has(.tpr-process-image-container), .uagb-layout-grid.tpr-process) {
position: relative;
overflow: visible;
}
/* Inner grid wrap: positioning context + top-align cells */
:is(.uagb-layout-grid:has(.tpr-process-image-container), .uagb-layout-grid.tpr-process) > .uagb-container-inner-blocks-wrap {
position: relative;
align-items: start;
}
/*
* Multi-column: icon rail + fixed-height heading row + description.
* Parent matches with or without .tpr-process-container (markup varies).
* Headings may sit inside .wp-block-group — display:contents so they participate in this grid.
* Body copy: .tpr-process-description-text and/or default p.wp-block-paragraph (class not required).
*/
@media (min-width: 1025px) {
:is(.uagb-layout-grid.tpr-process, .tpr-process-container .tpr-process.uagb-layout-grid)
> .uagb-container-inner-blocks-wrap
> .wp-block-uagb-container
> .uagb-container-inner-blocks-wrap {
display: grid !important;
grid-template-rows:
minmax(var(--tpr-process-column-copy-start-min, 10rem), max-content)
minmax(var(--tpr-process-heading-cell-min, 4.25rem), auto)
auto;
align-items: start;
justify-items: stretch;
row-gap: 0;
}
/* No heading anywhere in column: two rows only */
:is(.uagb-layout-grid.tpr-process, .tpr-process-container .tpr-process.uagb-layout-grid)
> .uagb-container-inner-blocks-wrap
> .wp-block-uagb-container
> .uagb-container-inner-blocks-wrap:not(:has(.wp-block-uagb-advanced-heading, .wp-block-heading)) {
grid-template-rows: minmax(var(--tpr-process-column-copy-start-min, 10rem), max-content) auto;
}
:is(.uagb-layout-grid.tpr-process, .tpr-process-container .tpr-process.uagb-layout-grid)
> .uagb-container-inner-blocks-wrap
> .wp-block-uagb-container
> .uagb-container-inner-blocks-wrap:not(:has(.tpr-process-image-container))
> .wp-block-uagb-container:only-child {
display: contents;
}
/* Unwrap Spectra groups that only wrap headings (copy can sit in same group or as sibling ) */
:is(.uagb-layout-grid.tpr-process, .tpr-process-container .tpr-process.uagb-layout-grid)
> .uagb-container-inner-blocks-wrap
> .wp-block-uagb-container
> .uagb-container-inner-blocks-wrap
> .wp-block-group:where(:has(.wp-block-uagb-advanced-heading), :has(.wp-block-heading)) {
display: contents;
}
:is(.uagb-layout-grid.tpr-process, .tpr-process-container .tpr-process.uagb-layout-grid)
> .uagb-container-inner-blocks-wrap
> .wp-block-uagb-container
> .uagb-container-inner-blocks-wrap
> .tpr-process-image-container {
grid-row: 1;
align-self: start;
}
:is(.uagb-layout-grid.tpr-process, .tpr-process-container .tpr-process.uagb-layout-grid)
> .uagb-container-inner-blocks-wrap
> .wp-block-uagb-container
> .uagb-container-inner-blocks-wrap
> :is(.wp-block-uagb-advanced-heading, header.wp-block-uagb-advanced-heading, .wp-block-heading),
:is(.uagb-layout-grid.tpr-process, .tpr-process-container .tpr-process.uagb-layout-grid)
> .uagb-container-inner-blocks-wrap
> .wp-block-uagb-container
> .uagb-container-inner-blocks-wrap
> .wp-block-group
:is(.wp-block-uagb-advanced-heading, header.wp-block-uagb-advanced-heading, .wp-block-heading) {
grid-row: 2;
align-self: start;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
:is(.uagb-layout-grid.tpr-process, .tpr-process-container .tpr-process.uagb-layout-grid)
> .uagb-container-inner-blocks-wrap
> .wp-block-uagb-container
> .uagb-container-inner-blocks-wrap:not(:has(.tpr-process-image-container))
> .wp-block-uagb-container:only-child
:is(.wp-block-uagb-advanced-heading, header.wp-block-uagb-advanced-heading, .wp-block-heading) {
grid-row: 2;
align-self: start;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
:is(.uagb-layout-grid.tpr-process, .tpr-process-container .tpr-process.uagb-layout-grid)
> .uagb-container-inner-blocks-wrap
> .wp-block-uagb-container
> .uagb-container-inner-blocks-wrap
> p.tpr-process-description-text,
:is(.uagb-layout-grid.tpr-process, .tpr-process-container .tpr-process.uagb-layout-grid)
> .uagb-container-inner-blocks-wrap
> .wp-block-uagb-container
> .uagb-container-inner-blocks-wrap
> p.wp-block-paragraph,
:is(.uagb-layout-grid.tpr-process, .tpr-process-container .tpr-process.uagb-layout-grid)
> .uagb-container-inner-blocks-wrap
> .wp-block-uagb-container
> .uagb-container-inner-blocks-wrap
> .wp-block-group
> p.tpr-process-description-text,
:is(.uagb-layout-grid.tpr-process, .tpr-process-container .tpr-process.uagb-layout-grid)
> .uagb-container-inner-blocks-wrap
> .wp-block-uagb-container
> .uagb-container-inner-blocks-wrap
> .wp-block-group
> p.wp-block-paragraph {
grid-row: 3;
margin-top: 0 !important;
}
:is(.uagb-layout-grid.tpr-process, .tpr-process-container .tpr-process.uagb-layout-grid)
> .uagb-container-inner-blocks-wrap
> .wp-block-uagb-container
> .uagb-container-inner-blocks-wrap:not(:has(.wp-block-uagb-advanced-heading, .wp-block-heading))
> p.tpr-process-description-text,
:is(.uagb-layout-grid.tpr-process, .tpr-process-container .tpr-process.uagb-layout-grid)
> .uagb-container-inner-blocks-wrap
> .wp-block-uagb-container
> .uagb-container-inner-blocks-wrap:not(:has(.wp-block-uagb-advanced-heading, .wp-block-heading))
> p.wp-block-paragraph {
grid-row: 2;
}
:is(.uagb-layout-grid.tpr-process, .tpr-process-container .tpr-process.uagb-layout-grid)
> .uagb-container-inner-blocks-wrap
> .wp-block-uagb-container
> .uagb-container-inner-blocks-wrap
> p:not(.tpr-process-description-text):not(.wp-block-paragraph) {
margin-top: 0 !important;
}
}
/*
* Single lime connector: ::before on the process grid. Legacy .tpr-process-connector-line from old
* cached HTML is hidden so it cannot duplicate this line.
*/
.tpr-process-grid .tpr-process-connector-line,
:is(.uagb-layout-grid:has(.tpr-process-image-container), .uagb-layout-grid.tpr-process) .tpr-process-connector-line {
display: none !important;
}
/* UAGB Advanced Heading optional separator — not the icon row connector. */
:is(.uagb-layout-grid:has(.tpr-process-image-container), .uagb-layout-grid.tpr-process) .uagb-separator,
.tpr-process-step .uagb-separator {
display: none !important;
}
/*
* Lime line through icon row: ::before on the *outer* process grid only.
* Do not use .uagb-layout-grid:has(.tpr-process-image-container) — each step is a nested
* .uagb-layout-grid.uagb-block-* that also contains .tpr-process-image-container (see events page),
* which matched this rule and drew duplicate segments between headings.
*/
.tpr-process-grid.uagb-layout-grid::before,
.uagb-layout-grid.tpr-process::before {
content: "";
position: absolute !important;
grid-column: 1 / -1;
justify-self: stretch;
align-self: start;
/* left/right are written by assets/js/tpr-process-line.js from actual getBoundingClientRect()
positions of the first and last circle. The calc fallbacks handle the initial paint before JS
runs (and any environment where the script can't execute). */
left: var(
--tpr-process-line-start,
calc(var(--tpr-process-circle-offset-left, 0px) + var(--tpr-process-circle-size, 100px))
) !important;
right: var(
--tpr-process-line-end-inset,
calc(
100% / var(--tpr-process-step-count, 5)
- (var(--tpr-process-step-count, 5) - 1) / var(--tpr-process-step-count, 5)
* var(--tpr-process-column-gap, 0px)
- var(--tpr-process-circle-offset-left, 0px)
)
) !important;
width: auto !important;
top: calc(
var(--tpr-process-line-y-offset, 0px) + var(--tpr-process-circle-size, 100px) / 2 +
var(--tpr-process-line-vertical-nudge, 0px) + var(--tpr-process-line-y-extra, 10px)
) !important;
transform: translateY(-50%) !important;
height: 3px !important;
z-index: 0;
background-color: #d2fc51 !important;
}
/* Nested per-step Spectra grids: never inherit a connector pseudo from the outer row rules above. */
.tpr-process.uagb-layout-grid .uagb-layout-grid::before {
content: none !important;
display: none !important;
}
.tpr-process:has(.tpr-process-image-container):not(:has(> .uagb-container-inner-blocks-wrap))::before {
content: "";
position: absolute !important;
grid-column: 1 / -1;
justify-self: stretch;
align-self: start;
left: var(
--tpr-process-line-start,
calc(var(--tpr-process-circle-offset-left, 0px) + var(--tpr-process-circle-size, 100px))
) !important;
right: var(
--tpr-process-line-end-inset,
calc(
100% / var(--tpr-process-step-count, 5)
- (var(--tpr-process-step-count, 5) - 1) / var(--tpr-process-step-count, 5)
* var(--tpr-process-column-gap, 0px)
- var(--tpr-process-circle-offset-left, 0px)
)
) !important;
width: auto !important;
top: calc(
var(--tpr-process-line-y-offset, 0px) + var(--tpr-process-circle-size, 100px) / 2 +
var(--tpr-process-line-vertical-nudge, 0px) + var(--tpr-process-line-y-extra, 10px)
) !important;
transform: translateY(-50%) !important;
height: 3px !important;
z-index: 0;
background-color: #d2fc51 !important;
}
/* Ensure icons sit above the line */
.tpr-process-image-container {
z-index: 1;
}
/* Icon 4: dotted squiggle from right edge of icon 4 to far right of screen – ensure no overflow clipping */
:is(.uagb-layout-grid:has(.tpr-process-image-container), .uagb-layout-grid.tpr-process),
:is(.uagb-layout-grid:has(.tpr-process-image-container), .uagb-layout-grid.tpr-process) .tpr-process-step:last-child,
.tpr-process-step-last .tpr-process-image-container,
:is(.uagb-layout-grid:has(.tpr-process-image-container), .uagb-layout-grid.tpr-process) .tpr-process-step:last-child .tpr-process-image-container {
overflow: visible;
}
.tpr-process-step-last .tpr-process-image-container::after,
:is(.uagb-layout-grid:has(.tpr-process-image-container), .uagb-layout-grid.tpr-process) .tpr-process-step:last-child .tpr-process-image-container::after {
display: block !important;
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -3px;
width: 200vw;
height: 6px;
z-index: 0;
background-color: transparent;
background-image: url("../images/tpr-process-squiggle-end.svg");
background-repeat: repeat-x;
background-size: 162px 6px;
background-position: left center;
}
/* Tablet: hide connecting line when icons stack */
@media (max-width: 1024px) {
.tpr-process-grid .tpr-process-connector-line,
:is(.uagb-layout-grid:has(.tpr-process-image-container), .uagb-layout-grid.tpr-process) .tpr-process-connector-line,
.tpr-process-grid.uagb-layout-grid::before,
.uagb-layout-grid.tpr-process::before,
.tpr-process:has(.tpr-process-image-container):not(:has(> .uagb-container-inner-blocks-wrap))::before {
display: none !important;
}
.tpr-process-step-last .tpr-process-image-container::after,
:is(.uagb-layout-grid:has(.tpr-process-image-container), .uagb-layout-grid.tpr-process) .tpr-process-step:last-child .tpr-process-image-container::after {
display: none !important;
}
}
/* Tablet (2-column stack): centre the circle in each cell and optically lift the icon so it reads
as vertically centred (SVGs are bottom-heavy, so geometric centre sits low). */
@media (min-width: 768px) and (max-width: 1024px) {
.tpr-process-image-container,
.tpr-process-image-container:has(.tpr-process-number) {
margin-left: auto !important;
margin-right: auto !important;
}
.tpr-process-image-container:has(.tpr-process-icon) figure,
.tpr-process-image-container:has(.tpr-process-icon) .wp-block-uagb-image__figure {
transform: translateY(-29px);
}
}
/* Desktop: lift the icon so SVG weight reads as centred within the larger circle. */
@media (min-width: 1025px) {
.tpr-process-image-container:has(.tpr-process-icon) figure,
.tpr-process-image-container:has(.tpr-process-icon) .wp-block-uagb-image__figure {
transform: translateY(-35px);
}
}
/* Mobile: hide line, fix layout to match desktop (circles, number badge) */
@media (max-width: 767px) {
.tpr-process-grid .tpr-process-connector-line,
:is(.uagb-layout-grid:has(.tpr-process-image-container), .uagb-layout-grid.tpr-process) .tpr-process-connector-line,
.tpr-process-grid.uagb-layout-grid::before,
.uagb-layout-grid.tpr-process::before,
.tpr-process:has(.tpr-process-image-container):not(:has(> .uagb-container-inner-blocks-wrap))::before {
display: none !important;
}
.tpr-process-step-last .tpr-process-image-container::after,
:is(.uagb-layout-grid:has(.tpr-process-image-container), .uagb-layout-grid.tpr-process) .tpr-process-step:last-child .tpr-process-image-container::after {
display: none !important;
}
/* Keep circles round and horizontally centred in the mobile column. */
.tpr-process-image-container {
width: 100px !important;
height: 100px !important;
min-width: 100px !important;
min-height: 100px !important;
max-width: 100px !important;
max-height: 100px !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
margin-top: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Number badge: position top-left of circle (further left and up) */
.tpr-process-number {
position: absolute !important;
top: -10px !important;
left: -10px !important;
margin-right: 0 !important;
z-index: 2 !important;
}
/* When number is inside image container, position at top-left of white circle */
.tpr-process-image-container:has(.tpr-process-number) .tpr-process-number {
top: -10px !important;
left: -10px !important;
}
/* Center icons within white circles on mobile */
.tpr-process-image-container:has(.tpr-process-icon) .wp-block-uagb-image,
.tpr-process-image-container:has(.tpr-process-icon) .wp-block-uagb-image__figure,
.tpr-process-image-container:has(.tpr-process-icon) figure {
align-items: center !important;
padding-bottom: 0 !important;
}
/* Number + circle in a row, then title + description full width below */
.tpr-process-step {
flex-direction: row !important;
flex-wrap: wrap !important;
}
.tpr-process-number,
.tpr-process-image-container,
.tpr-process-step > .wp-block-uagb-container:has(.tpr-process-image-container) {
flex: 0 0 auto !important;
}
.tpr-process-step > .wp-block-uagb-advanced-heading,
.tpr-process-step > .wp-block-paragraph {
width: 100% !important;
flex-basis: 100% !important;
}
}
/* ==========================================================================
FAQ accordion – .tpr-faq-wrapper, .tpr-faq-question, .tpr-faq-answer
Loop block structure. Matches Figma: TPR001-Designs node 23480:118366
========================================================================== */
/* Section: moss background, vertical padding, flex layout */
.tpr-faq-wrapper {
background-color: #fafbfa;
padding: 0 0 96px;
margin-top: 0 !important;
padding-top: 0 !important;
display: flex;
flex-direction: column;
align-items: center;
gap: 0 !important;
}
/* Blog article layout: class on article in single-post template. Drops FAQ bottom padding so the
* moss background (#fafbfa) does not show as an empty band under the accordion (standalone FAQ pages keep 96px). */
.tpr-blog-content-container .tpr-faq-wrapper {
padding-bottom: 0 !important;
}
/* Remove top gap from loop builder / parent when FAQ wrapper is inside */
.wp-block-uagb-loop-builder:has(.tpr-faq-wrapper),
.uagb-container-inner-blocks-wrap:has(.tpr-faq-wrapper),
.uagb-container-inner-block:has(.tpr-faq-wrapper) {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Inner content */
.tpr-faq-wrapper > * {
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
/* Main heading: dark green (font size from editor) */
.tpr-faq-wrapper > *:first-child h1,
.tpr-faq-wrapper > *:first-child h2,
.tpr-faq-wrapper > *:first-child h3,
.tpr-faq-wrapper > *:first-child .wp-block-uagb-advanced-heading .uagb-heading-text {
color: #0f2902 !important;
}
/* Accordion list: 2px gap between items */
.tpr-faq-wrapper .uagb-loop-post + .uagb-loop-post,
.tpr-faq-wrapper .tpr-faq-item + .tpr-faq-item {
margin-top: 2px !important;
}
/* Remove default spacing from loop container, posts, and inner containers */
.tpr-faq-wrapper,
.tpr-faq-wrapper.uagb-loop-container,
.tpr-faq-wrapper .uagb-loop-container,
.tpr-faq-wrapper [id*="uagb-block-queryid"],
.tpr-faq-wrapper .wp-block-query {
gap: 0 !important;
}
.tpr-faq-wrapper .uagb-loop-post {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.tpr-faq-wrapper .uagb-loop-post + .uagb-loop-post {
margin-top: 2px !important;
}
.tpr-faq-wrapper .uagb-loop-post-inner,
.tpr-faq-wrapper .tpr-faq-item {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Override block gap / spacing that adds space between loop items */
.tpr-faq-wrapper .wp-block-uagb-loop-builder,
.tpr-faq-wrapper .wp-block-uagb-loop-builder > * {
--wp--style--block-gap: 0 !important;
gap: 0 !important;
}
/* Question bar: forest/050 background, 100px min-height, 40px padding (font size from editor) */
.tpr-faq-wrapper .tpr-faq-question {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: 100px !important;
min-height: 100px !important;
padding: 0 2% !important;
background-color: #e7eae6 !important;
color: #0f2902 !important;
font-weight: 700 !important;
border-radius: 0;
cursor: pointer;
overflow: hidden;
margin: 0 !important;
border: none;
width: 100%;
text-align: left;
}
/* First accordion item only: 30px rounded top-left and top-right */
.tpr-faq-wrapper .uagb-loop-post:first-child .tpr-faq-question,
.tpr-faq-wrapper .tpr-faq-item:first-child .tpr-faq-question {
border-radius: 30px 30px 0 0;
}
/* All other accordion items: 0px rounded corners */
.tpr-faq-wrapper .uagb-loop-post:not(:first-child) .tpr-faq-question {
border-radius: 0 !important;
}
.tpr-faq-wrapper .tpr-faq-question a,
.tpr-faq-wrapper .tpr-faq-question a:hover {
text-decoration: none !important;
pointer-events: none;
color: inherit !important;
}
/* SVG mask chevron: down when closed, rotates 180° when open (Font Awesome removed) */
.tpr-faq-wrapper .tpr-faq-question::after {
content: "";
display: block;
width: 24px;
height: 24px;
flex-shrink: 0;
background-color: #0f2902;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transition: transform 0.2s ease;
}
/* Expanded: first item keeps rounded top; others stay square */
.tpr-faq-wrapper .uagb-loop-post:first-child .tpr-faq-item-active .tpr-faq-question {
border-radius: 30px 30px 0 0;
}
.tpr-faq-wrapper .tpr-faq-item-active .tpr-faq-question::after {
transform: rotate(180deg);
}
/* Editor: hide the CSS chevron so it doesn't duplicate the image-block arrow */
.block-editor-page .tpr-faq-wrapper .tpr-faq-question::after,
.editor-styles-wrapper .tpr-faq-wrapper .tpr-faq-question::after {
display: none !important;
}
/* Answer content: white background, border, 2% padding */
/* Hide answers on front-end only — keep visible in block editor for editing */
body:not(.block-editor-page):not(.wp-admin) .tpr-faq-wrapper .tpr-faq-answer {
display: none;
background-color: #fff !important;
border: 1px solid #fafbfa;
border-top: none;
padding: 2% !important;
margin: 0 !important;
}
/* Editor: answers always visible and editable */
.block-editor-page .tpr-faq-wrapper .tpr-faq-answer,
.editor-styles-wrapper .tpr-faq-wrapper .tpr-faq-answer {
display: block !important;
background-color: #fff !important;
border: 1px solid #fafbfa;
border-top: none;
padding: 2% !important;
margin: 0 !important;
}
body:not(.block-editor-page):not(.wp-admin) .tpr-faq-wrapper .tpr-faq-item-active .tpr-faq-answer {
display: block;
}
/* Spectra loop pagination / TPR load more below gallery inside an open FAQ item */
.tpr-faq-wrapper .tpr-faq-item-active .tpr-faq-answer .uagb-loop-pagination {
display: flex !important;
justify-content: center;
width: 100%;
flex-wrap: wrap;
}
.tpr-faq-wrapper .tpr-faq-answer p,
.tpr-faq-wrapper .tpr-faq-answer {
color: #0f2902 !important;
font-weight: 400 !important;
line-height: 1.6;
}
.tpr-faq-wrapper .tpr-faq-answer p {
margin: 0 0 30px !important;
}
.tpr-faq-wrapper .tpr-faq-answer p:last-child {
margin-bottom: 0 !important;
}
/* Full post body in answer: theme replaces
with
(valid lists/blocks) */
.tpr-faq-wrapper .tpr-faq-answer div.uagb-heading-text {
margin: 0 !important;
font-weight: 400 !important;
line-height: 1.6;
color: #0f2902 !important;
}
.tpr-faq-wrapper .tpr-faq-answer .uagb-heading-text ul,
.tpr-faq-wrapper .tpr-faq-answer .uagb-heading-text ol {
margin: 0.5em 0 1em;
padding-left: 1.25em;
}
.tpr-faq-wrapper .tpr-faq-answer .uagb-heading-text ul {
list-style: disc;
}
.tpr-faq-wrapper .tpr-faq-answer .uagb-heading-text ol {
list-style: decimal;
}
/* Same list styling if the wrapper is still
(e.g. before PHP swap) or nested lists sit in a paragraph context */
.tpr-faq-wrapper .tpr-faq-answer p.uagb-heading-text ul,
.tpr-faq-wrapper .tpr-faq-answer p.uagb-heading-text ol {
margin: 0.5em 0 1em;
padding-left: 1.25em;
}
.tpr-faq-wrapper .tpr-faq-answer p.uagb-heading-text ul {
list-style: disc;
}
.tpr-faq-wrapper .tpr-faq-answer p.uagb-heading-text ol {
list-style: decimal;
}
.tpr-faq-wrapper .tpr-faq-answer .uagb-heading-text li,
.tpr-faq-wrapper .tpr-faq-answer .uagb-heading-text li > p {
margin: 0.25em 0;
}
/* Resource download form: custom pill design (white input + lime green button) */
/* Resource listing cover: fixed aspect (5:6 width:height ≈ card column width) — not tied to AJAX form inject */
.uagb-loop-post .uagb-loop-post-inner .tpr-resource-cover-image[data-bg-image] {
position: relative;
aspect-ratio: 5 / 6 !important;
width: 100% !important;
min-height: 0 !important;
background-size: cover !important;
overflow: hidden;
box-sizing: border-box;
}
/* Keep overlay / title from increasing cover height (UAGB min-content sizing) */
.uagb-loop-post .uagb-loop-post-inner .tpr-resource-cover-image[data-bg-image] > .uagb-container-inner-blocks-wrap {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
box-sizing: border-box;
pointer-events: none;
}
.uagb-loop-post .uagb-loop-post-inner .tpr-resource-cover-image[data-bg-image] > .uagb-container-inner-blocks-wrap * {
pointer-events: auto;
}
/* Align download form to bottom of card regardless of content length */
.uagb-loop-post:has(.tpr-resource-download-form-injected),
li.wp-block-post:has(.tpr-resource-download-form-injected) {
display: flex !important;
}
li.wp-block-post:has(.tpr-resource-download-form-injected) {
flex-direction: column !important;
}
li.wp-block-post:has(.tpr-resource-download-form-injected) > *:not(.tpr-resource-download-form-injected) {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.uagb-loop-post:has(.tpr-resource-download-form-injected) .uagb-loop-post-inner {
display: flex !important;
flex-direction: column !important;
flex: 1;
min-height: 0;
width: 100%;
}
/* Content above form grows to push form to bottom */
.uagb-loop-post-inner:has(.tpr-resource-download-form-injected) > *:not(.tpr-resource-download-form-injected) {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.uagb-loop-post-inner:has(.tpr-resource-download-form-injected) .wp-block-uagb-container:has(.tpr-resource-download-form-injected),
.uagb-loop-post-inner:has(.tpr-resource-download-form-injected) .wp-block-uagb-advanced-heading:has(.tpr-resource-download-form-injected) {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.tpr-resource-download-form-injected {
order: 999;
margin-top: auto !important;
flex-shrink: 0;
width: 100%;
max-width: 100%;
min-width: 0;
align-self: stretch;
box-sizing: border-box;
padding: 0 5% 5% 5%;
}
/* Hide empty p tags under resource form (block editor outputs these, adds unwanted space) */
.uagb-loop-post-inner:has(.tpr-resource-download-form-injected) .wp-block-uagb-advanced-heading:has(.tpr-resource-download-form-injected) p:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Chosen resource block: card — ~40% image / ~60% body; desktop row fills min-height so image can span full card. */
.tpr-chosen-resource:not(.tpr-chosen-resource--empty) {
box-sizing: border-box;
min-height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
background: #fafbfa;
border-radius: 30px;
padding: clamp(1.25rem, 4vw, 2rem);
box-shadow: none;
}
.tpr-chosen-resource__layout {
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.25rem;
}
@media (min-width: 768px) {
/* Layout grows to card inner height → row flex has definite cross-size → media + image stretch to full height. */
.tpr-chosen-resource:not(.tpr-chosen-resource--empty) .tpr-chosen-resource__layout {
flex: 1 1 auto;
min-height: 0;
}
.tpr-chosen-resource__layout--has-image {
flex-direction: row;
align-items: center;
gap: clamp(1.5rem, 4vw, 2.5rem);
}
.tpr-chosen-resource__layout--has-image .tpr-chosen-resource__body {
justify-content: center;
}
/* Image keeps 1024×768 (4:3) aspect ratio; column width ~40% of row. */
.tpr-chosen-resource__layout--has-image .tpr-chosen-resource__media {
position: relative;
flex: 0 1 40%;
max-width: 40%;
min-width: 0;
width: auto;
align-self: center;
border-radius: 12px;
overflow: hidden;
background-color: #fafbfa;
}
}
.tpr-chosen-resource__media {
width: 100%;
aspect-ratio: 1024 / 768;
border-radius: 12px;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.tpr-chosen-resource__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: stretch;
}
.tpr-chosen-resource__tag-label {
margin: 0 0 0.65rem;
}
.tpr-chosen-resource__title {
margin: 0 0 0.75rem;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-synthesis: none;
}
.tpr-chosen-resource__excerpt {
margin: 0;
color: #0f2902;
}
.tpr-chosen-resource__excerpt p {
margin: 0;
}
.tpr-chosen-resource__excerpt p + p {
margin-top: 0.75em;
}
.tpr-chosen-resource__form {
margin-top: 20px;
width: 100%;
max-width: 100%;
min-width: 0;
align-self: stretch;
}
.tpr-chosen-resource--empty .tpr-chosen-resource__empty-note {
margin: 0;
padding: 12px 16px;
background: #f6f7f7;
border-radius: 4px;
font-size: 13px;
color: #50575e;
}
.tpr-chosen-resource-editor__hint,
.tpr-chosen-resource-editor__form-note {
font-size: 13px;
color: #50575e;
margin: 0;
}
.tpr-chosen-resource-editor__title {
margin: 0 0 0.5rem;
font-size: 1.1em;
}
/* Custom pill form: email + download button – fills container, respects padding */
/* Scoped to .tpr-resource-download-form-injected for higher specificity over Spectra/theme resets */
.tpr-resource-download-form-injected .tpr-resource-download-form,
.tpr-resource-download-form,
.tpr-resource-download-form-block {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.tpr-resource-download-form-injected .tpr-resource-download-form__fields,
.tpr-resource-download-form__fields {
display: flex !important;
flex-wrap: nowrap;
gap: 0;
align-items: stretch;
height: 32px;
border-radius: 16px;
overflow: hidden;
border: 2px solid #fff !important;
box-sizing: border-box;
transition: border-color 0.2s ease;
width: 100%;
max-width: 100%;
min-width: 0;
background: #fff;
}
.tpr-resource-download-form-injected .tpr-resource-download-form__fields:focus-within,
.tpr-resource-download-form__fields:focus-within {
border-color: #D2FC51 !important;
}
.tpr-resource-download-form-injected .tpr-resource-download-form__email,
.tpr-resource-download-form__email {
flex: 1;
min-width: 0;
padding: 0 1rem !important;
background: #fff !important;
color: #2B3D2B !important;
border: none !important;
border-radius: 14px 0 0 14px;
font-size: 11px !important;
font-weight: 700 !important;
font-family: inherit;
box-shadow: none !important;
}
.tpr-resource-download-form-injected .tpr-resource-download-form__email::placeholder,
.tpr-resource-download-form__email::placeholder {
color: #2B3D2B;
opacity: 0.7;
}
/* Scoped for higher specificity over Spectra/theme form resets */
.tpr-resource-download-form-injected .tpr-resource-download-form,
.tpr-resource-download-form,
.tpr-resource-download-form-block {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.tpr-resource-download-form-injected .tpr-resource-download-form__fields,
.tpr-resource-download-form__fields {
display: flex !important;
flex-wrap: nowrap;
gap: 0;
align-items: stretch;
height: 32px;
border-radius: 16px;
overflow: hidden;
border: 2px solid #fff !important;
box-sizing: border-box;
transition: border-color 0.2s ease;
width: 100%;
max-width: 100%;
min-width: 0;
background: #fff;
}
.tpr-resource-download-form-injected .tpr-resource-download-form__fields:focus-within,
.tpr-resource-download-form__fields:focus-within {
border-color: #D2FC51 !important;
}
.tpr-resource-download-form-injected .tpr-resource-download-form__email,
.tpr-resource-download-form__email {
flex: 1;
min-width: 0;
padding: 0 1rem !important;
background: #fff !important;
color: #2B3D2B !important;
border: none !important;
border-radius: 14px 0 0 14px;
font-size: 11px !important;
font-weight: 700 !important;
font-family: inherit;
box-shadow: none !important;
}
.tpr-resource-download-form-injected .tpr-resource-download-form__email::placeholder,
.tpr-resource-download-form__email::placeholder {
color: #2B3D2B;
opacity: 0.7;
}
.tpr-resource-download-form-injected .tpr-resource-download-form__email:-webkit-autofill,
.tpr-resource-download-form__email:-webkit-autofill,
.tpr-resource-download-form-injected .tpr-resource-download-form__email:-webkit-autofill:hover,
.tpr-resource-download-form__email:-webkit-autofill:hover,
.tpr-resource-download-form__email:-webkit-autofill:focus,
.tpr-resource-download-form__email:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px #fff inset !important;
box-shadow: 0 0 0 30px #fff inset !important;
}
.tpr-resource-download-form-injected .tpr-resource-download-form__email:focus,
.tpr-resource-download-form__email:focus {
outline: none !important;
}
.tpr-resource-download-form-injected .tpr-resource-download-form__submit,
.tpr-resource-download-form__submit {
flex: 0 0 auto;
min-width: 80px;
padding: 0 1rem !important;
background: #D2FC51 !important;
color: #000 !important;
border: none !important;
border-radius: 14px;
font-size: 11px !important;
font-weight: 700 !important;
font-family: inherit;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
box-shadow: none !important;
}
.tpr-resource-download-form-injected .tpr-resource-download-form__submit:hover:not(:disabled),
.tpr-resource-download-form__submit:hover:not(:disabled) {
background: #0F2902 !important;
color: #fff !important;
}
.tpr-resource-download-form-injected .tpr-resource-download-form__submit:disabled,
.tpr-resource-download-form__submit:disabled {
opacity: 0.5;
}
/* Resource download: loading state before confirmation */
.tpr-resource-download-form__sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.tpr-resource-download-form__loading {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 0.5rem;
min-height: 1.5rem;
}
/* Author `display: flex` above wins over the native [hidden] rule; force hide until JS shows it. */
.tpr-resource-download-form__loading[hidden] {
display: none !important;
}
.tpr-resource-download-form__spinner {
display: inline-block;
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
border: 2px solid rgba(43, 61, 43, 0.2);
border-top-color: #d2fc51;
border-radius: 50%;
animation: tpr-resource-download-spin 0.65s linear infinite;
vertical-align: middle;
box-sizing: border-box;
}
@keyframes tpr-resource-download-spin {
to {
transform: rotate(360deg);
}
}
.tpr-resource-download-form--loading .tpr-resource-download-form__fields {
opacity: 0.72;
pointer-events: none;
}
/* ==========================================================================
Mega menu: critical overrides (load last, structural + class selectors)
========================================================================== */
/* 1. Reduce gap between script headings and content below */
header .wp-block-navigation.tpr-mega-menu .has-child > .wp-block-navigation__submenu-container,
body .wp-block-navigation.tpr-mega-menu .has-child > .wp-block-navigation__submenu-container,
header .wp-block-navigation.tpr-mega-menu .tpr-mega-menu-3col .has-child > .wp-block-navigation__submenu-container,
header .wp-block-navigation.tpr-mega-menu .tpr-mega-menu-2col .has-child > .wp-block-navigation__submenu-container,
header .wp-block-navigation.tpr-mega-menu .tpr-menu-italic-heading > .wp-block-navigation__submenu-container,
header .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container,
body .wp-block-navigation.tpr-mega-menu .tpr-mega-menu-3col .has-child > .wp-block-navigation__submenu-container,
body .wp-block-navigation.tpr-mega-menu .tpr-mega-menu-2col .has-child > .wp-block-navigation__submenu-container,
body .wp-block-navigation.tpr-mega-menu .tpr-menu-italic-heading > .wp-block-navigation__submenu-container,
body .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container {
margin-top: 0.08em !important;
}
/* 2. Industries & resources columns: top-align; col2 padding in section 3 (not 50px left — that sat copy away from the divider) */
header .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(2),
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(2),
body .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(2),
body .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(2) {
padding-left: 1rem !important;
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
align-content: flex-start !important;
/* stretch + column: core .wp-block-navigation-submenu { display:flex } defaults to row; link flex-grow:1 shoves the nested list right */
align-items: stretch !important;
align-self: stretch !important;
min-width: 0 !important;
}
header .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(3),
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(3),
body .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(3),
body .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(3) {
justify-content: flex-start !important;
align-content: flex-start !important;
align-items: flex-start !important;
align-self: stretch !important;
}
header .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(2) > .wp-block-navigation__submenu-container,
header .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(3) > .wp-block-navigation__submenu-container,
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(2) > .wp-block-navigation__submenu-container,
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(3) > .wp-block-navigation__submenu-container,
body .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(2) > .wp-block-navigation__submenu-container,
body .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(3) > .wp-block-navigation__submenu-container,
body .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(2) > .wp-block-navigation__submenu-container,
body .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(3) > .wp-block-navigation__submenu-container {
justify-content: flex-start !important;
align-content: flex-start !important;
padding-left: 0 !important;
}
/* Col 2/3 nested lists: zero link padding-left here; column gutters are on the li in section 3 */
header .wp-block-navigation.tpr-mega-menu .tpr-mega-menu-1col .wp-block-navigation-item__content,
header .wp-block-navigation.tpr-mega-menu .tpr-mega-menu-1col .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
body .wp-block-navigation.tpr-mega-menu .tpr-mega-menu-1col .wp-block-navigation-item__content,
body .wp-block-navigation.tpr-mega-menu .tpr-mega-menu-1col .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
padding-left: 0 !important;
}
header .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(2) .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content,
header .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(3) .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content,
header .wp-block-navigation.tpr-mega-menu .tpr-mega-menu-1col .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content,
body .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(2) .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content,
body .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(3) .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content,
body .wp-block-navigation.tpr-mega-menu .tpr-mega-menu-1col .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content {
flex-grow: 0 !important;
}
/* 3. Mega panel dividers: col1 border-right (areas | industries), col3 border-left (industries | resources).
* Using col3 border-left fixes missing line when col2 border-right is clipped or overridden. */
/* Col 1: border-right draws the areas|industries divider; modest right gutter before industries */
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(1),
header .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(1),
body .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(1),
body .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(1) {
border-right: 1px solid rgba(255, 255, 255, 0.4) !important;
padding-right: 0.5rem !important;
align-self: stretch !important;
}
/* Col 2: inset from areas|industries divider; modest gutter before col3 */
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(2),
header .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(2),
body .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(2),
body .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(2) {
padding-left: 1.5rem !important;
padding-right: 1rem !important;
border-right: none !important;
border-left: none !important;
}
/* Col 3: border-left draws the industries|resources divider; generous left inset (unchanged from original) */
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(3),
header .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(3),
body .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(3),
body .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(3) {
padding-left: 50px !important;
border-left: 1px solid rgba(255, 255, 255, 0.4) !important;
border-right: none !important;
align-self: stretch !important;
}
/* Industries: override body header > li (padding + align-items — generic li uses flex-start and loses to body+header specificity). */
body header .wp-block-navigation.tpr-mega-menu .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(2),
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(2) {
padding-top: calc(1.1rem + 0.5rem) !important;
padding-bottom: 1.5rem !important;
padding-left: 1.5rem !important;
padding-right: 1rem !important;
align-items: stretch !important;
}
/* Smaller laptop (narrow desktop mega): halve horizontal gutters so columns breathe */
@media (min-width: 1089px) and (max-width: 1366px) {
body header .wp-block-navigation.tpr-mega-menu .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container,
.tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li,
body header .wp-block-navigation.tpr-mega-menu .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li,
.tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li {
padding-top: calc(1.1rem + 0.5rem) !important;
padding-bottom: 1.5rem !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(1),
header .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(1),
body .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(1),
body .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(1) {
padding-right: 0.5rem !important;
}
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(2),
header .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(2),
body .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(2),
body .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(2),
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li.tpr-mega-menu-1col:nth-child(2),
header .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li.tpr-mega-menu-1col:nth-child(2),
body .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li.tpr-mega-menu-1col:nth-child(2),
body .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li.tpr-mega-menu-1col:nth-child(2) {
padding-left: 0.75rem !important;
padding-right: 0.5rem !important;
}
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(3),
header .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(3),
body .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:nth-child(3),
body .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li:nth-child(3),
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li.tpr-mega-menu-1col:nth-child(3),
header .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li.tpr-mega-menu-1col:nth-child(3),
body .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li.tpr-mega-menu-1col:nth-child(3),
body .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li.tpr-mega-menu-1col:nth-child(3) {
padding-left: 25px !important;
}
body header .wp-block-navigation.tpr-mega-menu .tpr-mega-menu-3col > .wp-block-navigation__submenu-container {
gap: 0 0.625em !important;
}
body header .wp-block-navigation.tpr-mega-menu .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li {
min-width: 0 !important;
}
}
/* Thank-you / confirmation: copy + social icons on one row.
- Grid/flex applies ONLY under .tpr-thankyou-socials or .tpr-footer-socials-row — never to arbitrary .uagb-container-inner-blocks-wrap
(that would 2-column the whole page when p + icons are siblings among many blocks).
- Opt-in: add Additional CSS class tpr-footer-socials-row to a Spectra inner wrap (or Group) that contains ONLY the intro paragraph + shortcode (+ optional follow-up paragraph).
- Global styles may strip .wp-block-paragraph from
; match plain p as well. */
.entry-content .wp-block-uagb-container.tpr-thankyou-socials.uagb-layout-grid {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
justify-items: unset !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
}
/* Grid only under .tpr-thankyou-socials — narrow UAGB ancestor required */
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .wp-block-shortcode),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .wp-block-shortcode) {
display: grid !important;
grid-template-columns: auto auto !important;
grid-auto-flow: row !important;
justify-content: start !important;
align-items: center !important;
column-gap: 0.35em !important;
row-gap: 0.35em !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Opt-in flex row: add Additional CSS class tpr-footer-socials-row to the Spectra inner wrap (or inner block) that contains ONLY the intro paragraph + [tpr-footer-socials] (+ optional follow-up paragraph). Do not put this on a wrap that holds the whole page. */
html body .entry-content .uagb-container-inner-blocks-wrap.tpr-footer-socials-row,
html body .entry-content .uagb-container-inner-block.tpr-footer-socials-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
column-gap: 0.35em !important;
row-gap: 0.35em !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
html body .entry-content .uagb-container-inner-blocks-wrap.tpr-footer-socials-row > p,
html body .entry-content .uagb-container-inner-block.tpr-footer-socials-row > p,
html body .entry-content .uagb-container-inner-blocks-wrap.tpr-footer-socials-row > .wp-block-paragraph,
html body .entry-content .uagb-container-inner-block.tpr-footer-socials-row > .wp-block-paragraph {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
html body .entry-content .uagb-container-inner-blocks-wrap.tpr-footer-socials-row > .tpr-footer-socials-inline ~ p,
html body .entry-content .uagb-container-inner-blocks-wrap.tpr-footer-socials-row > .tpr-footer-socials-inline ~ .wp-block-paragraph,
html body .entry-content .uagb-container-inner-block.tpr-footer-socials-row > .tpr-footer-socials-inline ~ p,
html body .entry-content .uagb-container-inner-block.tpr-footer-socials-row > .tpr-footer-socials-inline ~ .wp-block-paragraph {
flex-basis: 100% !important;
width: 100% !important;
}
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > *:has(+ .wp-block-social-links),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > *:has(+ .wp-block-uagb-social-share),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > *:has(+ .wp-block-social-links),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > *:has(+ .wp-block-uagb-social-share) {
grid-column: 1 !important;
grid-row: 1 !important;
justify-self: start !important;
width: fit-content !important;
max-width: 100% !important;
min-width: 0 !important;
margin-inline-end: 0 !important;
}
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .wp-block-social-links,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .wp-block-uagb-social-share,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > .wp-block-social-links,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > .wp-block-uagb-social-share {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: start !important;
margin-block: 0 !important;
margin-inline-start: 0 !important;
}
/* Row 1 col 1: core paragraph OR plain
(no .wp-block-paragraph after global styles) */
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .wp-block-paragraph:has(+ .tpr-footer-socials-inline),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > p:has(+ .tpr-footer-socials-inline),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > .wp-block-paragraph:has(+ .tpr-footer-socials-inline),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > p:has(+ .tpr-footer-socials-inline),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .wp-block-paragraph:has(+ .wp-block-shortcode),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > p:has(+ .wp-block-shortcode),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > .wp-block-paragraph:has(+ .wp-block-shortcode),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > p:has(+ .wp-block-shortcode),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> p:first-child + .tpr-footer-socials-inline) > p:first-child,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .wp-block-paragraph:first-child + .tpr-footer-socials-inline) > .wp-block-paragraph:first-child,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .wp-block-paragraph:first-child + .wp-block-shortcode) > .wp-block-paragraph:first-child,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> p:first-child + .tpr-footer-socials-inline) > p:first-child,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .wp-block-paragraph:first-child + .tpr-footer-socials-inline) > .wp-block-paragraph:first-child,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .wp-block-paragraph:first-child + .wp-block-shortcode) > .wp-block-paragraph:first-child {
grid-column: 1 !important;
grid-row: 1 !important;
justify-self: start !important;
align-self: center !important;
width: fit-content !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* Row 1 col 2 */
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .tpr-footer-socials-inline,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > .tpr-footer-socials-inline,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .wp-block-shortcode,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > .wp-block-shortcode,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > *:has(.tpr-footer-socials-inline):not(.tpr-footer-socials-inline),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > *:has(.tpr-footer-socials-inline):not(.tpr-footer-socials-inline) {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: start !important;
align-self: center !important;
width: auto !important;
max-width: 100% !important;
margin-inline-start: 0 !important;
margin-inline-end: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Block / theme layout can set margin-inline-start: auto on later flex items — cancel here */
.entry-content .tpr-thankyou-socials .uagb-container-inner-blocks-wrap > *:not(:first-child),
.entry-content .tpr-thankyou-socials .uagb-container-inner-block > *:not(:first-child) {
margin-inline-start: 0 !important;
margin-left: 0 !important;
}
.tpr-thankyou-socials .uagb-container-inner-blocks-wrap > .wp-block-paragraph,
.tpr-thankyou-socials .uagb-container-inner-block > .wp-block-paragraph {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .wp-block-social-links ~ .wp-block-paragraph,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .wp-block-uagb-social-share ~ .wp-block-paragraph,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > .wp-block-social-links ~ .wp-block-paragraph,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > .wp-block-uagb-social-share ~ .wp-block-paragraph,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .wp-block-shortcode ~ .wp-block-paragraph,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .wp-block-shortcode ~ p,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .tpr-footer-socials-inline ~ .wp-block-paragraph,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .tpr-footer-socials-inline ~ p,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > .wp-block-shortcode ~ .wp-block-paragraph,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > .wp-block-shortcode ~ p,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > .tpr-footer-socials-inline ~ .wp-block-paragraph,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > .tpr-footer-socials-inline ~ p,
.tpr-thankyou-socials .uagb-container-inner-blocks-wrap > .wp-block-social-links ~ .wp-block-paragraph,
.tpr-thankyou-socials .uagb-container-inner-blocks-wrap > .wp-block-uagb-social-share ~ .wp-block-paragraph,
.tpr-thankyou-socials .uagb-container-inner-block > .wp-block-social-links ~ .wp-block-paragraph,
.tpr-thankyou-socials .uagb-container-inner-block > .wp-block-uagb-social-share ~ .wp-block-paragraph,
.tpr-thankyou-socials .uagb-container-inner-blocks-wrap > .wp-block-shortcode ~ .wp-block-paragraph,
.tpr-thankyou-socials .uagb-container-inner-block > .wp-block-shortcode ~ .wp-block-paragraph,
.tpr-thankyou-socials .uagb-container-inner-blocks-wrap > .tpr-footer-socials-inline ~ .wp-block-paragraph,
.tpr-thankyou-socials .uagb-container-inner-block > .tpr-footer-socials-inline ~ .wp-block-paragraph,
.tpr-thankyou-socials .uagb-container-inner-blocks-wrap > .tpr-footer-socials-inline ~ p,
.tpr-thankyou-socials .uagb-container-inner-block > .tpr-footer-socials-inline ~ p {
grid-column: 1 / -1 !important;
grid-row: auto !important;
width: 100% !important;
max-width: 100% !important;
justify-self: stretch !important;
}
@media (max-width: 767px) {
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) {
grid-template-columns: 1fr !important;
row-gap: 0.5em !important;
}
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .wp-block-paragraph:has(+ .tpr-footer-socials-inline),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > p:has(+ .tpr-footer-socials-inline),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > .wp-block-paragraph:has(+ .tpr-footer-socials-inline),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > p:has(+ .tpr-footer-socials-inline),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .wp-block-paragraph:has(+ .wp-block-shortcode),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > p:has(+ .wp-block-shortcode),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > .wp-block-paragraph:has(+ .wp-block-shortcode),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > p:has(+ .wp-block-shortcode),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .tpr-footer-socials-inline,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > .tpr-footer-socials-inline,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .wp-block-shortcode,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > .wp-block-shortcode,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .wp-block-social-links,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > .wp-block-uagb-social-share,
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-blocks-wrap:has(> .tpr-footer-socials-inline) > *:has(.tpr-footer-socials-inline):not(.tpr-footer-socials-inline),
html body .entry-content .wp-block-uagb-container.tpr-thankyou-socials .uagb-container-inner-block:has(> .tpr-footer-socials-inline) > *:has(.tpr-footer-socials-inline):not(.tpr-footer-socials-inline) {
grid-column: 1 !important;
grid-row: auto !important;
width: 100% !important;
max-width: 100% !important;
justify-self: start !important;
}
.tpr-footer-socials-inline {
flex-wrap: wrap;
}
html body .entry-content .uagb-container-inner-blocks-wrap.tpr-footer-socials-row,
html body .entry-content .uagb-container-inner-block.tpr-footer-socials-row {
flex-direction: column !important;
align-items: flex-start !important;
}
}
/* [tpr-footer-socials] – icons cloned from footer template; flex row, left-aligned */
.tpr-footer-socials-inline {
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.35em 0.65em;
justify-content: flex-start;
width: auto;
max-width: 100%;
box-sizing: border-box;
vertical-align: middle;
}
.tpr-thankyou-socials .tpr-footer-socials-inline {
width: auto !important;
flex: 0 0 auto !important;
}
.tpr-footer-socials-inline__text {
margin: 0;
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
}
.tpr-footer-socials-inline__icons {
flex: 0 0 auto;
}
/* Space between preceding copy and the icon row (block / div shortcode output) */
html body .entry-content [data-tpr-footer-socials] .tpr-footer-socials-inline__icons {
padding-left: 20px;
}
.tpr-footer-socials-inline__icons .wp-block-social-links,
.tpr-thankyou-socials .tpr-footer-socials-inline .wp-block-social-links {
margin-top: 0 !important;
margin-bottom: 0 !important;
justify-content: flex-start !important;
}
/* Footer clone often has aligncenter / content-justification-center on ul — force left in post content */
html body .entry-content [data-tpr-footer-socials] .wp-block-social-links,
html body .entry-content [data-tpr-footer-socials] span.wp-block-social-links {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
align-items: center !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
width: auto !important;
max-width: 100% !important;
}
html body .entry-content [data-tpr-footer-socials] .wp-block-social-links.aligncenter,
html body .entry-content [data-tpr-footer-socials] .wp-block-social-links.alignright,
html body .entry-content [data-tpr-footer-socials] .wp-block-social-links.is-content-justification-center,
html body .entry-content [data-tpr-footer-socials] .wp-block-social-links.is-content-justification-right {
justify-content: flex-start !important;
}
/* [tpr-footer-socials inline="1"] — valid inside a Paragraph; flows with text, left-aligned */
.tpr-footer-socials-inline--inflow {
display: inline !important;
line-height: inherit;
vertical-align: baseline;
max-width: 100%;
}
.tpr-footer-socials-inline--inflow .tpr-footer-socials-inline__text {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: baseline;
}
.tpr-footer-socials-inline--inflow .tpr-footer-socials-inline__icons--inflow {
display: inline !important;
vertical-align: middle;
margin: 0 !important;
padding: 0 0 0 20px !important;
line-height: 0;
}
.tpr-footer-socials-inline--inflow .tpr-footer-socials-inline__icons--inflow > span.wp-block-social-links {
vertical-align: middle;
line-height: 0;
}
/* span list items (converted from li) — match flex row behaviour */
.tpr-footer-socials-inline--inflow span.wp-block-social-links > span[role='listitem'],
.tpr-footer-socials-inline--inflow span.wp-block-social-links > .wp-social-link {
display: inline-flex !important;
vertical-align: middle;
margin: 0 0.15em 0 0 !important;
}
.tpr-footer-socials-inline--inflow span.wp-block-social-links > span[role='listitem']:last-child,
.tpr-footer-socials-inline--inflow span.wp-block-social-links > .wp-social-link:last-child {
margin-right: 0 !important;
}
/* Spectra Image Gallery masonry (Isotope): no transform transition when items snap to positions */
.spectra-image-gallery__layout--masonry .spectra-image-gallery__media-wrapper--isotope,
.spectra-image-gallery__layout--isogrid .spectra-image-gallery__media-wrapper--isotope {
transition: none !important;
}
/* Single-project layout: image column — images use full column width (override intrinsic / fit-content sizing) */
.tpr-project-image-column img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
box-sizing: border-box;
}
.tpr-project-image-column figure.wp-block-image,
.tpr-project-image-column .wp-block-image {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.tpr-project-image-column .wp-block-image > a {
display: block;
width: 100%;
}
/* Stacked galleries / multi-image columns: each item spans the column */
.tpr-project-image-column .wp-block-gallery,
.tpr-project-image-column .wp-block-gallery .wp-block-image {
width: 100% !important;
max-width: 100% !important;
}
/* Icon containers – fixed 100×100 circle with scaled icon */
.tpr-icon-container {
width: 100px !important;
height: 100px !important;
min-width: 100px;
min-height: 100px;
border-radius: 50%;
display: flex !important;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
margin-left: auto;
margin-right: auto;
padding: 0 !important;
}
/* Inner wrappers: fill the circle and center their contents */
.tpr-icon-container > *,
.tpr-icon-container .uagb-container-inner-blocks-wrap {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Icon image/figure: remove block-level spacing */
.tpr-icon-container .wp-block-uagb-image,
.tpr-icon-container .wp-block-image,
.tpr-icon-container figure {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.tpr-icon-container img,
.tpr-icon-container svg {
max-width: 60%;
max-height: 60%;
width: auto !important;
height: auto !important;
object-fit: contain;
margin: 0 !important;
}
/* Icon list rows – left-aligned, tighter gap (front-end only) */
body:not(.block-editor-page):not(.wp-admin) .tpr-icon-list,
body:not(.block-editor-page):not(.wp-admin) .tpr-icon-list > .uagb-container-inner-blocks-wrap {
display: grid !important;
grid-template-columns: 100px 1fr !important;
align-items: center !important;
gap: 16px !important;
}
body:not(.block-editor-page):not(.wp-admin) .tpr-icon-list + .tpr-icon-list,
body:not(.block-editor-page):not(.wp-admin) * + .tpr-icon-list {
margin-top: 8px !important;
}
/* Icon list rows – editor: keep default layout, just align horizontally */
.block-editor-page .tpr-icon-list,
.editor-styles-wrapper .tpr-icon-list {
align-items: center !important;
}
.block-editor-page .tpr-icon-list .tpr-icon-container,
.editor-styles-wrapper .tpr-icon-list .tpr-icon-container {
flex-shrink: 0;
}
/* Staff loop: remove underline from name and email links */
.uagb-loop-post .wp-block-uagb-advanced-heading a {
text-decoration: none !important;
}
/* Staff loop: remove gaps between grid items so images sit flush */
.uagb-block-2131a275 .uagb-loop-container,
.uagb-block-2131a275 [id*="uagb-block-queryid"] {
gap: 0 !important;
grid-gap: 0 !important;
column-gap: 0 !important;
row-gap: 0 !important;
}
.uagb-block-2131a275 .uagb-loop-post {
margin: 0 !important;
padding: 0 !important;
border: none !important;
outline: none !important;
}
/* ==========================================================================
Default table styling (wp-block-table) – matches comparison table look
without images, VS badge, or multi-column-group layout.
Does NOT apply to .tpr-comparison-table which has its own styles.
========================================================================== */
.wp-block-table:not(.tpr-comparison-table) table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
overflow: hidden;
}
.wp-block-table:not(.tpr-comparison-table) th,
.wp-block-table:not(.tpr-comparison-table) td {
box-sizing: border-box;
padding: 20px 30px;
border: none !important;
}
/* Header: dark green background, white text */
.wp-block-table:not(.tpr-comparison-table) thead th {
background-color: #0F2902 !important;
color: #fff !important;
font-size: 20px;
font-weight: 700;
vertical-align: middle;
}
/* Rounded top corners on first/last header cells */
.wp-block-table:not(.tpr-comparison-table) thead th:first-child {
border-top-left-radius: 30px;
}
.wp-block-table:not(.tpr-comparison-table) thead th:last-child {
border-top-right-radius: 30px;
}
/* Alternating row stripes */
.wp-block-table:not(.tpr-comparison-table) tbody tr:nth-child(odd) td {
background-color: #EFF4F0;
}
.wp-block-table:not(.tpr-comparison-table) tbody tr:nth-child(even) td {
background-color: #fff;
}
.wp-block-table:not(.tpr-comparison-table) tbody td {
height: 60px;
vertical-align: middle;
color: #0f2902;
}
/* Footer: lime green background */
.wp-block-table:not(.tpr-comparison-table) tfoot td {
background-color: #D2FC51 !important;
font-weight: 700;
vertical-align: middle;
}
/*
* Optional horizontal rule (dark green) under one body row. Add Additional CSS class
* `tpr-table-divider-row-N` on the Table block. N counts from 1 = first row,
* then each
row. Assumes one row (if you add more, reduce nth-child by
* one per extra header row). Example: row 8 → tbody tr:nth-child(7).
*
* On this row only, drop left/right borders so vertical grey column rules do not paint
* over the green line at T-junctions (green reads as one continuous bar).
*/
.wp-block-table.tpr-table-divider-row-8 table tbody tr:nth-child(7) > :is(td, th) {
border-left: none !important;
border-right: none !important;
border-bottom: 2px solid #0f2902 !important;
}
/* Mobile */
@media (max-width: 767px) {
.wp-block-table:not(.tpr-comparison-table) th,
.wp-block-table:not(.tpr-comparison-table) td {
padding: 12px 16px;
font-size: 14px;
}
.wp-block-table:not(.tpr-comparison-table) thead th {
font-size: 16px;
}
}
/* Gravity Forms (except CTA bar form 3) – bold titles & submit buttons */
.gform_wrapper:not(#gform_wrapper_3) .gform_title {
font-weight: 700 !important;
}
.gform_wrapper:not(#gform_wrapper_3) input[type="submit"],
.gform_wrapper:not(#gform_wrapper_3) button[type="submit"],
.gform_wrapper:not(#gform_wrapper_3) .gform_button {
font-family: 'Poppins', sans-serif !important;
font-weight: 700 !important;
}
/* ==========================================================================
UAGB grid column-count mismatch fix
About page: grid configured for 3 columns but only has 2 children,
leaving a phantom empty column that makes text columns too narrow.
========================================================================== */
.uagb-block-3e18f745.uagb-layout-grid > .uagb-container-inner-blocks-wrap {
grid-template-columns: repeat(2, minmax(1px, 1fr)) !important;
}
/* ==========================================================================
Content grid carousel (.tpr-content-grid-carousel)
Converts UAGB grid into a single-row horizontal carousel.
JS adds the wrapper, arrows, and --has-arrows modifier.
========================================================================== */
/*
* The "track" is the flex row that scrolls.
* Shape A: section > inner-blocks-wrap (track) > children
* Shape B: section (track) > children (no inner-blocks-wrap)
* JS moves the track into .tpr-content-grid-carousel__viewport.
*/
/* Track styles — apply to both shapes */
.tpr-content-grid-carousel.uagb-layout-grid,
.tpr-content-grid-carousel > .uagb-container-inner-blocks-wrap {
display: flex !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
grid-template-columns: none !important;
}
/* Children: 4-col sizing matching Spectra's original grid */
.tpr-content-grid-carousel.uagb-layout-grid > .wp-block-uagb-container,
.tpr-content-grid-carousel > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
flex: 0 0 calc((100% - 3 * 20px) / 4);
min-width: calc((100% - 3 * 20px) / 4);
}
/* Carousel viewport: wraps the track, handles scroll */
.tpr-content-grid-carousel__viewport {
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-snap-type: x mandatory;
}
.tpr-content-grid-carousel__viewport::-webkit-scrollbar {
display: none;
}
/* Once inside the viewport, keep track flex-row and allow overflow so scroll works */
.tpr-content-grid-carousel__viewport > .uagb-container-inner-blocks-wrap,
.tpr-content-grid-carousel__viewport > .tpr-content-grid-carousel {
display: flex !important;
flex-wrap: nowrap !important;
overflow: visible !important;
grid-template-columns: none !important;
column-gap: 20px;
}
/* Children sizing when track is inside viewport */
.tpr-content-grid-carousel__viewport > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
flex: 0 0 calc((100% - 3 * 20px) / 4);
min-width: calc((100% - 3 * 20px) / 4);
scroll-snap-align: start;
}
/* Row: flex row with arrows OUTSIDE the viewport so text in cards is never covered. */
.tpr-content-grid-carousel__row {
display: flex;
align-items: center;
gap: 0.75rem;
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
/* Arrow buttons — flex items beside the viewport (not absolute overlays). */
.tpr-content-grid-carousel__nav {
flex: 0 0 auto;
z-index: 2;
width: 3rem;
height: 3rem;
border-radius: 50%;
border: none;
background-color: #0f2902;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.tpr-content-grid-carousel__nav:hover:not(.is-disabled) {
transform: scale(1.05);
background-color: #d2fc51;
color: #0f2902;
}
.tpr-content-grid-carousel__nav:hover:not(.is-disabled) > i {
color: #0f2902;
}
.tpr-content-grid-carousel__nav.is-disabled {
background-color: rgba(15, 41, 2, 0.1) !important;
cursor: not-allowed;
}
.tpr-content-grid-carousel__nav > i {
font-size: 1rem;
line-height: 1;
}
/* Hide arrows when no scrolling is needed (JS adds this class) */
.tpr-content-grid-carousel--no-arrows .tpr-content-grid-carousel__nav {
display: none;
}
/* Text overflow fix: constrain paragraphs inside grid cards */
.tpr-content-grid-carousel .wp-block-uagb-container p {
overflow: hidden;
overflow-wrap: break-word;
word-break: normal;
}
/* Tablet: 2 cards visible at a time — 4 cards in <1088px is too narrow for legibility. */
@media (max-width: 1087px) {
.tpr-content-grid-carousel.uagb-layout-grid > .wp-block-uagb-container,
.tpr-content-grid-carousel > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
.tpr-content-grid-carousel__viewport > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
flex: 0 0 calc((100% - 20px) / 2) !important;
min-width: calc((100% - 20px) / 2) !important;
}
}
/* Mobile: 1 card visible at a time — readable content, scroll with arrows. */
@media (max-width: 767px) {
.tpr-content-grid-carousel.uagb-layout-grid > .wp-block-uagb-container,
.tpr-content-grid-carousel > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
.tpr-content-grid-carousel__viewport > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
flex: 0 0 100% !important;
min-width: 100% !important;
}
.tpr-content-grid-carousel__row {
gap: 0.5rem;
max-width: 100%;
}
.tpr-content-grid-carousel__nav {
width: 2.5rem;
height: 2.5rem;
}
}
/* Projects page – video: intrinsic aspect (see tpr_projects_video_use_intrinsic_ratio); rounded frame */
figure.tpr-projects-video,
.wp-block-video.tpr-projects-video {
width: 100%;
max-width: 100%;
border-radius: 30px;
overflow: hidden;
}
.tpr-projects-video video {
width: 100%;
height: auto;
display: block;
vertical-align: middle;
aspect-ratio: unset !important;
}
/* Mega 3-col: nested Industries/Resources repeats .tpr-mega-menu-1col — was hit by .tpr-mega-menu .tpr-mega-menu-1col flex rules while core kept row flex. */
html body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container.tpr-mega-menu-3col > li.tpr-mega-menu-1col > ul.wp-block-navigation__submenu-container.tpr-mega-menu-1col {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
align-content: flex-start !important;
justify-content: flex-start !important;
width: 100% !important;
min-width: 0 !important;
gap: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════
* Mobile overlay ≤ 1087px
* Accordion markup: tpr-mega-menu-mobile-accordion.js adds
* .tpr-mega-mobile-accordion-active to the 3-col submenu and
* .tpr-mega-nav-accordion-mode to the nav block.
* ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1087px) {
/* Full-width overlay (beats Core max-width: 90% responsive-close wrapper) */
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open {
padding-left: 0 !important;
padding-right: 0 !important;
}
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
/* Reserve vertical room for the absolutely-positioned top actions row (search + phone + CTA) aligned with X. */
padding-top: 3rem !important;
padding-left: 5% !important;
padding-right: 0 !important;
box-sizing: border-box !important;
gap: 0 !important;
row-gap: 0 !important;
position: relative !important;
}
header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .tpr-mobile-nav-actions {
/* Mega-menu actions is absolutely positioned above; no margin-bottom needed (content padding-top reserves space). */
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/*
* Collapsed: display:none removes the submenu UL from layout entirely so collapsed mega columns
* don't reserve grid track height and create gaps between top-level rows.
*/
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content li.has-child > .wp-block-navigation__submenu-container {
display: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
width: 100% !important;
min-width: 0 !important;
position: static !important;
left: auto !important;
right: auto !important;
transform: none !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content li.has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
display: flex !important;
flex-direction: column !important;
grid-column: 1 / -1 !important;
grid-row: 2 !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
opacity: 1 !important;
visibility: visible !important;
overflow: visible !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0.65em !important;
padding-bottom: 0 !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
flex: 1 0 100% !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content li.has-child .wp-block-navigation-submenu__toggle ~ .wp-block-navigation__submenu-container > * {
margin: 0 !important;
}
/* Top-level 2-col flyout uses position:fixed on desktop; stack in the overlay instead. */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.tpr-mega-menu-2col.has-child > .wp-block-navigation__submenu-container {
position: static !important;
left: auto !important;
top: auto !important;
right: auto !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* Core hides submenu icons in the overlay — show them so parents read as expandable rows. */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
display: inline-flex !important;
align-items: center !important;
}
/* Restore nested toggles/icons hidden by the global rule at the top of this file. */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-menu-3col > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-menu-3col > .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-menu-2col > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-menu-2col > .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Even spacing between top-level overlay links */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
gap: 0 !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.wp-block-navigation-item {
margin: 0 !important;
margin-inline: 0 !important;
padding: 0.65rem 1rem 0.65rem 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
border-bottom-color: rgba(255, 255, 255, 0.2) !important;
box-sizing: border-box !important;
min-height: 2.75rem !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
}
/* Top-level parents: grid so label + chevron stay on one row regardless of label length. */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.wp-block-navigation-item.has-child {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 2.5rem !important;
grid-template-rows: auto auto !important;
align-items: center !important;
width: 100% !important;
column-gap: 0.5rem !important;
row-gap: 0 !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.wp-block-navigation-item.tpr-mega-menu-2col {
padding: 0.65rem 1rem 0.65rem 0 !important;
min-height: 2.75rem !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.wp-block-navigation-item:hover,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.wp-block-navigation-item:focus-within {
border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.wp-block-navigation-item:last-child {
border-bottom: none !important;
}
/* .tpr-parent-menu-mega-3col has desktop tab padding; zero it out in the overlay. */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.tpr-parent-menu-mega-3col {
padding-left: 1rem !important;
padding-right: 1rem !important;
padding-top: 0.65rem !important;
padding-bottom: 0.65rem !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.wp-block-navigation-item > a.wp-block-navigation-item__content .wp-block-navigation-item__label,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.wp-block-navigation-item > button.wp-block-navigation-item__content .wp-block-navigation-item__label {
line-height: 1.25 !important;
}
/*
* All nested li.has-child: label + fixed-width chevron column (prevents chevron wrapping on long labels).
*/
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content li.has-child {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 2.5rem !important;
grid-template-rows: auto auto !important;
align-items: center !important;
width: 100% !important;
column-gap: 0.5rem !important;
row-gap: 0 !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content li.has-child > .wp-block-navigation-submenu__toggle,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content li.has-child > a.wp-block-navigation-item__content:first-of-type {
min-width: 0 !important;
align-self: center !important;
justify-self: stretch !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content li.has-child > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label {
min-width: 0 !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content li.has-child > .wp-block-navigation__submenu-icon {
width: 2.5rem !important;
min-width: 2.5rem !important;
max-width: 2.5rem !important;
margin-left: 0 !important;
margin-right: 0 !important;
justify-self: end !important;
align-self: center !important;
height: auto !important;
line-height: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/*
* Mega 3-col accordion column : they still carry .has-child so the grid rule above overrides
* ul.tpr-mega-mobile-accordion-active > li { display:block }. Force block stacking for these only.
*/
html body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul.tpr-mega-mobile-accordion-active > li {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
column-gap: 0 !important;
row-gap: 0 !important;
align-items: stretch !important;
}
/* Core submenu chevrons: hide inline SVGs — CSS mask ::before handles the icon. */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon svg,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle svg {
display: none !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content li.open-on-click.has-child > .wp-block-navigation-submenu__toggle:not(.wp-block-navigation__submenu-icon) svg {
display: none !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content span.wp-block-navigation__submenu-icon {
position: relative !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content span.wp-block-navigation__submenu-icon::before {
content: "" !important;
background-color: currentColor !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") no-repeat center / contain !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") no-repeat center / contain !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 2.5rem !important;
height: 100% !important;
min-height: 1.25rem !important;
transition: transform 0.2s ease;
transform-origin: 50% 50%;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle[aria-expanded="true"] + span.wp-block-navigation__submenu-icon::before,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content button.wp-block-navigation-submenu__toggle.wp-block-navigation__submenu-icon[aria-expanded="true"]::before {
transform: rotate(180deg);
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content button.wp-block-navigation-submenu__toggle.wp-block-navigation__submenu-icon::before {
content: "" !important;
background-color: currentColor !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") no-repeat center / contain !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") no-repeat center / contain !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
transition: transform 0.2s ease;
transform-origin: 50% 50%;
}
/* Remove lime squiggle decoration on parent triggers while overlay is open */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle::before,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > a.wp-block-navigation-item__content::before,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-parent-menu-mega-3col > .wp-block-navigation-submenu__toggle::before,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-parent-menu-mega-3col > a.wp-block-navigation-item__content::before {
content: none !important;
display: none !important;
background: none !important;
mask: none !important;
-webkit-mask: none !important;
}
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
}
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu {
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
}
/*
* Accordion-active 3-col submenu: flex column stacking, reset grid layout, and override the
* unscoped desktop overflow-y:hidden + max-height rules further down in custom.css.
*/
body header .wp-block-navigation.tpr-mega-menu .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container.tpr-mega-mobile-accordion-active,
body header
.wp-block-navigation.tpr-mega-menu
.wp-block-navigation__container
> .has-child:first-child
> .wp-block-navigation__submenu-container.tpr-mega-mobile-accordion-active {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
grid-auto-flow: row !important;
gap: 0.5rem 0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
position: relative !important;
left: auto !important;
right: auto !important;
transform: none !important;
overflow: visible !important;
max-height: none !important;
}
body header .wp-block-navigation.tpr-mega-menu ul.tpr-mega-mobile-accordion-active > li {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
border-right: none !important;
border-left: none !important;
margin: 0 !important;
padding: 0 !important;
flex: none !important;
align-self: stretch !important;
}
/* Nested mega grids: single column on mobile so lists don't overflow side by side. */
body header .wp-block-navigation.tpr-mega-menu ul.tpr-mega-mobile-accordion-active .tpr-mega-menu-3col > .wp-block-navigation__submenu-container {
display: block !important;
grid-template-columns: none !important;
grid-auto-flow: row !important;
gap: 0.35rem 0 !important;
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body header .wp-block-navigation.tpr-mega-menu ul.tpr-mega-mobile-accordion-active .tpr-mega-menu-2col > .wp-block-navigation__submenu-container {
display: block !important;
grid-template-columns: none !important;
grid-auto-flow: row !important;
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
position: static !important;
left: auto !important;
transform: none !important;
}
body header .wp-block-navigation.tpr-mega-menu ul.tpr-mega-mobile-accordion-active .tpr-mega-nav-accordion__panel .wp-block-navigation__submenu-container {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
body header .wp-block-navigation.tpr-mega-menu ul.tpr-mega-mobile-accordion-active .tpr-mega-nav-accordion__panel li.wp-block-navigation-submenu {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
body header .wp-block-navigation.tpr-mega-menu ul.tpr-mega-mobile-accordion-active .tpr-mega-nav-accordion__panel .wp-block-navigation-item__content,
body header .wp-block-navigation.tpr-mega-menu ul.tpr-mega-mobile-accordion-active .tpr-mega-nav-accordion__panel a.wp-block-navigation-item__content {
width: 100% !important;
max-width: 100% !important;
text-align: left !important;
justify-content: flex-start !important;
}
/* Accordion wrapper */
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode .tpr-mega-nav-accordion {
position: relative;
z-index: 1;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
/* Last accordion column (Resources & support) needs no bottom border — the top-level row below
it already has a border-top equivalent (its own border-bottom). */
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode ul.tpr-mega-mobile-accordion-active > li:last-child > .tpr-mega-nav-accordion {
border-bottom: none !important;
}
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode .tpr-mega-nav-accordion__trigger {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 2.65rem;
gap: 0.5rem;
padding: 0.65rem 1rem;
margin: 0;
border: 0;
background: transparent;
color: #CFD4CC;
font: inherit;
font-family: "Poppins", sans-serif !important;
font-size: 1rem;
font-weight: 600;
font-style: normal;
text-align: left;
cursor: pointer;
box-sizing: border-box;
}
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode .tpr-mega-nav-accordion__trigger:focus-visible {
outline: 2px solid #d2fc51;
outline-offset: 2px;
}
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode .tpr-mega-nav-accordion__trigger-inner {
flex: 1 1 auto;
min-width: 0;
text-align: left;
}
/* SVG chevron: match top-level item chevrons (2.5rem wide column, 1.5rem visible icon) */
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode .tpr-mega-nav-accordion__chevron {
flex: 0 0 2.5rem;
flex-shrink: 0;
align-self: center;
width: 2.5rem !important;
min-width: 2.5rem !important;
height: 1.5rem !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: transform 0.2s ease;
opacity: 0.95;
transform-origin: 50% 50%;
}
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode .tpr-mega-nav-accordion--open .tpr-mega-nav-accordion__chevron {
transform: rotate(180deg);
}
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode .tpr-mega-nav-accordion__panel {
display: none !important;
padding: 0 0 0.55rem 0;
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
}
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode .tpr-mega-nav-accordion--open .tpr-mega-nav-accordion__panel {
display: block !important;
}
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode .tpr-mega-nav-accordion__panel .wp-block-navigation-item__content,
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode .tpr-mega-nav-accordion__panel a {
word-break: break-word;
}
/* 3rd-level panel links (destination links inside each accordion section) are non-bold. */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel a.wp-block-navigation-item__content,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel .wp-block-navigation-item__label {
font-weight: 400 !important;
}
/*
* Dark header: .tpr-header-dark forces nav links to #0F2902. The overlay background is the same dark
* green, so force white text/icons to stay legible inside the open overlay.
*/
body.tpr-header-dark header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content,
body.tpr-header-dark header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content a,
body.tpr-header-dark header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content button.wp-block-navigation-item__content,
body.tpr-header-dark header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__label {
color: #fff !important;
}
body.tpr-header-dark header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon,
body.tpr-header-dark header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle {
color: #fff !important;
}
body.tpr-header-dark header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon svg,
body.tpr-header-dark header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle svg {
fill: currentColor !important;
color: inherit !important;
}
/* Disable desktop hover bridge ::before/::after in overlay (they cover items below the hovered parent). */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child:hover::before,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child:focus-within::before,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child:hover::after,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child:focus-within::after {
content: none !important;
display: none !important;
}
/* Hover: lime text on dark overlay background */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content a:hover,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content a:hover .wp-block-navigation-item__label,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content button:hover,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content button:hover .wp-block-navigation-item__label,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle:hover,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle:hover .wp-block-navigation-item__label,
body.tpr-header-dark header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content a:hover,
body.tpr-header-dark header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content a:hover .wp-block-navigation-item__label,
body.tpr-header-dark header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content button:hover,
body.tpr-header-dark header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content button:hover .wp-block-navigation-item__label,
body.tpr-header-dark header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle:hover,
body.tpr-header-dark header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle:hover .wp-block-navigation-item__label {
color: #D2FC51 !important;
}
body.tpr-header-dark header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle:hover svg,
body.tpr-header-dark header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content li.has-child:hover > .wp-block-navigation__submenu-icon svg {
fill: currentColor !important;
color: #d2fc51 !important;
}
/* Italic heading links: hide original — accordion trigger shows the label instead.
Scoped to .tpr-mega-mobile-accordion-active (3-col mega) only; 2-col panels (Events & Short Term)
aren't accordion-processed so their italic-heading labels must remain visible. */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-mobile-accordion-active > .tpr-menu-italic-heading.has-child > a.wp-block-navigation-item__content,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-mobile-accordion-active > .tpr-menu-italic-heading.has-child > span.wp-block-navigation-item__content {
display: none !important;
}
/* 2-col mega italic-heading labels in the mobile overlay: match 3-col accordion-trigger style (Poppins 1rem 600). */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-menu-2col > li.tpr-menu-italic-heading > a.wp-block-navigation-item__content,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-menu-2col > li.tpr-menu-italic-heading > a.wp-block-navigation-item__content .wp-block-navigation-item__label,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-menu-2col > li.tpr-menu-italic-heading > span.wp-block-navigation-item__content,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-menu-2col > li.tpr-menu-italic-heading > span.wp-block-navigation-item__content .wp-block-navigation-item__label,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-menu-2col > li.tpr-menu-italic-heading > button.wp-block-navigation-item__content,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-menu-2col > li.tpr-menu-italic-heading > button.wp-block-navigation-item__content .wp-block-navigation-item__label {
font-family: "Poppins", sans-serif !important;
font-size: 1rem !important;
font-weight: 600 !important;
font-style: normal !important;
color: #CFD4CC !important;
text-transform: none !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-menu-2col > li.tpr-menu-italic-heading.has-child {
min-height: 2.65rem !important;
padding: 0.65rem 0.25rem 0.65rem 1rem !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
box-sizing: border-box !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-menu-2col > li.tpr-menu-italic-heading.has-child:last-child {
border-bottom: none !important;
}
/* Sub-heading links inside accordion panels: keep visible */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel li.tpr-menu-sub-heading.has-child > a.wp-block-navigation-item__content,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel li.tpr-menu-sub-heading.has-child > span.wp-block-navigation-item__content {
color: #fff !important;
font-family: "Poppins", sans-serif !important;
font-weight: 600 !important;
font-size: 1em !important;
}
/* Italic/sub-heading toggle text: Poppins bold, not Hamilton Script */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-menu-italic-heading > .wp-block-navigation-submenu__toggle,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-menu-italic-heading > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-menu-sub-heading > .wp-block-navigation-submenu__toggle,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-menu-sub-heading > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label {
font-family: "Poppins", sans-serif !important;
font-size: 1em !important;
font-style: normal !important;
font-weight: 700 !important;
}
/* Hide duplicate italic headings inside accordion panels */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel > li.tpr-menu-italic-heading > .wp-block-navigation-item__content,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel > li.tpr-menu-italic-heading > a,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel > li.tpr-menu-italic-heading > span,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel > li.tpr-menu-italic-heading > button.wp-block-navigation-item__content {
display: none !important;
}
/* Hide non-child italic headings inside submenu containers (static label rows, not accordion triggers). */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li.tpr-menu-italic-heading:not(.has-child) {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: none !important;
}
/* Reset mega column padding/margins from desktop rules to prevent large gaps in overlay. */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li {
padding: 0 !important;
margin: 0 !important;
border-right: none !important;
border-left: none !important;
}
/* Dropdown arrows: fixed-width column for consistent right edge alignment */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
flex: 0 0 2.5rem !important;
width: 2.5rem !important;
min-width: 2.5rem !important;
margin-left: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex: 1 1 auto !important;
min-width: 0 !important;
margin-left: 0 !important;
padding: 0.2rem 0 !important;
background: transparent !important;
border: none !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content li.has-child > a.wp-block-navigation-item__content ~ .wp-block-navigation-submenu__toggle {
display: inline-flex !important;
flex: 0 0 2.5rem !important;
width: 2.5rem !important;
min-width: 2.5rem !important;
max-width: 2.5rem !important;
justify-content: center !important;
align-items: center !important;
margin-left: auto !important;
padding: 0.2rem !important;
box-sizing: border-box !important;
}
/*
* Accordion panel rows: override global li.has-child { display:grid } with flex so row layout
* stays flush and chevrons don't get pushed into a detached grid column.
*/
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel li.has-child {
display: flex !important;
flex-flow: row wrap !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0.28rem !important;
padding-bottom: 0.28rem !important;
box-sizing: border-box !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel li.has-child > .wp-block-navigation__submenu-container {
flex: 1 0 100% !important;
width: 100% !important;
min-width: 0 !important;
order: 3 !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel li.open-on-click.has-child > .wp-block-navigation-submenu__toggle:not(.wp-block-navigation__submenu-icon) {
display: flex !important;
flex: 1 1 auto !important;
order: 1 !important;
min-width: 0 !important;
margin-left: 0 !important;
padding: 0.2rem 0 !important;
justify-content: flex-start !important;
text-align: left !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel li.open-on-click.has-child > .wp-block-navigation__submenu-icon {
order: 2 !important;
flex: 0 0 2.5rem !important;
margin-left: auto !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel li.has-child > a.wp-block-navigation-item__content:first-of-type {
order: 1 !important;
flex: 1 1 auto !important;
min-width: 0 !important;
text-align: left !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel li.has-child > a.wp-block-navigation-item__content ~ .wp-block-navigation-submenu__toggle {
order: 2 !important;
flex: 0 0 2.5rem !important;
margin-left: auto !important;
}
/* Undo global grid child placement inside accordion panel rows. */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel li.has-child > .wp-block-navigation-submenu__toggle,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel li.has-child > a.wp-block-navigation-item__content:first-of-type {
justify-self: auto !important;
align-self: auto !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-nav-accordion__panel li.has-child > .wp-block-navigation__submenu-icon {
justify-self: auto !important;
align-self: auto !important;
}
/* Sub-link spacing */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li {
padding: 0.28rem 0 !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li a,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li .wp-block-navigation-item__content {
text-align: left !important;
}
/* 3-col accordion: second-level lists left-aligned */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-mobile-accordion-active .tpr-mega-nav-accordion__panel,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-mobile-accordion-active .tpr-mega-nav-accordion__panel .wp-block-navigation__submenu-container {
text-align: left !important;
align-items: flex-start !important;
justify-content: flex-start !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open ul.tpr-mega-mobile-accordion-active .tpr-mega-nav-accordion__panel .wp-block-navigation__submenu-container > li {
align-items: stretch !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
html body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:first-child > .wp-block-navigation__submenu-container {
justify-content: flex-start !important;
align-items: flex-start !important;
}
html body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li:first-child > .wp-block-navigation__submenu-container li {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
justify-content: flex-start !important;
align-items: flex-start !important;
}
/*
* Mega column wrappers: reset desktop padding/borders (from the min-width:1088px blocks above)
* so accordion rows match top-level inset in the mobile overlay.
*/
html body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-menu-3col > .wp-block-navigation__submenu-container > li,
html body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-mega-menu-2col > .wp-block-navigation__submenu-container > li,
html body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .tpr-parent-menu-mega-3col > .wp-block-navigation__submenu-container > li,
html body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container > li {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-inline-start: 0 !important;
margin-inline-end: 0 !important;
border-left: none !important;
border-right: none !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon, body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child:first-child > .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
display: none !important;
}
}
/*
* Mobile-nav sub-accordions (state rows under "Areas we service"): JS adds
* .tpr-sub-accordion to each nested li.has-child in the accordion panel, and toggles
* .tpr-sub-accordion--open when the row's chevron is tapped. Kept in its own @media
* block outside the other mobile rules to minimize interaction with existing cascade.
*/
@media (max-width: 1087px) {
/*
* Accordion trigger (Areas we service / Industries / Resources & support): asymmetric
* padding (0 top / 9px bottom) pulls each row up tight against the row above so the
* stack reads as a single grouped section instead of loose, over-spaced lines.
*/
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode .tpr-mega-nav-accordion__trigger.tpr-mega-nav-accordion__trigger {
padding-top: 0 !important;
padding-bottom: 9px !important;
}
/*
* Top-level nav links get padding-bottom:0.35em on desktop to align with the squiggle
* underline. In the mobile overlay that asymmetry makes the label sit high in its row.
* Reset so top/bottom padding match.
*/
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle {
padding-bottom: 0 !important;
}
/*
* Specificity bump (.tpr-sub-accordion.tpr-sub-accordion) needed to beat the desktop
* mega-menu rule `.tpr-mega-menu .tpr-mega-menu-3col .submenu .has-child > .submenu
* { display: block !important }` which has specificity (0,8,1).
*/
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open li.tpr-sub-accordion.tpr-sub-accordion > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
display: none !important;
}
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open li.tpr-sub-accordion.tpr-sub-accordion--open.tpr-sub-accordion--open > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
display: flex !important;
flex-direction: column !important;
}
/* Show the chevron toggle on sub-accordion rows. Repeated-class selectors bump
specificity above the existing hide-nested-toggles rule. */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open li.tpr-sub-accordion.tpr-sub-accordion.tpr-sub-accordion > .wp-block-navigation-submenu__toggle.wp-block-navigation-submenu__toggle.wp-block-navigation-submenu__toggle,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open li.tpr-sub-accordion.tpr-sub-accordion.tpr-sub-accordion > .wp-block-navigation__submenu-icon.wp-block-navigation__submenu-icon.wp-block-navigation__submenu-icon {
display: inline-flex !important;
}
/* Constrain the label link so the chevron fits on the same row. Upstream rules set
width:100% !important (specificity 0,10,7) and flex:1 1 auto !important (0,8,4);
repeat classes to raise ours above both. */
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open li.tpr-sub-accordion.tpr-sub-accordion.tpr-sub-accordion.tpr-sub-accordion > a.wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content {
flex: 1 1 0 !important;
min-width: 0 !important;
width: auto !important;
}
/*
* Sub-accordion chevron (arrow on rows like "New South Wales"): align-items:center on
* the row centers the icon vertically, but the label sits a few pixels above visual
* center thanks to Poppins' cap-height position. Shift the chevron down 12px so it
* aligns with the label baseline. transform keeps it out of layout flow.
*/
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open li.tpr-sub-accordion.tpr-sub-accordion > .wp-block-navigation__submenu-icon,
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open li.tpr-sub-accordion.tpr-sub-accordion > .wp-block-navigation-submenu__toggle {
transform: translateY(12px) !important;
}
/*
* Nested accordion panel (holds Areas / Industries / Resources): the panel has
* its own padding-bottom (0.55rem) plus row-gap on the containing , which
* stack up to a visible gap below "Resources & support". Zero them so the last
* trigger sits flush with the row below (Events & Short Term).
*/
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode .tpr-mega-nav-accordion__panel {
padding-bottom: 0 !important;
}
body header .wp-block-navigation.tpr-mega-menu.tpr-mega-nav-accordion-mode ul.tpr-mega-mobile-accordion-active > li:has(> .tpr-mega-nav-accordion) > .tpr-mega-nav-accordion__panel > ul {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/*
* Top-level nav carries padding: 0.65rem 1rem 0.65rem 0 (line 18526) to
* size the row when closed. When the is expanded, that bottom 0.65rem
* lands below the open panel and shows as a gap. Zero padding-bottom on the
* open state; aria-expanded="true" on the child toggle is the authoritative
* signal the accordion is open.
*/
body header .wp-block-navigation.tpr-mega-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.wp-block-navigation-item.has-child:has(> button[aria-expanded="true"]) {
padding-bottom: 0 !important;
}
}
/*
* Case-study card container: guarantee 5% top/bottom padding at every breakpoint.
* UAGB writes per-block padding as `padding-block-start`/`padding-block-end`
* (logical props), so we match the property names UAGB uses and double the class
* for a specificity bump. Only the logical longhands are set — don't also set
* `padding-top`/`padding-bottom`, as the later-in-source logical prop would win
* and make the physical value appear to do nothing (a cascade foot-gun).
*/
.tpr-case-study-container.tpr-case-study-container {
padding-block-start: 5% !important;
padding-block-end: 5% !important;
}
.tpr-case-study-container.tpr-case-study-container > .uagb-container-inner-blocks-wrap,
.tpr-case-study-container.tpr-case-study-container > .uagb-container-inner-block {
padding-block-start: 0 !important;
padding-block-end: 0 !important;
}
/*
* The inner wrap is `display: flex; flex-direction: column; justify-content: center`
* (set by Spectra block attributes). When children overflow the wrap, `center`
* spills the overflow equally above AND below the wrap's content box, making the
* first child render above the container's top padding. Force top alignment so
* the pill and everything below it stay inside the padded content box.
*
* The same pattern exists on the nested intro-group (`uagb-block-d3b5b74d`
* holds pill + title + company/location). At wider viewports the title wraps
* to fewer lines, leaving that block's content shorter than its fixed height,
* and `justify-content: center` pushes a large empty band below Sydney CBD.
* Force flex-start everywhere inside the case-study card so spacing is driven
* by actual content size, not by center-alignment of a sometimes-fixed height.
*/
.tpr-case-study-container.tpr-case-study-container > .uagb-container-inner-blocks-wrap,
.tpr-case-study-container.tpr-case-study-container > .uagb-container-inner-block,
.tpr-case-study-container.tpr-case-study-container .wp-block-uagb-container {
justify-content: flex-start !important;
}
/*
* Each icon-list row has `margin-bottom: 40px` (authored in the block). On the
* final row (Sydney CBD) that leaves 40px of dead space below the last visible
* line, compounding the gap above "See the detail". Zero it on the last child
* so the intro-group ends cleanly at its last text baseline.
*/
#case-study-feature .uagb-icon-list__wrap > .wp-block-uagb-icon-list-child:last-child {
margin-bottom: 0 !important;
}
/*
* The Spectra-generated wrap uses `row-gap: 3%`, and browsers disagree on what
* that percentage resolves against (spec says inline size; some resolve against
* the block's tall height instead, giving 50–100px gaps between siblings).
* Replace with a fixed value so spacing between the intro group, arrow,
* accordion, and testimonial is identical in every browser.
*/
.tpr-case-study-container.tpr-case-study-container > .uagb-container-inner-blocks-wrap,
.tpr-case-study-container.tpr-case-study-container > .uagb-container-inner-block {
row-gap: 1.5rem !important;
}
/*
* Green testimonial / quote block inside the case-study card. UAGB generates
* per-block CSS with `margin-top: 0 !important; margin-bottom: 0 !important`
* at every breakpoint, so margins authored in the block editor don't apply.
* UAGB's inline `