/* =============================================================================
elementor-bridge.css — joins Elementor's emitted DOM to the design system
-----------------------------------------------------------------------------
The design system (tokens/base/components/sections) is authored against the
prototype's hand-written markup. Elementor emits its own DOM: every widget is
wrapped in .elementor-widget > .elementor-widget-container, containers carry
.e-con with custom-property padding and gap, and the Nav Menu widget renders
.elementor-nav-menu rather than our .main-nav structure.
This file is the seam. It does two jobs and nothing else:
1. neutralises Elementor's own layout defaults where one of our layout
classes is present, so our CSS is the thing positioning the element
2. maps Elementor's widget markup onto our component styles
It must load AFTER the four design-system sheets and BEFORE the child
stylesheet. No new tokens, colors, or sizes — everything resolves to
tokens.css.
============================================================================= */
/* -----------------------------------------------------------------------------
1. Container resets
Elementor containers set padding and gap through custom properties on
.e-con. Where a container carries one of our layout classes, zero those out
so the class owns the box.
----------------------------------------------------------------------------- */
.e-con.site-header,
.e-con.image-frame,
.e-con.contact-bar,
.e-con.contact-bar__inner,
.e-con.utility-bar,
.e-con.utility-bar__inner,
.e-con.main-header,
.e-con.main-header__inner,
.e-con.header-actions,
.e-con.site-footer,
.e-con.site-footer__cols,
.e-con.site-footer__col,
.e-con.site-footer__bottom,
.e-con.section,
.e-con.grid,
.e-con.card,
.e-con.testimonial,
.e-con.article-card,
.e-con.article-card__body,
.e-con.split,
.e-con.split__text,
.e-con.split__media,
.e-con.section-head,
.e-con.hero,
.e-con.hero__inner,
.e-con.hero__text,
.e-con.hero__ctas,
.e-con.trust-band,
.e-con.stats-band,
.e-con.cta-row {
--padding-block-start: 0;
--padding-block-end: 0;
--padding-inline-start: 0;
--padding-inline-end: 0;
--gap: 0;
--row-gap: 0;
--column-gap: 0;
}
/* .container keeps its own gutter from base.css; only the block padding and
gap need clearing. Width is ours too — Elementor's boxed width would fight
--jf-container-max. */
.e-con.container {
--padding-block-start: 0;
--padding-block-end: 0;
--padding-inline-start: 0;
--padding-inline-end: 0;
--gap: 0;
--row-gap: 0;
--column-gap: 0;
--content-width: var(--jf-container-max);
}
/* Elementor containers default to flex-column. Our layout classes that expect
a row need it back. */
.e-con.utility-bar__inner,
.e-con.main-header__inner,
.e-con.header-actions,
.e-con.contact-bar__inner,
.e-con.site-footer__bottom {
flex-direction: row;
}
/* Marker class emitted by build/fragment_to_elementor.py on every container
it converts. One rule instead of a hand-maintained list of layout classes —
adding a new layout class to the converter needs no change here. */
.e-con.jf-con {
--padding-block-start: 0;
--padding-block-end: 0;
--padding-inline-start: 0;
--padding-inline-end: 0;
--gap: 0;
--row-gap: 0;
--column-gap: 0;
}
/* Row-direction layout classes that Elementor would otherwise stack. */
.e-con.jf-con.hero__ctas,
.e-con.jf-con.cta-band__inner,
.e-con.jf-con.lead-contact { flex-direction: row; }
/* -----------------------------------------------------------------------------
2. Widget wrapper neutralisation
.jf-plain marks a Text Editor widget whose only job is to carry markup our
CSS already styles. Strip the wrapper so it contributes no box of its own.
----------------------------------------------------------------------------- */
.elementor-widget.jf-plain,
.elementor-widget.jf-plain > .elementor-widget-container {
margin: 0;
padding: 0;
}
.elementor-widget.jf-plain p:last-child { margin-bottom: 0; }
/* Text Editor inherits body colour/size by default; our spans set their own. */
.elementor-widget.jf-plain { color: inherit; font-size: inherit; line-height: inherit; }
/* -----------------------------------------------------------------------------
3. Logo lockup
The header and footer logos are each ONE Text Editor widget carrying the
prototype's markup, because Elementor cannot wrap several
widgets in a single anchor and the whole lockup has to be one link.
display:contents dissolves the widget wrapper so is the
direct child of .main-header__inner. That is load-bearing, not tidiness:
below 1024 components.css assigns `.logo { grid-area: logo; }`, and a
grid-area on something that is not a grid item does nothing — the logo would
auto-place into the hamburger's cell, which is the failure this file already
documents happening to the nav wrapper.
Everything else about the logo — monogram height at three breakpoints, the
flex row, the text stack — is now plain components.css, because the markup
is the prototype's. Four bridge blocks were deleted with this change.
----------------------------------------------------------------------------- */
.elementor-widget.jf-logo-wrap,
.elementor-widget.jf-logo-wrap > .elementor-widget-container { display: contents; }
/* The monogram's size has to be restated here, and the reason is pure
specificity. Elementor ships `.elementor img { height: auto; max-width: 100% }`
at (0,1,1). components.css sizes the monogram with `.logo__monogram` — a
single class on the ![]()
itself, (0,1,0) — which LOSES. Deleting the old
bridge rule on the assumption components.css would take over rendered the
header logo at 971x971: the intrinsic 1200px PNG, capped only by max-width,
which then took the whole grid column and collapsed the nav to zero.
`.logo .logo__monogram` is (0,2,0). Class count is compared before element
count, so two classes beat one-class-one-element. Same three breakpoints as
components.css, deliberately duplicated rather than shared: the prototype
does not need them and this is an Elementor conflict, which is what this
file is for. */
.logo .logo__monogram { height: 44px; width: auto; max-width: none; }
@media (max-width: 1024px) { .logo .logo__monogram { height: 38px; } }
@media (max-width: 480px) { .logo .logo__monogram { height: 34px; } }
/* -----------------------------------------------------------------------------
4. Button widget -> .btn
Elementor renders .elementor-button inside a wrapper, so our .btn rules can't
attach to the anchor directly. Re-declare them onto the anchor. Values are
the same tokens .btn uses in components.css.
----------------------------------------------------------------------------- */
.jf-btn .elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--jf-space-2);
padding: var(--jf-space-3) var(--jf-space-5);
font-family: var(--jf-font-body);
font-size: var(--jf-size-button);
font-weight: var(--jf-weight-semibold);
line-height: 1;
text-transform: none;
border: var(--jf-border-width) solid transparent;
border-radius: var(--jf-radius-button);
text-decoration: none;
transition:
background-color var(--jf-transition),
color var(--jf-transition),
border-color var(--jf-transition);
}
.jf-btn .elementor-button-content-wrapper { gap: var(--jf-space-2); }
.jf-btn--primary .elementor-button {
background: var(--jf-color-btn-primary-bg);
color: var(--jf-color-btn-primary-text);
}
.jf-btn--primary .elementor-button:hover { background: var(--jf-color-btn-primary-bg-hover); }
.jf-btn--secondary .elementor-button {
background: var(--jf-color-btn-secondary-bg);
color: var(--jf-color-btn-secondary-text);
border-color: var(--jf-color-btn-secondary-border);
}
.jf-btn--secondary .elementor-button:hover {
background: var(--jf-color-btn-secondary-border);
color: var(--jf-color-btn-secondary-bg);
}
@media (max-width: 768px) { .jf-btn .elementor-button { min-height: 44px; } }
/* Arrow. The prototype puts → inside
every .btn — all seven on the homepage carry one. The Elementor button
widget has no equivalent slot and the $btn helper emits none, so until now
no button on the WordPress side had an arrow at all. ::after reproduces it,
including the hover nudge. The anchor is already inline-flex with a gap, so
the pseudo-element spaces itself.
The sticky contact bar is raw markup with a literal arrow in its text and
is not .jf-btn, so it does not pick up a second one. */
.jf-btn .elementor-button::after,
.jf-footer-form .elementor-button::after,
.jf-contact-form .elementor-button::after {
content: '\2192';
transition: transform var(--jf-transition);
}
.jf-btn .elementor-button:hover::after,
.jf-footer-form .elementor-button:hover::after,
.jf-contact-form .elementor-button:hover::after {
transform: translateX(var(--jf-arrow-shift));
}
/* The CTA row. .hero__ctas is display:flex in components.css and therefore a
row, but as an Elementor container it also gets
`flex-direction: var(--flex-direction)`, and Elementor defaults that custom
property to COLUMN. The container was a column flex all along, so the two
buttons stacked and each stretched to the full 620px. Setting the custom
property is the fix, but it has to out-specify Elementor's own
`.e-con { --flex-direction: column }`, which is a single class and loads
after this file — so a bare .hero__ctas ties and loses. .e-con.hero__ctas
is (0,2,0) and wins regardless of order. Same tactic the nav rules below
use, and the reason this file documents specificity at all.
The widget wrappers still need width:auto: they are block elements that
would otherwise fill the row. */
.e-con.hero__ctas { --flex-direction: row; --flex-wrap: wrap; }
.hero__ctas > .elementor-widget { width: auto; flex: 0 0 auto; }
/* -----------------------------------------------------------------------------
5. Nav Menu widget -> .main-nav
Elementor emits .elementor-nav-menu > li.menu-item > a.elementor-item, with
submenus as ul.sub-menu. Elementor owns the dropdown open/close behaviour, so
this only restyles; it does not re-implement interaction. Our own
js/dropdown.js targets .main-nav__toggle, which this markup never produces,
so the two do not collide.
----------------------------------------------------------------------------- */
/* Specificity note: Elementor emits per-element rules at (0,4,0) —
.elementor-{post} .elementor-element.elementor-element-{id} .elementor-item.
Selectors here that need to win are written to match or exceed that; the
bridge loads after the per-element sheet, so equal specificity is enough.
Item padding and gap are set through the widget's own controls rather than
here, so this file only handles what has no control equivalent. */
/* --main only. Elementor renders TWO lists inside one nav widget: the desktop
.elementor-nav-menu--main and the mobile .elementor-nav-menu--dropdown.
Unscoped, this row layout also hit the dropdown, so the open mobile menu
laid its six items out horizontally and ran off both edges of the screen. */
.elementor-widget.jf-nav .elementor-nav-menu--main .elementor-nav-menu {
display: flex;
align-items: center;
flex-wrap: nowrap;
margin: 0;
padding: 0;
list-style: none;
}
.elementor-widget.jf-nav .elementor-nav-menu > li { flex-shrink: 0; position: relative; }
.jf-nav .elementor-item {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--jf-space-1);
padding: var(--jf-space-2) 0;
font-family: var(--jf-font-body);
font-size: var(--jf-size-nav);
font-weight: var(--jf-weight-medium);
color: var(--jf-color-heading);
text-decoration: none;
white-space: nowrap;
fill: currentColor;
transition: color var(--jf-transition);
}
/* Elementor's own pointer styles would double up with our underline. */
.jf-nav .elementor-item:before,
.jf-nav .elementor-item:after { display: none !important; }
.jf-nav .elementor-item:hover,
.jf-nav .elementor-item.elementor-item-active { color: var(--jf-color-link); }
.jf-nav .sub-arrow { display: inline-flex; align-items: center; }
.jf-nav .sub-arrow svg { width: 10px; height: 10px; }
/* Dropdown panel — mirrors .main-nav__dropdown in components.css */
.jf-nav .elementor-nav-menu--main .sub-menu {
min-width: 240px;
padding: var(--jf-space-2) 0;
margin: 0;
background: var(--jf-color-bg);
border: var(--jf-border-width) solid var(--jf-color-border);
border-radius: var(--jf-radius-card);
box-shadow: 0 8px 24px color-mix(in srgb, var(--jf-color-heading) 10%, transparent);
}
.jf-nav .elementor-sub-item {
display: block;
padding: var(--jf-space-3) var(--jf-space-5);
font-family: var(--jf-font-body);
font-size: var(--jf-size-nav);
font-weight: var(--jf-weight-medium);
color: var(--jf-color-heading);
text-decoration: none;
white-space: nowrap;
transition:
color var(--jf-transition),
background-color var(--jf-transition);
}
.jf-nav .elementor-sub-item:hover,
.jf-nav .elementor-sub-item:focus-visible {
color: var(--jf-color-link);
background: var(--jf-color-bg-alt);
}
/* Burger toggle inherits the design system's colour rather than Elementor's. */
.jf-nav .elementor-menu-toggle { color: var(--jf-color-heading); background: none; }
/* -----------------------------------------------------------------------------
6. Footer Nav Menu -> .site-footer__nav
Same widget as the header nav, vertical layout, on the navy footer.
----------------------------------------------------------------------------- */
.elementor-widget.jf-footer-nav .elementor-nav-menu {
display: grid;
gap: var(--jf-space-1);
margin: 0;
padding: 0;
list-style: none;
}
.elementor-widget.jf-footer-nav .elementor-item {
display: inline-block;
font-family: var(--jf-font-body);
font-size: var(--jf-size-body);
color: var(--jf-color-text-on-dark);
opacity: 0.9;
text-decoration: none;
transition: opacity var(--jf-transition);
}
.elementor-widget.jf-footer-nav .elementor-item:before,
.elementor-widget.jf-footer-nav .elementor-item:after { display: none !important; }
.elementor-widget.jf-footer-nav .elementor-item:hover { opacity: 1; text-decoration: underline; }
/* -----------------------------------------------------------------------------
7. Form widget on the navy footer -> .footer-form
Mirrors the .field__input--dark treatment from components.css. Placeholder
sits at 0.7 opacity on navy-800, which measures 8.13:1 — clears WCAG AAA.
----------------------------------------------------------------------------- */
.elementor-widget.jf-footer-form .elementor-field-group .elementor-field-textual {
padding: var(--jf-space-3) var(--jf-space-4);
font-family: var(--jf-font-body);
font-size: var(--jf-size-body);
line-height: var(--jf-lh-small);
color: var(--jf-color-text-on-dark);
background: color-mix(in srgb, var(--jf-color-text-on-dark) 6%, transparent);
border: var(--jf-border-width) solid color-mix(in srgb, var(--jf-color-text-on-dark) 20%, transparent);
border-radius: var(--jf-radius-button);
transition: border-color var(--jf-transition);
}
.elementor-widget.jf-footer-form .elementor-field-group .elementor-field-textual::placeholder {
color: var(--jf-color-text-on-dark);
opacity: 0.7;
}
.elementor-widget.jf-footer-form .elementor-field-group .elementor-field-textual:hover {
border-color: color-mix(in srgb, var(--jf-color-text-on-dark) 40%, transparent);
}
.elementor-widget.jf-footer-form .elementor-field-group .elementor-field-textual:focus-visible {
outline: 2px solid var(--jf-color-text-on-dark);
outline-offset: 2px;
border-color: color-mix(in srgb, var(--jf-color-text-on-dark) 60%, transparent);
}
/* Submit inverts to white-on-navy so it reads on the navy footer — same
contextual override .footer-form .btn--primary carries in components.css. */
.elementor-widget.jf-footer-form .elementor-button[type="submit"] {
display: flex;
width: 100%;
justify-content: center;
padding: var(--jf-space-3) var(--jf-space-5);
font-family: var(--jf-font-body);
font-size: var(--jf-size-button);
font-weight: var(--jf-weight-semibold);
text-transform: none;
border: 0;
border-radius: var(--jf-radius-button);
background: var(--jf-color-text-on-dark);
color: var(--jf-color-heading);
transition: background-color var(--jf-transition);
}
.elementor-widget.jf-footer-form .elementor-button[type="submit"]:hover {
background: color-mix(in srgb, var(--jf-color-text-on-dark) 88%, transparent);
}
/* Newsletter: the submit shares a row with the single email field, so it has
to match its height. Elementor sizes the button to its own padding and left
it sitting 8px below the field — measured. */
.elementor-widget.jf-footer-form .elementor-field-type-submit { align-items: stretch; }
.elementor-widget.jf-footer-form .elementor-field-type-submit .elementor-button[type="submit"] {
height: 100%;
}
/* -----------------------------------------------------------------------------
6b. Services dropdown — three menu levels, ONE panel
The WordPress menu is three deep: Services > Tax > Business Tax. Left alone,
Elementor (SmartMenus) renders the third level as a flyout hanging off the
second, so a visitor has to hover "Tax" inside an already-open panel to find
"IRS Representation". This flattens it into the prototype's grouped
dropdown: pillars as headings, their children beneath, one column, one
panel. Not a mega-menu — no second column, no imagery, no promo.
DESKTOP ONLY. Below 1025 Elementor switches the same markup to its
accordion, where a collapsed third level is the right behaviour and this
would force twelve Services items open in a phone panel.
!important is on the two properties SmartMenus writes INLINE when it opens a
submenu (display and position). Inline styles outrank any selector, so there
is no specificity available to win with — the choice is !important or a
JavaScript override, and this is the smaller of the two.
----------------------------------------------------------------------------- */
@media (min-width: 1025px) {
.jf-nav .elementor-nav-menu .sub-menu {
min-width: 264px;
padding-block: var(--jf-space-3);
/* Measured at 731px here. Clears a 900px window, does not clear a
1366x768 laptop. Same cap as .main-nav__dropdown--grouped. */
max-height: calc(100vh - 9rem);
overflow-y: auto;
overscroll-behavior: contain;
}
/* ...but not the nested one: it is part of the panel, and a scroll region
inside a scroll region is its own problem. */
.jf-nav .elementor-nav-menu .sub-menu .sub-menu {
max-height: none;
overflow: visible;
}
/* Level 3: part of the panel, not a flyout off it. */
.jf-nav .elementor-nav-menu .sub-menu .sub-menu {
position: static !important;
display: block !important;
min-width: 0;
padding: 0;
margin: 0;
background: none;
border: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
}
/* Level 2 is now a heading. Same treatment as .main-nav__group-title. */
.jf-nav .elementor-nav-menu .sub-menu > li.menu-item-has-children > a.elementor-sub-item {
font-size: var(--jf-size-eyebrow);
font-weight: var(--jf-weight-semibold);
letter-spacing: var(--jf-tracking-eyebrow);
text-transform: uppercase;
color: var(--jf-color-eyebrow);
}
/* The caret on a heading promises a flyout that no longer exists. */
.jf-nav .elementor-nav-menu .sub-menu > li.menu-item-has-children > a .sub-arrow {
display: none;
}
/* Level 3 items indent under their pillar and keep the ordinary nav weight.
Padding is NOT tightened: the deeper links would end up with the smaller
hit area, which is backwards. */
.jf-nav .elementor-nav-menu .sub-menu .sub-menu > li > a.elementor-sub-item {
padding-left: var(--jf-space-6);
font-weight: var(--jf-weight-regular);
text-transform: none;
letter-spacing: 0;
font-size: var(--jf-size-nav);
color: var(--jf-color-heading);
}
/* Separator between groups, matching .main-nav__group + .main-nav__group. */
.jf-nav .elementor-nav-menu .sub-menu > li.menu-item + li.menu-item {
margin-top: var(--jf-space-2);
padding-top: var(--jf-space-2);
border-top: var(--jf-border-width) solid var(--jf-color-border);
}
}
/* -----------------------------------------------------------------------------
7b. Form widget on the contact page -> .contact-form
Mirrors .field / .field__label / .field__input / .field__textarea from
components.css, on the light surface.
This replaced static