…
`. If the field contains multiple `` blocks * (line breaks in the builder become paragraphs), nested `
` is invalid HTML and the browser * splits siblings — only the first keeps `.description`. Style `p.description ~ p` the same. */ .team-member[data-style="meta_below"] h4, .team-member[data-style="meta below"] h4, .team-member[data-style="meta_below"] .position, .team-member[data-style="meta below"] .position, .team-member[data-style="meta_below"] p.description, .team-member[data-style="meta below"] p.description, .team-member[data-style="meta_below"] p.description ~ p, .team-member[data-style="meta below"] p.description ~ p, .team-member[data-style="meta_below"] ul.social, .team-member[data-style="meta below"] ul.social { background-color: var(--color-paper); } .team-member[data-style="meta_below"] h4, .team-member[data-style="meta below"] h4, .row .col .team-member[data-style="meta_below"] h4, .row .col .team-member[data-style="meta below"] h4 { margin-top: 0; padding: 30px 30px 0px; font-weight: 700; } .team-member[data-style="meta_below"] .position, .team-member[data-style="meta below"] .position { margin: 0; padding: 0px 30px 15px 30px; } .team-member[data-style="meta_below"] p.description, .team-member[data-style="meta below"] p.description, .row .col .team-member[data-style="meta_below"] p.description, .row .col .team-member[data-style="meta below"] p.description, .team-member[data-style="meta_below"] p.description ~ p, .team-member[data-style="meta below"] p.description ~ p, .row .col .team-member[data-style="meta_below"] p.description ~ p, .row .col .team-member[data-style="meta below"] p.description ~ p { border-top: none !important; border-bottom: none !important; margin: 0 !important; margin-top: 0em !important; padding: 0 30px 20px 30px !important; font-size: 1.125rem; line-height: 1.333; hanging-punctuation: first allow-end last; } /* Same downscale as body / excerpt copy (cf. .nectar-post-grid .meta-excerpt). */ @media only screen and (max-width: 1000px) { .team-member[data-style="meta_below"] p.description, .team-member[data-style="meta below"] p.description, .row .col .team-member[data-style="meta_below"] p.description, .row .col .team-member[data-style="meta below"] p.description, .team-member[data-style="meta_below"] p.description ~ p, .team-member[data-style="meta below"] p.description ~ p, .row .col .team-member[data-style="meta_below"] p.description ~ p, .row .col .team-member[data-style="meta below"] p.description ~ p { font-size: 1em; } } .team-member[data-style="meta_below"] p.description, .team-member[data-style="meta below"] p.description, .row .col .team-member[data-style="meta_below"] p.description, .row .col .team-member[data-style="meta below"] p.description { padding-top: 1.333 !important; margin-bottom: 0 !important; } .team-member[data-style="meta_below"] p.description ~ p:last-of-type, .team-member[data-style="meta below"] p.description ~ p:last-of-type, .row .col .team-member[data-style="meta_below"] p.description ~ p:last-of-type, .row .col .team-member[data-style="meta below"] p.description ~ p:last-of-type { padding-bottom: 30px !important; font-style: italic; } /* Opening-quote hang where `hanging-punctuation` is unsupported (e.g. Chromium). */ @supports not (hanging-punctuation: first) { .team-member[data-style="meta_below"] p.description + p, .team-member[data-style="meta below"] p.description + p, .row .col .team-member[data-style="meta_below"] p.description + p, .row .col .team-member[data-style="meta below"] p.description + p { text-indent: -0.45em; padding-left: calc(30px + 0.45em) !important; } } .team-member[data-style="meta_below"] ul.social, .team-member[data-style="meta below"] ul.social { margin: 0 !important; padding: 0 1.25rem 1.25rem; } .full-width-section .team-member img { margin-bottom: 0 !important; } /* * Equal-height WPB row: stretch meta-below cards so the white text panel fills the column. * Salient sets .wpb_wrapper { min-height: 100% } on equal-height rows; this chain fills it and * lets the last description
grow so its background extends to the bottom of the card.
*/
.vc_row.vc_row-o-equal-height .wpb_column .wpb_wrapper:has(.team-member[data-style="meta_below"]),
.vc_row.vc_row-o-equal-height .wpb_column .wpb_wrapper:has(.team-member[data-style="meta below"]) {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 100%;
}
.vc_row.vc_row-o-equal-height .team-member[data-style="meta_below"],
.vc_row.vc_row-o-equal-height .team-member[data-style="meta below"] {
display: flex;
flex-direction: column;
flex: 1 1 auto;
align-self: stretch;
min-height: 100%;
box-sizing: border-box;
}
.vc_row.vc_row-o-equal-height .team-member[data-style="meta_below"] > img,
.vc_row.vc_row-o-equal-height .team-member[data-style="meta below"] > img {
flex: 0 0 auto;
}
.vc_row.vc_row-o-equal-height .team-member[data-style="meta_below"] > ul.social,
.vc_row.vc_row-o-equal-height .team-member[data-style="meta below"] > ul.social {
flex: 0 0 auto;
}
.vc_row.vc_row-o-equal-height .team-member[data-style="meta_below"] > p:last-of-type,
.vc_row.vc_row-o-equal-height .team-member[data-style="meta below"] > p:last-of-type {
flex: 1 1 auto;
min-height: 0;
}
/*
* Equal-height white .frame inner rows (e.g. Fundraise “You could…” cards).
* WPBakery parent row: Extra class `equal-frame-cards` + Equal height + Content position Stretch.
* Works whether the image sits inside or above the inner row.
*/
.equal-frame-cards.vc_row-o-equal-height.vc_row-flex > :is(.span_12, .row_col_wrap_12) > .wpb_column > .vc_column-inner,
.equal-frame-cards.vc_row-o-equal-height.vc_row-flex > :is(.span_12, .row_col_wrap_12) > .wpb_column > .vc_column-inner > .wpb_wrapper {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 100%;
height: 100%;
width: 100%;
gap: 0;
}
/* Columns 2–3 may have Salient flex gap (e.g. flex_gap_desktop_10px); flush image to white frame. */
.equal-frame-cards [class*="flex_gap_"] > .vc_column-inner > .wpb_wrapper {
gap: 0 !important;
}
/* White card = inner row with .frame */
.equal-frame-cards.vc_row-o-equal-height .wpb_column > .vc_column-inner > .wpb_wrapper > .inner_row.frame,
.equal-frame-cards.vc_row-o-equal-height .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_row.inner_row.frame {
display: flex;
flex-direction: column;
flex: 1 1 auto;
align-self: stretch;
width: 100%;
min-height: 0;
box-sizing: border-box;
}
.equal-frame-cards.vc_row-o-equal-height .inner_row.frame > :is(.span_12, .row_col_wrap_12_inner),
.equal-frame-cards.vc_row-o-equal-height .inner_row.frame > :is(.span_12, .row_col_wrap_12_inner) > .wpb_column,
.equal-frame-cards.vc_row-o-equal-height .inner_row.frame .vc_column-inner,
.equal-frame-cards.vc_row-o-equal-height .inner_row.frame .vc_column-inner > .wpb_wrapper {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 100%;
height: 100%;
width: 100%;
}
.equal-frame-cards.vc_row-o-equal-height .inner_row.frame .img-with-aniamtion-wrap {
flex: 0 0 auto;
}
.equal-frame-cards.vc_row-o-equal-height .inner_row.frame .wpb_text_column:last-child {
flex: 1 1 auto;
min-height: 0;
overflow: visible;
}
.equal-frame-cards.vc_row-o-equal-height .inner_row.frame .vc_column-inner,
.equal-frame-cards.vc_row-o-equal-height .inner_row.frame .vc_column-inner > .wpb_wrapper,
.equal-frame-cards.vc_row-o-equal-height .inner_row.frame .wpb_text_column:last-child .wpb_wrapper,
.equal-frame-cards.vc_row-o-equal-height .inner_row.frame .wpb_text_column h6 {
overflow: visible;
}
/* Image above the inner row (sibling layout) */
.equal-frame-cards.vc_row-o-equal-height .wpb_column > .vc_column-inner > .wpb_wrapper > .img-with-aniamtion-wrap {
flex: 0 0 auto;
}
/* Inner rows: add class `teammemberrow` in WPBakery row settings to align bottom spacing with column gap (50px). */
.wpb_wrapper > .wpb_row.teammemberrow,
.wpb_row.teammemberrow {
margin-bottom: 50px !important;
}
@media only screen and (max-width: 1000px) {
:root {
--tagline-font-size: 1.5rem;
}
}
html {
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
/*
* Home logomark — Salient injects stronger rules for Image with Animation
* (.img-with-aniamtion-wrap[data-max-width="75%"] .inner img[src*=".svg"] { width:100% }, etc.),
* so we match that markup and use !important where needed.
*/
#ajax-content-wrap img.img-with-animation.logomark,
.img-with-aniamtion-wrap .inner img.logomark,
.img-with-aniamtion-wrap[data-max-width="75%"] .inner img.logomark,
.img-with-aniamtion-wrap[data-max-width="50%"] .inner img.logomark,
svg.logomark,
.logomark:not(img):not(svg),
.logomark img,
.logomark svg {
display: block;
width: min(
calc(var(--tagline-font-size) * var(--logomark-to-tagline-ratio)),
88vw
) !important;
max-width: 100% !important;
height: auto !important;
margin: 0 auto 3rem auto;
box-sizing: border-box;
}
/* Keep Display Heading Styles Scoped To Site Content, Not Plugin/Admin UI. */
.main-content h1,
.main-content h2,
#page-header-bg h1 {
font-family: var(--font-display);
font-weight: normal;
font-style: normal;
text-transform: uppercase;
}
.bannersectionheading {
text-align: center;
--banner-section-heading-bg: var(--color-brand-purple);
}
/* Optional alignment modifier for specific banner heading instances. */
.bannersectionheading--align-left {
text-align: left;
}
.bannersectionheading h2 {
display: inline-block;
background: var(--banner-section-heading-bg);
padding: 2rem 2rem;
margin-bottom: 2rem !important;
transform: rotate(-2.5deg);
transform-origin: center center;
}
@media only screen and (max-width: 1000px) {
.bannersectionheading h2 {
padding: 1rem 1rem;
}
}
/* Layer these on the same element as .bannersectionheading in Salient. */
.bannersectionheading--bg-white {
--banner-section-heading-bg: var(--color-brand-white);
}
.bannersectionheading--bg-black {
--banner-section-heading-bg: var(--color-brand-black);
}
.bannersectionheading--bg-orange {
--banner-section-heading-bg: var(--color-brand-orange);
}
.bannersectionheading--bg-purple {
--banner-section-heading-bg: var(--color-brand-purple);
}
.bannersectionheading--bg-blue {
--banner-section-heading-bg: var(--color-brand-blue);
}
.bannersectionheading--bg-pink {
--banner-section-heading-bg: var(--color-brand-pink);
}
.bannersectionheading--bg-peach {
--banner-section-heading-bg: var(--color-brand-peach);
}
.bannersectionheading--bg-lilac {
--banner-section-heading-bg: var(--color-brand-lilac);
}
.bannersectionheading--bg-sky {
--banner-section-heading-bg: var(--color-brand-sky);
}
.bannersectionheading--bg-rose {
--banner-section-heading-bg: var(--color-brand-rose);
}
h3 {
font-family: var(--font-body);
font-weight: 700;
}
.row .col h3,
.row .col h4 {
margin-bottom: var(--space-heading-bottom-standard);
}
.nectar-fancy-box[data-style="default"] .inner h3,
.nectar-fancy-box[data-style="default"] .inner h4,
.nectar-fancy-box[data-style="hover_desc"] .inner h3,
.nectar-fancy-box[data-style="hover_desc"] .inner h4,
.nectar-fancy-box[data-style="parallax_hover"] .inner h3,
.nectar-fancy-box[data-style="parallax_hover"] .inner h4 {
margin-bottom: 0.666rem;
}
/* Override Salient's last-child text reset inside frame components. */
:is(.frame, .frame--plain, .frame--rotate-ccw-scroll, .frame--rotate-cw-scroll) .wpb_text_column :is(h1, h4, h5, h6, p, ul, ol, blockquote):last-child {
margin-bottom: 0 !important;
}
:is(.frame, .frame--plain, .frame--rotate-ccw-scroll, .frame--rotate-cw-scroll) .wpb_text_column h2 {
margin-bottom: 1.25rem !important;
}
/*
* WPB text columns: hanging quotes.
* - `body.home` / `body.front-page`: actual WordPress front page.
* - Sticky media inner: same blocks on interior pages (e.g. Who we are) — `body.home` does not apply there.
* - `hanging-punctuation` is clipped when ancestors use overflow:hidden; padding + negative text-indent
* keeps the opening quote inside the paragraph box (visible in Safari + Chromium).
*/
body.home .wpb_text_column .wpb_wrapper p,
body.front-page .wpb_text_column .wpb_wrapper p,
.nectar-sticky-media-sections .nectar-sticky-media-section__content-section-inner .wpb_text_column .wpb_wrapper p {
hanging-punctuation: first allow-end last;
padding-inline-start: 0.45em;
text-indent: -0.45em;
}
h4, h5, h6, body, p {
font-family: var(--font-body);
font-weight: 400;
}
h5 {
font-family: var(--font-heading);
text-transform: uppercase;
}
body.single .post .wpb_text_column h5 {
margin-bottom: 1.333em;
}
/* Blog posts (post type `post`) only: remove WPBakery row bottom margin. */
body.single-post .wpb_row {
margin-bottom: 0;
}
.nectar-video-box {
margin: 3rem 0 !important;
}
/* Caption / credit line + portfolio tile titles: base size here; Salient h6 size/line-height at all breakpoints (including tablet/phone) via functions.php inline CSS, aligned with Theme Options h6 + responsive heading %. */
p.imagecaptioncredit,
.imagecaptioncredit .wpb_wrapper > p,
.imagecaptioncredit p {
font-family: var(--font-body);
font-size: 1.125rem;
line-height: 1.333;
font-weight: 400;
font-style: normal;
text-transform: none;
letter-spacing: normal;
color: rgba(25, 20, 20, 1);
margin: 3rem 0 0 0;
padding-top: 1rem;
border-top: 1px solid rgba(25, 20, 20, 0.2);
}
.portfolio-items .work-meta {
width: 100%;
}
.portfolio-items .work-meta h4,
.main-content .portfolio-items .work-meta h4,
.page-template-template-portfolio .portfolio-items .work-meta h4 {
font-family: var(--font-body);
font-size: 1.125rem;
line-height: 1.333;
font-weight: 400;
font-style: normal;
text-transform: none;
letter-spacing: normal;
color: rgba(25, 20, 20, 1);
}
.img-with-aniamtion-wrap .img-caption {
font-size: 1.125rem;
line-height: 1.333;
}
.img-with-aniamtion-wrap,
body .wpb_wrapper > .img-with-aniamtion-wrap {
margin: 3rem 0;
}
body .portfolio-items[data-gutter="15px"][data-col-num="elastic"].fullwidth-constrained,
body .portfolio-items[data-gutter="15px"]:not([data-col-num="elastic"]),
body .portfolio-items[data-gutter="default"]:not([data-col-num="elastic"]) {
margin-top: 3rem;
}
/*
* Portfolio style 1 / 2 (default Salient grid): remove accent hover overlay and visible
* "View Larger" / "More Details" controls; the full thumbnail stays the Fancybox / prettyPhoto target.
* Scoped to items without custom grid content so style-3+ and custom overlays are unchanged.
*/
body .portfolio-items .col .work-item:hover .work-info-bg,
body .portfolio-items[data-ps="7"] .col:hover .work-info-bg,
body .portfolio-items[data-ps="8"] .col:hover .work-info-bg {
background-color: transparent !important;
opacity: 0 !important;
}
body .portfolio-items .work-info-bg {
background-color: transparent !important;
}
body .portfolio-items .col .work-item.style-1:not([data-custom-content="on"]) .work-info,
body .portfolio-items .col .work-item.style-2:not([data-custom-content="on"]) .work-info {
opacity: 1 !important;
pointer-events: none;
}
body .portfolio-items .col .work-item.style-1:not([data-custom-content="on"]) .work-info .vert-center,
body .portfolio-items .col .work-item.style-2:not([data-custom-content="on"]) .work-info .vert-center {
position: static;
top: auto;
margin-top: 0;
height: 100%;
width: 100%;
transform: none;
-webkit-transform: none;
}
body .portfolio-items .col .work-item.style-1:not([data-custom-content="on"]) .work-info .vert-center a[data-fancybox],
body .portfolio-items .col .work-item.style-1:not([data-custom-content="on"]) .work-info .vert-center a.pretty_photo,
body .portfolio-items .col .work-item.style-1:not([data-custom-content="on"]) .work-info .vert-center a[rel^="prettyPhoto"],
body .portfolio-items .col .work-item.style-2:not([data-custom-content="on"]) .work-info .vert-center a[data-fancybox],
body .portfolio-items .col .work-item.style-2:not([data-custom-content="on"]) .work-info .vert-center a.pretty_photo,
body .portfolio-items .col .work-item.style-2:not([data-custom-content="on"]) .work-info .vert-center a[rel^="prettyPhoto"],
body .portfolio-items .col .work-item.style-2:not([data-custom-content="on"]) .work-info > a[data-fancybox],
body .portfolio-items .col .work-item.style-2:not([data-custom-content="on"]) .work-info > a.pretty_photo,
body .portfolio-items .col .work-item.style-2:not([data-custom-content="on"]) .work-info > a[rel^="prettyPhoto"] {
pointer-events: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 50;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
text-indent: 100%;
box-sizing: border-box;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
background-color: transparent !important;
box-shadow: none !important;
}
body .portfolio-items .col .work-item.style-1:not([data-custom-content="on"]) .work-info .vert-center a.default-link:not(.pretty_photo):not([rel^="prettyPhoto"]),
body .portfolio-items .col .work-item.style-2:not([data-custom-content="on"]) .work-info .vert-center a.default-link:not(.pretty_photo):not([rel^="prettyPhoto"]) {
display: none !important;
}
body .portfolio-items .col .work-item.style-2:not([data-custom-content="on"]) .work-info .vert-center h3,
body .portfolio-items .col .work-item.style-2:not([data-custom-content="on"]) .work-info .vert-center p {
display: none !important;
}
/* Portfolio overlay links — match site buttons (Trio, ink, 12px radius). */
body .portfolio-items .col .work-item .work-info a.default-link {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 500;
font-style: normal;
font-size: 1rem;
line-height: 1.2;
padding: 10px 18px;
margin: 5px;
border: 0;
border-radius: var(--radius-md);
background-color: var(--color-paper);
color: var(--color-ink);
text-decoration: none;
transition:
transform 0.48s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.48s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.48s cubic-bezier(0.4, 0, 0.2, 1),
color 0.48s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.48s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: 50% 50%;
}
body .portfolio-items .col .work-item .work-info a.default-link:hover,
body .portfolio-items .col .work-item .work-info a.default-link:focus-visible {
transform: rotate(-1deg) scale(1.025);
box-shadow: var(--shadow-soft);
background-color: var(--color-paper) !important;
color: var(--color-ink) !important;
font-weight: 500;
font-style: normal;
}
/*
* Portfolio ps 1 / 2: Salient uses 0.2s (and ease-out on .vert-center) so hover-in feels smooth
* but hover-out snaps. Match duration + easing on the base rules so fade and slide reverse gently.
*/
body .portfolio-items[data-ps="1"] .col .work-item .work-info,
body .portfolio-items[data-ps="2"] .col .work-item .work-info {
transition: opacity 0.48s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body .portfolio-items[data-ps="1"] .col .work-item .work-info .vert-center,
body .portfolio-items[data-ps="2"] .col .work-item .work-info .vert-center {
transition:
margin-top 0.48s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.48s cubic-bezier(0.4, 0, 0.2, 1),
top 0.48s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.48s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body .portfolio-items[data-ps="1"] .col .work-item:not([data-custom-content="on"]) .work-info .vert-center > *,
body .portfolio-items[data-ps="2"] .col .work-item:not([data-custom-content="on"]) .work-info .vert-center > * {
transition:
opacity 0.48s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.48s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.48s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body .portfolio-items[data-ps="1"] .col .work-item .work-info i,
body .portfolio-items[data-ps="2"] .col .work-item .work-info i {
transition: opacity 0.48s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.triogrotesk p {
font-family: var(--font-heading) !important;
font-size: 3rem !important;
line-height: 1 !important;
}
@media only screen and (max-width: 1000px) {
.introduction-text,
.introduction-text p,
.introduction-text h4 {
font-size: 1rem !important;
line-height: 1.333 !important;
}
.row .col .introduction-text h4 {
margin-bottom: 0.666rem !important;
}
}
blockquote {
font-family: var(--font-body);
font-weight: 700;
border-left: 1px solid rgba(25, 20, 20, 0.2);
padding-left: 30px;
}
strong {
font-weight: 700;
}
.light {
font-weight: 300;
}
::placeholder {
color: var(--color-ink-50);
}
.contactpageheading {
margin: 4rem 0 2rem 0 !important;
}
/* Salient row spacing utilities: standard width (default) + nav-mobile layout (<=1000px). */
.row-pad-nav-offset,
.row-pad-content-tight {
--row-pad-top: 6rem;
--row-pad-bottom: 6rem;
padding-top: var(--row-pad-top) !important;
padding-bottom: var(--row-pad-bottom) !important;
}
/* Standard: extra top space for floating main nav above content. */
.row-pad-nav-offset {
--row-pad-top: 11rem;
--row-pad-bottom: 6rem;
}
/* Standard: tighter section rhythm without nav offset. */
.row-pad-content-tight {
--row-pad-top: 6rem;
--row-pad-bottom: 6rem;
}
@media only screen and (max-width: 1000px) {
.row-pad-nav-offset {
--row-pad-top: 7rem;
--row-pad-bottom: 4rem;
}
.row-pad-content-tight {
--row-pad-top: 4rem;
--row-pad-bottom: 4rem;
}
}
/*
* Row-pad edge overrides (add to the same row as row-pad-nav-offset / row-pad-content-tight).
* Use when two padded rows sit back-to-back and the gap doubles (e.g. banner + equal-frame-cards).
*/
.row-pad-flush-top {
--row-pad-top: 0;
padding-top: 0 !important;
}
.row-pad-flush-bottom {
--row-pad-bottom: 0;
padding-bottom: 0 !important;
}
/* Fundraise: banner row (row-pad-content-tight) immediately above equal-frame-cards. */
.row-pad-content-tight:has(+ .equal-frame-cards.row-pad-content-tight) {
--row-pad-bottom: 2rem;
padding-bottom: 2rem !important;
}
.row-pad-content-tight + .equal-frame-cards.row-pad-content-tight {
--row-pad-top: 0;
padding-top: 0 !important;
}
/* Left/right inset spacing (6rem desktop, 1rem <=1000px). */
/* (No desktop override needed here; spacing is applied to child wrapper.) */
/* Apply horizontal inset to row content, not the background-bearing row wrapper. */
.row-pad-frame-and-photo > .row_col_wrap_12 {
padding-top: 10rem ;
padding-bottom: 10rem ;
padding-left: 6rem ;
padding-right: 6rem ;
}
/* Variation: same spacing, but with negative desktop top offset. */
.row-pad-frame-and-photo--top-offset > .row_col_wrap_12 {
padding-top: -2rem ;
padding-bottom: 10rem ;
padding-left: 6rem ;
padding-right: 6rem ;
}
@media only screen and (max-width: 1000px) {
.row-pad-frame-and-photo > .row_col_wrap_12 {
padding-top: 4rem ;
padding-bottom: 4rem ;
padding-left: 1rem ;
padding-right: 1rem ;
}
.row-pad-frame-and-photo--top-offset > .row_col_wrap_12 {
padding-top: 2rem ;
padding-bottom: 3rem ;
padding-left: 1rem ;
padding-right: 1rem ;
}
}
@media only screen and (min-width: 1px) and (max-width: 1000px) {
.contactpageheading {
margin: 2rem 0 0rem 0 !important;
}
}
.tagline {
font-family: var(--font-heading);
font-weight: 500;
font-style: normal;
font-size: var(--tagline-font-size);
line-height: 1.2;
letter-spacing: -2px;
}
@media only screen and (max-width: 1000px) {
.hero-gradient-row .tagline {
display: block;
width: max-content;
max-width: min(92vw, 100%);
margin-left: auto;
margin-right: auto;
text-wrap: normal;
}
}
/* Buttons — Unified System */
/* Base Styles For All Buttons */
#submitButton,
.nectar-button,
.nectar-post-grid-wrap .load-more,
#ajax-content-wrap .nectar-cta .link_wrap a,
#header-outer .nectar-cta .link_wrap a {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 500;
font-style: normal;
padding: 12px 24px;
border-radius: var(--radius-md);
border: 0;
text-decoration: none;
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
background-color 0.3s ease,
color 0.3s ease,
opacity 0.3s ease;
transform-origin: 50% 50% !important;
}
body[data-form-submit=regular] .container-wrap button[type=submit], body[data-form-submit=regular] .container-wrap input[type=submit] {
padding: 12px 24px !important;
font-size: 1.5rem;
line-height: 1.5;
}
/* Ensure CTA Wrapper Behaves Properly */
#ajax-content-wrap .nectar-cta .link_wrap,
#header-outer .nectar-cta .link_wrap {
border-radius: var(--radius-md) !important;
}
/* Colour Variants Only */
/* Primary Buttons */
#submitButton,
.nectar-button,
#ajax-content-wrap .nectar-cta .link_wrap a,
#header-outer .nectar-cta .link_wrap a {
background-color: var(--color-ink);
color: var(--color-paper);
}
/* Load More (Inverted) */
.nectar-post-grid-wrap .load-more {
background-color: var(--color-paper);
color: var(--color-ink);
}
/* Shared Hover Behaviour */
.nectar-button:hover,
#ajax-content-wrap .nectar-cta .link_wrap:hover a,
#header-outer .nectar-cta .link_wrap:hover a,
#submitButton:hover,
button[type=submit]:hover {
transform: rotate(-1deg) scale(1.025);
box-shadow: var(--shadow-soft);
background-color: var(--color-ink) !important;
}
/* Keep Load-More Colour Stable On Hover */
.nectar-post-grid-wrap[data-load-more-color=black] .load-more:hover,
.nectar-post-grid-wrap .load-more:hover {
transform: rotate(-1deg) scale(1.025);
box-shadow: var(--shadow-soft);
background-color: var(--color-white);
color: var(--color-ink);
}
body[data-form-submit=regular] button[type=submit]:hover, body[data-form-submit=regular] input[type=submit]:hover {
opacity: 1.0 !important;
}
/* Mailchimp submit: match Donate button styling. */
:is(
.mc4wp-form,
form[action*="list-manage.com"],
#mc_embed_signup
) :is(input[type="submit"], button[type="submit"], #mc-embedded-subscribe) {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-family: var(--font-heading) !important;
font-weight: 500 !important;
font-style: normal !important;
font-size: var(--button-font-size-sm) !important;
line-height: 1.2 !important;
padding: var(--button-padding-sm) !important;
border-radius: var(--radius-md) !important;
border: 0 !important;
text-decoration: none !important;
background-color: var(--color-ink) !important;
color: var(--color-paper) !important;
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
background-color 0.3s ease,
color 0.3s ease,
opacity 0.3s ease !important;
transform-origin: 50% 50% !important;
}
/* Reusable small button size utility. */
:is(#submitButton, .nectar-button, button[type="submit"], input[type="submit"]).button-size-sm {
font-size: var(--button-font-size-sm) !important;
line-height: 1.2 !important;
padding: var(--button-padding-sm) !important;
}
:is(
.mc4wp-form,
form[action*="list-manage.com"],
#mc_embed_signup
) :is(input[type="submit"], button[type="submit"], #mc-embedded-subscribe):hover {
transform: rotate(-1deg) scale(1.025);
box-shadow: var(--shadow-soft);
background-color: var(--color-ink) !important;
}
/* Mailchimp fields: match Donate "Your details" form states. */
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup) :is(.mc-field-group, .form-field) {
display: block;
width: 100%;
}
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup) .mc-field-group:last-of-type {
margin-bottom: 1rem !important;
}
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup) label {
font-family: var(--font-body) !important;
font-weight: 400 !important;
font-style: normal !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 1.125rem !important;
line-height: 1.333 !important;
margin-bottom: 0.5rem !important;
display: block;
}
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup)
:is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select) {
width: 100%;
box-sizing: border-box;
font-family: var(--font-body) !important;
font-weight: 400 !important;
font-style: normal !important;
border: 1px solid #191414;
border-radius: 0;
background-color: var(--color-paper) !important;
color: var(--color-ink);
padding: 0.75rem 0.9rem;
margin-bottom: 1rem !important;
transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup)
:is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select):hover {
border-color: #191414;
}
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup)
:is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select):focus {
outline: none;
border-color: #191414;
background: var(--color-paper) !important;
}
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup)
:is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select)::placeholder {
color: var(--color-ink-50);
}
/* Validation + response states (Mailchimp embeds + MC4WP). */
/* Errored fields: red border + red text, mirroring the Donorfy treatment. */
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup)
:is(
input.mce_inline_error,
textarea.mce_inline_error,
select.mce_inline_error,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"]
) {
border-color: rgba(255, 49, 49, 1) !important;
background-color: var(--color-paper) !important;
color: rgba(255, 49, 49, 1) !important;
box-shadow: none !important;
}
/* Errored placeholder text, matching Donorfy's muted-red placeholder. */
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup)
:is(
input.mce_inline_error,
textarea.mce_inline_error,
input[aria-invalid="true"],
textarea[aria-invalid="true"]
)::placeholder {
color: rgba(255, 49, 49, 0.5) !important;
opacity: 1;
}
/* Inline error message label sits below the field with the same spacing as Donorfy. */
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup) label.mce_inline_error {
display: inline-block;
margin-top: 0.75rem;
color: rgba(255, 49, 49, 1) !important;
background: none !important;
border: 0 !important;
padding: 0 !important;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.4;
}
/*
* Native constraint validation after user interaction.
*
* `:user-invalid` covers format violations (e.g. malformed email) reliably on
* blur, but most browsers don't fire it for required+empty fields until the
* user submits the form. The companion `.is-user-invalid` class is applied by
* signup-help-fallback.js on blur/submit so empty required fields (First Name,
* Last Name, etc.) match the email field's red state cross-browser.
*/
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup, .mailchimp-form form)
:is(
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea
):is(:not(:focus):user-invalid, .is-user-invalid:not(:focus)) {
border-color: rgba(255, 49, 49, 1) !important;
background-color: var(--color-paper) !important;
color: rgba(255, 49, 49, 1) !important;
box-shadow: none !important;
}
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup, .mailchimp-form form)
:is(
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea
):is(:not(:focus):user-invalid, .is-user-invalid:not(:focus))::placeholder {
color: rgba(255, 49, 49, 0.5) !important;
opacity: 1;
}
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup, .mailchimp-form form)
select:is(:not(:focus):user-invalid, .is-user-invalid:not(:focus)) {
border-color: rgba(255, 49, 49, 1) !important;
background-color: var(--color-paper) !important;
color: rgba(255, 49, 49, 1) !important;
box-shadow: none !important;
}
:is(#CreditCardForm, #DirectDebitForm, .donorfy-form)
:is(
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea
):is(:not(:focus):user-invalid, .is-user-invalid:not(:focus)) {
border-color: rgba(255, 49, 49, 1) !important;
background: rgba(255, 49, 49, 0.15) !important;
color: rgba(255, 49, 49, 1) !important;
box-shadow: none !important;
}
:is(#CreditCardForm, #DirectDebitForm, .donorfy-form)
:is(
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea
):is(:not(:focus):user-invalid, .is-user-invalid:not(:focus))::placeholder {
color: rgba(255, 49, 49, 0.5) !important;
opacity: 1;
}
:is(#CreditCardForm, #DirectDebitForm, .donorfy-form)
select:is(:not(:focus):user-invalid, .is-user-invalid:not(:focus)) {
border-color: rgba(255, 49, 49, 1) !important;
background: rgba(255, 49, 49, 0.15) !important;
color: rgba(255, 49, 49, 1) !important;
box-shadow: none !important;
}
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup)
:is(#mce-error-response, .mc4wp-response .mc4wp-error) {
background: rgba(255, 49, 49, 0.15);
border: 1px solid rgba(255, 49, 49, 1) !important;
color: rgba(255, 49, 49, 1);
padding: 12px 16px;
margin-top: 0.75rem;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.4;
text-align: center;
}
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup)
:is(#mce-success-response, .mc4wp-response .mc4wp-success) {
background: rgba(133, 208, 249, 0.2);
border: 1px solid var(--color-brand-blue-100);
color: var(--color-ink);
padding: 12px 16px;
margin-top: 0.75rem;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.4;
text-align: center;
}
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup)
:is(input[type="submit"], button[type="submit"], #mc-embedded-subscribe):disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/*
* Ninja Forms — match Mailchimp / MC4WP + Donorfy “Your details” fields
* (Get in Touch enquiries form and any other front-end NF forms).
*/
#ajax-content-wrap .nf-form-cont .nf-field-container {
display: block;
width: 100%;
margin-bottom: 1rem !important;
}
#ajax-content-wrap .nf-form-cont .nf-field-container.submit-container {
margin-bottom: 0 !important;
}
#ajax-content-wrap .nf-form-cont .label-above .nf-field-label {
margin-bottom: 0 !important;
}
#ajax-content-wrap .nf-form-cont .nf-field-label label,
#ajax-content-wrap .nf-form-cont .nf-field-label .nf-label-span {
font-family: var(--font-body) !important;
font-weight: 400 !important;
font-style: normal !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 1.125rem !important;
line-height: 1.333 !important;
margin-bottom: 0.5rem !important;
display: block;
color: var(--color-ink);
}
#ajax-content-wrap .nf-form-cont .nf-field-element
:is(
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="date"],
textarea,
select
) {
width: 100% !important;
max-width: 100%;
box-sizing: border-box;
font-family: var(--font-body) !important;
font-weight: 400 !important;
font-style: normal !important;
border: 1px solid #191414;
border-radius: 0;
background-color: var(--color-paper) !important;
color: var(--color-ink);
padding: 0.75rem 0.9rem;
margin: 0 0 0 0 !important;
transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
#ajax-content-wrap .nf-form-cont .nf-field-element textarea {
min-height: 10rem;
height: 10rem;
resize: vertical;
}
#ajax-content-wrap .nf-form-cont .nf-field-element
:is(
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="date"],
textarea,
select
):hover {
border-color: #191414;
}
#ajax-content-wrap .nf-form-cont .nf-field-element
:is(
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="date"],
textarea,
select
):focus {
outline: none;
border-color: #191414;
background: var(--color-paper) !important;
}
#ajax-content-wrap .nf-form-cont .nf-field-element
:is(
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="date"],
textarea,
select
)::placeholder {
color: var(--color-ink-50);
}
#ajax-content-wrap .nf-form-cont .nf-error .ninja-forms-field,
#ajax-content-wrap .nf-form-cont .nf-error.listimage-wrap .nf-field-element ul,
#ajax-content-wrap .nf-form-cont .nf-field-element .nf-element[aria-invalid="true"] {
border-color: rgba(255, 49, 49, 1) !important;
background-color: var(--color-paper) !important;
}
#ajax-content-wrap .nf-form-cont .nf-field-element input[type="email"].nf-element:not(:focus):user-invalid {
border-color: rgba(255, 49, 49, 1) !important;
background-color: var(--color-paper) !important;
}
#ajax-content-wrap .nf-form-cont .nf-error-msg {
color: rgba(255, 49, 49, 1);
}
#ajax-content-wrap .nf-form-cont .nf-form-fields-required {
display: none !important;
}
#ajax-content-wrap .nf-form-cont .ninja-forms-req-symbol {
color: inherit;
margin-left: -0.25em;
}
#ajax-content-wrap .nf-form-cont .nf-error-wrap .nf-error-msg {
display: block;
margin-top: 0.35rem;
font-family: var(--font-body);
font-size: 0.9375rem;
line-height: 1.35;
}
#ajax-content-wrap .nf-form-cont .nf-form-errors .nf-error-msg,
#ajax-content-wrap .nf-form-cont .nf-field-submission-error {
background: rgba(255, 49, 49, 0.15);
border: 1px solid rgba(255, 49, 49, 1) !important;
color: rgba(255, 49, 49, 1);
padding: 12px 16px;
margin-top: 0.75rem;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.4;
text-align: center;
}
#ajax-content-wrap .nf-form-cont .nf-response-msg {
background: rgba(242, 129, 196, 0.15);
border: 1px solid var(--color-brand-pink-100) !important;
color: var(--color-ink);
padding: 2rem 2rem 1rem 2rem;
margin-top: 2rem;
font-family: var(--font-body);
line-height: 1.4;
text-align: left;
}
#ajax-content-wrap .nf-form-cont .nf-field-description p {
font-family: var(--font-body);
font-size: 0.9375rem;
line-height: 1.4;
color: var(--color-ink-50);
}
#ajax-content-wrap .nf-form-cont .submit-container :is(input.nf-element[type="submit"], button.nf-element) {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-family: var(--font-heading) !important;
font-weight: 500 !important;
font-style: normal !important;
font-size: var(--button-font-size-sm) !important;
line-height: 1.2 !important;
padding: var(--button-padding-sm) !important;
border-radius: var(--radius-md) !important;
border: 0 !important;
text-decoration: none !important;
background-color: var(--color-ink) !important;
color: var(--color-paper) !important;
width: auto !important;
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
background-color 0.3s ease,
color 0.3s ease,
opacity 0.3s ease !important;
transform-origin: 50% 50% !important;
}
#ajax-content-wrap .nf-form-cont .submit-container :is(input.nf-element[type="submit"], button.nf-element):hover {
transform: rotate(-1deg) scale(1.025);
box-shadow: var(--shadow-soft);
background-color: var(--color-ink) !important;
}
#ajax-content-wrap .nf-form-cont .submit-container :is(input.nf-element[type="submit"], button.nf-element):disabled {
opacity: 1;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
#ajax-content-wrap .nf-form-cont .submit-container :is(input.nf-element[type="submit"], button.nf-element):active {
transform: rotate(-1deg) scale(1.025);
box-shadow: var(--shadow-soft);
}
/* Mobile button sizing (exclude main nav button styles). */
@media only screen and (max-width: 1000px) {
#submitButton,
.nectar-button,
.nectar-post-grid-wrap .load-more,
#ajax-content-wrap .nectar-cta .link_wrap a,
body[data-form-submit=regular] .container-wrap button[type=submit],
body[data-form-submit=regular] .container-wrap input[type=submit],
:is(.mc4wp-form, form[action*="list-manage.com"], #mc_embed_signup) :is(input[type="submit"], button[type="submit"], #mc-embedded-subscribe),
#ajax-content-wrap .nf-form-cont .submit-container :is(input.nf-element[type="submit"], button.nf-element) {
font-size: 1.125rem !important;
line-height: 1.2 !important;
padding: 10px 16px !important;
}
}
/* Show manual signup help only when form fallback logic enables it. */
.signup-help {
display: none;
}
.signup-help.is-visible {
display: block;
margin-top: 1.125rem;
}
/* Active (Press) State */
.nectar-button:active,
.nectar-post-grid-wrap .load-more:active,
#ajax-content-wrap .nectar-cta .link_wrap:active a,
#header-outer .nectar-cta .link_wrap:active a,
#submitButton:active {
transform: rotate(-1deg) scale(1.025);
box-shadow: var(--shadow-soft);
}
/* Force Radius Consistency */
body[data-button-style*=slightly_rounded]
.nectar-post-grid-wrap .load-more,
body[data-button-style*=slightly_rounded]
.nectar-post-grid-wrap .load-more:before {
border-radius: var(--radius-md);
}
/* Links */
:is(.wpb_text_column, p, h6, .nectar-fancy-box .inner, .nectar-fancy-ul, .nectar_team_member_overlay .team-desc, .wp-block-quote, .wp-block-list) a,
.main-content > .row > :is(h1, h2, h3, h4, h5, h6) a {
position: relative;
text-decoration: none;
color: inherit;
}
/* h6 copy is block-level; inline links need inline-block so the ::after underline isn't clipped. */
.wpb_text_column h6 a,
.nectar-fancy-box .inner h6 a {
display: inline-block;
}
:is(.wpb_text_column, p, h6, .nectar-fancy-box .inner, .nectar-fancy-ul, .nectar_team_member_overlay .team-desc, .wp-block-quote, .wp-block-list) a::after,
.main-content > .row > :is(h1, h2, h3, h4, h5, h6) a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background: currentColor;
opacity: 0.2;
transform: translateY(0);
transition: transform 0.3s ease, opacity 0.3s ease;
}
:is(.wpb_text_column, p, h6, .nectar-fancy-box .inner, .nectar-fancy-ul, .nectar_team_member_overlay .team-desc, .wp-block-quote, .wp-block-list) a:hover::after,
.main-content > .row > :is(h1, h2, h3, h4, h5, h6) a:hover::after {
transform: translateY(3px);
opacity: 0;
}
.nectar-post-grid-filters {
display: none;
}
.nectar-post-grid-filters[data-sortable="yes"] {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
}
.nectar-post-grid-filters[data-sortable="yes"][data-align="default"] {
width: 100%;
justify-content: center;
}
.nectar-post-grid-filters a {
--filter-bg: var(--color-ink);
--filter-bg-hover: var(--color-paper);
--filter-bg-active: var(--color-paper);
--filter-color-active: var(--color-ink);
--filter-shadow: 0 0 12px var(--color-ink-25);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.75rem;
margin: 10px 15px;
border-radius: var(--radius-sm);
font-family: "Trio Grotesk", sans-serif;
letter-spacing: 0.05em;
font-size: 0.875rem;
font-weight: 500;
font-style: normal;
text-transform: uppercase;
text-decoration: none;
color: var(--color-paper);
background-color: var(--filter-bg);
transition: transform 0.35s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.nectar-post-grid-filters a:after {
display: none;
}
.nectar-post-grid-filters a:hover {
transform: rotate(-1deg) scale(1.025);
background-color: var(--filter-bg-hover);
color: var(--color-ink);
box-shadow: var(--filter-shadow);
}
.nectar-post-grid-filters a.active,
.nectar-post-grid-filters .active a {
background-color: var(--filter-bg-active);
color: var(--filter-color-active);
box-shadow: var(--filter-shadow);
}
/* Keep "All" filter active as primary black button */
.nectar-post-grid-filters li.all.active a,
.nectar-post-grid-filters li.all a.active,
.nectar-post-grid-filters a.active[data-filter="all"],
.nectar-post-grid-filters a.active[data-filter="*"] {
background-color: var(--color-ink);
color: var(--color-paper);
}
/* Filter button colors coordinated with category labels */
.nectar-post-grid-filters li.news a,
.nectar-post-grid-filters a[data-filter*="news"],
.nectar-post-grid-filters a[href*="category/news"] {
--filter-bg-hover: var(--color-brand-orange-50);
--filter-bg-active: var(--color-brand-orange-50);
}
.nectar-post-grid-filters li.fundraising a,
.nectar-post-grid-filters a[data-filter*="fundraising"],
.nectar-post-grid-filters a[href*="category/fundraising"] {
--filter-bg-hover: var(--color-brand-pink-50);
--filter-bg-active: var(--color-brand-pink-50);
}
.nectar-post-grid-filters li.events a,
.nectar-post-grid-filters a[data-filter*="events"],
.nectar-post-grid-filters a[href*="category/events"] {
--filter-bg-hover: var(--color-brand-purple-50);
--filter-bg-active: var(--color-brand-purple-50);
}
.nectar-post-grid-filters li.stories a,
.nectar-post-grid-filters a[data-filter*="stories"],
.nectar-post-grid-filters a[href*="category/stories"] {
--filter-bg-hover: var(--color-brand-blue-50);
--filter-bg-active: var(--color-brand-blue-50);
}
.nectar-post-grid-filters li.uncategorized a,
.nectar-post-grid-filters a[data-filter*="uncategorized"],
.nectar-post-grid-filters a[href*="category/uncategorized"] {
--filter-bg-hover: var(--color-brand-black-15);
--filter-bg-active: var(--color-brand-black-15);
}
.wpb_row:not(.full-width-content) .vc_col-sm-12 .nectar-post-grid-filters[data-sortable=yes] {
margin-bottom: 40px;
}
@media only screen and (max-width: 1000px) {
.nectar-post-grid-filters {
padding: 20px 0;
}
.nectar-post-grid-filters[data-sortable="yes"] {
display: block;
width: 100%;
max-width: none;
text-align: center;
}
.nectar-post-grid-filters div:not(.n-sticky) {
margin-top: 0.75rem;
}
.nectar-post-grid-wrap .nectar-post-grid-filters h4,
.nectar-post-grid-filters h4 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.875rem 0.5rem 2rem !important;
border: 0 !important;
border-radius: var(--radius-sm);
background-color: var(--color-ink);
color: var(--color-paper);
font-family: "Trio Grotesk", sans-serif;
letter-spacing: 0.05em;
/* Override Salient global button-type selector that sets 1.5rem */
font-size: 0.875rem !important;
font-weight: 500;
font-style: normal;
text-transform: uppercase;
line-height: 1;
transition: transform 0.35s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.nectar-post-grid-filters h4:hover {
transform: rotate(-1deg) scale(1.025);
background-color: var(--color-ink);
color: var(--color-paper);
box-shadow: 0 0 12px var(--color-ink-25);
}
.nectar-post-grid-filters h4.visible {
background-color: var(--color-ink);
color: var(--color-paper);
box-shadow: 0 0 12px var(--color-ink-25);
}
.nectar-post-grid-filters h4:before {
left: 0.95rem;
margin-left: 0;
background-color: currentColor;
}
.nectar-post-grid-filters h4:after {
left: 0.65rem;
background-color: currentColor;
}
.nectar-post-grid-filters div.visible {
display: flex !important;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.nectar-post-grid-filters div.visible a {
display: inline-flex;
width: fit-content;
margin: 0 !important;
text-align: center;
}
}
/* Nav Underlines */
#header-outer[data-lhe="animated_underline"] #top nav > ul > li:not([class*="button_"]) > a .menu-title-text,
#header-outer[data-lhe="animated_underline"] #top nav .sf-menu li ul li > a .menu-title-text,
#header-secondary-outer[data-lhe="animated_underline"] nav > .sf-menu > li > a .menu-title-text,
#header-outer .mobile-header li:not([class*="button_"]) > a .menu-title-text {
position: relative;
}
#header-outer[data-lhe="animated_underline"] #top nav > ul > li:not([class*="button_"]) > a .menu-title-text:after,
#header-outer[data-lhe="animated_underline"] #top nav .sf-menu li ul li > a .menu-title-text:after,
#header-secondary-outer[data-lhe="animated_underline"] nav > .sf-menu > li > a .menu-title-text:after,
#header-outer .mobile-header li:not([class*="button_"]) > a .menu-title-text:after {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 100%;
height: 1px !important;
background: currentColor;
backface-visibility: hidden;
border-top-width: 0px;
opacity: 0;
transform: translateY(3px);
transition: transform 0.3s ease, opacity 0.3s ease;
}
#header-outer[data-lhe="animated_underline"] #top nav > ul > li:not([class*="button_"]) > a:hover .menu-title-text:after,
#header-outer[data-lhe="animated_underline"] #top nav > ul > li:not([class*="button_"]).sfHover > a .menu-title-text:after,
#header-outer[data-lhe="animated_underline"] #top nav .sf-menu li ul li > a:hover .menu-title-text:after,
#header-outer[data-lhe="animated_underline"] #top nav .sf-menu li ul li.sfHover > a .menu-title-text:after,
#header-secondary-outer[data-lhe="animated_underline"] nav > .sf-menu > li > a:hover .menu-title-text:after,
#header-secondary-outer[data-lhe="animated_underline"] nav > .sf-menu > li > a:focus .menu-title-text:after,
#header-outer .mobile-header li:not([class*="button_"]) > a:hover .menu-title-text:after {
opacity: 0.2;
transform: translateY(0);
}
#header-outer[data-lhe="animated_underline"] .sf-menu .current_page_ancestor:not([class*="button_"]) > a .menu-title-text:after,
#header-outer[data-lhe="animated_underline"] .sf-menu .current-menu-ancestor:not([class*="button_"]) > a .menu-title-text:after,
#header-outer[data-lhe="animated_underline"] .sf-menu .current-menu-item:not([class*="button_"]) > a .menu-title-text:after,
#header-outer[data-lhe="animated_underline"] .sf-menu .current_page_item:not([class*="button_"]) > a .menu-title-text:after,
#header-outer[data-lhe="animated_underline"] .sf-menu .current_page_parent:not([class*="button_"]) > a .menu-title-text:after,
#header-outer[data-lhe="animated_underline"] .buttons .current-menu-item:not([class*="button_"]) > a .menu-title-text:after,
#header-outer[data-lhe="animated_underline"] .buttons .current-menu-ancestor:not([class*="button_"]) > a .menu-title-text:after {
opacity: 0.2;
transform: translateY(0);
}
/* Header Nav */
#header-outer[data-box-shadow="small"] {
box-shadow: var(--shadow-soft);
}
#header-outer[data-lhe="animated_underline"] #top nav > ul > li:not([class*="button_"]) > a .menu-title-text:after {
border-color: rgba(25,20,20,0.2);
}
/* Ensure Dropdown Underline Fade Timing Matches Top-Level Nav Exactly */
#header-outer[data-lhe="animated_underline"] #top nav .sf-menu li ul li > a .menu-title-text:after {
transition: transform 0.3s ease, opacity 0.3s ease !important;
}
/* Header dropdown spacing under main nav */
#header-outer #top nav > ul > li > ul,
#header-outer #top nav > ul > li > ul.sub-menu {
margin-top: 0.5rem;
box-shadow: var(--shadow-soft);
}
.sf-menu > li ul {
width: 15em;
padding: 0.75rem 1rem;
}
/* Preserve hover continuity across the added gap */
#header-outer #top nav > ul > li > ul::before,
#header-outer #top nav > ul > li > ul.sub-menu::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -1rem;
height: 1rem;
}
.sf-menu > li > a > .sf-sub-indicator i {
color: currentColor !important;
}
.sf-menu > li > a:hover > .sf-sub-indicator i,
.sf-menu > li > a:active > .sf-sub-indicator i,
.sf-menu > .sfHover > a > .sf-sub-indicator i {
color: rgba(25,20,20,1.0) !important;
}
#top nav ul li a,
body[data-header-color=light] .mobile-header,
body[data-header-color=light] .span_9 > .slide-out-widget-area-toggle a .label {
color: rgba(25,20,20,1.0);
}
#header-outer #top nav .sf-menu li ul li > a,
#header-outer #top nav .sf-menu li ul li > a .menu-title-text {
color: rgba(25,20,20,1.0);
}
body #header-outer,
#header-outer #top {
border-radius: var(--radius-md);
}
#header-outer:not([data-format=centered-menu-under-logo]):not([data-format=centered-menu-bottom-bar]) #top .slide-out-widget-area-toggle[data-custom-color=true] a:before,
#header-outer:not([data-format=centered-menu-under-logo]):not([data-format=centered-menu-bottom-bar]) #top nav > ul > li[class*=button_] > a:before {
background-color: var(--color-ink) !important;
transition: background-color 0.3s ease;
border-radius: var(--radius-sm) !important;
}
#header-outer[data-header-button_style=default] #top nav > ul > li[class*=button_solid_color] > a:hover:before,
#header-outer[data-header-button_style=default].transparent #top nav > ul > li[class*=button_solid_color] > a:hover:before {
background-color: rgba(25, 20, 20, 0.2) !important;
opacity: .5 !important;
}
#header-outer.dark-text #top nav > ul > li[class*=button_solid_color] > a:hover,
#header-outer[data-lhe=animated_underline] #top nav > ul > li[class*=button_solid_color] > a:hover,
#header-outer[data-lhe=default] #top nav .sf-menu .current_page_item[class*=button_solid_color] > a:hover,
#top nav > ul > li[class*=button_solid_color] > a:hover,
body #header-outer.transparent #top nav > ul > li[class*=button_solid_color] > a:hover {
color: rgba(25, 20, 20, 1.0) !important;
}
#header-outer[data-lhe="animated_underline"] #top nav > ul > li[class*="button_solid_color"] > a {
font-family: "Trio Grotesk", sans-serif;
letter-spacing: 0.05em;
font-size: 0.875rem;
font-weight: 500;
font-style: normal;
text-transform: uppercase;
}
#top nav > ul > li[class*="button_solid_color"] > a:before,
#header-outer.transparent #top nav > ul > li[class*="button_solid_color"] > a:before,
#header-outer #top .slide-out-widget-area-toggle[data-custom-color="true"] a:before {
height: 1.5rem;
}
#header-outer[data-full-width=true] header > .container,
body[data-slide-out-widget-area-style=simple] #header-outer[data-full-width=true] #mobile-menu {
padding: 0 0 0 28px;
}
@media only screen and (min-width: 1px) and (max-width: 1000px) {
body #header-outer {
margin-bottom: 0;
padding: 18px 0;
}
}
@media only screen and (max-width: 1230px) {
body #header-outer[data-full-width=true] header > .container,
body #header-secondary-outer[data-full-width=true] > .container,
body[data-slide-out-widget-area-style=simple] #header-outer[data-full-width=true] #mobile-menu {
max-width: 100%;
padding: 0 18px;
}
}
body[data-slide-out-widget-area-style=simple] #header-outer[data-full-width=true] #mobile-menu {
padding: 0 0 0 0px;
}
body[data-slide-out-widget-area-style=simple] #header-outer[data-full-width=true] #mobile-menu {
margin-top: 1rem;
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
}
body[data-slide-out-widget-area-style=simple] #header-outer[data-full-width=true] #mobile-menu:before {
margin-left: 0;
left: 0;
width: 100%;
border-radius: var(--radius-md);
box-shadow: none;
}
body[data-slide-out-widget-area-style=simple] #header-outer[data-full-width=true] #mobile-menu .menu-items-wrap[data-has-secondary-text=false] > ul:first-child {
padding-top: 0.5rem !important;
padding-bottom: 1.5rem !important;
}
body[data-slide-out-widget-area-style=simple] #header-outer[data-full-width=true] #mobile-menu .menu-items-wrap > ul:first-child > li:first-child:before {
display: none !important;
content: none !important;
}
#mobile-menu .menu-items-wrap ul:not(.nectar_widget) > li:before {
background-color: rgba(25, 20, 20, 0.2);
}
#mobile-menu .menu-items-wrap > ul:last-child > li[class*="button_solid_color"]:last-child:after,
#mobile-menu .menu-items-wrap > ul:last-child > li[class*="button_solid_color"]:after,
#mobile-menu .menu-items-wrap > ul:last-child > li:last-child:after {
display: none !important;
content: none !important;
}
#mobile-menu .menu-items-wrap > ul:last-child > li[class*="button_solid_color"] > a,
#mobile-menu .menu-items-wrap > ul:last-child > li:last-child > a {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
padding: 0.75rem 0rem !important;
border-radius: var(--radius-sm);
background-color: var(--color-ink);
color: var(--color-paper) !important;
font-family: "Trio Grotesk", sans-serif;
letter-spacing: 0.05em;
font-size: 0.875rem;
font-weight: 500;
font-style: normal;
text-transform: uppercase;
}
#mobile-menu .menu-items-wrap > ul:last-child > li[class*="button_solid_color"],
#mobile-menu .menu-items-wrap > ul:last-child > li:last-child {
padding-top: 1.5rem;
}
#mobile-menu .menu-items-wrap > ul:last-child > li[class*="button_solid_color"] > a:hover,
#mobile-menu .menu-items-wrap > ul:last-child > li:last-child > a:hover {
background-color: rgba(25, 20, 20, 0.2);
color: rgba(25,20,20,1.0) !important;
}
#mobile-menu .menu-items-wrap ul li a,
#mobile-menu .menu-items-wrap ul li a .menu-title-text,
#mobile-menu .menu-items-wrap ul li a .sf-sub-indicator i {
color: rgba(25,20,20,1.0) !important;
}
#header-outer #mobile-menu a > .sf-sub-indicator i {
font-size: 24px;
}
#header-outer #mobile-menu a > .sf-sub-indicator {
padding: 10px 0 5px 20px;
}
.slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:after,
.slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:before,
.slide-out-widget-area-toggle.mobile-icon .lines-button:after {
background-color: var(--color-ink) !important;
}
.slide-out-widget-area-toggle.mobile-icon {
--mobile-icon-scale: 1.5;
--mobile-icon-final-stroke: 4px;
}
.slide-out-widget-area-toggle.mobile-icon .lines-button:after,
.slide-out-widget-area-toggle.mobile-icon .lines:after,
.slide-out-widget-area-toggle.mobile-icon .lines:before {
height: calc(var(--mobile-icon-final-stroke) / var(--mobile-icon-scale)) !important;
border-radius: 1px !important;
}
.slide-out-widget-area-toggle.mobile-icon a > span {
transform: scale(var(--mobile-icon-scale));
transform-origin: right center;
}
@media only screen and (min-width: 1px) and (max-width: 1230px) {
#header-outer .slide-out-widget-area-toggle.mobile-icon .lines:after {
top: -7px;
}
body #header-outer .slide-out-widget-area-toggle.mobile-icon .lines:before {
top: 7px;
}
}
/* Keep mobile-nav hamburger colors consistent up to the custom 1230px breakpoint. */
@media only screen and (min-width: 1000px) and (max-width: 1230px) {
/* Force Salient's mobile nav mode in the custom breakpoint range. */
#header-outer #top nav,
#header-outer #top nav > ul {
display: none !important;
}
#top #mobile-cart-link,
#top .span_9 > .slide-out-widget-area-toggle,
#top .mobile-search {
display: inline-block !important;
}
#top .col.span_9 {
min-height: 0;
width: auto !important;
position: absolute !important;
right: 0;
top: 0;
z-index: 2000;
height: 100%;
}
body #top .span_9 > .slide-out-widget-area-toggle.mobile-icon a:hover .lines:after,
body #top .span_9 > .slide-out-widget-area-toggle.mobile-icon a:hover .lines-button:after,
body #top .span_9 > .slide-out-widget-area-toggle.mobile-icon a:hover .lines:before {
background-color: var(--color-ink) !important;
}
/* Keep mobile menu text scale consistent with <=999px menu sizing. */
#header-outer #mobile-menu ul li > a,
#mobile-menu .menu-items-wrap ul li a,
#mobile-menu .menu-items-wrap ul li a .menu-title-text {
font-size: 1.125rem !important;
line-height: 1.25 !important;
}
}
#header-outer .slide-out-widget-area-toggle.mobile-icon .lines-button.close .lines:before {
transform: translateY(-7px) rotateZ(-45deg) !important;
}
#header-outer .slide-out-widget-area-toggle.mobile-icon .lines-button.close .lines:after {
transform: translateY(7px) rotateZ(45deg) !important;
}
#header-outer.dark-text #top nav > ul > li[class*=button_solid_color] > a,
#header-outer[data-lhe=animated_underline] #top nav > ul > li[class*=button_solid_color] > a,
#header-outer[data-lhe=default] #top nav .sf-menu .current_page_item[class*=button_solid_color] > a,
#top nav > ul > li[class*=button_solid_color] > a,
body #header-outer.transparent #top nav > ul > li[class*=button_solid_color] > a {
padding-left: 12px;
padding-right: 12px;
}
/* Footer */
#footer-outer #footer-widgets .col p {
font-size: 1.125rem;
line-height: 1.5;
}
#footer-outer .widget {
margin-bottom: 1.5rem;
}
#footer-outer #copyright a:hover:not(.nectar-button) {
color: inherit;
}
#footer-outer .row {
padding: 4rem 0 0 0;
}
.widget_media_image {
bottom: 0;
right: 0;
}
@media only screen and (min-width: 1px) and (max-width: 1000px) {
#footer-outer #footer-widgets .col p {
font-size: 1rem;
line-height: 1.5;
}
#footer-outer #footer-widgets .col.span_4 {
float: left;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left;
width: 100%;
}
#footer-outer .widget_media_image .wp-block-image.alignright {
float: none;
margin-left: 0;
margin-right: auto;
text-align: left;
}
#footer-outer .widget_media_image .wp-block-image.alignright img {
margin-left: 0;
margin-right: auto;
margin-top: 3rem;
width: 120px !important;
}
#footer-widgets .container .col {
margin-bottom: 0px !important;
}
#footer-widgets .container .col.span_6, #footer-widgets .container .col.span_4 {
padding: 0px;
}
#footer-outer #copyright {
padding: 1rem 0 !important;
}
}
#footer-outer #copyright {
font-size: 0.95rem;
padding: 2rem 0;
color: var(--color-ink);
}
@media (min-width: 1001px) {
#footer-outer .span_5 {
width: 98% !important;
}
#footer-outer .span_7 {
width: 0% !important;
}
}
/* Category Labels */
form label, .woocommerce-checkout-review-order-table .product-info .amount, .nectar-progress-bar p, .nectar-progress-bar span strong i, .nectar-progress-bar span strong, body.material .nectar_single_testimonial[data-style="basic"] span.wrap, body.material .nectar_single_testimonial[data-style="basic_left_image"] span.wrap, .testimonial_slider:not([data-style="minimal"]) blockquote span, .woocommerce-ordering .select2-container--default .select2-selection--single .select2-selection__rendered, .woocommerce-ordering .select2-container .select2-choice>.select2-chosen, body[data-fancy-form-rcs="1"] .woocommerce-ordering select, .tabbed[data-style="minimal_alt"] > ul li a, .material .widget .nectar_widget[class*="nectar_blog_posts_"] > li .post-title, body.material .tagcloud a, .material .main-content .widget li a, .material #footer-outer .widget li a, .nectar-recent-posts-slider_multiple_visible .recent-post-container.container .strong a, .material .recentcomments .comment-author-link, .single .post-area .content-inner > .post-tags a, .masonry.material .masonry-blog-item .grav-wrap a, .masonry.material .masonry-blog-item .meta-category a, .post-area.featured_img_left article .meta-category a, .post-area.featured_img_left article .grav-wrap .text a, .related-posts[data-style="material"] .meta-category a, .masonry.auto_meta_overlaid_spaced article.post.quote .author, .masonry.material article.post.quote .author, .nectar-post-grid-wrap[data-style="vertical_list"] .nectar-link-underline, .nectar-post-grid.vert_list_counter .item-main:before, body.search-results #search-results[data-layout="list-no-sidebar"] .result .inner-wrap h2 span, .material .tabbed >ul li a, .post-area.featured_img_left article.post.quote .author, .single .post.format-quote .author, .related-posts[data-style="material"] .grav-wrap .text a, .auto_meta_overlaid_spaced .masonry-blog-item .meta-category a, [data-style="list_featured_first_row"] .meta-category a, .nectar-recent-posts-single_featured .strong a, .nectar-recent-posts-single_featured.multiple_featured .controls li .title, body .woocommerce .nectar-woo-flickity[data-controls="arrows-and-text"] .woo-flickity-count, body.woocommerce ul.products li.minimal.product span.onsale, .nectar-ajax-search-results ul.products li.minimal.product span.onsale, .nectar-woo-flickity ul.products li.minimal.product span.onsale, .nectar-quick-view-box span.onsale, .nectar-quick-view-box .nectar-full-product-link a, body .nectar-quick-view-box .single_add_to_cart_button, .nectar-quick-view-box .single_add_to_cart_button, body .cart .quantity input.qty, body .cart .quantity input.plus, body .cart .quantity input.minus, body .woocommerce-mini-cart .quantity input.qty, body .woocommerce-mini-cart .quantity input.plus, body .woocommerce-mini-cart .quantity input.minus, .style_slide_in_click .product-meta > .quantity .amount, .pum-theme-salient-page-builder-optimized .pum-container .pum-content+.pum-close, .woocommerce-account .woocommerce-form-login .lost_password, .woocommerce div.product .woocommerce-tabs .full-width-content[data-tab-style="fullwidth"] ul.tabs li a, .woocommerce div.product_meta, .woocommerce table.shop_table th, #header-outer .widget_shopping_cart .cart_list a, .woocommerce .yith-wcan-reset-navigation.button, .single-product .entry-summary p.stock.out-of-stock, .nectar-post-grid.layout-stacked[data-text-layout="all_middle"] .nectar-post-grid-item__meta-wrap, .nectar-post-grid .nectar-post-grid-item .content .meta-category a, .nectar-post-grid-item .item-main > .meta-author .meta-author-name, .nectar-post-grid-item .post-heading-wrap .meta-author-name, .nectar-slide-in-cart.style_slide_in_click ul.product_list_widget li dl dt, .woocommerce-tabs ol.commentlist li .comment-text p.meta strong, #ajax-content-wrap .nectar-inherit-label {
font-family: "Trio Grotesk", sans-serif ;
letter-spacing: 0.05em;
font-size: 0.875rem;
font-weight: 500;
font-style: normal;
text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
form label, .woocommerce-checkout-review-order-table .product-info .amount, .nectar-progress-bar p, .nectar-progress-bar span strong i, .nectar-progress-bar span strong, body.material .nectar_single_testimonial[data-style="basic"] span.wrap, body.material .nectar_single_testimonial[data-style="basic_left_image"] span.wrap, .testimonial_slider:not([data-style="minimal"]) blockquote span, .woocommerce-ordering .select2-container--default .select2-selection--single .select2-selection__rendered, .woocommerce-ordering .select2-container .select2-choice>.select2-chosen, body[data-fancy-form-rcs="1"] .woocommerce-ordering select, .tabbed[data-style="minimal_alt"] > ul li a, .material .widget .nectar_widget[class*="nectar_blog_posts_"] > li .post-title, body.material .tagcloud a, .material .main-content .widget li a, .material #footer-outer .widget li a, .nectar-recent-posts-slider_multiple_visible .recent-post-container.container .strong a, .material .recentcomments .comment-author-link, .single .post-area .content-inner > .post-tags a, .masonry.material .masonry-blog-item .grav-wrap a, .masonry.material .masonry-blog-item .meta-category a, .post-area.featured_img_left article .meta-category a, .post-area.featured_img_left article .grav-wrap .text a, .related-posts[data-style="material"] .meta-category a, .masonry.auto_meta_overlaid_spaced article.post.quote .author, .masonry.material article.post.quote .author, .nectar-post-grid-wrap[data-style="vertical_list"] .nectar-link-underline, .nectar-post-grid.vert_list_counter .item-main:before, body.search-results #search-results[data-layout="list-no-sidebar"] .result .inner-wrap h2 span, .material .tabbed >ul li a, .post-area.featured_img_left article.post.quote .author, .single .post.format-quote .author, .related-posts[data-style="material"] .grav-wrap .text a, .auto_meta_overlaid_spaced .masonry-blog-item .meta-category a, [data-style="list_featured_first_row"] .meta-category a, .nectar-recent-posts-single_featured .strong a, .nectar-recent-posts-single_featured.multiple_featured .controls li .title, body .woocommerce .nectar-woo-flickity[data-controls="arrows-and-text"] .woo-flickity-count, body.woocommerce ul.products li.minimal.product span.onsale, .nectar-ajax-search-results ul.products li.minimal.product span.onsale, .nectar-woo-flickity ul.products li.minimal.product span.onsale, .nectar-quick-view-box span.onsale, .nectar-quick-view-box .nectar-full-product-link a, body .nectar-quick-view-box .single_add_to_cart_button, .nectar-quick-view-box .single_add_to_cart_button, body .cart .quantity input.qty, body .cart .quantity input.plus, body .cart .quantity input.minus, body .woocommerce-mini-cart .quantity input.qty, body .woocommerce-mini-cart .quantity input.plus, body .woocommerce-mini-cart .quantity input.minus, .style_slide_in_click .product-meta > .quantity .amount, .pum-theme-salient-page-builder-optimized .pum-container .pum-content+.pum-close, .woocommerce-account .woocommerce-form-login .lost_password, .woocommerce div.product .woocommerce-tabs .full-width-content[data-tab-style="fullwidth"] ul.tabs li a, .woocommerce div.product_meta, .woocommerce table.shop_table th, #header-outer .widget_shopping_cart .cart_list a, .woocommerce .yith-wcan-reset-navigation.button, .single-product .entry-summary p.stock.out-of-stock, .nectar-post-grid.layout-stacked[data-text-layout="all_middle"] .nectar-post-grid-item__meta-wrap, .nectar-post-grid .nectar-post-grid-item .content .meta-category a, .nectar-post-grid-item .item-main > .meta-author .meta-author-name, .nectar-post-grid-item .post-heading-wrap .meta-author-name, .nectar-slide-in-cart.style_slide_in_click ul.product_list_widget li dl dt, .woocommerce-tabs ol.commentlist li .comment-text p.meta strong, #ajax-content-wrap .nectar-inherit-label {
font-size: 0.65rem;
}
}
.nectar-post-grid-wrap[data-style=content_next_to_image] .nectar-post-grid[data-text-color=dark] .nectar-post-grid-item .content *, .nectar-post-grid-wrap[data-style=content_under_image] .nectar-post-grid[data-text-color=dark] .nectar-post-grid-item .content *, .nectar-post-grid-wrap[data-style=vertical_list] .nectar-post-grid[data-text-color=dark] .nectar-post-grid-item:not(:hover) .content *,
body[data-button-style*=slightly_rounded] #page-header-bg[data-post-hs=default_minimal] .inner-wrap>a, body[data-button-style*=slightly_rounded].single .heading-title[data-header-style=default_minimal] .meta-category a {
border-radius: 0.43em !important;
}
.nectar-post-grid .meta-category .style-button {
padding: .5em .75em;
}
.nectar-post-grid .meta-category a {
margin-bottom: 0px;
}
/* Donorfy Forms */
.donorfy-form input[type=date],
.donorfy-form input[type=email],
.donorfy-form input[type=number],
.donorfy-form input[type=password],
.donorfy-form input[type=search],
.donorfy-form input[type=tel],
.donorfy-form input[type=text],
.donorfy-form input[type=url],
.donorfy-form textarea,
.donorfy-form input {
font-family: var(--font-body) !important;
font-weight: 400;
}
.donorfy-form {
max-width: 100%;
margin: 0 auto;
}
.donorfy-form iframe {
width: 100%;
min-height: 2000px;
border: none;
}
/*
* Donorfy/Stripe widget ships its own .error rule (#b94a48) from
* cdn.donorfy.com/wwcss/stripepayments.2015.1.css. Override to match the
* site's validation red used by Mailchimp / Ninja Forms / .form-error.
*/
.donorfy-form .error,
#CreditCardForm .error,
#DirectDebitForm .error,
#CreditCardForm.donorfy-form .error,
#DirectDebitForm.donorfy-form .error {
border-color: rgba(255, 49, 49, 1) !important;
color: rgba(255, 49, 49, 1) !important;
box-shadow: none !important;
}
#CreditCardForm.donorfy-form :is(input, select, textarea).error,
#DirectDebitForm.donorfy-form :is(input, select, textarea).error {
background: rgba(255, 49, 49, 0.15) !important;
}
.donorfy-form .error::placeholder,
#CreditCardForm .error::placeholder,
#DirectDebitForm .error::placeholder,
#CreditCardForm.donorfy-form .error::placeholder,
#DirectDebitForm.donorfy-form .error::placeholder {
color: rgba(255, 49, 49, 0.5) !important;
opacity: 1;
}
.donorfy-form label.error,
#CreditCardForm label.error,
#DirectDebitForm label.error,
#CreditCardForm.donorfy-form label.error,
#DirectDebitForm.donorfy-form label.error {
display: inline-block;
margin-top: 0.75rem;
}
/* Frame Variants */
/* Base panel style for white text frames. */
.frame {
background-color: var(--color-paper);
padding: 4rem;
box-sizing: border-box;
position: relative;
z-index: 2;
}
/* Variation: frame with brand blue background. */
.frame--blue {
background-color: var(--color-brand-blue);
}
.frame--orange {
background-color: var(--color-brand-orange);
}
.frame--purple{
background-color: var(--color-brand-purple);
}
/* Same as frame--orange but brand orange at 25% opacity (see --color-brand-orange-25). */
.frame--orange-25 {
background-color: var(--color-brand-orange-25);
}
@media only screen and (min-width: 691px) and (max-width: 999px) {
.frame {
padding: 2.5rem;
}
}
@media only screen and (max-width: 690px) {
.frame {
padding: 1.5rem;
}
}
/* Tighter padding from tablet up — use with .frame (e.g. frame frame--compact). */
@media only screen and (min-width: 691px) {
.frame.frame--compact {
padding: 2rem;
}
}
/* Rotation-only frame variants for text/image blocks. */
.frame--plain,
.frame--rotate-ccw-scroll,
.frame--rotate-cw-scroll {
--frame-rotate: 0deg;
--frame-translate-y: 0px;
transform: translateY(var(--frame-translate-y)) rotate(var(--frame-rotate));
transform-origin: center center;
}
.frame--plain {
--frame-rotate: 0deg;
}
.frame--rotate-ccw-scroll {
--frame-rotate: -1.25deg;
}
.frame--rotate-cw-scroll {
--frame-rotate: 1.25deg;
}
/* Image-only utility: bleed past column padding for overlap layouts. */
.frame-media--bleed {
position: relative;
overflow: visible;
z-index: 1;
}
/* Variant: keep bleed/rotation context but disable image scaling. */
.frame-media--bleed-no-scale {
position: relative;
overflow: visible;
z-index: 1;
}
.frame-media--bleed .img-with-animation-wrap,
.frame-media--bleed .vc_single_image-wrapper,
.frame-media--bleed-no-scale .img-with-animation-wrap,
.frame-media--bleed-no-scale .vc_single_image-wrapper {
display: block;
overflow: visible;
}
.frame-media--bleed img,
.frame-media--bleed .img-with-animation-wrap img,
.frame-media--bleed .vc_single_image-wrapper img,
.frame-media--bleed-no-scale img,
.frame-media--bleed-no-scale .img-with-animation-wrap img,
.frame-media--bleed-no-scale .vc_single_image-wrapper img {
display: block;
width: 100%;
height: auto;
}
.frame-media--bleed img,
.frame-media--bleed .img-with-animation-wrap img,
.frame-media--bleed .vc_single_image-wrapper img {
transform: scale(1.2) !important;
transform-origin: center right;
}
@media only screen and (min-width: 1px) and (max-width: 1000px) {
.mobile-shift-up {
--mobile-shift-y: -15%;
}
.frame-media--bleed {
text-align: center;
}
.frame-media--bleed-no-scale {
text-align: center;
}
.frame-media--bleed .img-with-animation-wrap,
.frame-media--bleed .vc_single_image-wrapper,
.frame-media--bleed-no-scale .img-with-animation-wrap,
.frame-media--bleed-no-scale .vc_single_image-wrapper {
padding-left: 10%;
padding-right: 10%;
box-sizing: border-box;
}
img.frame-media--bleed,
img.frame-media--bleed-no-scale {
width: 80% !important;
margin-left: auto !important;
margin-right: auto !important;
display: block;
}
.frame-media--bleed img,
.frame-media--bleed .img-with-animation-wrap img,
.frame-media--bleed .vc_single_image-wrapper img {
transform: translateY(var(--mobile-shift-y, 0)) scale(1.075) !important;
transform-origin: center center;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--mobile-shift-y, 0);
}
.frame-media--bleed-no-scale img,
.frame-media--bleed-no-scale .img-with-animation-wrap img,
.frame-media--bleed-no-scale .vc_single_image-wrapper img {
transform: translateY(var(--mobile-shift-y, 0)) !important;
transform-origin: center center;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--mobile-shift-y, 0);
}
}
/* Add local spacing between inline CTA buttons inside frame components. */
:is(.frame, .frame--plain, .frame--rotate-ccw-scroll, .frame--rotate-cw-scroll) .nectar-cta[data-alignment=left] {
display: inline-block;
}
:is(.frame, .frame--plain, .frame--rotate-ccw-scroll, .frame--rotate-cw-scroll) .nectar-cta[data-alignment=left] .link_wrap {
margin-right: 0 !important;
}
/* Wrap-safe CTA spacing inside frames (works at any viewport width). */
:is(.frame, .frame--plain, .frame--rotate-ccw-scroll, .frame--rotate-cw-scroll) .nectar-cta[data-display=inline] {
margin-right: 1.333rem;
margin-bottom: 0.75rem;
}
:is(.frame, .frame--plain, .frame--rotate-ccw-scroll, .frame--rotate-cw-scroll) .nectar-cta[data-display=inline]:last-child {
margin-right: 0;
}
.donation-form-panel {
background: #fafafa;
border: 0px solid #d9d9d9;
padding: 4rem 4rem 4rem 4rem;
margin-bottom: 1rem !important;
box-sizing: border-box;
}
.donation-panel-amount {
margin-bottom: 2rem !important;
}
/* wpautop inserts
between shortcodes on separate lines in VC text blocks. */
.oh-donation-amount-picker + br {
display: none;
}
.form-field {
margin-bottom: 1rem;
}
form label, .form-field label, .gift-aid-intro {
font-family: "Inclusive Sans", sans-serif;
font-weight: 400;
font-style: normal;
text-transform: none;
letter-spacing: 0em;
font-size: 1rem !important;
line-height: 1.333 !important;
display: block;
margin-bottom: 0.5rem;
cursor: pointer;
}
.gift-aid-intro {
margin-bottom: 0rem;
padding-bottom: 1.333rem;
}
.gift-aid-label {
display: flex !important;
align-items: flex-start;
gap: 10px;
margin-bottom: 0;
}
.gift-aid-content {
flex: 1;
min-width: 0;
}
.gift-aid-title {
font-weight: 700;
margin-left: 0px !important;
display: block;
}
.gift-aid-disclaimer {
font-weight: 400;
margin-left: 0px !important;
display: block;
margin-top: 0.35rem;
line-height: 1.45;
}
.oh-donation-amount-picker .donation-payment-methods-preview {
margin: 0;
font-family: "Inclusive Sans", sans-serif;
font-size: 1rem;
line-height: 1.5;
color: var(--color-ink);
}
.donation-custom-row {
display: block;
margin-bottom: 1rem;
}
.oh-donation-amount-picker .donation-payment-methods-intro {
display: block !important;
margin: 0 0 0rem;
font-size: 1rem;
line-height: 1.5;
}
.oh-donation-amount-picker .donation-payment-methods-intro strong {
font-weight: 700;
}
.oh-donation-amount-picker .donation-payment-method-icons {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 0 0 0rem;
padding: 0;
}
.oh-donation-amount-picker .donation-payment-method-icons__icon {
flex: 0 0 auto;
margin: 0;
padding: 0;
}
.oh-donation-amount-picker .donation-payment-method-icons__img {
display: block;
width: 38px;
height: 24px;
max-width: none;
object-fit: contain;
}
.oh-donation-amount-picker .donation-amount-switch-link.donation-amount-note {
display: block !important;
margin: 0;
font-family: "Inclusive Sans", sans-serif;
font-size: 1rem;
line-height: 1.5;
font-weight: 400;
color: var(--color-ink);
}
.oh-donation-amount-picker .donation-amount-switch-link.donation-amount-note a {
display: inline;
text-decoration: none;
color: inherit;
}
.donorfy-section--gift-aid .gift-aid-label input[type="checkbox"] {
margin-top: 0.1rem !important;
}
.donorfy-section--keep-in-touch .gift-aid-intro {
padding-bottom: 0.9rem;
}
.donorfy-section--fundraising-consent .oh-fundraising-consent-radios {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
/* Preset fundraising consent (Yes) — hidden from donors but submitted to Donorfy. */
.donorfy-section--fundraising-consent.oh-fundraising-consent--hidden {
display: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
.mailing-options {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.mailing-option {
display: flex !important;
align-items: center;
gap: 0.45rem;
margin-bottom: 0 !important;
}
.mailing-option span {
display: inline-block;
line-height: 1.25;
}
/* Donation Amount Section */
.donation-amount-section {
margin-bottom: 0;
}
.donation-form-step-heading {
display: block;
margin: 0 0 1.5rem !important;
font-weight: 700;
font-size: 2.2rem;
line-height: 1.15;
}
:is(#CreditCardForm, #DirectDebitForm).donorfy-form .donorfy-section-group--step-2 {
background: #fafafa;
border: 0 solid #d9d9d9;
padding: 4rem;
margin-bottom: 2rem !important;
box-sizing: border-box;
}
:is(#CreditCardForm, #DirectDebitForm).donorfy-form .donorfy-section-group--step-2 .donorfy-section {
background: transparent;
padding: 0;
margin-bottom: 2.5rem !important;
}
:is(#CreditCardForm, #DirectDebitForm).donorfy-form .donorfy-section-group--step-2 .donorfy-section:last-child {
margin-bottom: 0 !important;
}
#CreditCardForm.donorfy-form .donorfy-section-subheading,
#DirectDebitForm.donorfy-form .donorfy-section-subheading {
font-weight: 700;
margin-top: 0 !important;
margin-bottom: 0.75rem !important;
font-size: 1.35rem;
line-height: 1.2;
}
/* Compact value-only tiles in a responsive row */
.donation-amount-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
}
.donation-amount-button {
display: flex;
align-items: center;
justify-content: center;
min-height: 64px;
padding: 0.75rem 0.75rem;
text-align: center;
cursor: pointer;
transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
border: 1px solid var(--color-ink);
border-radius: 12px !important;
background: var(--color-paper);
box-sizing: border-box;
}
.donation-custom-wrap {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 64px;
border-radius: 12px;
box-sizing: border-box;
cursor: text;
margin-top: 0.85rem;
}
.donation-custom-input-wrap {
flex: 1 1 auto;
}
/* Always-visible label above the custom-amount box. The text is derived
by JS from the first half of the WordPress-managed .donation-custom-label
(split on the en-dash). Matches the Donorfy form label typography. */
.donation-custom-inline-label {
display: block;
margin-top: 1rem;
margin-bottom: 0.5rem;
font-family: "Inclusive Sans", sans-serif;
font-size: 1rem;
line-height: 1.5;
font-weight: 400;
color: var(--color-ink);
}
.donation-custom-inline-label + .donation-custom-wrap {
margin-top: 0;
}
.donation-amount-button:hover,
.donation-custom-wrap:hover {
border-color: transparent;
background: var(--color-brand-purple-50);
box-shadow: var(--shadow-soft);
}
.donation-amount-button.is-active {
border-color: transparent;
background: var(--color-brand-purple-100);
box-shadow: var(--shadow-soft);
}
.donation-amount-value,
.donation-custom-prefix,
.donation-custom-wrap input[type=number] {
font-family: "Trio Grotesk", sans-serif !important ;
letter-spacing: -1px !important;
font-weight: 500 !important;
font-style: normal !important;
font-size: 2rem !important;
line-height: 1 !important;
}
.donation-amount-value {
display: block;
margin-bottom: 0;
color: rgba(25, 20, 20, 1) !important;
}
/* Hide the per-button description; it is projected into the shared
.donation-amount-active-note panel below the grid via JS. */
.donation-amount-button .donation-amount-note,
.donation-custom-wrap .donation-custom-label {
display: none !important;
}
/* Shared description panel below the buttons grid. */
.donation-amount-active-note {
max-height: 0;
opacity: 0;
overflow: hidden;
margin-top: 0;
padding: 0 1.25rem;
border-radius: 12px;
background: var(--color-brand-purple-25);
transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.25s ease, padding 0.25s ease;
}
.donation-amount-active-note.is-visible {
max-height: 240px;
opacity: 1;
margin-top: 1.25rem;
padding: 1rem 1.25rem;
}
.donation-amount-active-note .donation-amount-note,
.donation-amount-active-note .donation-custom-label {
display: block !important;
margin: 0;
line-height: 1.4;
padding: 0;
color: var(--color-ink);
}
/* Custom Amount Row */
.donation-custom-wrap {
padding: 0.75rem 1.25rem;
border: 1px solid var(--color-ink);
transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
background: var(--color-paper);
}
.donation-custom-wrap input[type=number] {
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
}
.donation-custom-wrap:focus-within,
.donation-custom-wrap.is-active {
border-color: var(--color-brand-purple-100);
background: var(--color-brand-purple-100);
box-shadow: var(--shadow-soft);
}
.donorfy-hidden-amount {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* Hide Google's floating reCAPTCHA v3 badge; the legal disclosure rendered
beneath the Donate button (.recaptcha-disclosure) satisfies Google's
Terms of Service when the badge is hidden. */
.grecaptcha-badge {
visibility: hidden !important;
}
/* Matches the .signup-help block — uses the theme's default h6 typography. */
.recaptcha-disclosure {
margin-top: 2rem;
text-align: left;
}
.recaptcha-disclosure h6 {
margin: 0;
text-align: left;
}
.recaptcha-disclosure a {
text-decoration: underline;
}
/* Left Side: £ + Input */
.donation-custom-input-wrap {
display: flex;
align-items: center;
gap: 0.25rem;
min-width: 0;
}
.donation-custom-prefix {
position: static;
transform: none;
z-index: 1;
font-size: 2.4rem;
line-height: 1;
font-weight: 700;
flex: 0 0 auto;
color: rgba(25, 20, 20, 1) !important;
}
.donation-custom-input {
width: 100%;
min-height: auto;
border: 0;
padding: 0;
font-size: 2.4rem;
line-height: 1;
font-weight: 700;
text-align: left;
box-sizing: border-box;
background: transparent;
color: rgba(25, 20, 20, 1) !important;
}
.donation-custom-input:focus {
outline: none;
}
/* Remove Number Arrows If Preferred */
.donation-custom-input::-webkit-outer-spin-button,
.donation-custom-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.donation-custom-input[type=number] {
appearance: textfield;
-moz-appearance: textfield;
}
/* Description text is hidden in compact view but kept in the DOM so the
client can still edit it in WordPress; JS reads it into the shared
.donation-amount-active-note panel when the custom input is focused. */
.donation-custom-text {
display: none;
}
.donation-amount-note {
margin-top: 0;
margin-bottom: 0;
}
.donation-custom-label,
.donation-custom-note {
display: block;
margin: 0;
color: rgba(25, 20, 20, 1);
}
/* Error State */
.donation-custom-input.has-error {
background: transparent;
}
.donation-custom-wrap.has-error {
border-color: rgba(255, 49, 49, 1.0);
background: rgba(255, 49, 49, 0.15);
}
.donation-custom-wrap.has-error .donation-custom-input,
.donation-custom-wrap.has-error .donation-custom-prefix,
.donation-custom-wrap.has-error .donation-custom-label,
.donation-custom-wrap.has-error .donation-custom-note {
color: rgba(255, 49, 49, 1.0) !important;
}
/* Error Message Directly Below Donation Section */
.form-error {
display: block;
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(-6px);
pointer-events: none;
background: rgba(255, 49, 49, 0.15);
border: 1px solid rgba(255, 49, 49, 1.0);
color: rgba(255, 49, 49, 1.0);
padding: 0 16px;
margin-top: 0;
margin-bottom: 0;
border-radius: 0;
text-align: center;
}
.form-error.is-visible {
max-height: 120px;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
padding: 12px 16px;
}
.form-error h6 {
margin: 0;
color: rgba(255, 49, 49, 1.0);
}
.form-error strong {
font-weight: 700;
}
.donation-amount-error {
max-width: 100%;
margin-top: 0;
}
.donation-amount-error.is-visible {
margin-top: 1.25rem;
}
#DirectDebitForm .oh-payment-amount-error-row td {
padding-top: 0;
}
#DirectDebitForm .oh-payment-amount-error.is-visible,
#CreditCardForm .oh-payment-amount-error.is-visible {
margin-top: 1rem;
margin-bottom: 0;
}
#CreditCardForm .oh-payment-amount-error-row td {
padding-top: 0;
}
.donorfy-form h3 {
font-weight: 700;
margin-top: 0 !important;
margin-bottom: 0.75rem !important;
font-size: 2.2rem;
line-height: 1.15;
}
:is(#CreditCardForm, #DirectDebitForm).donorfy-form .donorfy-section--payment .donation-form-step-heading {
margin-bottom: 1.25rem !important;
}
.details-error {
max-width: 100%;
}
.form-field.has-error input,
.form-field.has-error textarea,
#CreditCardForm input[type="text"].has-error,
#DirectDebitForm input[type="text"].has-error {
border-color: rgba(255, 49, 49, 1) !important;
background: rgba(255, 49, 49, 0.15) !important;
}
.form-field.has-error label {
color: rgba(255, 49, 49, 1);
}
/* Inputs */
#CreditCardForm input[type="text"],
#DirectDebitForm input[type="text"],
#CreditCardForm input[type="email"],
#DirectDebitForm input[type="email"],
#CreditCardForm input[type="tel"],
#DirectDebitForm input[type="tel"],
#CreditCardForm input[type="number"],
#DirectDebitForm input[type="number"],
#CreditCardForm select,
#DirectDebitForm select,
#CreditCardForm textarea,
#DirectDebitForm textarea,
#card-number,
#card-expiry,
#card-cvc {
width: 100%;
box-sizing: border-box;
background-color: #fafafa !important;
}
#CreditCardForm input[type="text"],
#DirectDebitForm input[type="text"],
#CreditCardForm input[type="email"],
#DirectDebitForm input[type="email"],
#CreditCardForm input[type="tel"],
#DirectDebitForm input[type="tel"],
#CreditCardForm input[type="number"],
#DirectDebitForm input[type="number"],
#CreditCardForm textarea,
#DirectDebitForm textarea {
border: 1px solid #191414;
border-radius: 0;
padding: 0.75rem 0.9rem;
}
#CreditCardForm select,
#DirectDebitForm select {
border: 1px solid #191414;
border-radius: 0 !important;
padding: 0.75rem 0.9rem;
line-height: 1.2;
min-height: 50px;
-webkit-appearance: none;
appearance: none;
box-shadow: none !important;
transition: none !important;
}
#CreditCardForm select.select-placeholder,
#DirectDebitForm select.select-placeholder {
color: var(--color-ink-50);
}
#CreditCardForm select option,
#DirectDebitForm select option {
color: #191414;
}
#card-number,
#card-expiry,
#card-cvc {
font-family: "Inclusive Sans", sans-serif !important;
font-weight: 400 !important;
font-style: normal !important;
height: 50px;
padding: 1rem 0.9rem;
border: 1px solid #191414;
background: #fff;
}
/* Space below GoCardless widget shortcode before signup-help. */
.oh-gocardless-widget {
margin-bottom: 3rem;
}
/* Donorfy widget form layout parity with donate-once page. */
#CreditCardForm.donorfy-form,
#DirectDebitForm.donorfy-form {
background: transparent;
padding: 0;
border: 0;
--donorfy-payment-btn-height: 50px;
--donorfy-payment-btn-radius: var(--radius-md);
}
#CreditCardForm.donorfy-form .donorfy-section,
#DirectDebitForm.donorfy-form .donorfy-section {
background: #fafafa;
border: 0 solid #d9d9d9;
padding: 4rem 4rem 4rem 4rem;
margin-bottom: 2rem !important;
box-sizing: border-box;
}
#CreditCardForm.donorfy-form table,
#DirectDebitForm.donorfy-form table {
width: 100%;
border: 0;
border-collapse: collapse;
margin: 0 0 0rem;
background: transparent !important;
border-top: 0 !important;
}
#CreditCardForm.donorfy-form tbody,
#DirectDebitForm.donorfy-form tbody,
#CreditCardForm.donorfy-form tr,
#DirectDebitForm.donorfy-form tr,
#CreditCardForm.donorfy-form td,
#DirectDebitForm.donorfy-form td {
display: block;
width: 100%;
border: 0;
padding: 0;
background: transparent !important;
}
#CreditCardForm.donorfy-form tr,
#DirectDebitForm.donorfy-form tr {
margin-bottom: 1rem;
}
#CreditCardForm.donorfy-form tbody tr:last-of-type,
#DirectDebitForm.donorfy-form tbody tr:last-of-type {
margin-bottom: 1rem;
}
/* Also remove gap on the last visible row when trailing rows are hidden. */
#CreditCardForm.donorfy-form tr[style*="display: none"],
#DirectDebitForm.donorfy-form tr[style*="display: none"] {
margin-bottom: 0;
}
#CreditCardForm.donorfy-form tr:has(+ tr[style*="display: none"]),
#DirectDebitForm.donorfy-form tr:has(+ tr[style*="display: none"]) {
margin-bottom: 0;
}
#CreditCardForm.donorfy-form label,
#DirectDebitForm.donorfy-form label {
margin-bottom: 0.5rem;
font-size: 1rem !important;
line-height: 1.5 !important;
background: transparent !important;
}
#CreditCardForm.donorfy-form .gift-aid-title,
#DirectDebitForm.donorfy-form .gift-aid-title,
#CreditCardForm.donorfy-form .mailing-option span,
#DirectDebitForm.donorfy-form .mailing-option span,
#CreditCardForm.donorfy-form .donation-custom-label,
#DirectDebitForm.donorfy-form .donation-custom-label,
#CreditCardForm.donorfy-form .donation-amount-note,
#DirectDebitForm.donorfy-form .donation-amount-note {
font-size: 1rem !important;
line-height: 1.5 !important;
}
#CreditCardForm.donorfy-form table label + br,
#DirectDebitForm.donorfy-form table label + br {
display: none;
}
#CreditCardForm.donorfy-form #AmountPrefix,
#DirectDebitForm.donorfy-form #AmountPrefix {
display: none;
vertical-align: middle;
}
#CreditCardForm.donorfy-form #Amount,
#DirectDebitForm.donorfy-form #Amount {
display: inline-block;
width: 100%;
max-width: 100%;
vertical-align: middle;
padding-left: 0.9rem;
}
/* Amount is set in the picker above; keep #Amount for Donorfy only */
:is(#CreditCardForm, #DirectDebitForm).donorfy-form tr.oh-native-amount-for-donorfy {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
:is(#CreditCardForm, #DirectDebitForm).donorfy-form tr.oh-native-amount-for-donorfy td {
padding: 0;
border: 0;
}
#CreditCardForm.donorfy-form > div,
#DirectDebitForm.donorfy-form > div {
margin-bottom: 0;
}
#CreditCardForm.donorfy-form .donorfy-payment-intro,
#DirectDebitForm.donorfy-form .donorfy-payment-intro {
margin: 0 0 1.5rem;
font-size: 1rem;
line-height: 1.5;
max-width: 48em;
}
#CreditCardForm.donorfy-form .donorfy-payment-intro strong,
#DirectDebitForm.donorfy-form .donorfy-payment-intro strong {
font-weight: 700;
}
#CreditCardForm.donorfy-form .donorfy-payment-method-chooser {
margin-top: 0.5rem;
}
#CreditCardForm.donorfy-form .donorfy-payment-method-chooser .donorfy-payment-wallets {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
#CreditCardForm.donorfy-form .oh-show-card-payment-btn {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
margin-top: 1rem;
min-height: var(--donorfy-payment-btn-height);
height: var(--donorfy-payment-btn-height);
border-radius: var(--donorfy-payment-btn-radius) !important;
font-size: var(--button-font-size-sm) !important;
line-height: 1.2 !important;
padding: 0 12px !important;
transform: none;
background-color: var(--color-ink);
color: var(--color-paper);
border: 0;
cursor: pointer;
}
#CreditCardForm.donorfy-form .oh-show-card-payment-btn:hover,
#CreditCardForm.donorfy-form .oh-show-card-payment-btn:focus-visible {
transform: none !important;
box-shadow: var(--shadow-soft);
background-color: var(--color-ink) !important;
color: var(--color-paper) !important;
}
#CreditCardForm.donorfy-form .oh-show-card-payment-btn[hidden] {
display: none !important;
}
#CreditCardForm.donorfy-form .oh-payment-chooser-error.ErrorContainer {
margin: 1rem 0 0;
}
#CreditCardForm.donorfy-form .oh-card-payment-fields {
margin-top: 1.5rem;
}
#CreditCardForm.donorfy-form .oh-card-payment-fields[hidden] {
display: none !important;
}
#CreditCardForm.donorfy-form .oh-card-payment-fields .donorfy-payment-card-actions {
margin-top: 1.25rem;
}
#CreditCardForm.donorfy-form #submitButton.oh-card-payment-submit[hidden],
#DirectDebitForm.donorfy-form .donorfy-payment-card-actions #submitButton[hidden] {
display: none !important;
}
#CreditCardForm.donorfy-form .donorfy-payment-wallets,
#DirectDebitForm.donorfy-form .donorfy-payment-wallets {
margin-top: 0.5rem;
padding-top: 0rem;
border-top: 0px solid rgba(25, 20, 20, 0.12);
position: relative;
}
#CreditCardForm.donorfy-form .donorfy-payment-wallets:not(.oh-wallets-has-buttons),
#DirectDebitForm.donorfy-form .donorfy-payment-wallets:not(.oh-wallets-has-buttons) {
display: none !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
}
#CreditCardForm.donorfy-form .oh-wallet-click-shield,
#DirectDebitForm.donorfy-form .oh-wallet-click-shield {
position: absolute;
inset: 0;
z-index: 50;
margin: 0;
border: 0;
padding: 0;
cursor: not-allowed;
background: transparent;
display: none;
}
#CreditCardForm.donorfy-form .donorfy-payment-wallets.oh-wallets-blocked .oh-wallet-click-shield,
#DirectDebitForm.donorfy-form .donorfy-payment-wallets.oh-wallets-blocked .oh-wallet-click-shield {
display: block;
}
#CreditCardForm.donorfy-form .donorfy-payment-wallets #payment-request-button:not(.oh-wallet-slot-active),
#DirectDebitForm.donorfy-form .donorfy-payment-wallets #payment-request-button:not(.oh-wallet-slot-active),
#CreditCardForm.donorfy-form #paypal-button-container:not(.oh-wallet-slot-active),
#DirectDebitForm.donorfy-form #paypal-button-container:not(.oh-wallet-slot-active) {
display: none !important;
min-height: 0 !important;
height: 0 !important;
margin: 0 !important;
overflow: hidden;
}
#CreditCardForm.donorfy-form .donorfy-payment-wallets #payment-request-button.oh-wallet-slot-active,
#DirectDebitForm.donorfy-form .donorfy-payment-wallets #payment-request-button.oh-wallet-slot-active {
width: 100% !important;
min-height: var(--donorfy-payment-btn-height);
height: var(--donorfy-payment-btn-height);
margin-top: 0 !important;
border-radius: var(--donorfy-payment-btn-radius);
overflow: hidden;
clip-path: inset(0 round var(--donorfy-payment-btn-radius));
box-sizing: border-box;
}
#CreditCardForm.donorfy-form .donorfy-payment-wallets #payment-request-button.oh-wallet-slot-active iframe,
#DirectDebitForm.donorfy-form .donorfy-payment-wallets #payment-request-button.oh-wallet-slot-active iframe {
display: block;
width: 100% !important;
height: var(--donorfy-payment-btn-height) !important;
min-height: var(--donorfy-payment-btn-height) !important;
max-height: var(--donorfy-payment-btn-height) !important;
border: 0 !important;
}
#CreditCardForm.donorfy-form > div p,
#DirectDebitForm.donorfy-form > div p {
margin-top: 0.75rem;
margin-bottom: 0;
font-size: 1rem;
line-height: 1.5;
}
#CreditCardForm.donorfy-form #ErrorContainer.ErrorContainer,
#DirectDebitForm.donorfy-form #ErrorContainer.ErrorContainer {
margin: 0 0 1rem;
margin-top: 0.75rem;
padding: 12px 16px;
box-sizing: border-box;
background: rgba(255, 49, 49, 0.15);
border: 1px solid rgba(255, 49, 49, 1);
border-radius: 0;
color: rgba(255, 49, 49, 1);
text-align: center;
font-size: 1.125rem !important;
line-height: 1.333 !important;
}
#CreditCardForm.donorfy-form #ErrorContainer.ErrorContainer #Errors,
#DirectDebitForm.donorfy-form #ErrorContainer.ErrorContainer #Errors {
margin: 0;
font-size: 1rem !important;
line-height: 1.5 !important;
}
#CreditCardForm.donorfy-form #ErrorContainer.ErrorContainer #Errors:empty,
#DirectDebitForm.donorfy-form #ErrorContainer.ErrorContainer #Errors:empty {
display: none;
}
#CreditCardForm.donorfy-form #ErrorContainer.ErrorContainer #Errors,
#CreditCardForm.donorfy-form #ErrorContainer.ErrorContainer #Errors *,
#DirectDebitForm.donorfy-form #ErrorContainer.ErrorContainer #Errors,
#DirectDebitForm.donorfy-form #ErrorContainer.ErrorContainer #Errors * {
font-size: 1rem !important;
line-height: 1.5 !important;
color: rgba(255, 49, 49, 1);
}
#CreditCardForm.donorfy-form .donorfy-payment-card-actions,
#DirectDebitForm.donorfy-form .donorfy-payment-card-actions {
margin-top: 0rem !important;
margin-bottom: 0 !important;
text-align: center !important;
background: transparent !important;
}
#CreditCardForm.donorfy-form .donorfy-payment-card-actions #submitButton,
#DirectDebitForm.donorfy-form .donorfy-payment-card-actions #submitButton {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
min-height: var(--donorfy-payment-btn-height);
height: var(--donorfy-payment-btn-height);
border-radius: var(--donorfy-payment-btn-radius) !important;
font-size: var(--button-font-size-sm) !important;
line-height: 1.2 !important;
padding: 0 12px !important;
transform: none;
}
#CreditCardForm.donorfy-form .donorfy-payment-card-actions #submitButton:hover,
#CreditCardForm.donorfy-form .donorfy-payment-card-actions #submitButton:focus-visible,
#DirectDebitForm.donorfy-form .donorfy-payment-card-actions #submitButton:hover,
#DirectDebitForm.donorfy-form .donorfy-payment-card-actions #submitButton:focus-visible {
transform: none !important;
box-shadow: var(--shadow-soft);
background-color: var(--color-ink) !important;
}
#CreditCardForm.donorfy-form .donorfy-payment-card-actions #submitButton:active,
#DirectDebitForm.donorfy-form .donorfy-payment-card-actions #submitButton:active {
transform: none !important;
box-shadow: var(--shadow-soft);
}
#CreditCardForm.donorfy-form #PleaseWait,
#DirectDebitForm.donorfy-form #PleaseWait {
margin-top: 0.75rem;
}
#CreditCardForm.donorfy-form #paypal-button-container.oh-wallet-slot-active,
#DirectDebitForm.donorfy-form #paypal-button-container.oh-wallet-slot-active {
width: 100% !important;
min-height: var(--donorfy-payment-btn-height);
height: var(--donorfy-payment-btn-height);
border-radius: var(--donorfy-payment-btn-radius);
overflow: hidden;
clip-path: inset(0 round var(--donorfy-payment-btn-radius));
box-sizing: border-box;
margin-top: 1rem !important;
}
#CreditCardForm.donorfy-form #payment-request-button:not(.oh-wallet-slot-active) + #paypal-button-container.oh-wallet-slot-active,
#DirectDebitForm.donorfy-form #payment-request-button:not(.oh-wallet-slot-active) + #paypal-button-container.oh-wallet-slot-active {
margin-top: 0 !important;
}
#CreditCardForm.donorfy-form #paypal-button-container.oh-wallet-slot-active iframe,
#DirectDebitForm.donorfy-form #paypal-button-container.oh-wallet-slot-active iframe {
height: var(--donorfy-payment-btn-height) !important;
min-height: var(--donorfy-payment-btn-height) !important;
max-height: var(--donorfy-payment-btn-height) !important;
width: 100% !important;
border: 0 !important;
display: block;
}
.donorfy-recaptcha-below-form {
margin-top: 3rem;
margin-bottom: 1rem;
text-align: left;
}
.donorfy-recaptcha-below-form .recaptcha-disclosure {
margin-top: 0;
text-align: left;
}
.donorfy-recaptcha-below-form .recaptcha-disclosure h6 {
text-align: left;
}
/* Button Area */
.form-actions {
margin-top: 2rem;
text-align: center;
}
/* Reset Native Checkbox */
.donorfy-form input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 14px;
height: 14px;
padding: 0px !important;
border: 1px solid #191414;
border-radius: 0px;
background: #fafafa;
cursor: pointer;
display: inline-block;
position: relative;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.donorfy-form label input {
margin: -6px 3px 0 0 !important;
}
.donorfy-form .gift-aid-label input[type="checkbox"] {
margin-top: 0.75rem;
flex: 0 0 14px;
}
.donorfy-form input:is([type="radio"], [type="checkbox"]) {
padding: 0px;
}
/* Hover (Optional But Nice) */
.donorfy-form input[type="checkbox"]:hover {
border-color: #191414;
}
/* Focus State (Accessibility) */
.donorfy-form input[type="checkbox"]:focus {
outline: none;
box-shadow: 0 0 0 3px var(--color-brand-purple-25);
}
/* Checked State — Filled */
.donorfy-form input[type="checkbox"]:checked {
background: #191414;
border-color: #191414;
}
/* Optional: Subtle Inner Indicator */
.donorfy-form input[type="checkbox"]:checked::after {
display: none;
}
/* Responsive */
@media (max-width: 767px) {
#CreditCardForm.donorfy-form,
#DirectDebitForm.donorfy-form {
padding: 0;
}
#CreditCardForm.donorfy-form .donorfy-section,
#DirectDebitForm.donorfy-form .donorfy-section {
padding: 1.5rem 1.5rem 1.5rem 1.5rem;
margin-bottom: 1rem !important;
}
.donation-form-panel {
padding: 1.5rem 1.5rem 1.5rem 1.5rem;
margin-bottom: 1rem !important;
}
.donation-panel-amount {
margin-bottom: 1rem !important;
}
.donation-form-step-heading,
.donorfy-form h3 {
font-size: 1.2rem;
}
:is(#CreditCardForm, #DirectDebitForm).donorfy-form .donorfy-section-group--step-2 {
padding: 1.5rem 1.25rem;
}
:is(#CreditCardForm, #DirectDebitForm).donorfy-form .donorfy-section-subheading {
font-size: 1.05rem;
}
.donation-amount-grid {
gap: 0.65rem;
}
.donation-amount-button {
min-height: 50px;
padding: 0.25rem 0.5rem;
}
.donation-custom-wrap {
min-height: 50px;
padding: 0.25rem 0.5rem;
}
.donation-custom-inline-label {
margin-top: 0.85rem;
margin-bottom: 0.5rem;
}
.donation-amount-value,
.donation-custom-prefix,
.donation-custom-wrap input[type=number] {
font-size: 1.75rem !important;
letter-spacing: -1px !important;
}
.donation-amount-active-note.is-visible {
padding: 0.85rem 1rem;
}
.donation-custom-input {
font-size: 2rem !important;
line-height: 1.1 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
}
/* Sticky media sections: shift cards higher so they clear the viewport top. */
.nectar-sticky-media-sections.type--scroll-pinned-sections {
--sticky-section-top-shift: 60vh !important;
}
.nectar-sticky-media-sections.type--scroll-pinned-sections .nectar-sticky-media-section__content-section {
top: calc(var(--section-offset, 0px) - var(--sticky-section-top-shift)) !important;
}
/* Layered card reveal uses absolute cards at top:50%; shift that baseline up globally. */
.nectar-sticky-media-sections.type--layered-card-reveal {
--layered-card-base-top: 58%;
--layered-card-top-shift: 9vh;
--layered-card-extra-scroll: 16vh;
}
.type--layered-card-reveal.layered-card-reveal-effect--stack .nectar-sticky-media-section__content-section,
.nectar-sticky-media-sections.type--layered-card-reveal .nectar-sticky-media-section__content-section:not(:nth-child(1)) {
top: calc(var(--layered-card-base-top) - var(--layered-card-top-shift)) !important;
}
/* Extra scroll runway keeps cards moving fully off-screen at top. */
.type--layered-card-reveal.layered-card-reveal-effect--stack {
height: calc(
var(--section-count, 1) * (
90vh - var(--wp-admin--admin-bar--height, 0px) - var(--section-offset, 0px) + var(--layered-card-extra-scroll)
)
) !important;
}
@media (max-width: 1000px) {
.nectar-sticky-media-sections.type--scroll-pinned-sections {
--sticky-section-top-shift: 7vh;
}
.nectar-sticky-media-sections.type--layered-card-reveal {
--layered-card-base-top: 60%;
--layered-card-top-shift: 10vh;
--layered-card-extra-scroll: 18vh;
}
}
/* Hero Gradient – Smooth Continuous Crossfade */
.hero-gradient-row .row-bg-wrap .row-bg-overlay {
position: absolute;
inset: 0;
z-index: 3;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
background-color: var(--color-paper);
background: linear-gradient(
0deg,
var(--hero-gradient-orange-on-paper) 25%,
var(--hero-gradient-purple-on-paper) 90%
);
}
/* Shared Pseudo-Element Setup */
.hero-gradient-row .row-bg-wrap .row-bg-overlay::before,
.hero-gradient-row .row-bg-wrap .row-bg-overlay::after {
content: '';
position: absolute;
inset: 0;
display: block;
pointer-events: none;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: opacity;
}
/* Pink overlay (::before): second in sequence after base purple. */
.hero-gradient-row .row-bg-wrap .row-bg-overlay::before {
background: linear-gradient(
0deg,
var(--hero-gradient-orange-on-paper) 25%,
var(--hero-gradient-pink-on-paper) 90%
);
animation: heroGradientPink 21s ease-in-out infinite;
}
/* Blue overlay (::after): third in sequence, then fades back to base purple. */
.hero-gradient-row .row-bg-wrap .row-bg-overlay::after {
background: linear-gradient(
0deg,
var(--hero-gradient-orange-on-paper) 25%,
var(--hero-gradient-blue-on-paper) 90%
);
animation: heroGradientBlue 21s ease-in-out infinite;
}
/*
* Sequence (21s loop, was 32s): base purple/orange → pink/orange → blue/orange → purple/orange → …
* Base layer is always purple; pseudos only crossfade on top. Pink out overlaps blue in (32–42%).
*/
@keyframes heroGradientPink {
0%,
8% {
opacity: 0;
}
22% {
opacity: 1;
}
28% {
opacity: 1;
}
42% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes heroGradientBlue {
0%,
32% {
opacity: 0;
}
46% {
opacity: 1;
}
52% {
opacity: 1;
}
64% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* Down Arrow */
/* Hero vertical layout: center logo/tagline block and keep arrow near bottom. */
.hero-gradient-row {
position: relative;
--hero-arrow-scale: calc(var(--tagline-font-size) / 4rem);
}
.hero-gradient-row > .row_col_wrap_12 > .row_col_wrap_12_inner {
min-height: 100svh;
display: flex;
flex-direction: column;
}
.hero-gradient-row .logomarkandtagline {
margin-top: auto;
margin-bottom: auto;
position: relative;
top: -5vh;
}
.hero-gradient-row .tagline {
text-wrap: normal;
}
.hero-gradient-row .hero-arrow-row,
.hero-gradient-row .nectar-next-section.hero-arrow-row,
.hero-gradient-row .nectar-next-section {
position: absolute !important;
left: 50%;
bottom: calc(2rem * var(--hero-arrow-scale) + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
z-index: 6;
width: calc(120px * var(--hero-arrow-scale));
}
/* Hide Salient's Built-In SVG */
.hero-gradient-row .nectar-next-section svg.next-arrow {
display: none !important;
}
/* Centre The Link */
.hero-gradient-row .nectar-next-section {
position: absolute !important;
display: block;
width: calc(120px * var(--hero-arrow-scale));
height: calc(40px * var(--hero-arrow-scale));
margin: 0 auto;
line-height: 1;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
--arrow-brick-height: calc(8px * var(--hero-arrow-scale));
--arrow-brick-width: calc(var(--arrow-brick-height) * 3.8); /* visual compensation for rotated chevron */
--arrow-brick-radius: calc(2px * var(--hero-arrow-scale));
--arrow-angle: 45deg;
--arrow-overlap: calc(14px * var(--hero-arrow-scale));
}
/* Draw The Chevron With Two Rounded Strokes */
.hero-gradient-row .nectar-next-section::before,
.hero-gradient-row .nectar-next-section::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: var(--arrow-brick-width);
height: var(--arrow-brick-height);
background: #fafafa;
border-radius: var(--arrow-brick-radius);
transform-origin: center;
}
/* Left Arm */
.hero-gradient-row .nectar-next-section::before {
transform: translate(calc(-100% + (var(--arrow-overlap) / 2)), -50%) rotate(var(--arrow-angle));
}
/* Right Arm */
.hero-gradient-row .nectar-next-section::after {
transform: translate(calc(0% - (var(--arrow-overlap) / 2)), -50%) rotate(calc(-1 * var(--arrow-angle)));
}
/* CTA Fancy Box */
.nectar-fancy-box[data-style="parallax_hover"][data-align="bottom"] .meta-wrap .inner {
padding: 0.8rem 1rem;
width: calc(100% - 60px);
background-color: #FAFAFA;
margin-bottom: 30px;
box-shadow: 0 0px 20px rgba(25,20,20,0.2);
}
@media only screen and (max-width: 1000px) {
.nectar-fancy-box[data-style="parallax_hover"][data-align="bottom"] .meta-wrap .inner {
padding: 0.8rem 1rem;
}
}
.nectar-fancy-box[data-style=default] .inner *, .nectar-fancy-box[data-style=hover_desc] .inner *, .nectar-fancy-box[data-style=parallax_hover] .inner * {
color: #191414;
}
.nectar-fancy-box[data-style="parallax_hover"],
.nectar-fancy-box[data-style="parallax_hover"]:after {
transition: box-shadow 0.3s ease;
}
.nectar-fancy-box[data-style="parallax_hover"]:hover,
.nectar-fancy-box[data-style="parallax_hover"]:hover:after {
box-shadow: 0 0px 80px rgba(25,20,20,0.2);
}
/* Post Grid */
.nectar-post-grid-wrap[data-style=content_under_image] .nectar-post-grid[data-shadow-hover=yes][data-card=yes] .nectar-post-grid-item:hover {
transform: rotate(0.5deg) scale(1.025);
}
.nectar-post-grid-wrap[data-style=content_under_image] .nectar-post-grid[data-shadow-hover=yes][data-card=yes] .nectar-post-grid-item:hover:after {
box-shadow: 0 0px 20px rgba(25,20,20,0.2);
}
.nectar-post-grid-wrap[data-style=content_under_image] .nectar-post-grid .nectar-post-grid-item[data-has-img="false"] .nectar-post-grid-item-bg-wrap {
visibility: hidden;
pointer-events: none;
order: 2;
flex: 0 0 auto;
}
.nectar-post-grid-wrap[data-style=content_under_image] .nectar-post-grid .nectar-post-grid-item[data-has-img="false"] .content {
padding-top: max(7%, 30px);
order: 1;
position: static;
display: block !important;
height: auto !important;
}
.nectar-post-grid-wrap[data-style=content_under_image] .nectar-post-grid[data-text-layout*="all_bottom_left"] .nectar-post-grid-item[data-has-img="false"] .content {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
display: block !important;
height: auto !important;
justify-content: flex-start !important;
padding-top: max(7%, 30px) !important;
}
.nectar-post-grid-wrap[data-style=content_under_image] .nectar-post-grid .nectar-post-grid-item[data-has-img="false"] .inner {
display: flex;
flex-direction: column;
height: 100%;
}
.nectar-post-grid-wrap[data-style=content_under_image] .nectar-post-grid[data-card=yes] .post-heading {
font-family: "Inclusive Sans", sans-serif;
font-weight: 700;
margin: 1rem 0;
font-size: 1.75rem;
line-height: 1.2;
}
@media only screen and (max-width:690px) {
.nectar-post-grid-wrap[data-style=content_under_image] .nectar-post-grid[data-card=yes] .post-heading {
font-size: 1.25rem;
}
}
.nectar-post-grid-wrap:not([data-style=content_overlaid]) .nectar-post-grid-item .content .meta-excerpt {
max-width: 100%;
}
.nectar-post-grid .nectar-post-grid-item .meta-excerpt,
.nectar-post-grid .meta-date {
font-size: 1.125rem;
line-height: 1.333;
}
@media only screen and (max-width: 1000px) {
.nectar-post-grid .nectar-post-grid-item .meta-excerpt,
.nectar-post-grid .meta-date {
font-size: 1em;
}
}
.category-position-before-title .item-main > .nectar-post-grid-item__meta-wrap:not(:empty) {
margin-top: 20px;
}
p {
padding-bottom: 1.333em;
}
/* Individual Post */
#page-header-bg .span_6 {
width: fit-content !important;
margin: 0 auto;
float: none;
}
@media only screen and (min-width :1px) and (max-width :1000px) {
.single-post #page-header-bg[data-post-hs=default],
.single-post #page-header-bg[data-post-hs=default_minimal] {
height: auto !important;
padding-top: calc(120px + var(--nectar_hook_before_nav_content_height, 0px));
padding-bottom: 60px;
}
body.single-post #page-header-bg[data-post-hs=default][data-alignment-v=middle]:not(.fullscreen-header) .span_6, body.single-post #page-header-bg[data-post-hs=default_minimal][data-alignment-v=middle]:not(.fullscreen-header) .span_6 {
transform: rotate(-1.5deg) !important;
}
.single .heading-title[data-header-style=default_minimal] h1,
body[data-ext-responsive=true].single-post #page-header-bg[data-post-hs=default_minimal] h1 {
font-size: 2.5rem !important;
}
.single-post.ascend .container-wrap.fullscreen-blog-header,
body.single-post[data-bg-header=true].ascend .container-wrap {
padding-top: 30px !important;
margin-top: 0 !important;
}
}
#page-header-bg[data-post-hs="default_minimal"] .inner-wrap {
transform: rotate(-1.5deg) !important;
background-color: rgba(250, 250, 250, 1.0);
padding: 20px 0px 20px 0px !important;
}
.single .heading-title[data-header-style=default_minimal] h1,
body[data-ext-responsive=true].single-post #page-header-bg[data-post-hs=default_minimal] h1 {
padding: 20px 30px 15px 30px !important;
}
#page-header-bg h1, #page-header-bg .subheader, .nectar-box-roll .overlaid-content h1, .nectar-box-roll .overlaid-content .subheader, #page-header-bg #portfolio-nav a i, body .section-title #portfolio-nav a:hover i, .page-header-no-bg h1, .page-header-no-bg span, #page-header-bg #portfolio-nav a i, #page-header-bg span, #page-header-bg #single-below-header a:hover, #page-header-bg #single-below-header a:focus, #page-header-bg.fullscreen-header .author-section a {
color: rgba(25,20,20,1.0) !important;
font-weight: normal;
}
.featured-media-under-header__cat-wrap .meta-category .news,
.single .heading-title[data-header-style="default_minimal"] .meta-category .news,
#page-header-bg[data-post-hs="default_minimal"] .inner-wrap > .news {
background-color: var(--color-brand-peach);
}
.featured-media-under-header__cat-wrap .meta-category .fundraising,
.single .heading-title[data-header-style="default_minimal"] .meta-category .fundraising,
#page-header-bg[data-post-hs="default_minimal"] .inner-wrap > .fundraising {
background-color: var(--color-brand-rose);
}
.featured-media-under-header__cat-wrap .meta-category .events,
.single .heading-title[data-header-style="default_minimal"] .meta-category .events,
#page-header-bg[data-post-hs="default_minimal"] .inner-wrap > .events {
background-color: var(--color-brand-lilac);
}
.featured-media-under-header__cat-wrap .meta-category .stories,
.single .heading-title[data-header-style="default_minimal"] .meta-category .stories,
#page-header-bg[data-post-hs="default_minimal"] .inner-wrap > .stories {
background-color: var(--color-brand-sky);
}
#page-header-bg[data-post-hs="default_minimal"] .inner-wrap {
opacity: 1 !important;
}
/* Keep minimal header/category badges aligned with Post Grid filter scale */
.single .heading-title[data-header-style=default_minimal] .meta-category a,
#page-header-bg[data-post-hs="default_minimal"] .inner-wrap >a, .material #page-header-bg.fullscreen-header .inner-wrap >a {
color: #191414;
border: none;
padding: .4em .65em !important;
margin: 4px 5px 0px 4px;
display: inline-block;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
font-family: "Trio Grotesk", sans-serif;
letter-spacing: 0.04em;
font-size: 0.75rem !important;
font-weight: 500;
font-style: normal;
text-transform: uppercase;
}
#page-header-bg[data-post-hs="default_minimal"] .inner-wrap > a:not(:hover) {
color: #191414;
}
body[data-button-style*=slightly_rounded] #page-header-bg[data-post-hs=default_minimal] .inner-wrap>a:hover, body[data-button-style*=slightly_rounded].single .heading-title[data-header-style=default_minimal] .meta-category a:hover {
transform: translateY(0px)!important;
pointer-events: none;
cursor: default;
}
body[data-button-style*=slightly_rounded] #page-header-bg[data-post-hs=default_minimal] .inner-wrap>a, body[data-button-style*=slightly_rounded].single .heading-title[data-header-style=default_minimal] .meta-category a {
pointer-events: none;
cursor: default;
}
.post-area {
margin-top: 0px;
}
.post .content-inner {
padding-bottom: 0px !important;
}
@media only screen and (max-width: 690px) {
.post .content-inner {
padding-bottom: 0px !important;
}
}
/* Recent Posts Widget */
.widget .nectar_widget[class*=nectar_blog_posts_][data-style=hover-featured-image-gradient-and-counter]>li::before, .widget .nectar_widget[class*=nectar_blog_posts_][data-style=minimal-counter]>li::before,
.widget .nectar_widget[class*=nectar_blog_posts_] .arrow-circle {
display: none !important;
}
#footer-outer #footer-widgets .widget .nectar_widget[class*=nectar_blog_posts_][data-style=minimal-counter]>li, #sidebar .widget .nectar_widget[class*=nectar_blog_posts_][data-style=minimal-counter]>li, .widget .nectar_widget[class*=nectar_blog_posts_][data-style=minimal-counter]>li {
padding-left: 0px;
margin-bottom: 10px;
}
#sidebar h4 {
color: rgba(25,20,20,1.0);
opacity: 1.0;
font-weight: 700;
font-size: 1.5rem;
line-height: 1.5;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(25, 20, 20, 0.2) !important;
}
body .widget .nectar_widget[class*=nectar_blog_posts_]>li .post-title {
font-weight: 700;
font-size: 1.125rem;
line-height: 1.25;
color: rgba(25,20,20,1.0);
}
body .widget .nectar_widget[class*=nectar_blog_posts_]>li .post-date {
font-size: 1.125rem;
line-height: 1.25;
margin-top: 0px;
}
@media only screen and (max-width: 1000px) {
body .widget .nectar_widget[class*=nectar_blog_posts_]>li .post-title,
body .widget .nectar_widget[class*=nectar_blog_posts_]>li .post-date {
font-size: 1rem;
line-height: 1.333;
}
}
#sidebar .widget .nectar_widget[class*=nectar_blog_posts_][data-style=minimal-counter]>li, .widget .nectar_widget[class*=nectar_blog_posts_][data-style=minimal-counter]>li {
padding-bottom: 15px;
border-bottom: 1px solid rgba(25, 20, 20, 0.2) !important;
}
/* Sharing Menu */
.nectar-social.fixed {
position: fixed;
right: 60px;
bottom: 30px;
height: auto;
width: 50px;
line-height: 50px;
z-index: 1000;
}
/* Main Trigger Button */
body .nectar-social.fixed > a,
#ajax-content-wrap .nectar-social.fixed > a {
width: auto !important;
height: auto !important;
min-width: 0 !important;
padding: 10px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
line-height: 1 !important;
transform: none !important;
}
/* Trigger Background */
.sharing-default-minimal .nectar-love.loved,
body .nectar-social[data-color-override="override"].fixed > a:before,
body .nectar-social[data-color-override="override"].fixed .nectar-social-inner a {
background-color: rgba(25, 20, 20, 1.0);
}
body .nectar-social.fixed > a:before,
#ajax-content-wrap .nectar-social.fixed > a:before {
width: 100% !important;
height: 100% !important;
border-radius: 6px;
transform: none !important;
}
.nectar-social.fixed:hover > a:before {
box-shadow: 0 0 20px rgba(25,20,20,0.2);
}
.nectar-social.fixed .nectar-social-inner a {
border-radius: 6px;
box-shadow: 0 0px 20px rgba(25,20,20,0.2);
}
.nectar-social.fixed .nectar-social-inner {
height: 29px;
}
/* Replace Icon With Text */
#ajax-content-wrap .nectar-social.fixed > a > i:before,
body .nectar-social.fixed > a > i:before,
body .nectar-social.hover .share-btn > i:before {
content: "SHARE";
display: inline-block;
width: auto;
height: auto;
line-height: 1;
}
/* Text Styling */
#ajax-content-wrap .nectar-social.fixed > a > i,
body .nectar-social.fixed > a > i,
body .nectar-social.hover .share-btn > i {
font-family: "Trio Grotesk", sans-serif !important;
font-weight: 500;
font-style: normal;
width: auto !important;
height: auto !important;
line-height: 1 !important;
display: inline-block !important;
transform: none !important;
}
body .nectar-social.fixed a i,
#ajax-content-wrap .nectar-social.fixed a i {
color: #fafafa;
font-size: 14px;
letter-spacing: 0.04em;
}
/* Stop Scaling / Movement On Hover */
body .nectar-social.fixed:hover > a,
body .nectar-social.fixed > a:hover,
#ajax-content-wrap .nectar-social.fixed:hover > a,
#ajax-content-wrap .nectar-social.fixed > a:hover,
body .nectar-social.fixed:hover > a > i,
body .nectar-social.fixed > a:hover > i,
#ajax-content-wrap .nectar-social.fixed:hover > a > i,
#ajax-content-wrap .nectar-social.fixed > a:hover > i {
transform: none !important;
background-color: rgba(25, 20, 20, 0.2);
}
/* Position Sharing Icons To The Right Of The Button */
body .nectar-social.fixed .nectar-social-inner,
#ajax-content-wrap .nectar-social.fixed .nectar-social-inner {
left: 100% !important;
right: 0px !important;
margin-left: -3px;
bottom: 0;
transform: none !important;
}
/* Holding page — logo only, coming-soon message, no footer, no cookie banner. */
body.oh-holding-page #footer-outer,
body.oh-holding-page #copyright,
body.oh-holding-page .footer-widgets,
body.oh-holding-page #cmplz-cookiebanner-container,
body.oh-holding-page #cmplz-manage-consent,
body.oh-holding-page .cmplz-soft-cookiewall {
display: none !important;
visibility: hidden !important;
}
body.oh-holding-page.cmplz-banner-active *:not(.cmplz-cookiebanner):not(.cmplz-cookiebanner *) {
pointer-events: auto !important;
user-select: auto !important;
}
body.oh-holding-page #header-outer #top nav > ul.sf-menu,
body.oh-holding-page #header-outer #top nav > ul.buttons,
body.oh-holding-page #header-outer .slide-out-widget-area-toggle,
body.oh-holding-page #header-outer .mobile-search,
body.oh-holding-page #header-outer .nectar-mobile-only.mobile-header {
display: none !important;
}
body.oh-holding-page #header-outer #top nav {
display: flex !important;
align-items: center;
flex: 1 1 auto;
justify-content: flex-end;
width: 100%;
min-width: 0;
padding-right: 28px;
padding-left: 0;
overflow: visible;
}
body.oh-holding-page #header-outer #top .row {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
body.oh-holding-page #header-outer #top .col.span_3 {
flex: 0 0 auto;
}
body.oh-holding-page #header-outer #top .col.span_9 {
position: relative !important;
right: auto !important;
top: auto !important;
width: auto !important;
height: auto !important;
min-height: 0;
flex: 1 1 auto;
min-width: 0;
display: flex !important;
align-items: center;
justify-content: flex-end;
z-index: 1;
}
body.oh-holding-page #header-outer #logo {
cursor: default;
pointer-events: none;
}
body.oh-holding-page #top .span_9 > .slide-out-widget-area-toggle,
body.oh-holding-page #top .mobile-search,
body.oh-holding-page #top #mobile-cart-link {
display: none !important;
}
body.oh-holding-page .oh-holding-nav-message {
display: block;
margin: 0 0 0 auto;
padding: 0;
font-family: var(--font-body);
font-size: 1.125rem;
line-height: 1.333;
color: var(--color-ink);
text-align: right;
white-space: nowrap;
overflow: visible;
}
/* Tablet / small desktop: wide bar (logo left, notice right) — overrides Salient 1000–1230px nav rules. */
@media only screen and (min-width: 769px) and (max-width: 1230px) {
body.oh-holding-page #header-outer #top .row {
flex-wrap: nowrap;
align-items: center;
}
body.oh-holding-page #header-outer #top .col.span_9 {
position: relative !important;
right: auto !important;
top: auto !important;
width: auto !important;
height: auto !important;
flex: 1 1 auto;
justify-content: flex-end;
margin-top: 0;
}
body.oh-holding-page #header-outer #top nav {
display: flex !important;
justify-content: flex-end;
padding-right: 18px;
}
body.oh-holding-page .oh-holding-nav-message {
margin: 0 0 0 auto;
text-align: right;
white-space: nowrap;
}
}
@media only screen and (max-width: 1230px) {
body.oh-holding-page #header-outer #top nav {
display: flex !important;
}
body.oh-holding-page #header-outer #top nav > ul.sf-menu,
body.oh-holding-page #header-outer #top nav > ul.buttons {
display: none !important;
}
}
/* Narrow: stack notice under logo, left-aligned. */
@media only screen and (max-width: 768px) {
body.oh-holding-page #header-outer #top .row {
flex-wrap: wrap;
align-items: flex-start;
}
body.oh-holding-page #header-outer #top .col.span_3 {
flex: 0 0 100%;
width: 100% !important;
max-width: 100%;
}
body.oh-holding-page #header-outer #top .col.span_9 {
flex: 0 0 100%;
width: 100% !important;
max-width: 100%;
justify-content: flex-start;
margin-top: 0.5rem;
}
body.oh-holding-page #header-outer #top nav {
justify-content: flex-start;
width: 100%;
padding-right: 18px;
padding-left: 0;
}
body.oh-holding-page .oh-holding-nav-message {
margin: 0;
font-size: 1rem;
line-height: 1.4;
text-align: left;
white-space: normal;
}
}
/* Complianz cookie banner — typography, spacing, shadow, buttons (Contact design system). */
/*
* Variables on the container so they beat Complianz :root (banner CSS loads after style.css).
* Adjust --cmplz_banner_margin here for button/link gaps and banner row spacing.
*/
#cmplz-cookiebanner-container {
--cmplz_banner_margin: 0.75rem;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner {
--cmplz_banner_background_color: var(--color-paper) !important;
--cmplz_banner_border_color: transparent !important;
--cmplz_banner_border_width: 0 !important;
--cmplz_banner_border_radius: var(--radius-md) !important;
--cmplz_banner_width: 29rem !important;
--cmplz_text_color: var(--color-ink) !important;
--cmplz_hyperlink_color: var(--color-ink) !important;
--cmplz_title_font_size: 1.125rem !important;
--cmplz_text_font_size: 1.125rem !important;
--cmplz_text_line_height: 1.333 !important;
--cmplz_link_font_size: 1.125rem !important;
--cmplz_button_font_size: var(--button-font-size-sm) !important;
--cmplz_button_border_radius: var(--radius-md) !important;
--cmplz_button_accept_background_color: var(--color-ink) !important;
--cmplz_button_accept_border_color: var(--color-ink) !important;
--cmplz_button_accept_text_color: var(--color-paper) !important;
--cmplz_button_deny_background_color: var(--color-ink) !important;
--cmplz_button_deny_border_color: var(--color-ink) !important;
--cmplz_button_deny_text_color: var(--color-paper) !important;
font-family: var(--font-body);
color: var(--color-ink);
box-shadow: var(--shadow-soft) !important;
border: 0 !important;
padding: 1.5rem 1.75rem !important;
grid-row-gap: var(--cmplz_banner_margin) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:hover {
box-shadow: var(--shadow-soft) !important;
transition: box-shadow 0.35s ease;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
grid-template-columns: 1fr auto !important;
align-items: flex-start;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
justify-self: start;
grid-column-start: 1;
font-family: var(--font-heading);
font-weight: 500;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0;
text-align: left;
line-height: 1.2;
margin: 0;
}
/* Thin X close icon (replaces heavy Font Awesome “times” SVG). */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close {
justify-self: end;
align-self: start;
grid-column-start: 2;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.125rem;
height: 1.125rem;
min-width: 1.125rem;
min-height: 1.125rem;
font-size: 0 !important;
line-height: 0 !important;
color: var(--color-ink);
opacity: 1;
cursor: pointer;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close svg,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close .svg-inline--fa {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close::before,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 2px;
background-color: var(--color-ink);
border-radius: 1px;
transform-origin: center;
pointer-events: none;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:focus {
opacity: 0.75;
}
.cmplz-cookiebanner p {
padding-bottom: 0 !important;
overflow: visible !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
min-width: 0 !important;
overflow: visible !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
font-family: var(--font-body);
font-weight: 400;
font-size: 1.0rem;
line-height: 1.333;
margin-bottom: 0.5rem;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message a {
color: var(--color-ink);
text-decoration: underline;
text-underline-offset: 0.15em;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message a:hover {
opacity: 0.75;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents.cmplz-links,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links.cmplz-information,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider,
.cmplz-cookiebanner .cmplz-links.cmplz-documents,
.cmplz-cookiebanner .cmplz-links ul {
display: none !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links {
gap: var(--cmplz_banner_margin) !important;
}
/* Match Get in touch “Send message” (.nf-form-cont .submit-container). */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
padding: var(--button-padding-sm) !important;
font-family: var(--font-heading) !important;
font-weight: 500 !important;
font-style: normal !important;
font-size: 1rem !important;
line-height: 1.2 !important;
border-radius: var(--radius-md) !important;
border: 0 !important;
text-decoration: none !important;
background-color: var(--color-ink) !important;
color: var(--color-paper) !important;
white-space: normal;
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
background-color 0.3s ease,
color 0.3s ease,
opacity 0.3s ease !important;
transform-origin: 50% 50% !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:focus,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:focus {
transform: rotate(-1deg) scale(1.025);
box-shadow: var(--shadow-soft);
background-color: var(--color-ink) !important;
color: var(--color-paper) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:active,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:active {
transform: rotate(-1deg) scale(1.025);
box-shadow: var(--shadow-soft);
background-color: var(--color-ink) !important;
color: var(--color-paper) !important;
}
@media only screen and (max-width: 1000px) {
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
font-size: 1.125rem !important;
line-height: 1.2 !important;
padding: 10px 16px !important;
}
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-manage-options,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons a.cmplz-manage-options {
display: none !important;
}
#cmplz-manage-consent .cmplz-manage-consent {
display: none !important;
}
.cmplz-soft-cookiewall {
background-color: var(--color-ink-30) !important;
}
/* Inset from viewport edges without forcing a fixed min-width that overflows. */
@media only screen and (min-width: 769px) {
#cmplz-cookiebanner-container .cmplz-cookiebanner {
top: auto !important;
left: auto !important;
right: 25px !important;
bottom: 25px !important;
transform: none !important;
width: auto !important;
min-width: 0 !important;
max-width: min(var(--cmplz_banner_width), calc(100vw - 50px)) !important;
}
}
@media only screen and (max-width: 768px) {
#cmplz-cookiebanner-container .cmplz-cookiebanner {
top: auto !important;
left: 25px !important;
right: 25px !important;
bottom: 25px !important;
transform: none !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
padding: 1.25rem 1.25rem 1.5rem !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
min-width: 0 !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
flex-direction: column;
}
}
/* Respect Reduced-Motion Preferences For Accessibility. */
@media (prefers-reduced-motion: reduce) {
.hero-gradient-row .row-bg-wrap .row-bg-overlay,
.hero-gradient-row .row-bg-wrap .row-bg-overlay::before,
.hero-gradient-row .row-bg-wrap .row-bg-overlay::after {
animation: none !important;
}
.nectar-button,
.nectar-post-grid-wrap .load-more,
#ajax-content-wrap .nectar-cta .link_wrap a,
#header-outer .nectar-cta .link_wrap a,
.nectar-post-grid-wrap[data-style=content_under_image] .nectar-post-grid[data-shadow-hover=yes][data-card=yes] .nectar-post-grid-item,
.nectar-social.fixed > a {
transition: none !important;
transform: none !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner {
animation: none !important;
-webkit-animation: none !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus {
transform: none;
}
}
body .row .col.section-title h1,
body .row .col.section-title h2 {
font-weight: normal;
}