/*
Theme Name: NE Clean (Divi 5 Child)
Theme URI: https://necleanri.com
Description: Divi 5 child theme for New England Customized Cleaning. Ports the source HTML/CSS design system into a namespaced (nec-) token + component layer that sits on top of Divi 5 without colliding with Divi, WordPress or plugin classes.
Author: NE Clean
Template: Divi
Version: 1.0.0
Text Domain: neclean
*/
/* =====================================================================
NE CLEAN — GLOBAL DESIGN SYSTEM
---------------------------------------------------------------------
CONTENTS
1. Design tokens
2. Global typography + base
3. Divi structural resets (container / section / row widths)
4. Buttons .nec-btn
5. Header — top bar, nav, dropdowns, mobile call bar
6. Footer
7. Shared sections (hero, trust bar, founder, section headers)
8. Cards (service, value, why, review, blog, pricing)
9. FAQ accordion (Divi accordion skin)
10. Before/After (grid card + lightbox)
11. Dark + centered CTA bands
12. Scroll animations
13. Responsive
---------------------------------------------------------------------
SCOPING RULES
* Every selector is prefixed `nec-` or is scoped inside a `nec-`
wrapper. No bare utility class (.container, .badge, .logo, .btn)
is ever defined globally — those exist in the source HTML but
would collide with Divi/WordPress in a real install.
* Page-specific CSS lives in assets/css/pages/*.css and is enqueued
only on the page that needs it (see functions.php).
* Breakpoints match the source exactly: 1200 / 992 / 768 / 600.
Divi's own breakpoints (980 / 767) are aligned to these in the
module settings, not here, so tablet/mobile edits stay contained.
===================================================================== */
/* =====================================================================
1. DESIGN TOKENS
===================================================================== */
:root {
/* Premium corporate palette — verbatim from source style.css */
--nec-dark-green: #0f172a;
--nec-dark-green-light: #1e3a5f;
--nec-dark-green-grad-end: #162338;
--nec-primary: #16a34a;
--nec-primary-hover: #15803d;
--nec-primary-press: #12873d; /* .btn-primary:hover in source */
--nec-primary-light: #dcfce7;
--nec-secondary: #0284c7;
--nec-secondary-hover: #0369a1;
--nec-secondary-light: #eff6ff;
--nec-white: #ffffff;
--nec-off-white: #f8fafc;
--nec-gray-light: #f1f5f9;
--nec-text-dark: #334155;
--nec-text-muted: #64748b;
--nec-border: #e2e8f0;
--nec-star: #fbbf24;
/* Typography */
--nec-font:
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Radii */
--nec-radius-sm: 8px;
--nec-radius-md: 16px;
--nec-radius-lg: 24px;
--nec-radius-xl: 32px;
/* Shadows */
--nec-shadow-sm:
0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
--nec-shadow-md:
0 10px 15px -3px rgba(15, 23, 42, 0.08),
0 4px 6px -4px rgba(15, 23, 42, 0.08);
--nec-shadow-lg:
0 20px 25px -5px rgba(15, 23, 42, 0.1),
0 8px 10px -6px rgba(15, 23, 42, 0.1);
--nec-shadow-primary: 0 10px 25px -5px rgba(22, 163, 74, 0.4);
--nec-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
/* Layout — source .container is max-width 1280 with 24px gutters.
Divi row width is set to 1280px / 100% in the layouts; this token
is here for the few components that need to match it in CSS. */
--nec-container: 1280px;
--nec-gutter: 24px;
/* Legacy olive tints that survive in the source as literal rgba()
values (an earlier palette). Kept so ported components render
identically rather than "corrected" to green. */
--nec-olive-05: rgba(134, 168, 115, 0.05);
--nec-olive-10: rgba(134, 168, 115, 0.1);
--nec-olive-30: rgba(134, 168, 115, 0.3);
--nec-olive-40: rgba(134, 168, 115, 0.4);
}
/* =====================================================================
2. GLOBAL TYPOGRAPHY + BASE
Mirrors the source `body` / heading rules. Divi sets its own body
font + heading colours in Theme Options; these declarations make the
child theme self-sufficient so the design holds even if Divi's
Theme Customizer values are reset.
===================================================================== */
body,
body.et-db #et-boc .et-l {
font-family: var(--nec-font);
color: var(--nec-text-dark);
line-height: 1.6;
background-color: var(--nec-white);
}
body {
overflow-x: hidden; /* source body rule — guards the -100% mobile nav */
}
/* Source: h1-h6 { font-weight:800; line-height:1.1; color:#0f172a; letter-spacing:-0.03em } */
.nec-page h1,
.nec-page h2,
.nec-page h3,
.nec-page h4,
.nec-page h5,
.nec-page h6,
.et-l h1,
.et-l h2,
.et-l h3,
.et-l h4,
.et-l h5,
.et-l h6 {
font-family: var(--nec-font);
font-weight: 800;
line-height: 1.1;
color: var(--nec-dark-green);
letter-spacing: -0.03em;
}
/* Divi wraps module text in with its own line-height; align to source */
.et-l p {
line-height: 1.6;
padding-bottom: 0; /* Divi adds 1em bottom padding to
; source uses margins */
}
.et-l p:not(:last-child) {
margin-bottom: 1em;
}
/* Source: img { max-width:100%; height:auto; display:block } */
.et-l .nec-img-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* =====================================================================
3. DIVI STRUCTURAL RESETS
The source is a 1280px container with 24px gutters and 120px section
rhythm. Divi ships 1080px rows inside 1080px content with 4%/5.5%
percentage gutters, which is what makes naive Divi ports look "off".
These rules put Divi on the source's geometry. Section/row padding is
still set per-module in the layouts so individual sections stay
independently editable.
===================================================================== */
/* Kill Divi's default 54px/0 section padding — every section in the
layouts declares its own padding explicitly. */
.et-l .et_pb_section {
padding: 0;
}
/* Kill Divi's default row padding + max-width so our explicit
1280px / 24px geometry is what renders. */
.et-l .et_pb_row {
padding: 0;
width: 100%;
max-width: var(--nec-container);
}
/* Full-bleed rows used by hero + CTA bands */
.et-l .nec-row-full {
max-width: none;
width: 100%;
}
/* Source .container padding: 0 24px (16px under 768px) */
.et-l .nec-row {
padding-left: var(--nec-gutter);
padding-right: var(--nec-gutter);
}
/* Divi's column gutter is a percentage; the source uses fixed px gaps.
`nec-gap-*` classes are applied to rows in the layouts so each grid
keeps the exact gap from the source stylesheet. */
.et-l .nec-gap-24 > .et_pb_column {
margin-right: 24px;
}
.et-l .nec-gap-30 > .et_pb_column {
margin-right: 30px;
}
.et-l .nec-gap-40 > .et_pb_column {
margin-right: 40px;
}
.et-l .nec-gap-50 > .et_pb_column {
margin-right: 50px;
}
.et-l .nec-gap-60 > .et_pb_column {
margin-right: 60px;
}
.et-l .nec-gap-80 > .et_pb_column {
margin-right: 80px;
}
.et-l [class*="nec-gap-"] > .et_pb_column:last-child {
margin-right: 0;
}
/* Filler columns used to pad a partial card row. The source's auto-fit
grids leave a partial final row at the same fractional width rather than
stretching it; an empty Divi column reproduces that. Inert by design. */
.et-l .nec-col-empty {
min-height: 0;
padding: 0;
}
.et-l .nec-col-empty:empty {
background: none;
}
/* Equalise column heights for card grids (source grids are 1fr) */
.et-l .nec-equal > .et_pb_column {
display: flex;
flex-direction: column;
}
.et-l .nec-equal > .et_pb_column > .et_pb_module {
flex-grow: 1;
}
.et-menu-nav li .nec-nav-cta a {
background-color: var(--primary);
color: var(--white);
border: 2px solid var(--primary);
}
/* Source .section-header { text-align:center; max-width:700px; margin:0 auto 60px } */
.et-l .nec-section-header {
text-align: center;
max-width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;
}
.et-l .nec-section-header h2 {
font-size: 3rem;
margin-bottom: 20px;
}
.et-l .nec-section-header p {
font-size: 1.25rem;
color: var(--nec-text-muted);
margin-bottom: 0;
}
/* Source .bg-gray */
.et-l .nec-bg-gray {
background: linear-gradient(180deg, #ffffff, #f8fbff);
}
/* Source .bg-dark-green */
.et-l .nec-bg-dark {
background: linear-gradient(180deg, #0f172a, #162338);
color: var(--nec-white);
}
.et-l .nec-bg-dark h1,
.et-l .nec-bg-dark h2,
.et-l .nec-bg-dark h3,
.et-l .nec-bg-dark h4 {
color: var(--nec-white);
}
.et-l .nec-bg-dark p {
color: #94a3b8;
}
/* Source .text-primary — note: resolves to --secondary (#0284c7) in
the source, NOT --primary. Ported deliberately, not "fixed". */
.et-l .nec-overline-blue {
color: var(--nec-secondary);
font-weight: 700;
}
/* =====================================================================
4. BUTTONS .nec-btn
Divi button modules carry these classes. Colour/size/padding are ALSO
set in each module's own settings so the button stays fully editable
in the builder; this block supplies only what Divi cannot express:
inline-flex centring, the persistent icon gap and the exact hover.
===================================================================== */
.et-l .nec-btn.et_pb_button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 32px;
border-radius: var(--nec-radius-sm) !important;
font-family: var(--nec-font);
font-weight: 600;
font-size: 1.1rem;
line-height: 1.2;
text-align: center;
transition: all 0.3s ease;
}
/* Divi injects its icon via :after with a left margin — neutralise it so
our `gap` controls the spacing consistently. */
.et-l .nec-btn.et_pb_button:after,
.et-l .nec-btn.et_pb_button:before {
margin: 0;
line-height: inherit;
position: static;
transition: none;
}
.et-l .nec-btn.et_pb_button:hover:after {
margin: 0;
}
.et-l .nec-btn-primary.et_pb_button {
background-color: var(--nec-primary);
color: var(--nec-white);
border: 2px solid var(--nec-primary) !important;
}
.et-l .nec-btn-primary.et_pb_button:hover {
background-color: var(--nec-primary-press);
border-color: var(--nec-primary-press);
color: var(--nec-white);
}
/* Source .btn-outline / .btn-white — white fill, BLACK text + border,
blue on hover. Faithful to source, which overrides the palette here. */
.et-l .nec-btn-outline.et_pb_button {
background-color: var(--nec-white);
color: #000000;
border: 2px solid #000000 !important;
}
.et-l .nec-btn-outline.et_pb_button:hover {
background-color: var(--nec-secondary);
border-color: var(--nec-secondary);
color: var(--nec-white);
}
/* Source .btn-hero-ghost */
.et-l .nec-btn-ghost.et_pb_button {
background: transparent;
color: var(--nec-white);
border: 2px solid rgba(255, 255, 255, 0.5);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.et-l .nec-btn-ghost.et_pb_button:hover {
background: var(--nec-primary);
border-color: var(--nec-primary);
color: var(--nec-white);
}
/* Source .btn-large */
.et-l .nec-btn-large.et_pb_button {
padding: 18px 40px;
font-size: 1.15rem;
}
@media (max-width: 767px) {
.et-l .nec-btn-large.et_pb_button {padding: 18px 20px;}
}
/* Source .btn-primary.btn-large box-shadow */
.et-l .nec-btn-primary.nec-btn-large.et_pb_button {
box-shadow: 0 10px 30px rgba(22, 163, 74, 0.4);
}
/* Source .hero-btn-primary */
.et-l .nec-btn-hero.et_pb_button {
font-size: 1.1rem;
padding: 20px 40px;
}
/* Pill CTA buttons used by the dark CTA band */
.et-l .nec-btn-pill.et_pb_button {
border-radius: 100px;
padding: 20px 48px;
font-size: 1.1rem;
font-weight: 700;
background: var(--nec-primary);
color: #fff;
border: none;
box-shadow: 0 0 40px rgba(22, 163, 74, 0.3);
}
.et-l .nec-btn-pill.et_pb_button:hover {
background: var(--nec-primary-hover);
transform: translateY(-3px);
box-shadow: 0 0 60px rgba(22, 163, 74, 0.5);
}
.et-l .nec-btn-pill-ghost.et_pb_button {
border-radius: 100px;
padding: 18px 40px;
font-size: 1.05rem;
font-weight: 600;
background: transparent;
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: none;
}
.et-l .nec-btn-pill-ghost.et_pb_button:hover {
border-color: #fff;
background: rgba(255, 255, 255, 0.05);
transform: translateY(-3px);
}
/* Inline text link with arrow — source .service-card-link / .read-more */
.et-l .nec-link-arrow a,
.et-l a.nec-link-arrow {
color: var(--nec-primary);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition:
gap 0.3s ease,
color 0.3s ease;
}
.et-l .nec-link-arrow a:hover,
.et-l a.nec-link-arrow:hover {
color: var(--nec-dark-green);
gap: 12px;
}
/* =====================================================================
5. HEADER
Built in the Divi Theme Builder as: top bar section + main nav
section + mobile call bar. Only the chrome the Divi menu module
cannot express is styled here.
===================================================================== */
/* --- 5a. Top bar ------------------------------------------------- */
.nec-topbar {
background: var(--nec-dark-green);
color: rgba(255, 255, 255, 0.75);
font-size: 0.8rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nec-topbar .nec-topbar-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.nec-topbar-left,
.nec-topbar-right {
display: flex;
align-items: center;
}
.nec-topbar-nav {
display: flex;
gap: 24px;
}
.nec-topbar-divider {
display: inline-block;
width: 1px;
height: 14px;
background: rgba(255, 255, 255, 0.15);
margin: 0 20px;
}
.nec-topbar i {
color: var(--nec-primary);
margin-right: 6px;
opacity: 0.9;
transition: transform 0.3s;
}
.nec-topbar a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
font-weight: 500;
letter-spacing: 0.5px;
display: flex;
align-items: center;
transition: color 0.3s ease;
font-size: 0.8rem;
}
.nec-topbar a:hover {
color: #fff;
}
.nec-topbar a:hover i {
transform: translateY(-1px);
}
.nec-topbar-socials {
display: flex;
gap: 16px;
}
.nec-topbar-socials a i {
color: rgba(255, 255, 255, 0.7);
font-size: 1rem;
margin: 0;
}
.nec-topbar-socials a:hover i {
color: var(--nec-primary);
}
/* --- 5b. Logo ---------------------------------------------------- */
.nec-logo {
font-size: 1.75rem;
font-weight: 800;
color: var(--nec-dark-green);
letter-spacing: -1px;
display: flex;
align-items: center;
gap: 12px;
transition: var(--nec-transition);
white-space: nowrap;
text-decoration: none;
line-height: 1;
}
.nec-logo:hover {
color: var(--nec-dark-green);
}
.nec-logo-icon {
width: 40px;
height: 40px;
background: var(--nec-primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.25rem;
transform: rotate(-10deg);
flex-shrink: 0;
}
/* --- 5c. Divi menu module skinned to the source nav -------------- */
.nec-nav .et_pb_menu__menu > nav > ul > li > a {
font-family: var(--nec-font);
font-weight: 600;
color: var(--nec-dark-green);
font-size: 15px;
white-space: nowrap;
padding-bottom: 0;
transition: var(--nec-transition);
}
.nec-nav .et_pb_menu__menu > nav > ul {
margin-right: 0;
}
.nec-nav .et_pb_menu__menu > nav > ul > li {
padding-right: 10px; /* source .nav-links gap: 20px */
margin-top: 0;
}
.nec-nav .et_pb_menu__menu > nav > ul > li:last-child {
padding-right: 0;
}
.nec-nav .et_pb_menu__menu > nav > ul > li > a:hover {
color: var(--nec-primary);
opacity: 1;
}
/* Divi draws no underline by default; source draws none either. Ensure
any Divi/plugin underline stays off. */
.nec-nav .et_pb_menu__menu ul li a:after {
display: none !important;
}
/* Dropdowns — source: min-width 320px, 4px radius, 12px/20px items,
1px #f1f5f9 separators, 0 15px 35px rgba(0,0,0,.1) shadow. */
.nec-nav .et_pb_menu__menu ul li ul.sub-menu {
min-width: 320px;
width: 320px;
background: var(--nec-white);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
border-radius: 4px;
border-top: none;
padding: 0;
transition: all 0.3s ease;
}
.nec-nav .et_pb_menu__menu ul li ul.sub-menu li {
padding: 0;
width: 100%;
}
.nec-nav .et_pb_menu__menu ul li ul.sub-menu li a {
display: block;
width: 100%;
padding: 12px 20px;
font-size: 0.95rem;
font-weight: 500;
/* Source uses var(--text-main) here, which is never declared, so the
colour INHERITS. Reproduced faithfully rather than "corrected". */
color: inherit;
border-bottom: 1px solid #f1f5f9;
transition: 0.2s;
white-space: normal;
line-height: 1.4;
}
.nec-nav .et_pb_menu__menu ul li ul.sub-menu li:last-child > a {
border-bottom: none;
}
.nec-nav .et_pb_menu__menu ul li ul.sub-menu li a:hover {
background: #f8fafc;
color: var(--nec-dark-green);
opacity: 1;
}
/* Chevron on parent items */
.nec-nav .et_pb_menu__menu > nav > ul > li.menu-item-has-children > a:before {
content: "\f078";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 12px;
margin-left: 4px;
order: 2;
display: inline-block;
}
.nec-nav .et_pb_menu__menu > nav > ul > li.menu-item-has-children > a {
display: inline-flex;
align-items: center;
}
/* "GET A FREE QUOTE" nav item. Added as a real WordPress menu item with
the CSS class `nec-nav-cta` (see 05-wp-structure/setup-site.php) so it
stays in the menu — including Divi's mobile menu — instead of being a
separate button module that mobile users would never see. */
.nec-nav .et_pb_menu__menu > nav > ul > li.nec-nav-cta > a {
background-color: var(--nec-primary);
color: #fff !important;
border: 2px solid var(--nec-primary) !important;
border-radius: var(--nec-radius-sm) !important;
padding: 12px 22px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
}
.nec-nav .et_pb_menu__menu > nav > ul > li.nec-nav-cta > a:hover {
background-color: var(--nec-primary-press);
border-color: var(--nec-primary-press);
color: #fff !important;
opacity: 1;
}
/* Mobile menu: full-width centred CTA */
.nec-nav .et_pb_menu__menu .et_mobile_menu li.nec-nav-cta > a,
.nec-nav .et_mobile_menu li.nec-nav-cta > a {
background-color: var(--nec-primary);
color: #fff !important;
text-align: center;
justify-content: center;
border-radius: var(--nec-radius-sm) !important;
margin: 12px 0 0;
padding: 14px 24px;
white-space: nowrap;
}
/* Divi's mobile menu — match the source's full-screen panel typography */
.nec-nav .et_mobile_menu {
border-top: 3px solid var(--nec-primary);
padding: 8px 0;
}
.nec-nav .et_mobile_menu li a {
color: var(--nec-dark-green);
font-size: 1.25rem;
font-weight: 600;
padding: 15px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
text-align: center;
}
.nec-nav .et_mobile_menu li li a {
font-size: 1.05rem;
color: var(--nec-text-muted);
border-bottom: none;
padding: 8px 0;
}
/* Sticky header shell — source header{position:sticky; padding:24px 0} */
.nec-header-sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1000;
background: #ffffff;
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition: var(--nec-transition);
}
/* .scrolled state applied by assets/js/neclean.js past 120px */
.nec-header-sticky.nec-scrolled {
background: rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: var(--nec-shadow-sm);
border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}
.nec-header-sticky.nec-scrolled .nec-nav .et_pb_menu__menu > nav > ul > li > a {
color: var(--nec-text-dark);
}
/* --- 5d. Mobile click-to-call bar -------------------------------- */
.nec-mobile-call {
display: none;
background: var(--nec-primary);
color: #fff;
text-align: center;
padding: 10px;
font-weight: 600;
text-decoration: none;
font-size: 0.95rem;
}
.nec-mobile-call:hover {
color: #fff;
}
/* =====================================================================
6. FOOTER
The home page footer is the light `.bg-gray` variant; the rest of the
site uses the dark gradient footer. Both are Theme Builder templates;
this block styles the shared internals.
===================================================================== */
.nec-footer-dark {
background: linear-gradient(180deg, #0f172a, #162338);
color: var(--nec-white);
}
.nec-footer-light {
background: linear-gradient(180deg, #ffffff, #f8fbff);
}
.nec-footer h4 {
font-size: 1.25rem;
margin-bottom: 24px;
}
.nec-footer-dark h4 {
color: #fff;
}
.nec-footer-light h4 {
color: var(--nec-dark-green);
margin-bottom: 10px;
font-size: 16px !important;
}
.nec-footer-dark p,
.nec-footer-dark a {
color: #94a3b8;
}
.nec-footer-light p {
color: var(--nec-text-muted);
line-height: 1.5;
font-size: 16px;
}
.nec-footer-light a {
color: var(--nec-text-muted);
text-decoration: none;
}
.nec-footer-list ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.nec-footer-light .nec-footer-list ul {
gap: 10px;
}
.nec-footer-list a {
text-decoration: none;
transition: var(--nec-transition);
position: relative;
padding-left: 20px;
font-size: 16px
}
.nec-footer-list a:before {
content: '';
background-color: #16a34a;
min-width: 10px;
min-height: 10px;
display: inline-flex;
border-radius: 50%;
position: absolute;
left: 0;
top: 5px;
}
.nec-footer-dark .nec-footer-list a:hover {
color: var(--nec-primary);
padding-left: 8px;
}
.nec-footer-light .nec-footer-list a:hover {
color: var(--nec-primary);
}
/* Contact list with leading icons */
.nec-footer-contact {
list-style: none;
padding: 0 !important;
margin: 0 0 20px 0;
display: flex;
flex-direction: column;
gap: 12px;
color: var(--nec-text-muted);
font-size: 16px;
}
.nec-footer-contact li {
display: flex;
gap: 10px;
align-items: center;
}
.nec-footer-contact li.nec-align-start {
align-items: flex-start;
}
.nec-footer-contact i {
color: var(--nec-primary);
flex-shrink: 0;
}
.nec-footer-contact li.nec-align-start i {
margin-top: 4px;
}
.nec-footer-contact a {
text-decoration: none;
}
.nec-footer-light .nec-footer-contact a.nec-strong {
font-weight: 600;
color: var(--nec-text-dark);
}
/* Round social buttons (dark footer) */
.nec-social-round {
display: flex;
gap: 16px;
}
.nec-social-round a {
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: var(--nec-transition);
}
.nec-social-round a:hover {
background: var(--nec-primary);
transform: translateY(-3px);
color: #fff;
}
/* Inline social icons (light footer) */
.nec-social-inline {
margin-top: 25px;
display: flex;
}
body #et-main-area .nec-social-inline .icon::before {
color: #16a34a !important;
font-weight: 400 !important;
font-family: "Font Awesome 6 Brands" !important;
font-size: 24px !important;
}
footer .nec-social-inline {
margin-left: -10px !important;
}
footer .et_pb_social_media_follow_network {
margin-right: 0 !important;
}
.nec-social-inline .et-social-facebook .icon::before {
content: "\f09a";
}
.nec-social-inline .et-social-instagram .icon::before {
content: "\f16d";
}
.nec-social-inline a {
color: var(--nec-primary);
font-size: 1.5rem;
}
.nec-footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 30px;
text-align: center;
color: #94a3b8;
}
.nec-footer-light .nec-footer-bottom {
border-top: none;
padding-top: 20px;
color: var(--nec-text-muted);
font-size: 0.9rem;
text-align: left;
}
/* The source puts the flex row directly around the two paragraphs:
Divi inserts .et_pb_text_inner between the module and its content, so the
flex container ended up with a single child and both paragraphs stacked to
the left. Move the flex onto that inner wrapper to restore the source's
copyright-left / links-right split. */
.nec-footer-light .nec-footer-bottom .et_pb_text_inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px 24px;
}
.nec-footer-light .nec-footer-bottom p {
margin: 0;
font-size: 14px
}
/* =====================================================================
7. SHARED SECTIONS
===================================================================== */
/* --- 7a. Hero ---------------------------------------------------- */
/* Background image + overlay are set in each section's Divi settings so
different pages can swap the photo without touching CSS. Geometry
lives here. Source: height 575px, flex centred. */
.nec-hero {
color: #fff;
min-height: 575px;
display: flex;
align-items: center;
justify-content: center;
}
.nec-hero .et_pb_row {
width: 100%;
}
.nec-hero-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.nec-hero h1 {
font-size: 4.5rem;
line-height: 1.1;
margin-bottom: 24px;
color: #fff;
}
.nec-hero p {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
margin: 0 auto 40px;
max-width: 800px;
line-height: 1.6;
}
.nec-hero p:last-child {
margin-bottom:0;
}
.nec-hero .nec-hero-fineprint {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 30px;
}
/* Divi renders every button inside its own block-level
.et_pb_button_module_wrapper, which stacks buttons vertically. The
source lays them out in a centred flex row with a 24px gap. Laying the
WRAPPERS out inline reproduces that without wrapping the buttons in a
Code module, so each button stays a real, editable Divi module.
Scoped to the action areas only — never to buttons site-wide. */
.et-l .nec-hero > .et_pb_row .et_pb_button_module_wrapper,
.et-l .nec-cta-dark .et_pb_button_module_wrapper,
.et-l .nec-cta-centered .et_pb_button_module_wrapper {
display: inline-block;
vertical-align: middle;
margin: 0 12px; /* 12px + 12px = the source's 24px gap */
}
.et-l .nec-cta-dark .et_pb_button_module_wrapper,
.et-l .nec-cta-centered .et_pb_button_module_wrapper {
margin: 0 8px; /* source .dark-cta-actions / .centered-cta-actions gap: 16px */
}
/* Interior page hero (services / about / contact) — same treatment,
padded rather than fixed-height. */
.nec-hero-inner {
color: #fff;
text-align: center;
}
.nec-hero-inner h1 {
color: #fff;
}
.nec-hero-badge {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 10px 30px rgba(2, 132, 199, 0.12);
color: #fff;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
margin: 0 auto 32px;
display: inline-flex;
align-items: center;
padding: 8px 20px;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
gap: 10px;
}
/* Hero trust row */
.nec-hero-trust {
display: flex;
justify-content: center;
gap: 48px;
margin-top: 60px;
padding-top: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.nec-hero-trust .nec-trust-item {
display: flex;
align-items: center;
gap: 12px;
text-align: left;
}
.nec-hero-trust i {
color: var(--nec-primary);
font-size: 1.75rem;
}
.nec-hero-trust span {
font-size: 1rem;
font-weight: 600;
color: #fff;
}
/* --- 7b. Trust bar (3-up) --------------------------------------- */
.nec-trustbar {
background: var(--nec-white);
}
.nec-trustbar .nec-trust-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.nec-trustbar .nec-trust-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--nec-dark-green);
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
line-height: 1.1;
letter-spacing: -0.03em;
}
.nec-trustbar .nec-trust-title i {
color: var(--nec-primary);
font-size: 1.4rem;
}
.nec-trustbar p {
font-size: 0.95rem;
font-weight: 400;
color: var(--nec-text-muted);
line-height: 1.5;
margin: 0 auto;
max-width: 250px;
}
/* --- 7c. Founder / split image+text ----------------------------- */
/* Divi wraps every image module in , which is
inline-block and therefore shrink-to-fit. The source markup has the ![]()
directly inside its container, so `width: 100%` there resolves against the
full column. Inside Divi it resolved against the shrink-wrapped span
instead — the founder portrait came out 426px wide in a 536px column.
Making the wrapper a full-width block restores the source's containing
block for every nec- image module. */
.et-l [class*="nec-"] .et_pb_image_wrap {
display: block;
width: 100%;
}
.nec-founder-img img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
border-radius: var(--nec-radius-lg);
box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1);
}
.nec-founder-text h2 {
font-size: 2.5rem;
margin-bottom: 25px;
line-height: 1.2;
}
.nec-founder-body {
font-size: 1.1rem;
line-height: 1.8;
}
.nec-founder-body p {
margin-bottom: 20px;
}
.nec-founder-body .nec-pullquote {
font-weight: 700;
color: var(--nec-dark-green);
font-size: 1.25rem;
margin-bottom: 30px;
font-style: italic;
}
/* --- 7d. Service detail row (image + checklist) ------------------ */
.nec-service-img img {
width: 100%;
height: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: var(
--nec-radius-lg
); /* Source uses --radius-lg (24px), not xl (32px) */
box-shadow: var(--nec-shadow-lg);
}
.nec-service-info h2 {
font-size: 2.75rem;
margin-bottom: 24px;
color: var(--nec-dark-green);
}
.nec-service-info > p,
.nec-service-lead p {
font-size: 1.15rem;
color: var(--nec-text-muted);
margin-bottom: 32px;
line-height: 1.7;
}
/* Checklist — 2-col on desktop, 1-col under 992px (source) */
.nec-checklist ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 0 0 40px;
padding: 0;
list-style: none;
}
.nec-checklist--single ul {
grid-template-columns: 1fr;
}
.nec-checklist li {
display: inline-block;
gap: 12px;
font-weight: 500;
line-height: 1.6;
color: var(--nec-text-dark);
font-size: 16px
}
.nec-checklist--lg li {
font-size: 1.1rem;
}
.nec-checklist li:before {
content: "\f058"; /* fa-circle-check */
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: var(--nec-primary);
font-size: 1.15rem;
margin-top: 4px;
line-height: 1;
margin-right: 12px;
flex-shrink: 0;
}
/* Image badge overlay */
.nec-img-badge {
position: absolute;
bottom: 24px;
left: 24px;
background: rgba(255, 255, 255, 0.95);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
padding: 16px 24px;
border-radius: var(--nec-radius-md);
box-shadow: var(--nec-shadow-md);
display: flex;
align-items: center;
gap: 16px;
z-index: 3;
}
/* --- 7e. Stats band -------------------------------------------- */
.nec-stats {
background: #162338;
}
.nec-stats .nec-stat h3 {
font-size: 3rem;
color: var(--nec-primary);
margin-bottom: 8px;
}
.nec-stats .nec-stat p {
font-weight: 600;
color: #efefef;
font-size: 1.1rem;
margin: 0;
}
/* --- 7f. Process steps ----------------------------------------- */
.nec-process-step {
text-align: center;
padding: 40px 24px;
background: var(--nec-white);
border-radius: var(--nec-radius-lg);
border: 1px solid var(--nec-border);
transition: var(--nec-transition);
height: 100%;
}
.nec-process-step:hover {
border-color: var(--nec-secondary);
box-shadow: var(--nec-shadow-md);
transform: translateY(-4px);
}
.nec-process-icon {
position: relative;
width: 80px;
height: 80px;
margin: 0 auto 24px;
}
.nec-process-icon i {
width: 80px;
height: 80px;
background: #cbeeff;
color: var(--nec-secondary);
font-size: 2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.nec-step-number {
position: absolute;
top: -6px;
right: -6px;
width: 26px;
height: 26px;
background: var(--nec-secondary);
color: #efefef;
font-size: 0.8rem;
font-weight: 800;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.nec-process-step h4 {
font-size: 1.25rem;
margin-bottom: 12px;
}
.nec-process-step p {
color: var(--nec-text-muted);
font-size: 0.95rem;
line-height: 1.7;
margin: 0;
}
/* Dark variant (services page, navy background) */
.nec-process-step-dark {
text-align: center;
padding: 40px 28px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--nec-radius-lg);
transition: var(--nec-transition);
height: 100%;
}
.nec-process-step-dark:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(22, 163, 74, 0.4);
transform: translateY(-4px);
}
.nec-process-step-dark .nec-process-icon i {
background: #99cde8;
color: var(--nec-secondary);
}
.nec-process-step-dark h4 {
color: #fff;
font-size: 1.25rem;
margin-bottom: 12px;
}
.nec-process-step-dark p {
color: rgba(255, 255, 255, 0.6);
font-size: 0.95rem;
line-height: 1.7;
margin: 0;
}
/* --- 7g. "What we don't do" callout ---------------------------- */
.nec-dont-do {
background-color: var(--nec-off-white);
border-left: 4px solid #ef4444;
padding: 40px;
border-radius: 0 var(--nec-radius-lg) var(--nec-radius-lg) 0;
}
.nec-dont-do h2 {
color: var(--nec-dark-green);
margin-bottom: 16px;
}
/* =====================================================================
8. CARDS
===================================================================== */
/* --- 8a. Service card (home 6-up) — image bleeds past padding ---- */
.nec-service-card {
background: var(--nec-white);
border: 1px solid var(--nec-border);
border-radius: 12px;
padding: 40px 30px;
transition: all 0.3s ease;
text-align: center;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
}
.nec-service-card:hover {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
transform: translateY(-8px);
border-color: var(--nec-white);
}
.nec-service-card .nec-card-img,
.nec-service-card .nec-card-img img {
display: block;
width: 100%;
}
.nec-service-card .nec-card-img {
margin: -40px -30px 25px;
width: calc(100% + 60px);
max-width: none;
}
.nec-service-card .nec-card-img img {
height: 200px;
object-fit: cover;
max-width: none;
}
.nec-service-card .nec-card-icon i {
font-size: 2.5rem;
color: var(--nec-primary);
margin-bottom: 12px;
display: inline-block;
transition: transform 0.3s ease;
}
.nec-service-card:hover .nec-card-icon i {
transform: scale(1.1);
}
.nec-service-card h3 {
color: var(--nec-dark-green);
font-size: 1.3rem;
margin-bottom: 15px;
}
.nec-service-card p {
color: var(--nec-text-muted);
font-size: 0.95rem;
margin-bottom: 0;
line-height: 1.6;
flex-grow: 1;
}
/* --- 8b. Large service card (services index page) --------------- */
.nec-service-card-lg {
background: #fff;
border-radius: var(--nec-radius-lg);
padding: 40px;
box-shadow: var(--nec-shadow-md);
transition: var(--nec-transition);
border: 1px solid var(--nec-border);
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.nec-service-card-lg:hover {
transform: translateY(-5px);
box-shadow: var(--nec-shadow-lg);
border-color: rgba(2, 132, 199, 0.3);
}
.nec-service-card-lg h2,
.nec-service-card-lg h3 {
font-size: 1.5rem;
color: var(--nec-dark-green);
margin-bottom: 16px;
}
.nec-service-card-lg p {
color: var(--nec-text-muted);
line-height: 1.7;
margin-bottom: 24px;
flex-grow: 1;
}
/* --- 8c. Value card (about / team) ----------------------------- */
.nec-value-card {
background: var(--nec-white);
padding: 40px 30px;
border-radius: var(--nec-radius-lg);
text-align: center;
box-shadow: var(--nec-shadow-sm);
border: 1px solid var(--nec-border);
transition: var(--nec-transition);
height: 100%;
}
.nec-value-card:hover {
transform: translateY(-10px);
box-shadow: var(--nec-shadow-lg);
border-color: var(--nec-secondary);
}
.nec-value-icon {
width: 70px;
height: 70px;
background: rgba(2, 132, 199, 0.1);
color: var(--nec-secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin: 0 auto 24px;
transition: var(--nec-transition);
}
.nec-value-card:hover .nec-value-icon {
background: var(--nec-secondary);
color: #fff;
}
.nec-value-card h3 {
margin-bottom: 10px;
color: var(--nec-dark-green);
}
.nec-value-card p {
color: var(--nec-text-muted);
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
}
/* --- 8d. Why-us item ------------------------------------------- */
.nec-why-item {
background: var(--nec-white);
padding: 30px;
border-radius: 12px;
box-shadow: var(--nec-shadow-sm);
}
.nec-why-item .et_pb_text_inner {
display: flex;
gap: 20px;
}
.nec-why-item i {
color: var(--nec-primary);
font-size: 2rem;
flex-shrink: 0;
margin-top: 5px;
}
.nec-why-item h4 {
color: var(--nec-dark-green);
font-size: 1.2rem;
margin-bottom: 10px;
}
.nec-why-item p {
margin: 0;
color: var(--nec-text-muted);
line-height: 1.6;
}
.nec-why-image img {
width: 100%;
height: 100%;
min-height: 500px;
object-fit: cover;
border-radius: 24px;
box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1);
}
/* --- 8e. Review card ------------------------------------------- */
.nec-review-card {
background: var(--nec-white);
padding: 40px;
border-radius: var(--nec-radius-lg);
box-shadow: var(--nec-shadow-sm);
border: 1px solid var(--nec-border);
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
.nec-review-stars {
color: var(--nec-star);
margin-bottom: 20px;
font-size: 1.2rem;
}
.nec-review-text {
font-size: 1.1rem;
color: var(--nec-text-dark);
font-style: italic;
margin-bottom: 32px;
line-height: 1.7;
flex-grow: 1;
}
.nec-review-author {
display: flex;
align-items: center;
gap: 16px;
}
.nec-avatar {
width: 50px;
height: 50px;
background: var(--nec-primary-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--nec-primary-hover);
font-weight: 800;
font-size: 1.25rem;
flex-shrink: 0;
}
.nec-review-author h5 {
font-size: 1.1rem;
margin-bottom: 4px;
}
.nec-review-author span {
font-size: 0.9rem;
color: var(--nec-text-muted);
}
/* --- 8f. Big centred testimonial ------------------------------- */
.nec-quote-block {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.nec-quote-block .nec-stars {
color: var(--nec-secondary);
font-size: 1.5rem;
margin-bottom: 20px;
}
.nec-quote-block h3 {
font-size: 1.8rem;
color: var(--nec-dark-green);
font-style: italic;
font-weight: 500;
line-height: 1.5;
margin-bottom: 20px;
letter-spacing: normal;
}
.nec-quote-block .nec-author {
font-weight: 700;
color: var(--nec-primary);
text-transform: uppercase;
letter-spacing: 1px;
}
/* --- 8g. Pricing card ----------------------------------------- */
.nec-pricing-card {
background: var(--nec-white);
border: 1px solid var(--nec-border);
border-radius: var(--nec-radius-lg);
padding: 40px 36px;
display: flex;
flex-direction: column;
position: relative;
transition: var(--nec-transition);
height: 100%;
}
.nec-pricing-card:hover {
transform: translateY(-6px);
box-shadow: var(--nec-shadow-lg);
border-color: #cbd5e1;
}
.nec-pricing-card.nec-featured {
background: linear-gradient(180deg, #0f172a, #162338);
border-color: var(--nec-dark-green);
transform: scale(1.04);
box-shadow: 0 30px 60px rgba(15, 23, 42, 0.2);
}
.nec-pricing-card.nec-featured:hover {
transform: scale(1.04) translateY(-6px);
}
.nec-pricing-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--nec-primary);
color: #fff;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 5px 18px;
border-radius: 100px;
white-space: nowrap;
}
.nec-pricing-label {
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--nec-text-muted);
margin-bottom: 16px;
}
.nec-featured .nec-pricing-label {
color: rgba(255, 255, 255, 0.6);
}
.nec-pricing-price {
font-size: 3.5rem;
font-weight: 800;
color: var(--nec-dark-green);
line-height: 1;
margin-bottom: 20px;
}
.nec-pricing-price span {
font-size: 1rem;
font-weight: 500;
color: var(--nec-text-muted);
margin-left: 4px;
}
.nec-featured .nec-pricing-price {
color: #fff;
}
.nec-featured .nec-pricing-price span {
color: rgba(255, 255, 255, 0.6);
}
.nec-pricing-desc {
font-size: 0.95rem;
color: var(--nec-text-muted);
line-height: 1.6;
margin-bottom: 28px;
padding-bottom: 28px;
}
.nec-featured .nec-pricing-desc {
color: rgba(255, 255, 255, 0.7);
}
.nec-pricing-features {
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
flex-grow: 1;
margin: 0 0 36px;
padding: 0;
}
.nec-pricing-features li {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.95rem;
color: var(--nec-text-dark);
}
.nec-pricing-features li:before {
content: "\f00c";
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: var(--nec-primary);
font-size: 0.8rem;
flex-shrink: 0;
}
.nec-featured .nec-pricing-features li {
color: rgba(255, 255, 255, 0.85);
}
.nec-pricing-note {
text-align: center;
color: var(--nec-text-muted);
font-size: 0.9rem;
margin-top: 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.nec-pricing-note i {
color: var(--nec-primary);
}
/* Inline pricing tier row */
.nec-pricing-tier {
background: var(--nec-white);
border: 1px solid var(--nec-border);
padding: 24px;
border-radius: var(--nec-radius-md);
margin-bottom: 16px;
display: flex;
justify-content: space-between;
align-items: center;
transition: var(--nec-transition);
}
.nec-pricing-tier:hover {
box-shadow: var(--nec-shadow-md);
transform: translateX(5px);
}
.nec-pricing-tier .nec-tier-name {
font-weight: 700;
font-size: 1.1rem;
color: var(--nec-dark-green);
}
/* Source uses var(--cyan) here, which is never declared → inherits. */
.nec-pricing-tier .nec-tier-price {
font-weight: 800;
font-size: 1.25rem;
}
/* =====================================================================
9. FAQ ACCORDION
Skins Divi's native accordion module (et_pb_accordion) to the source
`.faq-accordion` design so the FAQ stays editable as a real Divi
module instead of pasted markup.
===================================================================== */
.nec-faq.et_pb_accordion {
max-width: 800px;
margin: 0 auto;
border: none;
}
.nec-faq.nec-faq--wide {
max-width: none;
}
.nec-faq .et_pb_toggle {
background: var(--nec-white);
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: var(--nec-radius-lg);
overflow: hidden;
/* Only the decorative properties may transition. Divi animates the panel
height with jQuery slideDown/slideUp; a CSS `transition: all` here made
the wrapper try to animate its own height at the same time, so the two
fought each other and the accordion stuttered instead of gliding. */
transition:
border-color 0.3s ease,
box-shadow 0.3s ease,
background-color 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
margin-bottom: 16px;
padding: 0;
}
.nec-faq .et_pb_toggle:last-child {
margin-bottom: 0;
}
.nec-faq .et_pb_toggle:hover {
border-color: var(--nec-olive-40);
box-shadow: 0 8px 15px rgba(134, 168, 115, 0.08);
}
.nec-faq .et_pb_toggle.et_pb_toggle_open {
border-color: var(--nec-primary);
box-shadow: 0 8px 20px rgba(134, 168, 115, 0.15);
background: var(--nec-white);
}
.nec-faq .et_pb_toggle_title {
width: 100%;
text-align: left;
padding: 24px 84px 24px 30px;
margin: 0;
font-family: var(--nec-font);
font-size: 1.15rem;
color: var(--nec-dark-green);
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.01em;
cursor: pointer;
transition: color 0.3s ease;
position: relative;
}
.nec-faq .et_pb_toggle_open .et_pb_toggle_title {
color: var(--nec-primary);
}
/* Circular +/- pill on the right */
.nec-faq .et_pb_toggle_title:before {
margin-top: 0;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900;
content: "\2b" !important;
width: 36px;
height: 36px;
background: var(--nec-olive-10);
color: var(--nec-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
right: 30px;
left: auto;
top: 50%;
transform: translateY(-50%);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nec-faq .et_pb_toggle_open .et_pb_toggle_title:before {
content: "\f068" !important;
background: var(--nec-primary);
color: #fff;
transform: translateY(-50%) rotate(180deg);
}
.nec-faq .et_pb_toggle_content {
padding: 0 30px 24px;
background: rgba(248, 250, 252, 0.6);
margin: 0;
}
.nec-faq .et_pb_toggle_content p {
margin: 0;
color: var(--nec-text-muted);
font-size: 1.05rem;
line-height: 1.7;
border-top: 1px solid rgba(226, 232, 240, 0.6);
padding-top: 20px;
}
/* FAQ split layout — sticky image left, accordion right */
.nec-faq-image {
position: -webkit-sticky;
position: sticky;
top: 100px;
border-radius: var(--nec-radius-xl);
overflow: hidden;
box-shadow: var(--nec-shadow-lg);
aspect-ratio: 3/4;
}
.nec-faq-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nec-faq-badge {
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
z-index: 2;
}
.nec-faq-badge-inner {
background: rgba(255, 255, 255, 0.95);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding: 16px 20px;
border-radius: 16px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
border: 1px solid #fff;
}
.nec-faq-badge-inner h4 {
color: var(--nec-dark-green);
margin: 0;
font-size: 1.1rem;
}
.nec-faq-badge-inner p {
color: var(--nec-text-muted);
margin: 0;
font-size: 0.9rem;
}
.nec-faq-badge-icon {
font-size: 1.8rem;
color: var(--nec-primary);
background: var(--nec-olive-10);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
flex-shrink: 0;
}
/* =====================================================================
10. BEFORE / AFTER
Two components: the static split card used on the home page (built
from Divi image modules) and the drag comparison slider used on Our
Work. The drag slider has no Divi equivalent — it is the one place
custom JS is genuinely required.
===================================================================== */
/* --- 10a. Split card (home) ------------------------------------ */
.nec-ba-card {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--nec-shadow-sm);
display: flex;
cursor: pointer;
transition: transform 0.3s ease;
}
.nec-ba-card:hover {
transform: translateY(-5px);
}
.nec-ba-card .nec-ba-half {
flex: 1;
position: relative;
min-width: 0;
}
.nec-ba-card .nec-ba-half img,
.nec-ba-card img {
width: 100%;
height: 350px;
object-fit: cover;
display: block;
}
.nec-ba-card .nec-ba-divider {
width: 4px;
background: var(--nec-white);
position: absolute;
left: 50%;
top: 0;
bottom: 0;
transform: translateX(-50%);
z-index: 10;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
pointer-events: none;
}
.nec-ba-card .nec-ba-divider:after {
content: "< >";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 34px;
height: 34px;
background: var(--nec-white);
color: var(--nec-dark-green);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: bold;
letter-spacing: -1px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
/* --- 10b. Lightbox comparison slider --------------------------- */
.nec-lightbox {
display: none;
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.95);
z-index: 99999;
align-items: center;
justify-content: center;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
.nec-lightbox.nec-active {
display: flex;
}
.nec-lightbox-close {
position: absolute;
top: 20px;
right: 40px;
color: var(--nec-white);
font-size: 40px;
line-height: 1;
cursor: pointer;
transition: 0.3s;
z-index: 100000;
background: none;
border: none;
}
.nec-lightbox-close:hover {
color: var(--nec-primary);
transform: scale(1.1);
}
.nec-lb-stage {
position: relative;
width: 90vw;
max-width: 1000px;
height: 70vh;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
background: #000;
}
.nec-lb-after,
.nec-lb-before {
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
top: 0;
left: 0;
}
.nec-lb-before-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
.nec-lb-range {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: ew-resize;
z-index: 10;
margin: 0;
}
.nec-lb-handle {
position: absolute;
top: 0;
bottom: 0;
width: 4px;
background: var(--nec-white);
left: 50%;
transform: translateX(-50%);
pointer-events: none;
z-index: 5;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.nec-lb-handle:after {
content: "< >";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background: var(--nec-white);
color: var(--nec-dark-green);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: bold;
letter-spacing: -1px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
/* =====================================================================
11. CTA BANDS
===================================================================== */
/* Dark radial-glow CTA (source .dark-cta-section) */
.nec-cta-dark {
background: linear-gradient(180deg, #0f172a, #162338);
text-align: center;
position: relative;
overflow: hidden;
}
.nec-cta-dark:before {
content: "";
position: absolute;
top: -50%;
left: 50%;
transform: translateX(-50%);
width: 700px;
height: 700px;
background: radial-gradient(
circle,
rgba(22, 163, 74, 0.12) 0%,
transparent 70%
);
pointer-events: none;
}
.nec-cta-dark .et_pb_row {
position: relative;
z-index: 1;
max-width: 760px;
}
.nec-cta-overline {
display: block;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--nec-primary);
margin-bottom: 20px;
}
.nec-cta-dark h2,
.nec-cta-title {
font-size: 4rem;
font-weight: 800;
color: #fff;
line-height: 1.1;
letter-spacing: -1.5px;
margin-bottom: 24px;
}
.nec-cta-dark .nec-cta-desc {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.65);
line-height: 1.7;
margin-bottom: 48px;
}
.nec-cta-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 36px;
}
.nec-cta-trust {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.45);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.nec-cta-trust i {
color: var(--nec-primary);
opacity: 0.7;
}
body #et-main-area footer .nec-footer-grid {
align-items: start !important;
}
/* Solid navy CTA (source: home "Ready for a Cleaner Space?") */
.nec-cta-solid {
background-color: var(--nec-dark-green);
text-align: center;
}
.nec-cta-solid h2 {
color: #fff;
font-size: 2.5rem;
margin-bottom: 10px;
}
.nec-cta-solid p {
color: rgba(255, 255, 255, 0.8);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto 30px;
}
.nec-cta-phone-row {
display: flex;
gap: 20px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.nec-cta-phone-row .nec-sep {
color: #fff;
font-weight: 600;
font-size: 1.2rem;
}
.nec-cta-phone-row a.nec-phone {
color: #fff;
font-weight: 700;
font-size: 1.2rem;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Centred CTA (source .centered-cta-section) */
.nec-cta-centered {
background: var(--nec-dark-green);
text-align: center;
}
.nec-cta-centered .et_pb_row {
max-width: 800px;
}
.nec-cta-centered .nec-cta-title {
font-size: 3.5rem;
letter-spacing: -1px;
}
.nec-cta-centered .nec-cta-title span {
color: var(--nec-primary);
}
.nec-cta-centered .nec-cta-desc {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.6;
margin: 0 auto 40px;
max-width: 650px;
}
/* =====================================================================
11b. SHARED PATTERNS
Card and utility patterns reused across two or more pages. Single-page
components live in assets/css/pages/*.css instead.
===================================================================== */
/* --- Pill badge (Our Work hero, featured post) ------------------- */
.et-l .nec-pill-badge {
display: inline-block;
padding: 6px 16px;
background: rgba(134, 168, 115, 0.2);
color: var(--nec-primary);
border-radius: 20px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 0.85rem;
line-height: 1.4;
}
.et-l .nec-pill-badge--light {
background: var(--nec-primary-light);
color: var(--nec-primary-hover);
}
/* --- Mini card cluster (commercial schedule, deep-clean steps) ---- */
.et-l .nec-mini-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-content: center;
}
/* The deep-clean variant is a single stacked column with a title. */
.et-l .nec-mini-grid--stack {
display: block;
}
.et-l .nec-mini-grid > .et_pb_module {
margin-bottom: 0;
}
.et-l .nec-mini-grid-title {
grid-column: 1 / -1;
}
.et-l .nec-mini-card {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.05);
padding: 30px 24px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
text-align: center;
height: 100%;
}
/* Source staggers alternating cards down 20px. */
.et-l .nec-mini-offset {
transform: translateY(20px);
}
.et-l .nec-mini-card-icon {
width: 50px;
height: 50px;
background: var(--nec-olive-10);
color: var(--nec-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
margin: 0 auto 16px;
}
.et-l .nec-mini-card-icon.nec-dark {
background: var(--nec-dark-green);
color: #fff;
}
/* --- Phase card (post-construction rough/final) ------------------ */
.et-l .nec-phase-card {
background: #fff;
border: 1px solid var(--nec-border);
border-radius: var(--nec-radius-lg);
padding: 32px;
box-shadow: var(--nec-shadow-sm);
}
.et-l .nec-phase-badge {
display: inline-block;
padding: 6px 14px;
background: var(--nec-olive-10);
color: var(--nec-primary);
border-radius: 30px;
font-weight: 800;
font-size: 0.8rem;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 16px;
}
/* --- Yes/no list (house-cleaning privacy rules) ------------------ */
.et-l .nec-yesno-list ul {
list-style: none;
padding: 0;
margin: 0 0 24px;
}
.et-l .nec-yesno-list li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
font-size: 1.1rem;
}
.et-l .nec-yesno-list li.nec-no i {
color: #ef4444;
}
.et-l .nec-yesno-list li.nec-yes i {
color: var(--nec-secondary);
}
/* --- Left-bordered callout (house-cleaning one-time note) --------- */
.et-l .nec-callout-left {
background: var(--nec-off-white);
padding: 16px 20px;
border-radius: var(--nec-radius-md);
border-left: 4px solid var(--nec-primary);
}
/* --- Checklist variants ------------------------------------------ */
/* Z-pattern rows use a flex column with a 12px gap, no bottom margin. */
.et-l .nec-checklist--tight ul {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 0;
}
/* --- Bleeding card image, large variant --------------------------- */
.et-l .nec-card-img--lg {
display: block;
margin: -40px -40px 25px;
width: calc(100% + 80px);
max-width: none;
}
.et-l .nec-card-img--lg img {
width: 100%;
height: 220px;
object-fit: cover;
max-width: none;
display: block;
}
/* --- Fixed-height cover images ----------------------------------- */
.et-l .nec-img-400 img {
height: 400px;
object-fit: cover;
}
.et-l .nec-img-420 img {
height: 420px;
object-fit: cover;
object-position: center top;
}
.et-l .nec-img-500 img {
height: 500px;
object-fit: cover;
}
/* Service rows use min-height rather than a hard height so tall copy
columns don't crop the photo. */
.et-l .nec-service-img--tall img {
min-height: 350px;
height: 100%;
object-fit: cover;
}
/* Partner cards on post-construction have no icon row */
.et-l .nec-service-card--noicon {
padding-top: 0;
}
.et-l .nec-service-card--noicon .nec-card-img {
margin-top: 0;
}
/* --- Extra button variants --------------------------------------- */
/* Our Work CTA: white pill with navy text. */
.et-l .nec-btn-white-navy.et_pb_button {
background: #fff;
color: var(--nec-dark-green);
border: 2px solid #fff;
}
.et-l .nec-btn-white-navy.et_pb_button:hover {
background: var(--nec-off-white);
border-color: var(--nec-off-white);
color: var(--nec-dark-green);
}
.et-l .nec-btn--32.et_pb_button {
padding: 14px 32px;
font-size: 1.1rem;
}
/* --- Prose helpers ---------------------------------------------- */
.et-l .nec-has-blockquote blockquote {
color: #0f172a;
padding: 30px;
border-radius: 24px;
margin-bottom: 20px;
border-left: 4px solid var(--nec-primary);
font-size: 1.25rem;
font-style: italic;
}
.et-l .nec-has-blockquote blockquote p {
margin: 0;
font-weight: 600 !important;
color: inherit;
font-size: inherit;
}
.et-l .nec-note-italic p {
font-style: italic;
margin: 0;
}
.et-l .nec-text-strong p {
font-weight: 600;
}
/* --- Stacked step items (frequency, deep-clean, timeline lists) --- */
.et-l .nec-step-item p {
margin: 0;
}
/* --- Expect card (about) ---------------------------------------- */
.et-l .nec-expect-card {
text-align: center;
height: 100%;
}
/* --- Area card (service areas) ---------------------------------- */
.et-l .nec-area-card {
background: #fff;
border: 1px solid var(--nec-border);
border-radius: var(--nec-radius-lg);
overflow: hidden;
box-shadow: var(--nec-shadow-sm);
transition: var(--nec-transition);
height: 100%;
padding: 40px;
}
.et-l .nec-area-card:hover {
transform: translateY(-5px);
box-shadow: var(--nec-shadow-lg);
border-color: rgba(2, 132, 199, 0.3);
}
/* --- Eyebrow header cluster ------------------------------------- */
.et-l .nec-eyebrow-header h4 {
text-transform: uppercase;
margin-bottom: 1rem;
}
.et-l .nec-eyebrow-header h2 {
margin-bottom: 16px;
}
.et-l .nec-eyebrow-header p {
margin-bottom: 0;
}
.et-l .nec-eyebrow-header p a {
color: var(--nec-primary);
font-weight: 600;
text-decoration: none;
}
/* --- Compact review card (testimonials page) --------------------- */
.et-l .nec-review-card--sm {
padding: 30px;
}
.et-l .nec-review-card--sm .nec-review-stars {
font-size: 0.9rem;
margin-bottom: 16px;
}
.et-l .nec-review-quote {
font-size: 1.05rem;
color: var(--nec-text-muted);
line-height: 1.7;
margin-bottom: 24px;
font-style: italic;
flex-grow: 1;
}
.et-l .nec-review-card--sm .nec-review-author {
gap: 12px;
}
.et-l .nec-avatar--solid {
width: 40px;
height: 40px;
background: var(--nec-primary);
color: #fff;
font-weight: 700;
font-size: 1rem;
}
.et-l .nec-review-card--sm .nec-review-author h5 {
font-weight: 700;
color: var(--nec-dark-green);
font-size: 1rem;
padding-bottom:0;
margin-bottom: 0;
}
.et-l .nec-review-card--sm .nec-review-author span {
font-size: 0.85rem;
}
/* --- Rating band (testimonials) --------------------------------- */
.et-l .nec-ratings-row {
justify-content: center;
}
.et-l .nec-rating-item {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.et-l .nec-rating-logo i {
font-size: 40px;
color: #1877f2;
}
.et-l .nec-rating-body {
display: flex;
flex-direction: column;
}
.et-l .nec-rating-stars {
display: flex;
color: var(--nec-star);
font-size: 1.2rem;
margin-bottom: 4px;
}
.et-l .nec-rating-label {
font-weight: 600;
color: var(--nec-text-dark);
}
/* --- Centred button row ----------------------------------------- */
.et-l .nec-center-btn .et_pb_button_module_wrapper {
text-align: center;
}
/* --- Guarantee block ------------------------------------------- */
.et-l .nec-guarantee-block p {
margin-bottom: 0;
}
/* --- Header/footer structural hooks ----------------------------- */
.et-l .nec-nav-container > .et_pb_column {
display: flex;
align-items: center;
}
.et-l .nec-logo-col {
justify-content: flex-start;
}
.et-l .nec-menu-col {
justify-content: flex-end;
}
.et-l .nec-menu-col .et_pb_menu {
width: 100%;
}
.et-l .nec-menu-col .et_pb_menu__wrap {
justify-content: flex-end;
}
.et-l .nec-topbar-right-col .et_pb_text_inner {
display: flex;
justify-content: flex-end;
}
.et-l .nec-mobile-call-section,
.et-l .nec-mobile-call-row {
padding: 0 !important;
}
.et-l .nec-mobile-call-row {
max-width: none;
width: 100%;
}
.et-l .nec-mobile-call-row .et_pb_column {
padding: 0;
}
/* Hide the whole bar above the mobile breakpoint (source: display:none) */
@media (min-width: 769px) {
.et-l .nec-mobile-call-section {
display: none;
}
}
.et-l .nec-faq-split {
align-items: flex-start;
}
/* Source .founder-section uses align-items:center; Divi's make_equal
stretches columns instead, so re-centre explicitly. */
.et-l .nec-founder,
.et-l .nec-story {
align-items: center;
}
/* Stacked phase cards (post-construction) */
.et-l .nec-phase-cards {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}
.et-l .nec-phase-cards > .et_pb_module {
margin-bottom: 0;
}
/* NOTE: the remaining `nec-*-section`, `nec-*-hero` and `nec-*-faq` class
names carry no styles by design. They exist as stable per-section hooks
so a future tweak can be scoped to exactly one section on one page
without touching the shared component rules above. */
/* Social row variant, centred (contact page) */
.et-l .nec-social-inline--center {
justify-content: center;
gap: 20px
}
/* CTA sitting on a grey band rather than white */
.et-l .nec-cta-on-gray {
background: var(--nec-dark-green);
}
/* =====================================================================
12. SCROLL ANIMATIONS
Divi's own animation system fires on load; the source uses an
IntersectionObserver that adds .is-visible at 15% visibility. The
observer in assets/js/neclean.js reproduces that timing exactly.
===================================================================== */
.nec-animate {
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.nec-animate.nec-visible {
opacity: 1;
transform: translateY(0);
}
.nec-animate-delay-1 {
transition-delay: 0.2s;
}
.nec-animate-delay-2 {
transition-delay: 0.4s;
}
.nec-equipment-card {
max-width: 800px;
margin: 0 auto;
background: var(--nec-white, #ffffff);
padding: 50px;
border-radius: var(--nec-radius-lg, 16px);
border-left: 6px solid var(--nec-primary);
box-shadow: var(--nec-shadow-md, 0 10px 30px rgba(0, 0, 0, 0.05));
}
.nec-equipment-title {
font-size: 2rem;
color: var(--nec-dark-green);
margin-bottom: 16px;
text-align: left;
}
.nec-equipment-description {
font-size: 1.15rem;
color: var(--nec-text-muted);
line-height: 1.6;
text-align: left;
margin: 0;
}
.nec-testimonials-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
align-items: center;
}
.nec-testimonials-item {
display: flex;
align-items: center;
gap: 16px;
}
.nec-testimonials-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
}
.nec-testimonials-icon-fb {
color: #1877F2;
font-size: 40px;
flex-shrink: 0;
}
.nec-testimonials-stars {
display: flex;
color: #fbbf24;
font-size: 1.2rem;
margin-bottom: 4px;
}
.nec-testimonials-review-text {
font-weight: 600;
color: var(--nec-text-main, #333333);
}
@media (prefers-reduced-motion: reduce) {
.nec-animate {
opacity: 1;
transform: none;
transition: none;
}
}
/* Builder + Theme Builder previews must never hide content */
.et-fb .nec-animate,
.et-db.et-fb .nec-animate {
opacity: 1 !important;
transform: none !important;
}
/* =====================================================================
13. RESPONSIVE
Breakpoints match the source stylesheet exactly. Everything here is
scoped to a `nec-` component, so a tablet/mobile change to one
component cannot leak into another section or page.
===================================================================== */
/* --- 1200px --------------------------------------------------- */
@media (max-width: 1200px) {
.nec-hero h1 {
font-size: 3.5rem;
}
}
/* --- 992px ---------------------------------------------------- */
@media (max-width: 992px) {
.nec-checklist ul {
grid-template-columns: 1fr;
}
.nec-why-image img {
min-height: 300px;
}
.nec-faq-image {
position: relative;
top: 0;
}
.nec-hero-trust {
gap: 24px;
flex-wrap: wrap;
}
.nec-pricing-card.nec-featured {
transform: none;
}
}
/* --- 980px : Divi's tablet breakpoint ------------------------- */
@media (max-width: 980px) {
/* Divi stacks columns at 980px. Neutralise the fixed px gutters
from section 3 so stacked columns don't inherit a right margin. */
.et-l [class*="nec-gap-"] > .et_pb_column {
margin-right: 0;
}
.et-l .nec-row {
padding-left: var(--nec-gutter);
padding-right: var(--nec-gutter);
}
}
/* --- 768px ---------------------------------------------------- */
@media (max-width: 768px) {
/* Global rhythm: source drops 120px sections to 60px and the
container gutter to 16px. Section padding itself is set per
section in Divi (phone value 60px) — this only handles gutters. */
:root {
--nec-gutter: 16px;
}
/* Header */
.nec-mobile-call {
display: block;
}
.nec-logo {
font-size: 1.5rem;
}
.nec-topbar .nec-topbar-inner {
flex-direction: column;
gap: 12px;
text-align: center;
}
.nec-topbar-left {
flex-direction: column;
gap: 8px;
width: 100%;
justify-content: center;
}
.nec-topbar-right {
width: 100%;
justify-content: center;
flex-direction: column;
gap: 12px;
}
.nec-topbar-divider {
display: none;
}
.nec-topbar-nav {
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.nec-topbar-nav a {
font-size: 0.85rem;
}
/* Typography scaling — source uses !important here to beat inline
styles; kept, but every selector is nec-scoped so the blast
radius is one component. */
.nec-hero h1 {
font-size: 2.25rem !important;
margin-bottom: 16px;
}
.nec-hero-inner h1 {
font-size: 2.5rem !important;
}
.et-l .nec-section-header h2 {
font-size: 2.2rem !important;
}
.et-l .nec-section-header {
margin-bottom: 30px !important;
}
.nec-hero p,
.et-l .nec-section-header p,
.nec-cta-centered .nec-cta-desc {
font-size: 1.1rem !important;
}
.nec-cta-centered .nec-cta-title {
font-size: 2.25rem !important;
}
.nec-cta-dark h2,
.nec-cta-dark .nec-cta-title {
font-size: 2.5rem;
letter-spacing: -1px;
}
.nec-cta-dark .nec-cta-desc {
font-size: 1rem;
}
.nec-service-info h2 {
font-size: 2rem;
}
.nec-founder-text h2 {
font-size: 2rem;
}
/* Buttons go full width in stacked action rows (source: .hero-actions
and .centered-cta-actions switch to flex-direction: column). */
.et-l .nec-hero > .et_pb_row .et_pb_button_module_wrapper,
.et-l .nec-cta-dark .et_pb_button_module_wrapper,
.et-l .nec-cta-centered .et_pb_button_module_wrapper {
display: block;
margin: 0 0 16px;
}
.et-l .nec-hero > .et_pb_row .et_pb_button_module_wrapper:last-child,
.et-l .nec-cta-dark .et_pb_button_module_wrapper:last-child,
.et-l .nec-cta-centered .et_pb_button_module_wrapper:last-child {
margin-bottom: 0;
}
.et-l .nec-hero .nec-btn.et_pb_button,
.et-l .nec-cta-dark .nec-btn.et_pb_button,
.et-l .nec-cta-centered .nec-btn.et_pb_button {
display: flex;
width: 100%;
justify-content: center;
padding: 14px 24px;
font-size: 1.05rem;
}
/* Hero trust row stacks */
.nec-hero-trust {
flex-direction: column;
gap: 20px;
align-items: flex-start;
padding-top: 30px;
margin-top: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.nec-hero-trust .nec-trust-item {
width: 100%;
}
/* Cards */
.nec-why-item {
flex-direction: column;
}
.nec-ba-card img,
.nec-ba-card .nec-ba-half img {
height: 250px;
}
.nec-service-card {
padding: 30px 24px;
}
.nec-service-card .nec-card-img {
margin: -30px -24px 25px;
width: calc(100% + 48px);
}
/* FAQ */
.nec-faq .et_pb_toggle_title {
padding: 20px 70px 20px 20px;
font-size: 1.05rem;
}
.nec-faq .et_pb_toggle_title:before {
right: 20px;
}
.nec-faq .et_pb_toggle_content {
padding: 0 20px 20px;
}
.nec-faq-image {
min-height: 300px;
margin-bottom: 30px;
}
/* Footer */
.nec-footer-light .nec-footer-bottom {
flex-direction: column;
gap: 8px;
text-align: center;
}
/* Lightbox */
.nec-lb-stage {
height: 60vh;
}
.nec-lightbox-close {
right: 20px;
}
}
/* --- 600px ---------------------------------------------------- */
@media (max-width: 600px) {
.nec-faq-badge-inner {
padding: 12px 14px;
gap: 12px;
}
.nec-faq-badge-icon {
width: 40px;
height: 40px;
font-size: 1.4rem;
}
}
/* Fix for menu dropdown chevron breaking vertical alignment */
.nec-nav .et_pb_menu__menu > nav > ul > li > a {
display: flex !important;
align-items: center !important;
height: 100%;
}
/* Fix for FAQ accordion glitch (missing absolute positioning on icon) */
.nec-faq .et_pb_toggle_title:before {
position: absolute !important;
}
.nec-faq .et_pb_toggle_title:after {
display: none !important; /* Hide native Divi chevron if it exists */
}
/* Fix for Button Icon alignment */
/* Hero sizing. The previous rule forced min-height:650px with 160/100 padding
and top alignment, which rendered the home hero at 871px. The source is a
fixed, vertically centred 575px band:
.hero-section { height: 575px; display: flex; align-items: center; }
Scoped to the home hero so the inner-page heroes (.nec-hero-inner), which
carry their own padding, are not affected. */
.et-l .nec-hero:not(.nec-hero-inner) {
min-height: 850px;
display: flex;
align-items: center;
}
/* Button padding is already set correctly and in full by the base rules near
the top of this file (.nec-btn 16/32, .nec-btn-large 18/40, .nec-btn-hero
20/40), each scoped under .et-l so they outrank Divi's own .et_pb_button
without needing !important. The blanket !important overrides that used to
sit here pinned every button to 16px top/bottom, which silently defeated
.nec-btn-hero's 20px — the hero button measured 18px against a design of
20px. Removed so the cascade resolves normally. */
/* Global Container Width Fix to perfectly match HTML .container */
/* 1280px matches the source .container and is the right DEFAULT, but as
!important it also pinned every narrower row — the design uses 900px for the
hero content, 700px for section headers, 576/586/600px for split columns.
Those are stored per row in the Divi layout data; dropping !important from
max-width lets them apply, while `.et-l .nec-row` still outranks Divi's own
1080px default. */
.et-l .nec-row {
width: 100% !important;
max-width: 1280px !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 768px) {
.et-l .nec-row {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* Fix for Broken Column Grid Math (Resolves the massive image size and stacking issue) */
@media (min-width: 981px) {
.et-l .nec-row[class*="nec-gap-"],
.et-l .nec-founder {
display: flex !important;
flex-wrap: nowrap !important;
/* Columns were top-aligned, so a text column shorter than its paired image
stranded a large dead zone beneath it (visible on house-cleaning's
"Bathrooms" list). Centring balances the pair regardless of which side
runs longer. */
align-items: center !important;
}
.et-l .nec-gap-24 {
gap: 24px !important;
}
.et-l .nec-gap-30 {
gap: 30px !important;
}
.et-l .nec-gap-40 {
gap: 40px !important;
}
.et-l .nec-gap-50 {
gap: 50px !important;
}
.et-l .nec-gap-60 {
gap: 60px !important;
}
.et-l .nec-gap-80,
.et-l .nec-founder {
gap: 80px !important;
}
/* Divi writes an explicit pixel width onto each column (536px for a 1/2
column in a 1280px row), so the flex container never divides the space
and 80px of every gapped row went unused — which is why the founder
portrait rendered 426px wide instead of the design's 576px.
Clearing the width and letting flex-grow carry the ratio reproduces the
source's `grid-template-columns: 1fr 1fr`. Grow values mirror Divi's
own fraction classes so unequal rows keep their proportions. */
.et-l [class*="nec-gap-"] > .et_pb_column,
.et-l .nec-founder > .et_pb_column {
margin-right: 0 !important;
margin-bottom: 0 !important;
width: auto !important;
flex-basis: 0 !important;
/* MUST default to 1. An earlier version only set flex-grow on an
enumerated list of fraction classes, so any column type outside that
list (et_pb_column_3_5 on the FAQ rows, for one) kept flex-grow:0
with flex-basis:0 and collapsed to ~160px, breaking the FAQ layout on
every page that used it. Defaulting to 1 means an unlisted fraction
degrades to an equal column instead of vanishing. */
flex-grow: 1 !important;
}
/* Proportional growth mirroring Divi's own fraction classes, so unequal
rows keep their ratios. Every Divi fraction is covered; anything new
still falls back to the flex-grow:1 default above. */
.et-l [class*="nec-gap-"] > .et_pb_column_2_3,
.et-l [class*="nec-gap-"] > .et_pb_column_2_5 {
flex-grow: 2 !important;
}
.et-l [class*="nec-gap-"] > .et_pb_column_3_4,
.et-l [class*="nec-gap-"] > .et_pb_column_3_5 {
flex-grow: 3 !important;
}
.et-l [class*="nec-gap-"] > .et_pb_column_4_5 {
flex-grow: 4 !important;
}
.et-l [class*="nec-gap-"] > .et_pb_column_5_6 {
flex-grow: 5 !important;
}
/* Divi puts a clearfix ::before/::after on every row. Once the row becomes
a flex container those pseudo-elements are themselves flex items, so a
2-column row lays out as 3 items and burns an extra `gap` — 160px of a
1232px row instead of 80px, leaving each column 536px where the design
calls for 576px. Removing them restores the source's two-column math. */
.et-l [class*="nec-gap-"]::before,
.et-l [class*="nec-gap-"]::after,
.et-l .nec-founder::before,
.et-l .nec-founder::after {
display: none !important;
}
}
/* Button icons.
The design puts Font Awesome icons inside buttons —
Meet Amy
and the Divi layout data already encodes this correctly as
button_icon="||fa||900" (f061 = fa-arrow-right, solid)
so the icon itself is configured right.
What broke: Divi renders that codepoint through its own bundled
`fa-regular-400` face. f061 is a SOLID glyph and does not exist in the
regular weight, so it fell back to a notdef box — the stray characters
visible on hover, since Divi reveals the icon on hover.
The child theme enqueues Font Awesome 6 Free from CDN (functions.php:96),
whose solid face is weight 900. Pointing the pseudo-element at that face
renders the intended arrow. Both weights are listed so a solid glyph
resolves even if the brands/regular face is matched first. */
/* Button icons.
The design puts Font Awesome icons in some buttons and none in others:
Meet Amy
Start With a Free Walkthrough (no icon)
The Divi layout data already encodes the first case correctly as
button_icon="||fa||900", which renders into data-icon. Buttons with
no icon configured still get Divi's DEFAULT arrow, whose content is the
ETmodules glyph "5" — and Divi reveals it on hover.
A previous pass forced Font Awesome onto every button pseudo-element. For
the configured buttons that is right; for the rest it rendered the literal
character "5" on hover, which is the stray text seen on /our-process/.
So: apply the Font Awesome face only where a real FA codepoint exists
(data-icon), and suppress Divi's default glyph everywhere else to match the
design. Divi's own rule is emitted as
body #page-container .et_pb_section .et_pb_button_N:after
which carries an ID — no class-only selector can outrank it, which is why
earlier attempts here silently lost. These match that prefix. */
body #page-container .et_pb_section .et_pb_button.nec-btn[data-icon]:after,
body #page-container .et_pb_section .et_pb_button.nec-btn[data-icon]:before {
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
-webkit-font-smoothing: antialiased;
color: inherit;
}
/* Divi lays the icon out with position:absolute plus a negative margin
(margin-left:-1.3em) to tuck it against the label. The child theme makes the
pseudo-element `position: static` so it participates in the button's flex
row like the source's inline does — but Divi's negative margin survived
and dragged the glyph back over the text, which read as the icon sitting on
top of the button. Divi emits it under
body #page-container .et_pb_section .et_pb_button_N:before
so the reset needs that same ID-level prefix to win.
With the margins cleared, the button's own `gap: 10px` — matching the
source's .btn { gap: 10px } — provides the spacing. */
body #page-container .et_pb_section .et_pb_button.nec-btn:after,
body #page-container .et_pb_section .et_pb_button.nec-btn:before,
body #page-container .et_pb_section .et_pb_button.nec-btn:hover:after,
body #page-container .et_pb_section .et_pb_button.nec-btn:hover:before {
position: relative !important;
margin: 0 !important;
left: auto !important;
right: auto !important;
top: 10px;
/* The source's icon is an whose box is the glyph's own height (18px
for a 17.6px icon). Inheriting the button's 1.7 line-height gave the
pseudo-element a 29.92px box — ~12px taller than the glyph — so it sat
off-centre against the label. line-height:1 makes the box match the
glyph, matching the design's centred alignment exactly. */
line-height: 1 !important;
vertical-align: middle;
align-self: center;
/* NOTE: deliberately no `display` here. Divi renders BOTH :before and
:after on every button and hides the unused side with display:none
according to button_icon_placement. Forcing display:inline-block
overrode that and made the icon appear on both ends of the button. */
}
/* No icon configured => the design has no icon. Remove Divi's ETmodules
fallback rather than restyling it. */
body
#page-container
.et_pb_section
.et_pb_button.nec-btn:not([data-icon]):after,
body
#page-container
.et_pb_section
.et_pb_button.nec-btn:not([data-icon]):before,
body
#page-container
.et_pb_section
.et_pb_button.nec-btn:not([data-icon]):hover:after,
body
#page-container
.et_pb_section
.et_pb_button.nec-btn:not([data-icon]):hover:before {
content: none !important;
display: none !important;
opacity: 0 !important;
}
/* Button padding is already set correctly and in full by the base rules near
the top of this file (.nec-btn 16/32, .nec-btn-large 18/40, .nec-btn-hero
20/40), each scoped under .et-l so they outrank Divi's own .et_pb_button
without needing !important. The blanket !important overrides that used to
sit here pinned every button to 16px top/bottom, which silently defeated
.nec-btn-hero's 20px — the hero button measured 18px against a design of
20px. Removed so the cascade resolves normally. */
/* Global Container Width Fix to perfectly match HTML .container */
/* 1280px matches the source .container and is the right DEFAULT, but as
!important it also pinned every narrower row — the design uses 900px for the
hero content, 700px for section headers, 576/586/600px for split columns.
Those are stored per row in the Divi layout data; dropping !important from
max-width lets them apply, while `.et-l .nec-row` still outranks Divi's own
1080px default. */
.et-l .nec-row {
width: 100% !important;
max-width: 1280px !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 768px) {
.et-l .nec-row {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* Fix for Broken Column Grid Math (Resolves the massive image size and stacking issue) */
@media (min-width: 981px) {
.et-l .nec-row[class*="nec-gap-"],
.et-l .nec-founder {
display: flex !important;
flex-wrap: nowrap !important;
/* Columns were top-aligned, so a text column shorter than its paired image
stranded a large dead zone beneath it (visible on house-cleaning's
"Bathrooms" list). Centring balances the pair regardless of which side
runs longer. */
align-items: center !important;
}
.et-l .nec-gap-24 {
gap: 24px !important;
}
.et-l .nec-gap-30 {
gap: 30px !important;
}
.et-l .nec-gap-40 {
gap: 40px !important;
}
.et-l .nec-gap-50 {
gap: 50px !important;
}
.et-l .nec-gap-60 {
gap: 60px !important;
}
.et-l .nec-gap-80,
.et-l .nec-founder {
gap: 80px !important;
}
/* Divi writes an explicit pixel width onto each column (536px for a 1/2
column in a 1280px row), so the flex container never divides the space
and 80px of every gapped row went unused — which is why the founder
portrait rendered 426px wide instead of the design's 576px.
Clearing the width and letting flex-grow carry the ratio reproduces the
source's `grid-template-columns: 1fr 1fr`. Grow values mirror Divi's
own fraction classes so unequal rows keep their proportions. */
.et-l [class*="nec-gap-"] > .et_pb_column,
.et-l .nec-founder > .et_pb_column {
margin-right: 0 !important;
margin-bottom: 0 !important;
width: auto !important;
flex-basis: 0 !important;
/* MUST default to 1. An earlier version only set flex-grow on an
enumerated list of fraction classes, so any column type outside that
list (et_pb_column_3_5 on the FAQ rows, for one) kept flex-grow:0
with flex-basis:0 and collapsed to ~160px, breaking the FAQ layout on
every page that used it. Defaulting to 1 means an unlisted fraction
degrades to an equal column instead of vanishing. */
flex-grow: 1 !important;
}
/* Proportional growth mirroring Divi's own fraction classes, so unequal
rows keep their ratios. Every Divi fraction is covered; anything new
still falls back to the flex-grow:1 default above. */
.et-l [class*="nec-gap-"] > .et_pb_column_2_3,
.et-l [class*="nec-gap-"] > .et_pb_column_2_5 {
flex-grow: 2 !important;
}
.et-l [class*="nec-gap-"] > .et_pb_column_3_4,
.et-l [class*="nec-gap-"] > .et_pb_column_3_5 {
flex-grow: 3 !important;
}
.et-l [class*="nec-gap-"] > .et_pb_column_4_5 {
flex-grow: 4 !important;
}
.et-l [class*="nec-gap-"] > .et_pb_column_5_6 {
flex-grow: 5 !important;
}
/* Divi puts a clearfix ::before/::after on every row. Once the row becomes
a flex container those pseudo-elements are themselves flex items, so a
2-column row lays out as 3 items and burns an extra `gap` — 160px of a
1232px row instead of 80px, leaving each column 536px where the design
calls for 576px. Removing them restores the source's two-column math. */
.et-l [class*="nec-gap-"]::before,
.et-l [class*="nec-gap-"]::after,
.et-l .nec-founder::before,
.et-l .nec-founder::after {
display: none !important;
}
}
/* Button icons.
The design puts Font Awesome icons inside buttons —
Meet Amy
and the Divi layout data already encodes this correctly as
button_icon="||fa||900" (f061 = fa-arrow-right, solid)
so the icon itself is configured right.
What broke: Divi renders that codepoint through its own bundled
`fa-regular-400` face. f061 is a SOLID glyph and does not exist in the
regular weight, so it fell back to a notdef box — the stray characters
visible on hover, since Divi reveals the icon on hover.
The child theme enqueues Font Awesome 6 Free from CDN (functions.php:96),
whose solid face is weight 900. Pointing the pseudo-element at that face
renders the intended arrow. Both weights are listed so a solid glyph
resolves even if the brands/regular face is matched first. */
/* Divi emits its per-button icon rule as
body #page-container .et_pb_section .et_pb_button_N:after
which carries an ID selector — specificity (1,2,1). No class-based rule can
beat that, with or without !important, which is why earlier attempts here
only won on the buttons Divi had not emitted a rule for. Matching Divi's own
prefix and adding the module classes takes it to (1,4,1). */
body #page-container .et_pb_section .et_pb_button.nec-btn:after,
body #page-container .et_pb_section .et_pb_button.nec-btn:before,
.et-l .et_pb_button.nec-btn[data-icon]:after,
.et-l .et_pb_button.nec-btn[data-icon]:before {
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
-webkit-font-smoothing: antialiased;
}
/* Button padding is already set correctly and in full by the base rules near
the top of this file (.nec-btn 16/32, .nec-btn-large 18/40, .nec-btn-hero
20/40), each scoped under .et-l so they outrank Divi's own .et_pb_button
without needing !important. The blanket !important overrides that used to
sit here pinned every button to 16px top/bottom, which silently defeated
.nec-btn-hero's 20px — the hero button measured 18px against a design of
20px. Removed so the cascade resolves normally. */
/* Global Container Width Fix to perfectly match HTML .container */
/* 1280px matches the source .container and is the right DEFAULT, but as
!important it also pinned every narrower row — the design uses 900px for the
hero content, 700px for section headers, 576/586/600px for split columns.
Those are stored per row in the Divi layout data; dropping !important from
max-width lets them apply, while `.et-l .nec-row` still outranks Divi's own
1080px default. */
.et-l .nec-row {
width: 100% !important;
max-width: 1280px !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 768px) {
.et-l .nec-row {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* Fix for Broken Column Grid Math (Resolves the massive image size and stacking issue) */
@media (min-width: 981px) {
.et-l .nec-row[class*="nec-gap-"],
.et-l .nec-founder {
display: flex !important;
flex-wrap: nowrap !important;
/* Columns were top-aligned, so a text column shorter than its paired image
stranded a large dead zone beneath it (visible on house-cleaning's
"Bathrooms" list). Centring balances the pair regardless of which side
runs longer. */
align-items: center !important;
}
.et-l .nec-gap-24 {
gap: 24px !important;
}
.et-l .nec-gap-30 {
gap: 30px !important;
}
.et-l .nec-gap-40 {
gap: 40px !important;
}
.et-l .nec-gap-50 {
gap: 50px !important;
}
.et-l .nec-gap-60 {
gap: 60px !important;
}
.et-l .nec-gap-80,
.et-l .nec-founder {
gap: 80px !important;
}
/* Divi writes an explicit pixel width onto each column (536px for a 1/2
column in a 1280px row), so the flex container never divides the space
and 80px of every gapped row went unused — which is why the founder
portrait rendered 426px wide instead of the design's 576px.
Clearing the width and letting flex-grow carry the ratio reproduces the
source's `grid-template-columns: 1fr 1fr`. Grow values mirror Divi's
own fraction classes so unequal rows keep their proportions. */
.et-l [class*="nec-gap-"] > .et_pb_column,
.et-l .nec-founder > .et_pb_column {
margin-right: 0 !important;
margin-bottom: 0 !important;
width: auto !important;
flex-basis: 0 !important;
/* MUST default to 1. An earlier version only set flex-grow on an
enumerated list of fraction classes, so any column type outside that
list (et_pb_column_3_5 on the FAQ rows, for one) kept flex-grow:0
with flex-basis:0 and collapsed to ~160px, breaking the FAQ layout on
every page that used it. Defaulting to 1 means an unlisted fraction
degrades to an equal column instead of vanishing. */
flex-grow: 1 !important;
}
/* Proportional growth mirroring Divi's own fraction classes, so unequal
rows keep their ratios. Every Divi fraction is covered; anything new
still falls back to the flex-grow:1 default above. */
.et-l [class*="nec-gap-"] > .et_pb_column_2_3,
.et-l [class*="nec-gap-"] > .et_pb_column_2_5 {
flex-grow: 2 !important;
}
.et-l [class*="nec-gap-"] > .et_pb_column_3_4,
.et-l [class*="nec-gap-"] > .et_pb_column_3_5 {
flex-grow: 3 !important;
}
.et-l [class*="nec-gap-"] > .et_pb_column_4_5 {
flex-grow: 4 !important;
}
.et-l [class*="nec-gap-"] > .et_pb_column_5_6 {
flex-grow: 5 !important;
}
/* Divi puts a clearfix ::before/::after on every row. Once the row becomes
a flex container those pseudo-elements are themselves flex items, so a
2-column row lays out as 3 items and burns an extra `gap` — 160px of a
1232px row instead of 80px, leaving each column 536px where the design
calls for 576px. Removing them restores the source's two-column math. */
.et-l [class*="nec-gap-"]::before,
.et-l [class*="nec-gap-"]::after,
.et-l .nec-founder::before,
.et-l .nec-founder::after {
display: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
FIDELITY AUDIT CSS FIXES — Waves 1-4
These fix properties with no Divi module-level setting.
═══════════════════════════════════════════════════════════════════════════ */
/* P-14 CORRECTED. A previous pass forced `display:flex` on every .nec-btn,
which made each button stretch to its container width (measured 536px where
the design has 180px). The source is the opposite way round:
.btn { display: inline-flex; } style.css:148
.btn-primary.btn-large { display: flex; } style.css:1102
Only the large primary pair goes full-width. The base rule at line ~277
already sets inline-flex correctly, so the only rule needed here is the
large-primary exception. */
.et-l .nec-btn-primary.nec-btn-large.et_pb_button {
display: flex;
}
/* P-07: Body copy font-weight. Source uses 400 (normal); Divi's body_font
attribute doesn't carry weight explicitly, and the Inter font renders at
500 by default in some contexts. Force normal weight globally. (62 instances)
Origin: Divi's default body weight combined with Inter's optical sizing. */
.et-l p,
.et-l .et_pb_text_inner,
.et-l .et_pb_toggle_content {
font-weight: 400; /* Source: body { font-weight: 400 } — no !important needed,
Divi doesn't set inline font-weight on text modules */
}
/* P-12 review note: a previous pass overrode .nec-faq-image to --nec-radius-lg
(24px), citing a source rule `.faq-image { border-radius: var(--radius-lg) }`.
No such rule exists. The source defines only:
.faq-image-side { border-radius: var(--radius-xl); } /* style.css:4168 */
which the child theme already mirrors correctly at .nec-faq-image (line ~1684).
The override was a regression and has been removed. */
/* P-19 (CSS assist): Ensure .nec-bg-gray sections get the correct
alternating background even when Divi doesn't carry background_color */
.et-l .nec-bg-gray {
background: linear-gradient(
180deg,
#ffffff,
#f8fbff
); /* Source: .bg-gray exact value */
}
/* =====================================================================
BODY TEXT RENDERING — matches the source's default rasterisation
---------------------------------------------------------------------
Divi's own body rule is:
body { font-weight: 500;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
Two separate defects came from that single rule:
1. font-weight:500 — the source declares no weight on body, so it
inherits the normal 400. This is the site-wide "body copy too heavy"
deviation (62 instances across 18 pages).
2. -webkit-font-smoothing:antialiased — the source leaves this at `auto`,
i.e. subpixel antialiasing. Forcing grayscale antialiasing renders text
visibly thinner and lower-contrast on macOS, which is why paragraph and
footer copy looked washed out next to the design.
Reset both to the source's values. Headings keep their own weights, which
are set explicitly elsewhere, so only the inherited default changes.
===================================================================== */
body,
body.et-db #et-boc .et-l,
body #page-container,
body #page-container p,
body #page-container li {
font-weight: 400;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
/* Divi's icon fonts genuinely need grayscale smoothing to look right —
exempt them from the reset above. */
body #page-container [class*="et-pb-icon"],
body #page-container .et_pb_button:after,
body #page-container .et_pb_button:before,
body #page-container [class*="fa-"] {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* =====================================================================
FAQ TOGGLE — restore the title padding and the +/- pill
---------------------------------------------------------------------
Two Divi rules were winning on specificity:
1. `.et_pb_accordion.et_pb_text_align_left-tablet .et_pb_toggle_title`
(0,3,0) sets `padding: 0 50px 0 0`, which beat the child theme's
`.nec-faq .et_pb_toggle_title` (0,2,0). The question text lost its
30px left padding and ran into the edge of the card, which is why the
first character looked clipped.
2. The circular +/- pill on :before computed to `display: none`, so open
items showed no indicator at all.
Both are restored here at a specificity Divi cannot outrank.
===================================================================== */
.et-l .nec-faq.et_pb_accordion .et_pb_toggle_title,
.et-l .nec-faq .et_pb_toggle .et_pb_toggle_title {
padding: 24px 84px 24px 30px !important;
}
.et-l .nec-faq.et_pb_accordion .et_pb_toggle_title:before,
.et-l .nec-faq .et_pb_toggle .et_pb_toggle_title:before {
display: flex !important;
position: absolute !important;
right: 30px !important;
left: auto !important;
top: 50% !important;
width: 36px !important;
height: 36px !important;
}
/* Divi's own chevron on :after stays suppressed — the pill above replaces it. */
.et-l .nec-faq.et_pb_accordion .et_pb_toggle_title:after,
.et-l .nec-faq .et_pb_toggle .et_pb_toggle_title:after {
display: none !important;
}
/* =====================================================================
TESTIMONIAL SECTION — badge label + quote presentation
---------------------------------------------------------------------
Adds the requested label: light blue background with blue text, using
the palette tokens already ported from the source design
(--nec-secondary-light #eff6ff / --nec-secondary #0284c7), so it sits
with the rest of the system rather than introducing new colours.
The section itself follows the source's .testimonial-block:
text-align:center; max-width:800px; margin:0 auto;
h3 { font-size:1.8rem; font-style:italic; font-weight:500;
line-height:1.5; }
.author { font-weight:700; color:var(--primary);
text-transform:uppercase; letter-spacing:1px; }
===================================================================== */
/* Pill label — light blue field, blue text */
.et-l .nec-label-blue {
display: inline-block;
background: var(--nec-secondary-light);
color: var(--nec-secondary);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 8px 16px;
border-radius: 8px;
margin: 0 0 20px;
line-height: 1.4;
}
/* Centre the label within the section header */
.et-l .nec-testimonial-section .nec-section-header {
text-align: center;
}
/* Quote block — mirrors the source .testimonial-block */
.et-l .nec-testimonial-section .nec-quote-block {
position: relative;
text-align: center;
max-width: 760px;
margin: 0 auto;
padding: 56px 48px 40px;
background: var(--nec-off-white);
border: 1px solid var(--nec-border);
border-radius: var(--nec-radius-lg);
box-shadow: var(--nec-shadow-sm);
}
.et-l .nec-testimonial-section .nec-quote-block h3 {
/* was 1.8rem italic uppercase — shouted, and dominated the section.
Set at a comfortable reading size on a contained measure instead. */
font-size: 1.35rem;
color: var(--nec-text-dark);
font-style: normal;
font-weight: 500;
line-height: 1.75;
letter-spacing: -0.01em;
text-transform: none !important;
margin: 0 auto 28px;
max-width: 60ch;
}
.et-l .nec-testimonial-section .nec-author {
position: relative;
font-weight: 600;
font-size: 0.95rem;
color: var(--nec-text-muted);
text-transform: none;
letter-spacing: 0.02em;
margin: 0 0 4px;
padding-top: 20px;
}
.et-l .nec-testimonial-section .nec-stars {
color: var(--nec-star);
font-size: 1.05rem;
margin-bottom: 18px;
letter-spacing: 4px;
}
/* =====================================================================
HEADER LOGO
---------------------------------------------------------------------
Replaces the placeholder leaf-icon + "NE Clean" blurb with the brand
lockup. The supplied artwork already contains the company name, so it
stands alone rather than sitting beside a text logo.
Sized by height so the header bar keeps the proportions of the design
(whose logo block was 40px tall plus type); the lockup is squarer, so a
little more height keeps the wordmark inside it legible. Width follows
the 1.192 aspect ratio automatically.
===================================================================== */
.et-l .nec-logo-img {
margin: 0 !important;
line-height: 0;
}
.et-l .nec-logo-img .et_pb_image_wrap,
.et-l .nec-logo-img a {
display: inline-block;
width: auto !important;
line-height: 0;
}
.et-l .nec-logo-img img {
/* 58px left the wordmark inside the badge illegible and the logo adrift
in a 106px header. 84px fills the bar properly and makes
"NEW ENGLAND CUSTOMIZED CLEANING" readable at 1x. */
height: 60px !important;
width: auto !important;
max-width: none !important;
display: block;
}
/* Sticky header shrinks slightly, as the design's header does on scroll. */
.et-l .nec-header-sticky.et-fixed-header .nec-logo-img img {
height: 64px !important;
}
@media (max-width: 980px) {
.et-l .nec-logo-img img {
height: 64px !important;
}
}
@media (max-width: 600px) {
.et-l .nec-logo-img img {
height: 52px !important;
}
}
/* The brand lockup is squarer and taller than the placeholder it replaced, so
it drove the header from 106px to 132px. Trimming the section's vertical
padding from 24px to 12px returns the bar to ~108px — level with the design —
without shrinking the logo back to an illegible size. */
.et-l .nec-header-sticky {
}
/* =====================================================================
STICKY HEADER
---------------------------------------------------------------------
The child theme already declared `position: sticky; top: 0` on
.nec-header-sticky, but it never took effect for two reasons:
1. Divi's own rule won on specificity, so the header computed to
`position: relative` and scrolled away with the page.
2. The source's `body { overflow-x: hidden }` — ported faithfully to
guard the off-canvas mobile nav — turns body into a scroll container,
which disables position:sticky for everything inside it.
`overflow-x: clip` gives the same horizontal clipping without creating a
scroll container, so the guard is kept and sticky works.
===================================================================== */
body,
body.et-db {
overflow-x: clip;
}
/* position:sticky cannot be used here: the header's containing block,
.et_builder_inner_content, is only as tall as the header group (151px), and a
sticky element can never travel beyond its own parent. It would unstick
almost immediately. Instead the header is promoted to position:fixed only
once it would have scrolled off, which the IntersectionObserver in
neclean.js signals with .nec-is-stuck. A spacer of matching height is
inserted at the same moment so the page does not jump. */
body #page-container .et_pb_section.nec-header-sticky.nec-is-stuck,
.et-l .nec-header-sticky.nec-is-stuck {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000 !important;
background-color: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(12px);
}
/* The bar gains a shadow once it detaches from the top of the page. */
.et-l .nec-header-sticky {
transition:
box-shadow 0.3s ease,
padding 0.3s ease;
}
.et-l .nec-header-sticky.nec-is-stuck {
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
padding-top: 12px !important;
padding-bottom: 12px !important;
}
@media (prefers-reduced-motion: reduce) {
.et-l .nec-header-sticky {
transition: none;
}
}
/* =====================================================================
COMPARISON TABLE — Deep Cleaning page
---------------------------------------------------------------------
Ported from the source's .table-responsive / .comparison-table
(style.css:2709-2756). The table itself was missing from the Divi
layout entirely; this is the styling that goes with it.
Lives in style.css rather than a page stylesheet: our-process.css is only
enqueued on /our-process/, while the table sits on /deep-cleaning/, and the
pattern may be reused on other service pages.
===================================================================== */
.et-l .nec-table-responsive {
overflow-x: auto;
border-radius: var(--nec-radius-lg);
box-shadow: var(--nec-shadow-md);
border: 1px solid var(--nec-border);
margin-top: 40px;
}
.et-l .nec-comparison-table {
width: 100%;
border-collapse: collapse;
background: #fff;
min-width: 600px;
}
.et-l .nec-comparison-table th,
.et-l .nec-comparison-table td {
padding: 20px 24px;
text-align: left;
}
.et-l .nec-comparison-table th {
background-color: var(--nec-dark-green);
color: #fff;
font-weight: 600;
font-size: 1.1rem;
}
.et-l .nec-comparison-table th:first-child {
width: 40%;
}
.et-l .nec-comparison-table td {
color: var(--nec-text-muted);
font-size: 1.05rem;
border-bottom: 1px solid var(--nec-border);
}
.et-l .nec-comparison-table td:first-child {
color: var(--nec-dark-green);
font-weight: 600;
}
.et-l .nec-comparison-table tr:nth-child(even) {
background-color: var(--nec-off-white);
}
.et-l .nec-comparison-table tr:last-child td {
border-bottom: none;
}
/* Testimonial: quiet anchors that carry the voice now that the quote is
no longer set in oversized italic caps. */
.et-l .nec-testimonial-section .nec-quote-block::before {
content: "\201C";
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
font-family: Georgia, "Times New Roman", serif;
font-size: 5rem;
line-height: 1;
color: var(--nec-primary);
opacity: 0.18;
pointer-events: none;
}
.et-l .nec-testimonial-section .nec-author::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: var(--nec-primary);
border-radius: 2px;
}
.et-l .nec-testimonial-section .nec-quote-block .nec-btn {
margin-top: 28px;
}
@media (max-width: 768px) {
.et-l .nec-testimonial-section .nec-quote-block {
padding: 44px 24px 32px;
}
.et-l .nec-testimonial-section .nec-quote-block h3 {
font-size: 1.15rem;
line-height: 1.7;
}
}
/* =====================================================================
DEEP CLEANING — pricing section
---------------------------------------------------------------------
Restores two details the Divi build dropped from the source:
* the green rule under the heading
* the numbered circles beside each step
1
The numbers come from a CSS counter rather than edits to each module —
.nec-step-item already marks the items, so the sequence stays correct if
a step is added, removed or reordered in the builder.
===================================================================== */
.et-l .nec-pricing-section .nec-label-blue + h2::after,
.et-l .nec-versus-section .nec-label-blue + h2::after {
content: "";
display: block;
width: 60px;
height: 4px;
background: var(--nec-primary);
border-radius: 2px;
margin: 24px 0 0;
}
/* Numbered steps */
.et-l .nec-mini-grid-title {
counter-reset: nec-step;
}
.et-l .nec-step-item {
counter-increment: nec-step;
position: relative;
padding-left: 56px;
}
.et-l .nec-step-item::before {
content: counter(nec-step);
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--nec-primary-light);
color: var(--nec-primary);
font-weight: 700;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* =====================================================================
BUTTON HOVER — icon size and outline border
---------------------------------------------------------------------
Divi sets `font-size: 32px` on the button icon pseudo-element, which is
its own default glyph size. The source sizes the icon from the button's
text (17.6px at 1.1rem), so on hover the arrow ballooned to roughly
twice the label height.
Divi also leaves the hover border at its default black on the outline
variants, where the design matches the border to the fill it swaps to.
===================================================================== */
body #page-container .et_pb_section .et_pb_button.nec-btn:after,
body #page-container .et_pb_section .et_pb_button.nec-btn:before,
body #page-container .et_pb_section .et_pb_button.nec-btn:hover:after,
body #page-container .et_pb_section .et_pb_button.nec-btn:hover:before {
font-size: inherit !important;
}
/* Outline / white buttons: border follows the fill on hover, as in
.btn-outline:hover { background: var(--secondary); border-color: … } */
body #page-container .et_pb_section .et_pb_button.nec-btn-outline:hover,
body #page-container .et_pb_section .et_pb_button.nec-btn-white:hover {
border-color: var(--nec-secondary) !important;
}
body #page-container .et_pb_section .et_pb_button.nec-btn-primary:hover {
border-color: var(--nec-primary-hover) !important;
}
/* =====================================================================
FAQ ACCORDION — item border
---------------------------------------------------------------------
Divi's accordion module emits its own border-width: 0 through generated
per-module CSS, which stripped the card outline off every FAQ item. The
source keeps a hairline on each:
.faq-item { border: 1px solid rgba(226,232,240,0.8);
border-radius: 24px;
box-shadow: 0 4px 6px rgba(0,0,0,0.02);
margin-bottom: 16px; }
The open item takes the brand green, which the child theme already
declares — it just had nothing to colour while the width was zero.
===================================================================== */
body #page-container .nec-faq .et_pb_toggle {
border: 1px solid rgba(226, 232, 240, 0.8) !important;
border-radius: 24px !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
margin-bottom: 34px !important;
}
body #page-container .nec-faq .et_pb_toggle.et_pb_toggle_open {
border-color: var(--nec-primary) !important;
box-shadow: 0 8px 20px rgba(22, 163, 74, 0.12) !important;
}
body #page-container .nec-faq .et_pb_toggle:last-child {
margin-bottom: 0 !important;
}
/* =====================================================================
HEADER CTA — underlined green link with a diagonal arrow
---------------------------------------------------------------------
Replaces the solid green pill with the treatment from the supplied
reference: green label, a weighted rule beneath it, and the uploaded
up-right arrow trailing the text.
The arrow ships as a PNG (assets/images/arrow-up-right.png, cropped from
the supplied 512px original to its own bounds so it is not mostly
padding). It is drawn through -webkit-mask/mask rather than as a plain
background so it takes its colour from `currentColor` — that way the
hover state tints the arrow and the text together instead of leaving a
fixed-green arrow beside darkened text.
===================================================================== */
body #page-container .nec-nav-cta > a,
.et-l .nec-nav-cta > a {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 18px 35px !important;
background-color: #16a34a;
border: 0 !important;
/* Same ink as the other top-level menu items (#0f172a). The arrow and the
rule both read from currentColor, so all three stay in step. */
color: #fff;
border-radius: 8px;
font-weight: 600;
font-size: 1.05rem;
letter-spacing: -0.01em;
/* No rule at rest — the underline is reserved for hover, where it wipes in
with the colour change. Declared transparent rather than omitted so the
transition has something to animate from. */
box-shadow: inset 0 -2px 0 0 rgba(15, 23, 42, 0);
text-transform: uppercase;
line-height: 26px;
transition: all 0.3s ease;
}
/* Hover: label and arrow turn green, and the underline appears with them. */
body #page-container .nec-nav-cta > a:hover,
.et-l .nec-nav-cta > a:hover {
color: #fff;
background-color: #12873d;
}
body #page-container .nec-nav-cta > a:hover::after,
.et-l .nec-nav-cta > a:hover::after {
transform: translate(2px, -2px); /* the arrow leans the way it points */
}
/* Divi's menu module adds its own chrome to the last item — clear it so the
link reads as type, not a button. */
body #page-container .nec-nav-cta {
background: none !important;
padding-right: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
body #page-container .nec-nav-cta > a,
body #page-container .nec-nav-cta > a::after {
transition: none;
}
}
/* =====================================================================
NAV SPACING — even gaps around dropdown items
---------------------------------------------------------------------
Divi reserves caret room with `padding-right: 20px` on the anchor of any
item that has a submenu, and that sits ON TOP of the uniform padding the
already carries. Measured from the rendered text, the gap after a
dropdown came out at 67px against 31px everywhere else — more than double.
Zeroing the anchor's reserved space and letting the caret sit inside the
's existing padding puts every gap on the same 31px.
===================================================================== */
body #page-container .et-menu > li.menu-item-has-children > a,
.et-l .et-menu > li.menu-item-has-children > a {
padding-right: 0 !important;
}
/* The caret then needs its own room next to the label rather than borrowed
from the gap. */
body #page-container .et-menu > li.menu-item-has-children > a::after,
.et-l .et-menu > li.menu-item-has-children > a::after {
position: static !important;
margin-left: 6px !important;
right: auto !important;
top: auto !important;
}
/* =====================================================================
Requested override — .et_pb_button_1 hover
---------------------------------------------------------------------
Applied exactly as specified.
Caveat worth knowing: et_pb_button_N is a POSITIONAL class Divi assigns
by order of appearance, not a semantic one. It resolves to a different
button on every page:
/ -> "401-300-6634" (nec-btn-ghost)
/services/ -> "Contact Us" (nec-btn-outline)
/services/deep-cleaning/ -> "Schedule Your Walk…" (nec-btn-primary)
So this rule repaints whichever button happens to sit second on each
page. If the intent was "the phone button" or "ghost buttons", target
.nec-btn-ghost instead and it will hold across the site.
===================================================================== */
body #page-container .et_pb_section .et_pb_button_1:hover {
color: #fff !important;
border-color: #0284c7 !important;
background-image: initial;
background-color: #0284c7;
}
/* =====================================================================
EDITORIAL IMAGE TREATMENTS
---------------------------------------------------------------------
Every image previously rendered as the same 576x432 box at 24px radius,
which read as repetitive across 22 images on 11 pages. These classes give
sections distinct treatments so consecutive bands never look alike.
Built entirely from existing tokens — no new colours or shadows.
The image wrapper fix (.et_pb_image_wrap -> block/100%) already lives
earlier in this file and applies to any `nec-` prefixed module, so these
classes inherit it rather than re-declaring it.
===================================================================== */
/* --- Aspect variants. object-fit:cover on every one, so nothing distorts. --- */
.et-l .nec-img-portrait img {
aspect-ratio: 3 / 4;
object-fit: cover;
width: 100%;
height: auto;
border-radius: var(--nec-radius-lg);
}
.et-l .nec-img-wide img {
aspect-ratio: 16 / 9;
object-fit: cover;
width: 100%;
height: auto;
border-radius: var(--nec-radius-lg);
}
/* --- Framed: a soft accent panel sits behind and offset from the photo. --- */
.et-l .nec-img-framed {
position: relative;
isolation: isolate; /* keeps the panel behind the image, not the section */
}
.et-l .nec-img-framed::before {
content: "";
position: absolute;
/* Left-column image: text sits to its right, so the panel pushes LEFT. */
inset: 16px 16px -16px -16px;
background: var(--nec-primary-light);
border-radius: var(--nec-radius-lg);
z-index: -1;
}
.et-l .nec-img-framed img {
position: relative;
border-radius: var(--nec-radius-lg);
box-shadow: var(--nec-shadow-md);
}
/* Right-column image: text sits to its left, so the panel pushes RIGHT.
Either way the panel leans away from the copy rather than crowding it. */
.et-l .nec-img-framed.nec-img-framed--right::before {
inset: 16px -16px -16px 16px;
}
/* --- Overlap: pulls into the adjacent column on desktop only. --- */
@media (min-width: 981px) {
.et-l .nec-img-overlap {
margin-right: -40px;
}
.et-l .nec-img-overlap.nec-img-overlap--left {
margin-right: 0;
margin-left: -40px;
}
}
/* --- Optional caption beneath a photo. --- */
.et-l .nec-img-caption {
display: block;
margin-top: 12px;
font-size: 13px;
line-height: 1.5;
color: var(--nec-text-muted);
}
.report-back-text p {
padding: 24px !important;
border-radius: 16px;
font-style:italic;
font-size: 16px;
border-left: 4px solid #16a34a;
}
body #main-content article .et_builder_inner_content .nec-equal-height {
align-items: normal !important;
}
/* --- Mobile: everything goes flush and square-ish so nothing crops oddly. --- */
@media (max-width: 980px) {
.et-l .nec-img-framed::before {
display: none; /* the offset panel has no room to breathe */
}
/* All treatment classes, not just portrait/wide — framed images share the
base nec-img-cover height:100%, so they need the same release for
aspect-ratio to take effect. */
.et-l [class*="nec-img-"] img {
aspect-ratio: 4 / 3;
height: auto !important;
min-height: 0 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.et-l [class*="nec-img-"] img { transition: none; }
}
/* =====================================================================
MOBILE NAVIGATION — off-canvas drawer
---------------------------------------------------------------------
The stock Divi mobile menu dropped a full-width white block under the
header, pushed the page down, rendered every submenu already expanded
(18 items in one dump) and centred the text. It also sat below a topbar
that consumed 177px before the logo even appeared.
Reworked to the pattern on the reference site: a fixed-position drawer
that slides in over the page, left-aligned items, submenus collapsed
behind their own toggles, a scrim behind, and a close control.
===================================================================== */
@media (max-width: 980px) {
/* --- Compact the header itself ------------------------------------ */
/* The four text links duplicate menu entries and cost ~90px up top. */
.et-l .nec-topbar .nec-topbar-right-col { display: none !important; }
.et-l .nec-topbar { padding: 6px 0 !important; }
.et-l .nec-topbar .et_pb_text { margin-bottom: 0 !important; }
/* Logo and hamburger share one row, logo left / toggle right. */
.et-l .nec-header-sticky > .et_pb_row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
}
.et-l .nec-header-sticky .nec-logo-col,
.et-l .nec-header-sticky .nec-menu-col {
width: auto !important;
flex: 0 0 auto !important;
margin: 0 !important;
}
/* --- Hamburger ----------------------------------------------------- */
.et-l .et_mobile_nav_menu {
float: none !important;
margin: 0 !important;
display: flex;
align-items: center;
}
.et-l .mobile_menu_bar {
position: relative;
display: block;
padding: 4px;
cursor: pointer;
}
.et-l .mobile_menu_bar:before {
color: var(--nec-dark-green);
font-size: 30px;
}
/* --- Scrim --------------------------------------------------------- */
.nec-nav-scrim {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease, visibility 0.35s ease;
z-index: 9998;
}
body.nec-nav-open .nec-nav-scrim { opacity: 1; visibility: visible; }
/* --- The drawer ---------------------------------------------------- */
.nec-nav-drawer.et_mobile_menu {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
bottom: 0 !important;
width: min(86vw, 340px) !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 84px 0 32px !important;
background: #fff !important;
border: 0 !important;
border-left: 1px solid var(--nec-border) !important;
box-shadow: -12px 0 40px rgba(15, 23, 42, 0.16) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
z-index: 9999 !important;
/* Off-screen by default; slid in when body carries .nec-nav-open. */
transform: translateX(100%);
transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
display: block !important; /* Divi toggles display; the transform hides it */
}
body.nec-nav-open .nec-nav-drawer.et_mobile_menu {
transform: translateX(0);
}
/* --- Items --------------------------------------------------------- */
.nec-nav-drawer.et_mobile_menu li a {
display: block;
text-align: left !important;
padding: 14px 24px !important;
font-size: 1rem !important;
font-weight: 600;
color: var(--nec-dark-green) !important;
border: 0 !important;
transition: color 0.2s ease, background 0.2s ease;
}
.nec-nav-drawer.et_mobile_menu > li { border-bottom: 1px solid var(--nec-rule, #eef2f6); }
.nec-nav-drawer.et_mobile_menu > li:last-child { border-bottom: 0; }
.nec-nav-drawer.et_mobile_menu li a:hover,
.nec-nav-drawer.et_mobile_menu li.current-menu-item > a {
color: var(--nec-primary) !important;
background: var(--nec-off-white);
}
/* --- Submenus: collapsed until their parent is tapped -------------- */
.nec-nav-drawer.et_mobile_menu ul.sub-menu {
max-height: 0;
overflow: hidden;
padding: 0 !important;
background: var(--nec-off-white);
transition: max-height 0.35s ease;
}
.nec-nav-drawer.et_mobile_menu > li.nec-sub-open > ul.sub-menu { max-height: 640px; }
.nec-nav-drawer.et_mobile_menu ul.sub-menu li a {
padding: 12px 24px 12px 40px !important;
font-size: 0.94rem !important;
font-weight: 500;
color: var(--nec-text-dark) !important;
}
/* Chevron on any parent item. */
.nec-nav-drawer.et_mobile_menu > li.menu-item-has-children > .nec-sub-toggle {
position: absolute;
top: 0;
right: 0;
width: 56px;
height: 50px;
border: 0;
background: none;
cursor: pointer;
display: grid;
place-items: center;
}
.nec-nav-drawer.et_mobile_menu > li.menu-item-has-children { position: relative; }
.nec-nav-drawer.et_mobile_menu > li.menu-item-has-children > .nec-sub-toggle::before {
content: "";
width: 10px;
height: 10px;
border-right: 2px solid var(--nec-text-muted);
border-bottom: 2px solid var(--nec-text-muted);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform 0.3s ease;
}
.nec-nav-drawer.et_mobile_menu > li.nec-sub-open > .nec-sub-toggle::before {
transform: rotate(-135deg) translate(-2px, -2px);
}
/* --- Close control -------------------------------------------------- */
.nec-nav-close {
position: fixed;
top: 18px;
right: 18px;
width: 42px;
height: 42px;
border: 1px solid var(--nec-border);
border-radius: 50%;
background: #fff;
color: var(--nec-dark-green);
font-size: 20px;
line-height: 1;
cursor: pointer;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s;
display: grid;
place-items: center;
}
body.nec-nav-open .nec-nav-close { opacity: 1; visibility: visible; }
/* Page must not scroll behind the open drawer. */
body.nec-nav-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
.nec-nav-drawer.et_mobile_menu,
.nec-nav-drawer.et_mobile_menu ul.sub-menu,
.nec-nav-scrim,
.nec-nav-close { transition: none !important; }
}
/* Drawer furniture is injected into for every viewport, but only
styled inside the mobile breakpoint — which left the close button
rendering as a stray "×" on desktop. Hide both by default; the mobile
rules above re-show them when the drawer opens. */
.nec-nav-scrim,
.nec-nav-close {
display: none;
}
@media (max-width: 980px) {
.nec-nav-scrim { display: block; }
.nec-nav-close { display: grid; }
}
/* =====================================================================
MOBILE NAV — corrections
---------------------------------------------------------------------
1. The toggle column sat at x=208 in a 390px viewport — visually centred
rather than right. space-between alone did not push it over, so the
column takes margin-left:auto and the nav itself right-aligns.
2. Divi tints any menu-item-has-children with rgba(0,0,0,.03), which put
a grey band behind Services and About. Cleared so every row reads the
same.
3. The chevron glyph was 10px at 2px stroke inside a 56x50 button — too
heavy beside 1rem type. Reduced to 7px at 1.5px, on a 44px target so
it stays comfortably tappable.
===================================================================== */
@media (max-width: 980px) {
/* 1 — toggle hard right */
.et-l .nec-header-sticky .nec-menu-col {
margin-left: auto !important;
display: flex !important;
justify-content: flex-end !important;
}
.et-l .nec-header-sticky .et_mobile_nav_menu {
margin-left: auto !important;
text-align: right !important;
}
/* 2 — no tint on parent items; active state carries colour only */
.nec-nav-drawer.et_mobile_menu li a,
.nec-nav-drawer.et_mobile_menu > li.menu-item-has-children > a,
.nec-nav-drawer.et_mobile_menu li.current-menu-item > a,
.nec-nav-drawer.et_mobile_menu li a:hover {
background: transparent !important;
}
.nec-nav-drawer.et_mobile_menu li.current-menu-item > a {
color: var(--nec-primary) !important;
}
/* Submenus keep the faintest possible separation from their parent. */
.nec-nav-drawer.et_mobile_menu ul.sub-menu {
background: transparent !important;
}
/* 3 — smaller, lighter chevron */
.nec-nav-drawer.et_mobile_menu > li.menu-item-has-children > .nec-sub-toggle {
width: 44px;
height: 46px;
}
.nec-nav-drawer.et_mobile_menu > li.menu-item-has-children > .nec-sub-toggle::before {
width: 7px;
height: 7px;
border-right-width: 1.5px;
border-bottom-width: 1.5px;
}
}
/* =====================================================================
MOBILE NAV — Material Design motion
---------------------------------------------------------------------
Reworked to Material 3 motion rules rather than a single linear slide:
* Emphasized easing. M3 uses an asymmetric pair — decelerate on enter so
the surface arrives softly, accelerate on exit so dismissal feels
immediate. A symmetric curve is what makes a drawer feel "cheap".
* Asymmetric duration. Enter 400ms (M3 long-2), exit 200ms (short-4);
entering is a considered reveal, leaving should get out of the way.
* Elevation. The drawer is a level-3 surface, so it carries M3's two-part
shadow (a tight key light plus a broad ambient) rather than one blur.
* Scrim at 32% — the M3 modal value.
* Staggered children. List items follow the surface in sequence rather
than arriving with it, which is what reads as "material" more than any
other single detail.
* State layers. Taps raise an 12% on-surface overlay and a ripple, in
place of a flat background swap.
===================================================================== */
:root {
/* M3 emphasized easing set */
--nec-ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
--nec-ease-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
--nec-ease-standard: cubic-bezier(0.2, 0, 0, 1);
--nec-dur-enter: 400ms;
--nec-dur-exit: 200ms;
}
@media (max-width: 980px) {
/* --- Surface ------------------------------------------------------- */
.nec-nav-drawer.et_mobile_menu {
/* Level-3 elevation: key light + ambient, per M3 */
box-shadow:
0 4px 8px 3px rgba(15, 23, 42, 0.15),
0 1px 3px 0 rgba(15, 23, 42, 0.30) !important;
border-left: 0 !important;
border-radius: 16px 0 0 16px !important; /* M3 large corner, inner edge only */
transition: transform var(--nec-dur-exit) var(--nec-ease-emphasized-accel) !important;
will-change: transform;
}
body.nec-nav-open .nec-nav-drawer.et_mobile_menu {
transition: transform var(--nec-dur-enter) var(--nec-ease-emphasized-decel) !important;
}
/* --- Scrim --------------------------------------------------------- */
.nec-nav-scrim {
background: rgba(0, 0, 0, 0.32); /* M3 modal scrim */
transition:
opacity var(--nec-dur-exit) var(--nec-ease-standard),
visibility var(--nec-dur-exit) var(--nec-ease-standard);
}
body.nec-nav-open .nec-nav-scrim {
transition:
opacity var(--nec-dur-enter) var(--nec-ease-standard),
visibility 0s;
}
/* --- Staggered list entrance --------------------------------------- */
.nec-nav-drawer.et_mobile_menu > li {
opacity: 0;
transform: translateX(24px);
transition:
opacity var(--nec-dur-exit) var(--nec-ease-standard),
transform var(--nec-dur-exit) var(--nec-ease-emphasized-accel);
}
body.nec-nav-open .nec-nav-drawer.et_mobile_menu > li {
opacity: 1;
transform: none;
transition:
opacity 300ms var(--nec-ease-standard),
transform 380ms var(--nec-ease-emphasized-decel);
}
/* Each item trails the one before it — the core of Material's
"shared journey" between a surface and its contents. */
body.nec-nav-open .nec-nav-drawer.et_mobile_menu > li:nth-child(1) { transition-delay: 90ms; }
body.nec-nav-open .nec-nav-drawer.et_mobile_menu > li:nth-child(2) { transition-delay: 130ms; }
body.nec-nav-open .nec-nav-drawer.et_mobile_menu > li:nth-child(3) { transition-delay: 170ms; }
body.nec-nav-open .nec-nav-drawer.et_mobile_menu > li:nth-child(4) { transition-delay: 210ms; }
body.nec-nav-open .nec-nav-drawer.et_mobile_menu > li:nth-child(5) { transition-delay: 250ms; }
body.nec-nav-open .nec-nav-drawer.et_mobile_menu > li:nth-child(6) { transition-delay: 290ms; }
body.nec-nav-open .nec-nav-drawer.et_mobile_menu > li:nth-child(n+7) { transition-delay: 330ms; }
/* --- State layer + ripple ------------------------------------------ */
.nec-nav-drawer.et_mobile_menu li a {
position: relative;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
border-radius: 0 28px 28px 0; /* M3 nav-item pill */
margin-right: 12px;
transition: color var(--nec-dur-exit) var(--nec-ease-standard);
}
/* The state layer sits under the label at a fixed opacity, the M3 way,
rather than swapping the background colour outright. */
.nec-nav-drawer.et_mobile_menu li a::before {
content: "";
position: absolute;
inset: 0;
background: currentColor;
opacity: 0;
transition: opacity var(--nec-dur-exit) var(--nec-ease-standard);
pointer-events: none;
}
.nec-nav-drawer.et_mobile_menu li a:active::before { opacity: 0.12; }
.nec-nav-drawer.et_mobile_menu li.current-menu-item > a::before { opacity: 0.08; }
.nec-ripple {
position: absolute;
border-radius: 50%;
background: currentColor;
opacity: 0.24;
transform: scale(0);
animation: nec-ripple 550ms var(--nec-ease-standard) forwards;
pointer-events: none;
}
@keyframes nec-ripple {
to { transform: scale(2.4); opacity: 0; }
}
/* --- Chevron follows the same curve --------------------------------- */
.nec-nav-drawer.et_mobile_menu > li.menu-item-has-children > .nec-sub-toggle::before {
transition: transform 300ms var(--nec-ease-emphasized-decel);
}
.nec-nav-drawer.et_mobile_menu ul.sub-menu {
transition: max-height 320ms var(--nec-ease-standard);
}
/* --- Close button: scale in with the surface ------------------------ */
.nec-nav-close {
transform: scale(0.8);
transition:
opacity var(--nec-dur-exit) var(--nec-ease-standard),
visibility var(--nec-dur-exit),
transform var(--nec-dur-exit) var(--nec-ease-emphasized-accel);
}
body.nec-nav-open .nec-nav-close {
transform: scale(1);
transition:
opacity 240ms var(--nec-ease-standard) 120ms,
visibility 0s,
transform 360ms var(--nec-ease-emphasized-decel) 120ms;
}
}
@media (prefers-reduced-motion: reduce) {
.nec-nav-drawer.et_mobile_menu,
.nec-nav-drawer.et_mobile_menu > li,
.nec-nav-close,
.nec-nav-scrim {
transition-duration: 1ms !important;
transition-delay: 0ms !important;
transform: none !important;
}
.nec-ripple { display: none; }
}
/* =====================================================================
MOBILE MENU BUTTON
---------------------------------------------------------------------
Divi ships the toggle as a single ≡ font glyph — flat, unanimatable, and
with no touch target of its own. Replaced with three bars on a proper
surface:
* 48px circular target (Material's minimum), so it is comfortable to
hit rather than a 28px glyph floating in space.
* A tonal surface with a hairline and soft elevation, so the control
reads as a button instead of a character.
* The bars morph into a close mark on open, using the same emphasized
easing as the drawer so the two feel like one gesture.
* A state layer on press, matching the drawer's list items.
===================================================================== */
@media (max-width: 980px) {
/* Retire Divi's glyph. */
.et-l .mobile_menu_bar:before {
display: none !important;
content: none !important;
}
.et-l .mobile_menu_bar {
position: relative;
display: grid !important;
place-items: center;
width: 48px;
height: 48px;
padding: 0 !important;
border-radius: 50%;
background: var(--nec-off-white);
border: 1px solid var(--nec-border);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
background 200ms var(--nec-ease-standard),
box-shadow 200ms var(--nec-ease-standard),
border-color 200ms var(--nec-ease-standard);
}
.et-l .mobile_menu_bar:hover,
.et-l .mobile_menu_bar:focus-visible {
background: #fff;
border-color: #cbd5e1;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
}
.et-l .mobile_menu_bar:focus-visible {
outline: 2px solid var(--nec-primary);
outline-offset: 2px;
}
/* Press state layer. */
.et-l .mobile_menu_bar::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--nec-dark-green);
opacity: 0;
transition: opacity 160ms var(--nec-ease-standard);
pointer-events: none;
}
.et-l .mobile_menu_bar:active::after { opacity: 0.10; }
/* --- The bars ------------------------------------------------------ */
.nec-burger {
position: relative;
width: 20px;
height: 14px;
display: block;
}
.nec-burger i {
position: absolute;
left: 0;
width: 100%;
height: 2px;
border-radius: 2px;
background: var(--nec-dark-green);
transition:
transform 320ms var(--nec-ease-emphasized-decel),
opacity 160ms var(--nec-ease-standard),
width 320ms var(--nec-ease-emphasized-decel);
}
.nec-burger i:nth-child(1) { top: 0; }
.nec-burger i:nth-child(2) { top: 6px; width: 72%; } /* shorter middle bar adds a little character */
.nec-burger i:nth-child(3) { top: 12px; }
.et-l .mobile_menu_bar:hover .nec-burger i:nth-child(2) { width: 100%; }
/* --- Morph to a close mark ----------------------------------------- */
body.nec-nav-open .mobile_menu_bar {
background: var(--nec-dark-green);
border-color: var(--nec-dark-green);
}
body.nec-nav-open .nec-burger i { background: #fff; }
body.nec-nav-open .nec-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nec-nav-open .nec-burger i:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
body.nec-nav-open .nec-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
.nec-burger i,
.et-l .mobile_menu_bar { transition-duration: 1ms !important; }
}
/* Note on the toggle: it sits at the right edge, exactly where the drawer
lands, so its morph to a close mark happens underneath the panel. Two
attempts to lift it above the drawer failed — .nec-header-sticky carries a
transform, which creates a stacking context, so a z-index on the toggle is
capped by the header's own and Divi's header stacking would not yield.
The drawer therefore keeps its own visible close button, which is a
perfectly standard Material drawer affordance. The morph still runs and is
visible for the moment before the panel covers it. */
@media (prefers-reduced-motion: reduce) {
.nec-burger i,
.et-l .mobile_menu_bar { transition-duration: 1ms !important; }
}
/* The toggle sits at the right edge, which is exactly where the drawer
lands — so the morph to a close mark was happening underneath the panel
and never seen, forcing a second close affordance. Lifting the button
above the drawer lets one control do both jobs, which is the Material
pattern: the same element you pressed to open is the one you press to
close, and it tells you so by changing shape. */
@media (max-width: 980px) {
.et-l .nec-header-sticky .nec-menu-col,
.et-l .et_mobile_nav_menu {
position: relative;
z-index: 10001;
}
.et-l .mobile_menu_bar { z-index: 10001; }
/* Drawer clears the header so its top edge is not crowded. */
.nec-nav-drawer.et_mobile_menu { padding-top: 96px !important; }
}