). Specificity (0,7,2)
beats the generic .menu-item rule below at (0,6,2).
============================================================ */
body header .e-con.fw-nav-panel .elementor-nav-menu--main .elementor-nav-menu > .nav-col-header.menu-item > a.elementor-item {
font-family: var( --e-global-typography-c1bdd61-font-family );
font-size: var( --e-global-typography-c1bdd61-font-size );
font-weight: var( --e-global-typography-c1bdd61-font-weight );
font-style: var( --e-global-typography-c1bdd61-font-style );
text-transform: var( --e-global-typography-c1bdd61-text-transform );
letter-spacing: var( --e-global-typography-c1bdd61-letter-spacing );
line-height: var( --e-global-typography-c1bdd61-line-height );
}
/* Column heading: top-level item styled as a non-interactive heading.
padding:0 removes Elementor's default link padding (source of indentation). */
body header .e-con.fw-nav-panel .elementor-nav-menu--main .elementor-nav-menu > .menu-item > a.elementor-item {
font-size: 1.5rem;
font-weight: 700;
color: #213349;
line-height: 1.02;
text-decoration: none;
display: block;
padding: 0;
margin-bottom: 1rem;
pointer-events: none;
cursor: default;
}
@media ( max-width: 767px ) {
body header .e-con.fw-nav-panel .elementor-nav-menu--main .elementor-nav-menu > .menu-item > a.elementor-item {
font-size: 1.125rem;
margin-bottom: 1.25rem;
}
}
/* Sub-menus: JS strips SmartMenus' inline display:none/position:absolute.
CSS then controls — (0,3,1) specificity beats Elementor's own stylesheet rules. */
body header .e-con.fw-nav-panel .elementor-nav-menu--main .sub-menu {
display: flex;
flex-direction: column;
gap: 0.375rem;
list-style: none;
padding: 0;
margin: 0;
position: static;
opacity: 1;
visibility: visible;
box-shadow: none;
border: none;
min-width: 0;
background: transparent;
width: 100%;
}
body header .e-con.fw-nav-panel .elementor-nav-menu--main .sub-menu .menu-item a {
font-size: 1rem;
color: #213349;
text-decoration: none;
display: inline-block;
padding: 0.25rem 0.6rem 0.25rem 0;
border-radius: 3px;
transition: background-color 0.15s ease, color 0.15s ease;
width: 100%;
}
body header .e-con.fw-nav-panel .elementor-nav-menu--main .sub-menu .menu-item a:hover,
body header .e-con.fw-nav-panel .elementor-nav-menu--main .sub-menu .menu-item a.elementor-item-active {
background-color: #213349;
color: #ffffff;
}
/* ============================================================
SECTION: Page Dimmer Overlay
PAGE(S): Global
REASON: Semi-transparent layer below nav panel on desktop
is toggled by JS and cannot be set in Elementor.
============================================================ */
.fw-nav-overlay {
display: none;
position: fixed;
top: 270px;
left: 0;
right: 0;
bottom: 0;
background: rgba( 0, 0, 0, 0.35 );
z-index: 9998;
cursor: pointer;
}
/* Desktop only — mobile uses full-screen panel, no separate dimmer */
@media ( min-width: 768px ) {
.fw-menu-open .fw-nav-overlay {
display: block;
}
}
/* ============================================================
SECTION: Footer
PAGE(S): Global
REASON: Multi-column layout, inline SVG icon sizing/color,
map iframe sizing, and link hover underline cannot
be set reliably in Elementor's style panel alone.
Scoped under .elementor-location-footer throughout
to beat Elementor's per-element and Global Color CSS.
============================================================ */
/* ── Main layout — CSS Grid ───────────────────────────────── */
/* Layout (desktop):
col 1 (266px) │ col 2 (1fr) │ col 3 (map, fixed)
─────────────────────────────────────────────────────
row 1: branding │ menu cols │ MAP ↕ (spans rows)
row 2: legal (spans cols 1–2) │ MAP ↕
Primary selectors use class names (when PHP hook applies _css_classes).
Fallback selectors use data-id attributes (always reliable).
data-ids are stable for the current import — update if template is reimported. */
/* fw-footer uses e-con-full so children are direct — no e-con-inner wrapper.
Apply grid directly to .fw-footer itself. */
body footer .elementor-location-footer .fw-footer,
.elementor-element-a6a11b2 {
display: grid !important;
grid-template-columns: clamp(203px, calc(4.08vw + 187.71px), 266px) 1fr 275px;
grid-template-rows: 1fr auto;
row-gap: 0;
column-gap: 32px;
align-items: start;
box-sizing: border-box;
--padding-left: calc((100vw - 1200px) / 2 + 48px)!important;
--padding-right: calc((100vw - 1200px) / 2 + 48px)!important;
}
/* ── Branding column — grid col 1, row 1 ─────────────────── */
.elementor-location-footer .footer-branding,
.elementor-element-fwf_brand {
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
gap: 1.25rem;
min-width: 0;
align-self: end;
}
/* Scope with location wrapper to beat Elementor's Global Color */
.elementor-location-footer .elementor-widget-text-editor p {
font-size: 0.9375rem;
line-height: 1.6;
color: #040201;
margin: 0 0 0.25rem 0;
}
.elementor-location-footer .elementor-widget-text-editor a {
color: #040201;
text-decoration: none;
}
.elementor-location-footer .elementor-widget-text-editor a:hover {
text-decoration: underline;
}
@media ( min-width:1921px ) {
footer.elementor-location-footer .fw-footer.e-con-full {
margin-inline: calc(50% - 50vw);
max-width: 100vw;
width: 100vw;
padding-left: calc((100vw - 1200px) / 2 + 48px);
padding-right: calc((100vw - 1200px) / 2 + 48px);
}
}
/* ── Social icons ─────────────────────────────────────────── */
.fw-footer__social {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: center;
}
.fw-footer__social-link {
display: flex;
align-items: center;
justify-content: center;
color: #040201;
transition: color 0.15s ease;
}
.fw-footer__social-link:hover {
color: #A75840;
}
.fw-footer__social-link svg {
width: 20px;
height: 20px;
display: block;
}
/* ============================================================
SECTION: Footer — Legal Links Typography
PAGE(S): Global (footer)
REASON: Applies Elementor global font slug 5490df1 to the
legal links container and its anchor tags.
============================================================ */
.elementor-location-footer .fw-footer__legal-links,
.elementor-location-footer .fw-footer__legal-links a {
font-family: var( --e-global-typography-5490df1-font-family );
font-size: var( --e-global-typography-5490df1-font-size );
font-weight: var( --e-global-typography-5490df1-font-weight );
font-style: var( --e-global-typography-5490df1-font-style );
text-transform: var( --e-global-typography-5490df1-text-transform );
letter-spacing: var( --e-global-typography-5490df1-letter-spacing );
line-height: var( --e-global-typography-5490df1-line-height );
}
/* ── Menu columns — grid col 2, row 1 ────────────────────── */
/* The menu container sits in col 2, its inner wrapper lays out
the 3 nav columns in a flex row. */
.elementor-location-footer .footer-menu,
.elementor-element-fwf_nav {
grid-column: 2;
grid-row: 1;
min-width: 0;
align-self: end;
}
.elementor-location-footer .footer-menu > .e-con-inner,
.elementor-element-fwf_nav > .e-con-inner {
display: flex;
flex-direction: row;
gap: clamp( 1.5rem, 3vw, 3rem );
align-items: flex-start;
}
.fw-footer__nav-col {
flex: 1;
min-width: 0;
}
.footer-gray-floater {
height: 30px;
}
body.page-gan-yarok div.footer-gray-floater {
background-color: #ffffff!important;
}
/* Scope to location wrapper to beat Elementor Global Color override.
_css_classes on a widget lands on the wrapper div, not the heading
element itself, so target .elementor-heading-title directly. */
.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
font-size: 0.9375rem;
line-height: 1em;
font-weight: 700;
color: #213349;
margin: 0 0 0.25rem 0;
text-transform: none;
letter-spacing: 0;
}
/* ── Elementor Nav Menu widget in footer ──────────────────── */
/* Strip Elementor's nav-menu chrome — no toggle, no underline pointer,
just a clean vertical list matching the old fw-footer__links style. */
.elementor-location-footer .elementor-widget-nav-menu .elementor-nav-menu--main {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.elementor-location-footer .elementor-widget-nav-menu .elementor-nav-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.elementor-location-footer .elementor-widget-nav-menu .elementor-nav-menu .menu-item a {
font-size: 0.9375rem;
font-weight: 400;
color: #040201;
text-decoration: none;
line-height: 1.4;
display: block;
padding: 5px 0;
}
.elementor-location-footer .elementor-widget-nav-menu .elementor-nav-menu .menu-item a:hover {
text-decoration: underline;
}
/* Hide Elementor's mobile toggle button — footer nav always stays visible */
.elementor-location-footer .elementor-widget-nav-menu .elementor-menu-toggle {
display: none !important;
}
.fw-footer__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Scope with location wrapper to beat Elementor's Global Color on links */
.elementor-location-footer .fw-footer__links a {
font-size: 0.9375rem;
color: #040201;
text-decoration: none;
transition: text-decoration 0.1s ease;
}
.elementor-location-footer .fw-footer__links a:hover {
text-decoration: underline;
}
/* ── Map — grid col 3, rows 1–2 (spans full height) ─────── */
.elementor-location-footer .footer-map,
.elementor-element-fwf_map,
.elementor-element-47c006aa {
grid-column: 3;
grid-row: 1 / 3;
min-width: 0;
align-self: end;
margin-bottom: 20px;
}
.fw-footer__map-frame {
width: 100%;
height: 100%;
min-height: 420px;
border: none;
display: block;
}
/* ── Legal / policy bar — grid cols 1–2, row 2 ───────────── */
.elementor-location-footer .footer-policy,
.elementor-element-fwf_legal {
grid-column: 1 / 3;
grid-row: 2;
align-self: end;
}
/* Border lives on the inner div (inside an HTML widget) so the class is
guaranteed to be in the DOM. The outer .footer-policy container's
_css_classes may not apply reliably, so border is on the inner div. */
.fw-footer__legal-links {
display: flex;
flex-direction: row;
justify-content: center;
gap: 2rem;
padding: 1.125rem 2rem;
border-top: 1px solid #d8dce8;
width: 100%;
box-sizing: border-box;
}
.fw-footer__legal-links a {
font-size: 0.875rem;
color: #040201;
text-decoration: none;
}
.fw-footer__legal-links a:hover {
text-decoration: underline;
}
/* ── Mobile ───────────────────────────────────────────────── */
@media ( max-width: 767px ) {
/* Single-column grid on mobile */
.elementor-location-footer .fw-footer,
.elementor-element-a6a11b2 {
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 2rem;
padding: 2rem 1.5rem;
}
.fw-footer__nav-col {
margin-top:10px;
gap:10px 10px;
}
.elementor-location-footer .footer-branding,
.elementor-element-fwf_brand {
grid-column: 1;
grid-row: auto;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: 1rem;
}
/* Logo + contact side by side on mobile */
.elementor-location-footer .footer-branding .elementor-widget-image,
.elementor-element-fwf_brand .elementor-widget-image {
flex-shrink: 0;
}
.elementor-location-footer .footer-branding .elementor-widget-text-editor,
.elementor-element-fwf_brand .elementor-widget-text-editor {
flex: 1;
}
/* Social icons drop to full row below */
.elementor-location-footer .footer-branding .elementor-widget-html,
.elementor-element-fwf_brand .elementor-widget-html {
flex-basis: 100%;
}
.elementor-location-footer .footer-menu,
.elementor-element-fwf_nav {
grid-column: 1;
grid-row: auto;
}
.elementor-location-footer .footer-menu > .e-con-inner,
.elementor-element-fwf_nav > .e-con-inner {
flex-direction: column;
gap: 1.5rem;
}
.elementor-location-footer .footer-map,
.elementor-element-fwf_map {
grid-column: 1;
grid-row: auto;
width: 100%;
}
.elementor-location-footer .footer-policy,
.elementor-element-fwf_legal {
grid-column: 1;
grid-row: auto;
}
.fw-footer__map-frame {
/*min-height: 200px;*/
}
.e-con.footer-map {
margin-bottom:0;
}
.fw-footer__legal-links {
justify-content: flex-start;
padding-left: 0;
}
}
/* ============================================================
SECTION: Hero — Full-Bleed Video Hero with Sliding Panel
PAGE(S): Any page using [fw_hero_video] shortcode
REASON: Full-viewport video background with overlapping
content panel requires absolute positioning and
JS-driven collapse interaction that cannot be done
in Elementor's widget settings.
============================================================ */
/* Zero out Elementor's padding-block and padding-inline on any container
that wraps the hero — scoped with :has(.fw-hero) so nothing else is affected.
Specificity (0,2,0) beats Elementor's (0,1,0) selectors without !important. */
.e-con-full:has( .fw-hero ),
.e-con > .e-con-inner:has( .fw-hero ) {
padding-block-start: 0;
padding-block-end: 0;
}
.e-con:has( .fw-hero ) {
padding-inline-start: 0;
padding-inline-end: 0;
}
.fw-hero {
position: relative;
width: 100%;
height: var( --fw-hero-height, 100vh );
overflow: hidden;
cursor: pointer;
}
/* On desktop, cap height at 902px so tall viewports don't over-expand;
shrink to 100vh on short viewports so nothing gets clipped. */
@media ( min-width: 768px ) {
.fw-hero {
height: min( var( --fw-hero-height, 902px ), 100vh );
}
}
/* Corner image — 60×200px default, animates to 395px when panel collapses */
.fw-hero img.fw-hero__corner-img {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 200px;
object-fit: cover;
display: block;
z-index: 2;
pointer-events: none;
transition: height 0.4s ease;
}
.fw-hero.is-panel-collapsed img.fw-hero__corner-img {
height: 395px;
}
/* ============================================================
SECTION: Inline video — fw_video shortcode
PAGE(S): Global
REASON: object-fit: cover set via class to avoid inline styles.
============================================================ */
.fw-video {
object-fit: cover;
display: block;
}
/* Video fills the full hero, sits behind the panel */
.fw-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: .4s ease;
}
/* If offset param is set on the shortcode, shift the video left when panel is expanded */
.fw-hero:not(.is-panel-collapsed) .fw-hero__video {
left: var( --fw-hero-video-offset, 0 );
}
@media ( max-width:767px ){
.fw-hero:not(.is-panel-collapsed) .fw-hero__video {
left: auto;
}
}
/* Panel: left-anchored, 75% wide by default.
JS adds .is-collapsed to shrink to 250px and reveal more video.
fw-hero-bg-v2.webp is a textured off-white image that serves as the panel surface. */
.fw-hero__panel {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 75%;
background-color: #f5f3f0; /* fallback while image loads */
background-image: url( '/wp-content/uploads/2026/05/fw-hero-bg-v2.webp' );
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
padding: 135px 60px 60px 210px;
overflow: hidden;
cursor: default;
box-sizing: border-box;
transition: width 0.4s ease;
}
.fw-hero__panel.is-collapsed {
width: 250px;
}
/* Panel content fades out as the panel collapses */
.fw-hero__panel-content {
opacity: 1;
transition: opacity 0.25s ease;
pointer-events: auto;
}
.fw-hero__panel.is-collapsed .fw-hero__panel-content {
opacity: 0;
pointer-events: none;
}
/* Eyebrow: small all-caps label above the H1 (optional) */
.fw-hero__eyebrow {
font-family: var( --e-global-typography-1302ad0-font-family );
font-size: var( --e-global-typography-1302ad0-font-size );
font-weight: var( --e-global-typography-1302ad0-font-weight );
line-height: var( --e-global-typography-1302ad0-line-height );
letter-spacing: var( --e-global-typography-1302ad0-letter-spacing );
text-transform: uppercase;
color: #7c7c7c;
margin: 0 0 0.75rem 0;
}
.fw-hero .fw-hero__panel .fw-hero__h1 {
font-family: var( --e-global-typography-5e371d9-font-family );
font-size: var( --e-global-typography-5e371d9-font-size );
font-weight: var( --e-global-typography-5e371d9-font-weight );
font-style: var( --e-global-typography-5e371d9-font-style );
text-transform: var( --e-global-typography-5e371d9-text-transform );
letter-spacing: var( --e-global-typography-5e371d9-letter-spacing );
line-height: var( --e-global-typography-5e371d9-line-height );
color: var( --page-primary-color );
margin: 0 0 1.25rem 0;
position: relative;
z-index: 2;
}
.fw-hero__description {
font-family: var( --e-global-typography-f4a5bfb-font-family );
font-size: var( --e-global-typography-f4a5bfb-font-size );
font-weight: var( --e-global-typography-f4a5bfb-font-weight );
line-height: var( --e-global-typography-f4a5bfb-line-height );
letter-spacing: var( --e-global-typography-f4a5bfb-letter-spacing );
color: var( --fw-hero-description-color, var( --page-primary-color ) );
margin: 0 0 2rem 0;
}
.fw-hero .fw-hero__description a {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
}
/* CTA link — pointer-events kept auto so it always remains clickable.
Background uses --page-primary-color; text is always white.
Hover/focus inverts: transparent bg, border + text in primary color. */
.fw-hero .fw-hero__panel-content .fw-hero__cta {
display: inline-block;
font-family: var( --e-global-typography-fe2245b-font-family );
font-size: var( --e-global-typography-fe2245b-font-size );
font-weight: var( --e-global-typography-fe2245b-font-weight );
line-height: var( --e-global-typography-fe2245b-line-height );
letter-spacing: var( --e-global-typography-fe2245b-letter-spacing );
color: #ffffff;
background-color: var( --page-primary-color );
border: 2px solid var( --page-primary-color );
text-decoration: none;
padding: 0.75rem 1.75rem;
border-radius: 3px;
cursor: pointer;
pointer-events: auto;
transition: background-color 0.2s ease, color 0.2s ease;
}
.fw-hero__cta:hover,
.fw-hero__cta:focus-visible {
background-color: transparent;
color: var( --page-primary-color );
}
/* Ensure Elementor global link color doesn't override CTA text */
.fw-hero .fw-hero__cta {
color: #ffffff;
}
.fw-hero .fw-hero__cta:hover,
.fw-hero .fw-hero__cta:focus-visible {
color: var( --page-primary-color );
background-color:#ffffff
}
/* Four lines side by side over the exposed video when panel is collapsed.
Each line ~1/4 of the available width with 10px gaps between them.
Line 1: 50% opacity white; lines 2-4: 25% opacity white. 5px tall. */
.fw-hero.is-panel-collapsed::after {
content: '';
position: absolute;
left: 250px;
right: 0;
bottom: 100px;
height: 5px;
pointer-events: none;
z-index: 1;
background-image:
linear-gradient( rgba( 255, 255, 255, 0.5 ), rgba( 255, 255, 255, 0.5 ) ),
linear-gradient( rgba( 255, 255, 255, 0.25 ), rgba( 255, 255, 255, 0.25 ) ),
linear-gradient( rgba( 255, 255, 255, 0.25 ), rgba( 255, 255, 255, 0.25 ) ),
linear-gradient( rgba( 255, 255, 255, 0.25 ), rgba( 255, 255, 255, 0.25 ) );
background-size: calc( ( 100vw - 250px ) / 4 ) 5px;
background-position:
25px 0,
calc( ( 100vw - 250px ) / 4 + 35px ) 0,
calc( ( 100vw - 250px ) / 4 * 2 + 45px ) 0,
calc( ( 100vw - 250px ) / 4 * 3 + 55px ) 0;
background-repeat: no-repeat;
}
/* Player text — shown in video area only when panel is collapsed.
Positioned ~100px above the 4 decorative lines (lines at bottom: 100px,
5px tall, so h2 bottom sits at ~205px). Width = 50% of visible video area. */
.fw-hero__player-text {
display: none;
position: absolute;
left: calc(250px + (100vw - 250px) / 4); /* 250px collapsed panel + 10px inset */
bottom: 205px;
width: calc( ( 100% - 260px ) / 2 );
margin: 0;
color: rgba( 255, 255, 255, 0.75 );
pointer-events: none;
z-index: 2;
}
.fw-hero.is-panel-collapsed .fw-hero__player-text {
display: block;
}
/* Close Video button — hidden while panel is open.
Absolutely positioned 200px from the bottom of the section. */
.fw-hero__panel .fw-hero__close-video {
display: none;
position: absolute;
bottom: 200px;
left: 50%;
transform: translateX( -50% );
font-size: 0.875rem;
font-weight: 700;
color: #ffffff;
background-color: var( --page-primary-color );
border: 2px solid var( --page-primary-color );
border-radius: 3px;
padding: 0.5rem 1rem;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fw-hero__close-video:hover,
.fw-hero__close-video:focus-visible {
background-color: transparent;
color: var( --page-primary-color );
border-color: var( --page-primary-color );
}
/* Show Close Video button only when the panel is collapsed */
.fw-hero__panel.is-collapsed .fw-hero__close-video {
display: block;
}
/* Mobile CTA (outside panel) — hidden on desktop */
.fw-hero__cta--mobile {
display: none;
}
/* Mobile: two-state hero layout
Default: hero stays full height; panel covers all but 132px;
video is a 132×256px strip in the top-right corner.
Expanded: panel hides, video shows at 337×585, CTA below it. */
@media ( max-width: 767px ) {
/* --- Default state --- */
/* Hero keeps its natural height — no override */
/* Hero background matches the panel's parchment texture */
.fw-hero {
height: var( --fw-hero-height-mobile, 812px );
background-color: #f5f3f0;
background-image: url( '/wp-content/uploads/2026/05/fw-hero-bg.webp' );
background-size: contain;
background-position: center;
}
.fw-hero img.fw-hero__corner-img {
width: 25px;
height: 133px;
}
/* Panel covers full width; video overlays on top via z-index */
.fw-hero__panel {
width: 100%;
padding: 30px 20px 30px 41px;
cursor: default;
transition: width 0.4s ease, opacity 0.25s ease, visibility 0.25s ease;
}
.fw-hero__h1 {
max-width: 252px;
margin-top: 100px;
}
/* Video: 132px wide, 256px tall strip anchored to top-right.
Stays right-anchored in both states so width/height can animate.
z-index: 2 keeps it above the full-width panel. */
.fw-hero .fw-hero__video {
top: 0;
right: 0;
bottom: auto;
left: auto;
width: 132px;
height: 256px;
z-index: 2;
cursor: pointer;
transition: width 0.4s ease, height 0.4s ease;
}
/* Close video: never shown on mobile */
.fw-hero__panel .fw-hero__close-video,
.fw-hero__panel.is-collapsed .fw-hero__close-video {
display: none;
}
/* Mobile CTA: hidden but positioned so it can animate in.
opacity + transform allow a smooth transition; pointer-events
prevents accidental taps while invisible. */
.fw-hero__cta--mobile {
display: block;
position: absolute;
top: calc( 585px + 1.5rem );
left: 35px;
opacity: 0;
transform: translateY( 8px );
pointer-events: none;
transition: opacity 0.35s ease 0.2s, transform 0.35s ease 0.2s;
}
/* --- Expanded state (JS adds .is-mobile-expanded to .fw-hero) --- */
.fw-hero.is-mobile-expanded {
overflow: visible;
}
/* Video expands to full-width minus 35px, stays right-anchored */
.fw-hero.is-mobile-expanded .fw-hero__video {
top: 0;
right: 0;
left: auto;
bottom: auto;
width: calc( 100vw - 35px );
height: 585px;
}
/* Panel slides out and fades */
.fw-hero.is-mobile-expanded .fw-hero__panel {
width: 0;
padding: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* CTA eases in once panel is collapsed */
.fw-hero.is-mobile-expanded .fw-hero__cta--mobile {
opacity: 1;
transform: translateY( 0 );
pointer-events: auto;
}
/* Hide decorative lines on mobile */
.fw-hero.is-panel-collapsed::after {
display: none !important;
}
/* Player text: hidden in default strip state (video only 132px wide).
Shown when expanded — positioned 50px above the bottom of the 585px video,
with 41px inset on each side of the expanded video area. */
.fw-hero__player-text {
display: none;
}
.fw-hero.is-mobile-expanded .fw-hero__player-text {
display: block;
left: 76px; /* 35px video left edge + 41px inset */
top: calc( 585px - 50px );
transform: translateY( -100% );
bottom: auto;
width: calc( 100vw - 35px - 82px ); /* video width minus 41px each side */
}
}
/* ============================================================
SECTION: Values Section — Gray Floater
PAGE(S): Any page using the "values-section" container template
REASON: Element must break out of the boxed container to reach
the left browser edge while remaining in document flow.
============================================================ */
.gray-floater {
width: 279px;
height: 87px;
background-color: #E9EBED;
margin-top: calc(-1 * var(--padding-top, 140px));
margin-left: calc(-50vw + 50%);
}
@media ( max-width: 767px ) {
.gray-floater {
display: none;
}
}
/* ============================================================
SECTION: Icon Quote — top/bottom borders
PAGE(S): Any page using .icon-quote
REASON: Semi-transparent border color cannot be set in
Elementor's style panel without losing opacity control.
============================================================ */
.icon-quote {
border-top: 1px solid rgba( 95, 96, 64, 0.25 );
border-bottom: 1px solid rgba( 95, 96, 64, 0.25 );
}
/* ============================================================
SECTION: Blue Corner Heading
PAGE(S): Any page using h2.blue-corner
REASON: Partial background (top-left 291×30px rectangle) cannot
be set in Elementor's style panel.
============================================================ */
.blue-corner {
background-image: linear-gradient( to right, var( --color-twilight ) 291px, transparent 291px );
background-size: 100% 30px;
background-repeat: no-repeat;
background-position: top left;
}
@media ( max-width: 767px ) {
.blue-corner {
background-image: none;
}
}
/* ============================================================
SECTION: Google Reviews
PAGE(S): Homepage (and any page embedding the reviews widget)
REASON:
============================================================ */
.ti-widget .ti-reviews-container-wrapper .ti-inner .ti-profile-details .ti-name {
font-family: var(--e-global-typography-c1bdd61-font-family), Sans-serif;
font-size: var(--e-global-typography-c1bdd61-font-size);
line-height: var(--e-global-typography-c1bdd61-line-height);
letter-spacing: var(--e-global-typography-c1bdd61-letter-spacing);
word-spacing: var(--e-global-typography-c1bdd61-word-spacing);
color:#213349;
}
.ti-widget .ti-reviews-container-wrapper .ti-inner .ti-review-text-container.ti-review-content {
font-family: var(--e-global-typography-54534ee-font-family), Sans-serif;
font-size: var(--e-global-typography-54534ee-font-size);
line-height: var(--e-global-typography-54534ee-line-height);
letter-spacing: var(--e-global-typography-54534ee-letter-spacing);
word-spacing: var(--e-global-typography-54534ee-word-spacing);
color:#213349;
height: auto!important;
}
.ti-widget .ti-reviews-container-wrapper .ti-inner .ti-platform-icon.ti-with-tooltip, .ti-widget .ti-reviews-container-wrapper .ti-inner .ti-stars {
display: none;
}
.ti-widget.ti-goog .ti-reviews-container-wrapper .ti-review-item > .ti-inner {
display: flex!important;
flex-direction: column-reverse;
padding: 20px 20px 20px 0!important;
}
.ti-widget.ti-goog .ti-reviews-container-wrapper .ti-review-item {
padding: 0!important;
}
/* ── Mobile ───────────────────────────────────────────────── */
@media ( max-width: 767px ) {
.ti-widget .ti-reviews-container-wrapper .ti-inner .ti-review-text-container.ti-review-content {
height: auto!important;
}
}
/* ============================================================
SECTION: Carousel — Global
PAGE(S): Global
REASON:
============================================================ */
.swiper-slide.swiper-slide-next .elementor-widget-heading, .swiper-slide.swiper-slide-next .elementor-widget-text-editor {
visibility: hidden;
}
@media ( max-width: 767px ) {
div.e-widget-swiper div.elementor-swiper-button.elementor-swiper-button-prev, div.e-widget-swiper div.elementor-swiper-button.elementor-swiper-button-next {
display: none;;
}
}
/* ============================================================
SECTION: Image Box — Global
PAGE(S): Global
REASON: wpautop generates bare tags in multi-paragraph image box
descriptions; margin ensures consistent spacing between them.
============================================================ */
.elementor-widget-image-box .elementor-image-box-content p {
margin-bottom: 1em;
}
/* ============================================================
SECTION: Text Editor — Global
PAGE(S): Global
REASON: Browsers reset font-family, font-size, font-weight, etc. on
tags; this forces links to inherit the widget's typography
so they match surrounding text.
============================================================ */
.elementor-widget.elementor-widget-text-editor a {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
}
/* ============================================================
SECTION: Accordion — Global
PAGE(S): Global
REASON: Elementor's built-in icon position "Right" places the icon
immediately after the text; space-between pushes it flush right.
padding-left: 0 overrides Elementor's default indent on the title.
============================================================ */
.e-n-accordion .e-n-accordion-item summary.e-n-accordion-item-title {
justify-content: space-between;
padding-left: 0;
}
div.faq-accordion .e-n-accordion .e-n-accordion-item {
border-bottom: dotted 1px var(--e-global-color-4a9bd0a);
}
/* ============================================================
SECTION: About Us Page
PAGE(S): About Us
REASON:
============================================================ */
.exec-team img, .staff-card img {
aspect-ratio: 1/1;
object-fit: cover;
object-position: top center;
}
body.page-about-us .gray-floater, body.page-plan-ahead .gray-floater, body.page-traditional-burial .gray-floater, body.page-green-burial .gray-floater {
display: none;
}
body.page-about-us, body.page-gan-yarok, body.page-cemetery-map, body.page-lp-jewish-cemetery {
--page-primary-color: #5f6040;
}
body.page-traditional-burial, body.page-funeral-goods-and-services {
--page-primary-color:#553119;
}
body.page-green-burial, body.page-lp-green-cemetery {
--page-primary-color:#C35731;
}
body.page-cremation-services {
--fw-vision-color: #5f6040;
}
@media (min-width:1921px) {
div.fw-primary-bg.extend-to-edges {
position: relative;
}
div.fw-primary-bg.extend-to-edges::before {
content: '';
background-color: var(--page-primary-color);
z-index: -1;
width: 100vw;
max-width: 100vw;
left: calc((100vw - 1920px) / 2 * -1);
top: 0;
bottom: 0;
right: 0;
position: absolute;
}
}
/* ── Contact Us page — form color overrides ──────────────── */
body.page-contact-us .wpcf7 {
background-color: #b4c7cf;
--fw-form-text: #213349;
--fw-form-text-muted: rgba( 33, 51, 73, 0.55 );
}
body.page-contact-us .wpcf7 .main-form .main-form-submit input.wpcf7-submit {
background-color: #213349;
color: #ffffff;
border-color: #213349;
}
body.page-contact-us .wpcf7 .main-form .main-form-submit input.wpcf7-submit:hover,
body.page-contact-us .wpcf7 .main-form .main-form-submit input.wpcf7-submit:focus-visible {
background-color: #ffffff;
color: #213349;
border-color: #213349;
}
body.page-contact-us .wpcf7 .main-form p.form-intro {
display: none;
}
.cu-form-container {
background: linear-gradient(
to bottom,
transparent 18%,
#B4C7CF 10%,
#B4C7CF 84%,
transparent 72%
);
}
#main-form__start {
scroll-margin-top: 250px;
}
body.page-contact-us #main-form__start {
scroll-margin-top: 150px;;
}
body.page-traditional-burial #main-form__start {
scroll-margin-top: 200px;
}
/* ── Mobile ───────────────────────────────────────────────── */
@media ( max-width: 767px ) {
div.elementor-template div.staff_member .staff-card div.staff-card__meta {
color: #213349;
--e-global-color-986ae3c: #213349;
}
}
/* ============================================================
SECTION: Iframe Lightbox
PAGE(S): Global
REASON: Custom lightbox triggered by data-lightbox-src attribute.
Overlay, container, iframe, and close button styles.
============================================================ */
.fw-lightbox {
position: fixed;
inset: 0;
background: rgba( 0, 0, 0, 0.85 );
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
}
body.fw-lightbox-open {
overflow: hidden;
}
.fw-lightbox__container {
position: relative;
width: 90vw;
height: 90vh;
background: #000;
}
.fw-lightbox__iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
.fw-lightbox .fw-lightbox__container .fw-lightbox__close {
position: absolute;
top: -40px;
right: 0;
background: var(--page-primary-color);
border: none;
color: #fff;
font-size: 2rem;
line-height: 1;
cursor: pointer;
padding: 0.25rem 0.5rem;
}
.fw-lightbox .fw-lightbox__container .fw-lightbox__close:hover {
opacity: 0.7;
}
/* ============================================================
SECTION: Contact Form 7 — Layout & Styling
PAGE(S): Homepage, Contact, and any page embedding the CF7 form
REASON: CF7 outputs unstyled markup. All layout (two-column
inputs, checkbox grid), custom radio/checkbox controls,
typography, and dark/light color variants cannot be
set in Elementor's style panel.
COLOR VARIANTS:
- Default: white text/controls for dark section backgrounds.
Section background is set in Elementor per page — no extra class needed.
- .fw-form-light on the Elementor container: dark text for any
page that places the form on a light background.
============================================================ */
/* ── Page primary color utility class ────────────────────── */
/* Add fw-primary-bg to any Elementor container CSS Classes field
to apply the current page's --page-primary-color as its background. */
.fw-primary-bg {
background-color: var( --page-primary-color );
}
/* ── Page primary color text utility class ───────────────── */
/* Add fw-primary-text to any Elementor container CSS Classes field
to force all text inside to use --page-primary-color. */
body .fw-primary-text,
body .fw-primary-text h1,
body .fw-primary-text h2,
body .fw-primary-text h3,
body .fw-primary-text h4,
body .fw-primary-text h5,
body .fw-primary-text h6,
body .fw-primary-text p,
body .fw-primary-text span,
body .fw-primary-text div,
body .fw-primary-text a,
body .fw-primary-text .elementor-element .elementor-widget-container .elementor-heading-title {
color: var( --page-primary-color );
}
body .fw-primary-text:not(:has(.fw-inline-svg)) svg,
body .fw-primary-text:not(:has(.fw-inline-svg)) svg path,
body .fw-primary-text:not(:has(.fw-inline-svg)) svg circle,
body .fw-primary-text:not(:has(.fw-inline-svg)) svg rect,
body .fw-primary-text:not(:has(.fw-inline-svg)) svg polygon,
body .fw-primary-text:not(:has(.fw-inline-svg)) svg ellipse {
fill: var( --page-primary-color );
}
body .fw-primary-text .elementor-element .elementor-widget-container .elementor-button {
background-color: var( --page-primary-color );
border-color: var( --page-primary-color );
color: #ffffff;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body .fw-primary-text .elementor-element .elementor-widget-container .elementor-button span {
color: #ffffff;
}
body .fw-primary-text .elementor-element .elementor-widget-container .elementor-button:hover,
body .fw-primary-text .elementor-element .elementor-widget-container .elementor-button:focus {
background-color: #ffffff;
border-color: var( --page-primary-color );
color: var( --page-primary-color );
}
body .fw-primary-text .elementor-element .elementor-widget-container .elementor-button:hover span,
body .fw-primary-text .elementor-element .elementor-widget-container .elementor-button:focus span {
color: var( --page-primary-color );
}
/* ── Grey text utility class ─────────────────────────────── */
/* Add fw-grey-text to any Elementor container CSS Classes field
to set non-heading text to #7c7c7c. Heading tags are intentionally
excluded so they keep their own color. */
body .fw-grey-text p,
body .fw-grey-text span,
body .fw-grey-text div,
body .fw-grey-text a,
body .fw-grey-text li {
color: #7c7c7c;
}
/* ── Background — dark navy default ──────────────────────── */
/* Default background is dark navy. Override per page using the
WordPress body class, e.g.:
body.page-id-123 .wpcf7 { background-color: #667B6F; } */
.wpcf7 {
background-color: var( --page-primary-color );
}
/* ── Color tokens — dark background (default) ────────────── */
/* Form text and controls are white by default to read on dark backgrounds.
Add .fw-form-light to the Elementor container if a page needs the
form on a light background. */
.wpcf7 {
--fw-form-text: #ffffff;
--fw-form-text-muted: rgba( 255, 255, 255, 0.55 );
--fw-form-check-border: #ffffff;
--fw-form-check-fill: #ffffff;
--fw-form-radio-ring: #213349; /* inset ring on checked radio — contrasts with white fill */
--fw-form-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23213349' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5l3 4L11 1'/%3E%3C/svg%3E");
--fw-form-btn-bg: #ffffff;
--fw-form-btn-text: var( --page-primary-color );
}
/* ── Light background override (apply fw-form-light to Elementor container if needed) ── */
.fw-form-light .wpcf7 {
--fw-form-text: #213349;
--fw-form-text-muted: rgba( 33, 51, 73, 0.55 );
--fw-form-check-border: #213349;
--fw-form-check-fill: #213349;
--fw-form-radio-ring: #ffffff;
--fw-form-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5l3 4L11 1'/%3E%3C/svg%3E");
--fw-form-btn-bg: #ffffff;
--fw-form-btn-text: var( --page-primary-color );
}
/* ── Base resets ──────────────────────────────────────────── */
/* Overall form padding — Elementor container does not add side padding,
so we handle it here to match the design's inset spacing. */
/*.main-form {
padding: clamp( 2.5rem, 5vw, 4rem ) clamp( 2rem, 6vw, 5rem );
}*/
/* CF7 wraps inputs in a — make it block so width:100% works */
.main-form .wpcf7-form-control-wrap {
display: block;
width: 100%;
}
.main-form .user-death-radio .wpcf7-form-control-wrap {
width: auto;
}
/* Strip any residual CF7 paragraph margins */
.main-form p {
margin: 0;
}
/* ── Form title ───────────────────────────────────────────── */
.main-form .form-title {
font-size: clamp( 1.75rem, 3vw, 2.25rem );
font-weight: 300;
line-height: 1.2;
color: var( --fw-form-text );
margin: 0 0 1rem 0;
}
/* ── Intro paragraph ──────────────────────────────────────── */
.main-form > p {
font-size: 0.9375rem;
line-height: 1.6;
color: var( --fw-form-text );
margin: 0 0 2.5rem 0;
}
.main-form > p a {
color: var( --fw-form-text );
}
/* ── Section sub-headings (h5) ────────────────────────────── */
.main-form h6 {
font-size: 0.9375rem;
font-weight: 700;
color: var( --fw-form-text );
margin: 0;
}
/* ── Text / email / tel inputs ────────────────────────────── */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel {
width: 100%;
height: 52px;
background: #ffffff;
border: none;
padding: 0 16px;
font-size: 0.9375rem;
color: #213349;
box-sizing: border-box;
display: block;
}
.wpcf7-form-control.wpcf7-text::placeholder,
.wpcf7-form-control.wpcf7-email::placeholder,
.wpcf7-form-control.wpcf7-tel::placeholder {
color: rgba( 33, 51, 73, 0.45 );
}
.main-form div.user-message {
color: #ffffff;
}
/* ── "Has a death occurred?" — radio group ────────────────── */
/* Flex row so h5 label and radio buttons sit on the same line */
.user-death-radio {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin-bottom: 1.75rem;
}
.user-death-radio h5 {
margin: 0;
}
.user-death-radio > .wpcf7-form-control-wrap {
margin: 0;
}
.wpcf7-radio {
display: flex;
flex-direction: row;
gap: 1.5rem;
}
.wpcf7-radio .wpcf7-list-item {
margin: 0;
}
.wpcf7-radio label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.9375rem;
color: var( --fw-form-text );
}
/* Custom radio: appearance:none so we fully control rendering */
.wpcf7-radio input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
min-width: 18px;
border: 2px solid var( --fw-form-check-border );
border-radius: 50%;
cursor: pointer;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.wpcf7-radio input[type="radio"]:checked {
background-color: var( --fw-form-check-fill );
/* inset ring creates the hollow center dot effect — color contrasts with the fill */
box-shadow: inset 0 0 0 4px var( --fw-form-radio-ring );
}
/* ── Name row — two columns ───────────────────────────────── */
.user-name {
display: flex;
gap: 0.5rem;
margin-bottom: 0.375rem;
}
.user-name label {
flex: 1;
min-width: 0;
display: block;
}
/* ── Email / Phone / Zip ──────────────────────────────────── */
.user-demo {
margin-bottom: 1.5rem;
}
/* Email + Phone side by side; Zip hidden here on desktop (in user-demo-zip) */
.user-demo-sub {
display: flex;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.user-demo-sub .email-label,
.user-demo-sub .phone-label {
flex: 1;
min-width: 0;
display: block;
}
/* Zip is duplicated: shown in .user-demo-zip on desktop, in .user-demo-sub on mobile */
.user-demo-sub .zip-label {
display: none;
}
.user-demo-zip {
margin-bottom: 0.5rem;
}
.user-demo-zip label {
display: block;
width: 100%;
}
/* ── "I'm contacting Fernwood for" heading ────────────────── */
.user-interest {
margin-top: 1.75rem;
margin-bottom: 0.625rem;
}
/* ── Service interest — 4-column checkbox grid ────────────── */
.wpcf7-form-control-wrap[data-name="service_interest"] .wpcf7-checkbox {
display: grid;
grid-template-columns: repeat( 4, auto );
gap: 0.625rem 2rem;
justify-content: start;
}
/* ── Consent checkbox — single row ─��─────────────────────── */
.wpcf7-form-control-wrap[data-name="agreed-contact"] .wpcf7-checkbox {
display: flex;
flex-direction: row;
}
/* ── Shared checkbox styles ───────────────────────────────── */
.wpcf7-checkbox .wpcf7-list-item {
margin: 0;
}
.wpcf7-checkbox label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.9375rem;
color: var( --fw-form-text );
}
.wpcf7-response-output {
color: var( --fw-form-text );
}
.wpcf7-checkbox input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
min-width: 18px;
border: 2px solid var( --fw-form-check-border );
border-radius: 3px;
background-color: transparent;
cursor: pointer;
transition: background-color 0.15s ease;
}
.wpcf7-checkbox input[type="checkbox"]:checked {
background-color: var( --fw-form-check-fill );
background-image: var( --fw-form-check-mark );
background-repeat: no-repeat;
background-position: center;
background-size: 65%;
}
/* ��─ Textarea ─────���──���───────────────────────────────��────── */
.user-message {
margin-top: 1.75rem;
margin-bottom: 1.25rem;
}
/* "Additional Information:" label span — direct child without autop */
.user-message > span {
display: block;
}
.user-message label.message-label {
display: block;
}
.user-message span br {
display: none;
}
.wpcf7-form-control.wpcf7-textarea {
width: 100%;
min-height: 180px;
background: #ffffff;
border: none;
padding: 14px 16px;
font-size: 0.9375rem;
color: #213349;
resize: vertical;
box-sizing: border-box;
display: block;
}
.wpcf7-form-control.wpcf7-textarea::placeholder {
color: rgba( 33, 51, 73, 0.45 );
}
/* ── Required note ─────────────────────────────��──────────── */
.all-required {
margin: 0.875rem 0;
}
.all-required {
font-size: 0.8125rem;
color: var( --fw-form-text-muted );
}
.all-required .required {
color: #A75840;
}
/* ── Submit button ──────────────────────────────���─────────── */
.main-form-submit {
margin-bottom: 0.75rem;
}
/* Specificity (0,4,1) — beats Elementor kit's (0,2,1) selector:
.elementor-kit-8 input[type="submit"] */
.wpcf7 .main-form .main-form-submit input.wpcf7-submit {
font-size: 1rem;
font-weight: 700;
color: var( --page-primary-color );
background-color: var( --fw-form-btn-bg );
border: 2px solid var( --page-primary-color );
padding: 0.75rem 1.75rem;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
box-shadow: none;
}
.wpcf7 .main-form .main-form-submit input.wpcf7-submit:hover,
.wpcf7 .main-form .main-form-submit input.wpcf7-submit:focus-visible {
background-color: var( --page-primary-color );
color: #ffffff;
border-color: #ffffff;
box-shadow: none;
}
/* ============================================================
SECTION: Landing Page Form (lp-main-form) — Button Override
PAGE(S): Any page using the lp-main-form template
REASON: lp-main-form uses a fixed terracotta button color instead
of --page-primary-color, since the template appears across
pages with different primary colors.
============================================================ */
.lp-main-form .wpcf7 .main-form .main-form-submit input.wpcf7-submit {
background-color: #c35731;
border-color: #c35731;
color: #ffffff;
}
.lp-main-form .wpcf7 .main-form .main-form-submit input.wpcf7-submit:hover,
.lp-main-form .wpcf7 .main-form .main-form-submit input.wpcf7-submit:focus-visible {
background-color: #ffffff;
border-color: #c35731;
color: #c35731;
}
/* ============================================================
SECTION: CF7 Form Error Yellow Utility (fw-form-error-yellow)
PAGE(S): Any page
REASON: Overrides CF7 validation tip and response output text
to yellow for use on dark backgrounds where the default
red/dark text is unreadable.
============================================================ */
.fw-form-error-yellow .wpcf7-not-valid-tip,
.fw-form-error-yellow .wpcf7-response-output.wpcf7-validation-errors,
.fw-form-error-yellow .wpcf7-response-output.wpcf7-spam-blocked,
.fw-form-error-yellow .wpcf7-response-output.wpcf7-mail-sent-ng,
.fw-form-error-yellow .wpcf7-response-output.wpcf7-acceptance-missing {
color: #ffff00;
}
/* ============================================================
SECTION: Orange Button Utility (fw-orange-button)
PAGE(S): Any page
REASON: Overrides the default dark blue Elementor button with
terracotta (#C35731). Add fw-orange-button to the button
widget's CSS Classes field in Elementor Advanced tab.
============================================================ */
.elementor-widget-button.fw-orange-button .elementor-button,
body .fw-orange-button .elementor-element .elementor-widget-button .elementor-button,
body .fw-orange-button .elementor-element .elementor-widget-button .elementor-button span,
.fw-orange-button .wpcf7 .main-form .main-form-submit input.wpcf7-submit {
background-color: #C35731;
border-color: #C35731;
color: #ffffff;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.elementor-widget-button.fw-orange-button .elementor-button:hover,
.elementor-widget-button.fw-orange-button .elementor-button:focus,
body .fw-orange-button .elementor-element .elementor-widget-button .elementor-button:hover,
body .fw-orange-button .elementor-element .elementor-widget-button .elementor-button:focus,
body .fw-orange-button .elementor-element .elementor-widget-button .elementor-button:hover span,
body .fw-orange-button .elementor-element .elementor-widget-button .elementor-button:focus span,
.fw-orange-button .wpcf7 .main-form .main-form-submit input.wpcf7-submit:hover,
.fw-orange-button .wpcf7 .main-form .main-form-submit input.wpcf7-submit:focus-visible {
background-color: #ffffff;
color: #C35731;
border-color: #C35731;
}
/* ============================================================
SECTION: Blue Button Utility (fw-blue-button)
PAGE(S): Any page
REASON: Overrides the Elementor button with dark navy (#213349).
Add fw-blue-button to the button widget's CSS Classes
field in Elementor Advanced tab.
============================================================ */
.elementor-widget-button.fw-blue-button .elementor-button,
body .fw-blue-button .elementor-element .elementor-widget-button .elementor-button,
body .fw-blue-button .elementor-element .elementor-widget-button .elementor-button span,
.fw-blue-button .wpcf7 .main-form .main-form-submit input.wpcf7-submit {
background-color: #213349;
border-color: #213349;
color: #ffffff;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.elementor-widget-button.fw-blue-button .elementor-button:hover,
.elementor-widget-button.fw-blue-button .elementor-button:focus,
body .fw-blue-button .elementor-element .elementor-widget-button .elementor-button:hover,
body .fw-blue-button .elementor-element .elementor-widget-button .elementor-button:focus,
body .fw-blue-button .elementor-element .elementor-widget-button .elementor-button:hover span,
body .fw-blue-button .elementor-element .elementor-widget-button .elementor-button:focus span,
.fw-blue-button .wpcf7 .main-form .main-form-submit input.wpcf7-submit:hover,
.fw-blue-button .wpcf7 .main-form .main-form-submit input.wpcf7-submit:focus-visible {
background-color: #ffffff;
color: #213349;
border-color: #213349;
}
/* ============================================================
SECTION: White Button Utility (fw-white-button)
PAGE(S): Any page
REASON: White button for use on dark backgrounds. Add
fw-white-button to the button widget's CSS Classes
field in Elementor Advanced tab.
============================================================ */
.elementor-widget-button.fw-white-button .elementor-button,
body .fw-white-button .elementor-element .elementor-widget-button .elementor-button,
body .fw-white-button .elementor-element .elementor-widget-button .elementor-button span,
.fw-white-button .wpcf7 .main-form .main-form-submit input.wpcf7-submit {
background-color: #ffffff;
border-color: #ffffff;
color: #213349;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.elementor-widget-button.fw-white-button .elementor-button:hover,
.elementor-widget-button.fw-white-button .elementor-button:focus,
body .fw-white-button .elementor-element .elementor-widget-button .elementor-button:hover,
body .fw-white-button .elementor-element .elementor-widget-button .elementor-button:focus,
body .fw-white-button .elementor-element .elementor-widget-button .elementor-button:hover span,
body .fw-white-button .elementor-element .elementor-widget-button .elementor-button:focus span,
.fw-white-button .wpcf7 .main-form .main-form-submit input.wpcf7-submit:hover,
.fw-white-button .wpcf7 .main-form .main-form-submit input.wpcf7-submit:focus-visible {
background-color: #213349;
color: #ffffff;
border-color: #ffffff;
}
/* ── Price list link — hidden until form is submitted ─────── */
/* CF7 adds .sent to .wpcf7-form on successful submission */
.gpl-dl {
display: none;
}
.wpcf7-form.sent .gpl-dl {
display: block;
}
.gpl-dl p {
font-size: 0.9375rem;
color: var( --fw-form-text );
margin: 0;
}
.gpl-dl a {
color: var( --fw-form-text );
text-decoration: underline;
}
/* ── Mobile ───────────────────────────────────────────────── */
@media ( max-width: 767px ) {
/* Stack name fields */
.user-name {
flex-direction: column;
gap: 0.5rem;
}
/* Stack email/phone fields */
.user-demo-sub {
flex-direction: column;
gap: 0.5rem;
}
/* Show zip inside the sub-row on mobile; hide the separate zip div */
.user-demo-sub .zip-label {
display: block;
}
.user-demo-zip {
display: none;
}
/* "Has a death occurred?" — label wraps above radios on mobile */
.user-death-radio {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
/* Checkboxes: single column on mobile */
.wpcf7-form-control-wrap[data-name="service_interest"] .wpcf7-checkbox {
grid-template-columns: 1fr;
}
}
/* ============================================================
SECTION: Quote Decoration (fw-lp-quote)
PAGE(S): Landing pages using fw-lp-quote
REASON: Decorative SVG quote mark behind text via ::before mask-image.
mask-image technique lets background-color: --page-primary-color
tint the SVG, matching whichever page it appears on.
Desktop: bottom-right corner lands at the first character.
Mobile: bottom-left corner 20px from the element's left edge.
============================================================ */
.fw-lp-quote {
position: relative;
color: var(--page-primary-color);
}
.fw-lp-quote p {
color: var(--page-primary-color)!important;
}
.fw-lp-quote::before {
content: '';
position: absolute;
width: 80px;
height: 72px; /* 80 × 74/82 — preserves SVG aspect ratio */
top: 0;
left: 0;
transform: translate( -80%, -80% ); /* bottom-right lands ~24px into element */
background-color: var( --page-primary-color );
mask-image: url( '/wp-content/uploads/2026/05/quote.svg' );
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-image: url( '/wp-content/uploads/2026/05/quote.svg' );
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
opacity: 0.2;
pointer-events: none;
}
@media ( max-width: 767px ) {
.fw-lp-quote::before {
left: -20px;
transform: translate( 0, -80% ); /* bottom-left at -20px from left edge */
}
}
/* When fw-lp-quote and fw-boxed are on the same element, offset left by
--fw-boxed-padding so the SVG tracks the padded text start, not the element edge. */
.fw-lp-quote.fw-boxed::before {
left: var( --fw-boxed-padding );
}
@media ( max-width: 767px ) {
.fw-lp-quote.fw-boxed::before {
left: calc( var( --fw-boxed-padding ) - 20px );
}
}
/* ============================================================
SECTION: Vision Rooted Template Section
PAGE(S): Any page using fw-vision-rooted
REASON: Headings and text use --page-primary-color by default.
Override per page by setting --fw-vision-color on the
body.page- selector — it cascades down automatically.
============================================================ */
.fw-vision-rooted h1,
.fw-vision-rooted h2,
.fw-vision-rooted h3,
.fw-vision-rooted h4,
.fw-vision-rooted h5,
.fw-vision-rooted h6,
.fw-vision-rooted p,
.fw-vision-rooted span {
color: var(--fw-vision-color, var(--page-primary-color));
}
/* ============================================================
SECTION: Staff Template — Per-page primary color
PAGE(S): Any page using template-staff__exec or template-staff__staff
REASON: Template is shared across multiple pages; all text inherits
--page-primary-color so it adapts to each page's brand color
without duplicating rules per page.
============================================================ */
.template-staff__exec h1,
.template-staff__exec h2,
.template-staff__exec h3,
.template-staff__exec h4,
.template-staff__exec h5,
.template-staff__exec h6,
.template-staff__exec p,
.template-staff__exec span,
.template-staff__exec div,
.template-staff__staff h1,
.template-staff__staff h2,
.template-staff__staff h3,
.template-staff__staff h4,
.template-staff__staff h5,
.template-staff__staff h6,
.template-staff__staff p,
.template-staff__staff span,
.template-staff__staff div {
color: var( --page-primary-color );
}
/* ============================================================
SECTION: Invert White Utility (fw-invert-white)
PAGE(S): Any page
REASON: Flips an element to a white background with --page-primary-color
text. Explicit child selectors needed because Elementor sets
colors directly on heading/text widgets, overriding inheritance.
============================================================ */
body .fw-invert-white {
background-color: #ffffff;
color: var( --page-primary-color );
}
body .fw-invert-white.elementor-element .elementor-widget-container .elementor-widget-heading .elementor-heading-title,
body .fw-invert-white h1,
body .fw-invert-white h2,
body .fw-invert-white h3,
body .fw-invert-white h4,
body .fw-invert-white h5,
body .fw-invert-white h6,
body .fw-invert-white p,
body .fw-invert-white span,
body .fw-invert-white div,
body .fw-invert-white a {
color: var( --page-primary-color );
}
/* One-off styles that need to override other issues. */
.elementor-element-09593ed div.elementor-cta__button-wrapper {
margin-top:100px;
}
.no-floater .gray-floater {
display: none;
}
body.page-expansion-plan hr {
margin:20px 0;
}
body.page-green-burial {
overflow-x: hidden;
}
body.page-privacy-policy #content,body.page-terms-of-service #content, body.single-obituary #content, body.page-cookie-policy #content {
margin-top: 0;
}
.elementor-element-b6b958d .elementor-widget-image video, .elementor-element-b6b958d .elementor-widget-image img {
max-height:285px;
}
@media ( max-width: 767px ) {
.elementor-element-29eff44 div.elementor-shortcode {
margin-right: -41px;
}
.elementor-element-9d28425 div.elementor-shortcode {
margin-left: -41px;
}
}
/* ============================================================
SECTION: Obituary list — loop grid pagination buttons
PAGE(S): Obituaries archive / loop pages
REASON: Elementor pagination prev/next links need button
styling; cannot be fully controlled via Elementor's
style panel
============================================================ */
.obit-list__loop a.page-numbers.prev,
.obit-list__loop a.page-numbers.next {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border: 1px solid #213349;
background: transparent;
color: #213349;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
font-family: var( --e-global-typography-fe2245b-font-family );
font-size: var( --e-global-typography-fe2245b-font-size );
font-weight: var( --e-global-typography-fe2245b-font-weight );
font-style: var( --e-global-typography-fe2245b-font-style );
text-transform: var( --e-global-typography-fe2245b-text-transform );
line-height: var( --e-global-typography-fe2245b-line-height );
letter-spacing: var( --e-global-typography-fe2245b-letter-spacing );
}
.obit-list__loop a.page-numbers.prev:hover,
.obit-list__loop a.page-numbers.prev:focus,
.obit-list__loop a.page-numbers.next:hover,
.obit-list__loop a.page-numbers.next:focus {
background: #213349;
color: #ffffff;
}
.obit-list__loop span.page-numbers.prev,
.obit-list__loop span.page-numbers.next {
display: none;
}
/* ============================================================
SECTION: Obituary list — image right-edge corner bar
PAGE(S): Obituaries archive / loop pages
REASON: Decorative rectangle outside the image widget right
edge; cannot be placed in Elementor's style panel
============================================================ */
.obit-list__image {
position: relative;
overflow: visible;
}
.obit-list__image::before {
content: '';
position: absolute;
right: -40px;
bottom: 0;
width: 40px;
height: 200px;
background-color: #213349;
pointer-events: none;
}
@media ( max-width: 767px ) {
.obit-list__image::before {
right: -35px;
width: 35px;
height: 173px;
}
}