. This was masked at wider viewports by a Divi default that happened to lay the
out correctly there, and only broke
visibly once Divi's own phone-width responsive CSS reverted it. */
.eb-footer__brand {
display: flex;
align-items: center;
gap: 11px;
}
.eb-header-brand .et_pb_text_inner p {
display: flex;
flex-direction: row;
align-items: center;
gap: 11px;
margin: 0;
}
.eb-header-brand img {
height: 46px;
}
.eb-footer__brand img {
height: 44px;
}
/* ---------- Global Header ----------
Static single state only (M2) — the reference site's scroll-triggered
transparent-to-solid nav swap is explicitly deferred to M6. Confirmed
safe orange-on-black context (see M1 audit) for both the nav-link hover
color and the CTA button. */
.et-l--header {
background: var(--eb-black);
color: var(--text-inverse);
/* Reference (app/globals.css) sticks .eb-header at position:sticky;top:0;
z-index:50 — this wrapper is the real rendered equivalent (confirmed via
getBoundingClientRect/getComputedStyle on the live page: this is the
element whose height must equal the reference's 76px, and no ancestor
in the chain carried any sticky/fixed positioning before this). Divi's
Theme Builder header template has no separate "fixed nav" toggle to
conflict with here — this is the only mechanism producing sticky
behavior, so there's no duplicate-sticky risk between Divi JS and CSS. */
position: sticky;
top: 0;
z-index: 50;
}
/* Divi's own section wrapper ships a default opaque white background
that paints over the dark surface set above it, on both header and
footer — confirmed via computed styles on the live page, not assumed.
Neutralizing it here is the only way the real background is visible;
nothing else in this cascade can reach a Divi-generated section. */
.et-l--header .et_pb_section,
.et-l--footer .et_pb_section {
background-color: transparent;
}
/* Divi's own section wrapper also ships a default ~50-54px top/bottom
padding (confirmed via computed styles: 50px 0px measured live), stacked
on top of the .eb-header row's own 22px vertical padding below — removing
only this section padding takes the header from ~216-224px down to
~116px (the row's own height), still short of the reference's exact
76px. Scoped to the header section only — the footer section carries the
same Divi default but was not part of this approved patch's scope, so it
is left untouched here. */
.et-l--header .et_pb_section {
padding: 0;
}
.eb-header {
display: flex;
align-items: center;
justify-content: space-between;
/* Reference (.eb-nav, app/globals.css) is a fixed height:76px with no
vertical padding — content is centered via align-items, not padded
into place. The row's own 22px top/bottom padding (measured live)
was the second contributor to the height gap, on top of the Divi
section padding removed above: 22+22 plus content still landed at
116.3px total, not 76px. Matching the reference's own mechanism
(fixed height, horizontal-only padding) instead of guessing at a
smaller padding value. */
height: 76px;
padding: 0 var(--gutter);
gap: var(--space-5);
/* Divi's own responsive column system marks both of this row's
columns et_flex_column_24_24_phone (100% width each at phone
sizes) — its own default assumption is that they stack (wrap) at
that breakpoint. !important is deliberate and confirmed necessary:
a plain (non-important) nowrap here still computed as "wrap" live
at ~560-960px widths — Divi's own phone/tablet column-stacking rule
wins the cascade at this specificity without it, which let the
second column (hamburger toggle) drop below the header's fixed
76px height entirely. nowrap keeps both columns on one line,
matching the reference's single-row nav at every width. */
flex-wrap: nowrap !important;
}
/* Header: transparent over the hero/page top, solid page color once scrolled.
header.js toggles .scrolled on .eb-header at scrollY > 40; the fill goes on the
full-width header SECTION (selected via :has) so it spans edge-to-edge while the
row stays transparent. Footer is untouched. */
/* Make the whole header stack transparent by default — the Theme Builder header
WRAPPER (.et-l--header), the section, and the row — so no Divi-set dark fill
shows through before scroll. The .scrolled paper fill is more specific, so it
wins once the JS adds the class. */
body #page-container .et-l--header,
body #page-container .et-l--header .et_pb_section,
body #page-container .et-l--header .et_pb_row,
body #page-container .et_pb_section:has(.eb-header),
body #page-container .eb-header {
background-color: transparent !important;
background-image: none !important;
box-shadow: none;
}
body #page-container .et_pb_section:has(.eb-header) {
transition: background-color .3s var(--ease-standard), box-shadow .3s var(--ease-standard);
}
body #page-container .et_pb_section:has(.eb-header.scrolled) {
/* Translucent paper + backdrop blur (glassy, like JDG) rather than a flat
opaque fill, so the content faintly shows through as it scrolls under. */
background-color: rgba(250, 247, 241, 0.82) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 8px 24px -16px rgba(23, 21, 20, 0.30);
}
/* Pin the header so it floats OVER the hero (JDG pattern) instead of sitting as a
solid bar above it — that overlap is what makes the transparent state reveal the
hero rather than the cream page background behind a static header. Divi's own
Fixed Position toggle can silently reset, so guarantee it in CSS. Public
visitors get top:0; the logged-in WordPress admin bar offsets it. */
body #page-container .et-l--header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 500;
margin: 0 !important;
}
body.admin-bar #page-container .et-l--header { top: 32px; }
@media (max-width: 782px) {
body.admin-bar #page-container .et-l--header { top: 46px; }
/* WP's mobile admin bar is absolute and scrolls away, so once the header is
solid/scrolled, drop the offset to close the gap above it (logged-in only). */
body.admin-bar:has(.eb-header.scrolled) #page-container .et-l--header { top: 0; }
}
/* AZ ROC credential — sits below the sub-heading and above the CTA, in the hero
content column. Cream with a soft shadow for guaranteed contrast; meets the AZ
Registrar of Contractors "home page, clearly visible, appropriately sized, not
the footer" rule. */
.eb-hero3__roc {
margin: -18px 0 40px; /* pulled up close to the sub-heading; larger gap before the CTA */
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-inverse);
text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}
/* Homepage (dark hero) before scroll: the transparent header sits over a dark
image, so flip the wordmark, nav links, and the mark to light. Once .scrolled
(solid paper) the base ink treatment applies again. Light-hero pages keep the
base ink treatment throughout. */
body.eb-hero-dark .eb-header:not(.scrolled) .eb-header-brand .eb-wordmark,
body.eb-hero-dark .eb-header:not(.scrolled) .eb-nav-menu .et-menu > li > a {
color: var(--eb-paper);
}
body.eb-hero-dark .et-l--header .eb-header:not(.scrolled) img[src*="logo-mark"] {
content: url(../logo/logo-mark-eb.svg);
}
/* Scroll progress bar — pinned to the header's bottom edge, created by header.js.
.eb-header is static (the fixed behavior lives on Divi's header wrapper), so
position:relative here is safe and gives the bar its anchor. */
.eb-header { position: relative; }
.eb-scroll-bar {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: var(--accent);
opacity: 0;
pointer-events: none;
transition: width .1s linear, opacity .2s var(--ease-standard);
z-index: 2;
}
.eb-header-brand .eb-wordmark {
color: var(--eb-ink);
}
/* !important is deliberate and scoped to exactly one property: Divi's
own et_pb_bg_layout_light utility class ships an opaque white
background at higher specificity (two Divi classes) than a single
custom class can reach — confirmed via computed styles on the live
page, not assumed. This is overriding third-party framework chrome,
not fighting our own cascade. */
.eb-nav-menu {
background-color: transparent !important;
}
/* Divi's own .et-menu ships flex-wrap:wrap and align-items:stretch at a
specificity this single class can't beat (confirmed via computed
styles: both properties kept resolving to Divi's values even after
the column-width fix removed the *reason* items would wrap). The
30/70 column split (Theme Builder) gives the row enough real width;
these two !importants are what actually let it use that width as one
line — without them the CTA silently wraps to its own row even
though there's visibly enough space. */
.eb-nav-menu .et-menu {
display: flex;
align-items: center !important;
flex-wrap: nowrap !important;
gap: var(--space-6);
list-style: none;
margin: 0;
padding: 0;
}
.eb-nav-menu .et-menu > li > a {
display: inline-block;
color: var(--eb-ink);
font-family: var(--font-body);
font-size: var(--type-body-sm);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: color var(--dur-fast) var(--ease-standard);
}
.eb-nav-menu .et-menu > li:hover > a {
color: var(--accent);
}
/* WordPress's own current-menu-item class (applied automatically by
wp_nav_menu, including for Custom Link items whose URL matches the
current request) — no page-specific work needed for this to activate
once real pages exist. Scoped to .et-menu (desktop) specifically —
confirmed via live DOM that Divi's mobile dropdown (.et_mobile_menu)
shares the same .eb-nav-menu module ancestor, so the unscoped version
of this selector was also painting an orange border-bottom onto the
current item inside the mobile menu, which has its own distinct
treatment below. */
.eb-nav-menu .et-menu > .current-menu-item > a,
.eb-nav-menu .et-menu > .current_page_item > a {
border-bottom-color: var(--accent);
}
/* Desktop "About Us" dropdown — Divi ships this submenu as a white panel with a
3px blue top border (its own default chrome). Restyle it to match the scrolled
nav-bar: the same translucent paper fill + backdrop blur as the header section
(.eb-header.scrolled, rgba(250,247,241,.82) / blur 18px), a --border-subtle
hairline edge, --shadow-overlay, and dark 600 links so the panel reads as one
surface with the bar it hangs from. !important is required to beat Divi core's
submenu chrome — same pattern as the header/footer overrides. */
.eb-nav-menu .et-menu .sub-menu {
background: rgba(250, 247, 241, 0.82) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid var(--border-subtle) !important;
box-shadow: var(--shadow-overlay) !important;
padding: 8px !important;
}
.eb-nav-menu .et-menu .sub-menu li {
border: 0 !important;
background: transparent !important;
}
.eb-nav-menu .sub-menu a {
color: var(--text-primary) !important;
white-space: nowrap;
padding: 9px 12px !important;
border-radius: 4px;
font-weight: 600;
transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.eb-nav-menu .et-menu .sub-menu a:hover {
background: rgba(23, 21, 20, .06) !important;
color: var(--accent) !important;
}
/* "Start a Conversation" — always the last item, per the approved nav
structure — rendered as a real button, not a plain link. Reference
(components/NavBar.tsx) never renders this CTA as an orange-filled
.eb-btn--primary — it is always .eb-btn--secondary (light/non-scrolled
state) or .eb-btn--inverse (the solid-black state, which is the only
state this static M2 build ever renders — see the M6 deferral note
above). This now matches .eb-btn--inverse exactly (app/globals.css):
transparent background, --border-inverse border, --text-inverse text. */
.eb-nav-menu .et-menu > li:last-child > a {
background: var(--accent);
color: var(--accent-ink);
border: 1px solid var(--accent);
padding: 13px 26px;
text-transform: uppercase;
letter-spacing: var(--button-tracking);
transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.eb-nav-menu .et-menu > li:last-child:hover > a {
border-color: var(--eb-ink);
background: var(--eb-ink);
color: var(--eb-paper);
}
/* ---------- Mobile nav dropdown ----------
All of the dark-theme styling above only ever targeted .eb-nav-menu
.et-menu — the DESKTOP horizontal menu's own markup. Divi's real
hamburger/mobile dropdown is a structurally separate module
(.et_mobile_nav_menu > .mobile_nav > .et_mobile_menu, confirmed via the
live DOM) that this theme had never targeted at all: it rendered with
Divi's untouched default white background and unstyled links. Only
cosmetic properties are set here (background, color, spacing,
borders) — Divi's own JS still owns the open/close toggle
(.mobile_nav.opened / .closed) and the fixed/absolute positioning of
.et_mobile_nav_menu, so there is no duplicate positioning logic here. */
.et_mobile_menu {
background: var(--eb-black);
border-bottom: 1px solid var(--border-inverse);
/* Divi's own default for this panel includes a 3px top border in its
stock accent blue (rgb(46,163,242), confirmed via computed style)
— never part of this project's palette. The reference has no top
border on its mobile menu at all. */
border-top: none;
padding: 8px var(--gutter) 24px;
}
.et_mobile_menu li {
border-bottom: 1px solid var(--border-inverse);
list-style: none;
}
/* Divi's hamburger toggle is an icon-font glyph rendered via ::before,
with its own hardcoded color (rgb(46,163,242), the same stock accent
blue as the border above) completely independent of the element's own
`color`, which is already correct (--text-inverse) — confirmed via
computed style that only the pseudo-element's own color property was
wrong. !important matches this element's own icon-font specificity. */
/* iOS Safari only synthesizes a click from a tap on a non-interactive
element (this is a with a jQuery-bound handler, not a link/button)
when it — or an ancestor — carries cursor: pointer. Without it the
hamburger is dead to touch on iPhone while still working with a desktop
mouse. Divi's own default pointer rule isn't winning here, so set it
explicitly on the tap target. */
.mobile_menu_bar,
.mobile_menu_bar::before {
cursor: pointer;
}
.mobile_menu_bar::before {
color: var(--eb-white) !important;
}
/* !important is deliberate, scoped to exactly one property: confirmed via
computed styles on a real deployment (not the earlier verification
pass, which used !important defensively and masked this) that Divi's
own core menu-module CSS still wins the top-level link color at this
specificity — text rendered at rgba(0,0,0,.6) instead of white despite
this rule. Same class of third-party-chrome override as the other
documented !importants in this file, not a fight with our own cascade. */
.et_mobile_menu li > a {
display: block;
font-family: var(--font-body);
font-size: 17px;
font-weight: 600;
color: var(--eb-white) !important;
text-decoration: none;
padding: 14px 0;
}
.et_mobile_menu li > a:hover {
color: var(--eb-sandstone) !important;
}
/* "About Ernie" sub-item under "About Us" — same indentation/size-step
treatment as the reference's .eb-nav__menu-sublink, on Divi's own
.sub-menu markup instead of a custom class. */
.et_mobile_menu .sub-menu {
background: transparent;
}
.et_mobile_menu .sub-menu li {
border-bottom: none;
}
.et_mobile_menu .sub-menu a {
padding-left: 20px;
font-size: 15px;
font-weight: 500;
color: var(--eb-sandstone);
}
/* "Start a Conversation" — same last-child CTA pattern as the desktop
menu (.eb-nav-menu .et-menu > li:last-child above), matching
.eb-btn--inverse rather than a filled orange button. */
.et_mobile_menu > li:last-child {
border-bottom: none;
margin-top: 20px;
}
.et_mobile_menu > li:last-child > a {
background: transparent;
border: 1px solid var(--border-inverse);
color: var(--text-inverse);
text-align: center;
text-transform: uppercase;
letter-spacing: var(--button-tracking);
padding: 13px 26px;
}
.et_mobile_menu > li:last-child:hover > a {
border-color: var(--eb-paper);
background: rgba(250, 247, 241, .08);
}
/* ---------- Header: continuous mobile/tablet brand+menu layout ----------
SUPERSEDES an earlier fixed 78/22 percentage split scoped to ≤639px
only. That approach caused two confirmed regressions, found by
sweeping every ~20px from 900px down to 480px and measuring the real
gap between the wordmark's right edge and the hamburger's left edge:
1. A genuine overlap ABOVE 639px, not just at/below it. Divi's own
unmodified column split (et_flex_column_12_24, ~25/75) shrinks
proportionally with the viewport while the brand's real content
(46px logo + 11px gap + ~121px wordmark ≈ 178px) does not. The gap
crossed from positive to negative between 700px (+1.3px) and
680px (-3.0px), reaching -7.4px at 660px — a real, live bleed of
the hamburger into the wordmark's "BUILT" text that the ≤639px
fix never covered.
2. A hard, discontinuous jump exactly at the 639/640 boundary: at
660px (just above, old default active) the gap measured -7.4px;
at 625px (just below, old 78/22 fix active) it jumped to
+245.3px. Any two fixed percentages meeting at a breakpoint
necessarily does this — it's inherent to the approach, not a bug
in either rule individually.
Fix: stop assigning either column a percentage at all in this range.
The brand column grows/shrinks to exactly what its content needs
(flex: 1 1 auto — flex-basis:auto defers to width, so width:auto is
required alongside it, confirmed live: without it Divi's own
percentage width class still wins on flex-basis alone). The menu
column never takes more than its own content needs (flex: 0 0 auto)
and is pushed to the row's far right by .eb-header's own existing
justify-content:space-between — confirmed via live measurement at
500/660/780px that col1 stays pinned at ~38-79px (just the toggle
button + its own small padding) at every width, so the gap is always
large and positive, with no discontinuity anywhere in the range.
Scoped ≤959px (this project's established "mobile nav visible"
breakpoint elsewhere in this file) rather than the old ≤639px, since
col1 is now deliberately narrow (content-sized) at every width in
this range, including 640-959px where Divi's own default previously
happened to leave enough width for the dropdown panel by accident.
No !important anywhere below — confirmed via live testing (styles
injected as the last stylesheet in , matching how WordPress
already enqueues this child theme's CSS after Divi's own core CSS)
that plain declarations win on specificity/source-order alone; no
competing Divi rule was found for these specific properties. No
Theme Builder change — CSS-only, same two column elements and menu
module already targeted elsewhere in this file. */
@media (max-width: 959px) {
.eb-header .et_pb_column:first-child {
flex: 1 1 auto;
width: auto;
margin-bottom: 0;
}
.eb-header .et_pb_column:last-child {
flex: 0 0 auto;
width: auto;
margin-bottom: 0;
}
/* .et_pb_menu_inner_container and .et_pb_menu__wrap are Divi's own
wrappers around the toggle button — both shrink-to-content by
default, so without this the flex-end alignment below has nothing
to push against and the hamburger sits left of the column's real
right edge with unexplained dead space beside it. Stretching both
to 100% of the (now content-sized) column gives flex-end a real
boundary — confirmed the hamburger's own right edge lands exactly
on the column's right edge, flush with the header row's content
area, not the absolute viewport edge. */
.eb-header .et_pb_menu_inner_container,
.eb-header .et_pb_menu__wrap {
width: 100%;
}
.eb-header .et_mobile_nav_menu {
width: 100%;
justify-content: flex-end;
margin-right: 0;
}
/* Divi's real mobile dropdown panel (.et_mobile_menu) is
position:absolute; width:100% against its nearest positioned
ancestor (.et_pb_menu_inner_container). That ancestor is now
deliberately narrow (content-sized) at every width in this range,
so without this the dropdown panel would narrow to just the
toggle button's own width and every link would wrap word-by-word.
Fixed positioning escapes that ancestor's width entirely and
sizes against the viewport instead. top:76px matches the header's
own fixed height (.eb-header) exactly for a logged-out visitor
(no admin bar). */
.et_mobile_menu {
position: fixed;
top: 76px;
left: 0;
right: 0;
width: auto;
}
/* Logged-in only: WordPress's own admin bar becomes 46px tall below
782px (its own responsive breakpoint, separate from ours) and
pushes the whole page down via `html { margin-top }` — confirmed
live. .eb-header itself follows that push correctly (it's just
flowed, not fixed), but the hardcoded top:76px above assumes the
header starts at viewport y:0, so at this width it started 46px
too early and covered the header's own lower portion — including
the hamburger — with the black panel. --wp-admin--admin-bar--height
is WordPress's own custom property for this and was confirmed
live to compute correctly at this breakpoint (46px, matching the
real rendered #wpadminbar height exactly), so it's used directly
rather than a hardcoded value. Scoped to .admin-bar (WordPress
only adds this body class when logged in) so logged-out visitors
never see this offset at all. */
body.admin-bar .et_mobile_menu {
top: calc(76px + var(--wp-admin--admin-bar--height, 0px));
}
}
/* ---------- Global Footer ----------
Both rows (column grid + legal line) sit inside one .et-l--footer
wrapper, so the dark surface is set once there rather than repeated
per row. */
.et-l--footer {
background: var(--surface-pine);
color: var(--text-inverse);
}
/* The 2fr:1fr:1fr:1fr ratio below already matches the reference site's
own --eb-footer__grid exactly — the brand column was always meant to
be wider. What actually broke the layout: Divi's own .et_flex_column
ships a content-based width that fights CSS Grid's default item
stretch, so every column rendered far narrower than its track
(confirmed via computed styles: track 336px, rendered box 70px). The
width/min-width override below is the real fix — not a ratio change. */
.eb-footer {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-7);
padding: 72px var(--gutter) 40px;
}
.eb-footer > .et_pb_column {
width: 100% !important;
min-width: 0 !important;
}
.eb-footer__brand {
margin-bottom: var(--space-4);
}
.eb-footer__brand .eb-wordmark {
color: var(--text-inverse);
}
.eb-footer__mission {
color: var(--text-inverse-secondary);
font-size: 16px;
max-width: 300px;
}
.et-l--footer .et_pb_text_inner p {
display: flex;
flex-direction: column;
gap: 10px;
}
.et-l--footer .et_pb_text_inner p > a {
color: var(--text-inverse);
text-decoration: none;
font-size: var(--type-body-sm);
}
.et-l--footer .et_pb_text_inner p > a:hover {
color: var(--eb-sandstone);
}
.eb-footer__col-title {
font-size: 12px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-inverse-secondary);
}
.eb-footer__phone {
font-family: var(--font-display);
font-size: 24px;
letter-spacing: .02em;
}
.eb-footer__muted {
color: var(--text-inverse-secondary);
font-size: var(--type-caption);
}
.eb-footer__legal {
margin: 0 var(--gutter);
padding-top: 24px;
border-top: 1px solid var(--border-inverse);
font-size: var(--type-caption);
color: var(--text-inverse-secondary);
text-align: center;
}
/* Social icons (Font Awesome brand glyphs, delivered inline as SVG). */
.eb-social { display: flex; align-items: center; gap: 12px; margin-top: var(--space-5); }
.eb-social__link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--border-inverse);
border-radius: 50%;
color: var(--text-inverse-secondary);
transition: color .2s var(--ease-standard, ease), background-color .2s var(--ease-standard, ease), border-color .2s var(--ease-standard, ease);
}
.eb-social__link:hover,
.eb-social__link:focus-visible { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.eb-social__link svg { width: 17px; height: 17px; fill: currentColor; display: block; }
/* Responsive footer grid — these two breakpoints exist in the reference
(app/globals.css: @media max-width:959px and max-width:639px) but were
never ported here, so the 2fr:1fr:1fr:1fr ratio held at every width down
to real mobile viewports, confirmed via live measurement to wrap text
mid-word at 767px and 500px. Desktop ratio (.eb-footer above) is
untouched by these — they only apply below 959px. */
@media (max-width: 959px) {
.eb-footer {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 639px) {
.eb-footer {
grid-template-columns: 1fr;
gap: 36px;
}
}
/* Styles the one example shortcode partial (partials/starter/example-section.php)
renders — proves tokens defined upstream are actually consumed here.
Remove once real components replace it. */
.deadstop-example-section {
padding: var(--space-7) var(--gutter);
max-width: var(--container);
margin: 0 auto;
}
.deadstop-example-section h2 {
font-family: var(--font-display);
font-size: var(--type-display-sm);
color: var(--text-primary);
margin: 0;
}
/* ============================================================
HOMEPAGE — Section 1 (Hero) only. Per
clients/earnest-built/HOMEPAGE_IMPLEMENTATION_PLAN.md: one section at
a time, approved before the next. Sections 2+ do not exist yet.
============================================================ */
/* .eb-container is the reference's own content-width primitive
(app/globals.css; the Section component in components/ui.tsx wraps
every section's children in it). Confirmed absent from this theme:
the framework's .deadstop-container (utilities.css) bakes gutter
padding into the container, whereas the reference's .eb-container has
NO padding of its own — the hero relies on that (its content column
centers inside a padding-less 1280px container, gutter handled by the
content block's own padding). The reference's .eb-section primitive
is deliberately NOT ported here: its only job is section-level
padding (var(--section-y) var(--gutter)), which the hero overrides
entirely and does not need, and porting it would require adding the
--section-y token that no Hero rule consumes. Later sections that do
need .eb-section will add it (and the token) then, per the
one-section-at-a-time build. */
.eb-container {
max-width: var(--container);
margin: 0 auto;
}
/* .eb-display — the shared display-type utility the Hero's uses
(app/globals.css). Also confirmed absent from this theme entirely;
without it the H1 would render in the body font, not Bebas. */
.eb-display {
font-family: var(--font-display);
font-weight: 400;
line-height: var(--display-line);
letter-spacing: var(--display-tracking);
text-transform: uppercase;
margin: 0;
}
/* Divi wrapper neutralization for the Hero — scoped to ONLY the Divi
section that actually contains .eb-hero3 (via :has), so no other
page-body section, and nothing in the Theme Builder header/footer, is
touched. Confirmed via live DOM on dev.earnest-built.com: Divi wraps
the Code module in .et_pb_section (ships 54px top/bottom padding that
would inset the hero from the header and footer) inside a .et_pb_row
(ships max-width:1080px + width:80%, which was capping the full-bleed
photo at 1080px centered instead of spanning the viewport). Zeroing
the section padding and letting the row fill its full width is what
makes the hero's own full-bleed CSS actually reach the edges. No
!important needed — the :has-scoped selectors out-specify Divi's own
single-class rules (verified live). */
.et_pb_section:has(.eb-hero3) {
padding: 0;
}
.et_pb_section:has(.eb-hero3) .et_pb_row {
width: 100%;
max-width: 100%;
}
/* ---------- 1 · Hero (app/globals.css, components/HeroParallax.tsx) ----------
The reference pulls the section up by the header's own height
(margin-top: -76px; padding-top: 76px) so the full-bleed image can sit
behind a TRANSPARENT-on-load nav. That transparent-nav state is M6
(deferred, explicitly out of scope): WP's header is permanently solid
black, and the approved build direction is that the hero must begin
BELOW the solid header, not underneath it. So the reference's
negative-margin slide is deliberately NOT ported — the hero starts
flush below the header instead. min-height is the reference's own
value minus that 76px header-overlap allowance (reference:
calc(78svh + 76px) with 76px hidden under the nav → 78svh visible;
here: 78svh visible, no overlap), preserving the same visible hero
proportion. Verified live that the sticky header renders fully above
the hero with zero overlap at every tested width. */
.eb-hero3 {
position: relative;
min-height: 100svh;
box-sizing: border-box;
/* Reserve space for the fixed, transparent header so the bottom-anchored
statement never tucks under the nav on short viewports. */
padding-top: clamp(108px, 13vh, 148px);
padding-bottom: 56px;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
}
.eb-hero3 > .eb-container {
width: 100%;
}
.eb-hero3__media {
position: absolute;
inset: 0;
overflow: hidden;
}
.eb-hero3__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 44% 38%;
display: block;
transform: scale(1);
transform-origin: center;
will-change: transform;
}
.eb-hero3__wash {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(19, 30, 23, .1), rgba(19, 30, 23, .04) 40%, rgba(19, 30, 23, .55));
mix-blend-mode: multiply;
}
.eb-hero3__fade {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 140% 120% at 0% 0%, var(--eb-forest-shadow) 0%, var(--eb-forest-shadow) 35%, transparent 90%);
}
.eb-hero3__scrim {
position: absolute;
inset: auto 0 0 0;
height: 62%;
background: linear-gradient(180deg, transparent, var(--eb-forest-shadow) 90%);
}
.eb-hero3__content {
position: relative;
max-width: 700px;
/* Top spacing is handled by .eb-hero3 padding-top (header clearance). */
padding: 0 var(--gutter) 56px;
}
.eb-hero3__place {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-inverse-secondary);
margin: 0 0 22px;
}
.eb-hero3__statement {
font-size: clamp(42px, 5.6vw, 86px);
color: var(--text-inverse);
margin: 0 0 28px;
}
.eb-hero3__bridge {
font-family: var(--font-body);
font-style: italic;
font-size: var(--type-lead);
line-height: 1.5;
color: var(--text-inverse);
max-width: 440px;
margin: 0 0 34px;
}
.eb-hero3__actions {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
@media (max-width: 959px) {
.eb-hero3__img {
object-position: 40% 34%;
}
}
@media (max-width: 767px) {
.eb-hero3__img {
object-position: 37% 30%;
}
.eb-hero3__statement {
font-size: clamp(36px, 9.5vw, 58px);
}
.eb-hero3__content {
padding: 0 var(--gutter) 48px;
}
}
/* Hide the hero CTA wherever the sticky mobile conversion bar shows (<=959px),
so the two "Start a conversation" buttons aren't redundant on mobile/tablet. */
@media (max-width: 959px) {
.eb-hero3__actions {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.eb-hero3__img {
transition: none;
}
}
/* Bebas Neue 400 (self-hosted; matches the reference's next/font/google
Bebas_Neue weight 400 — the display face for .eb-display and all
.eb-hero3/.eb-philosophy display type). */
@font-face {
font-family: "Bebas Neue";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/bebas-neue-400.woff2") format("woff2");
}
/* HOMEPAGE — Section 3 (What We Do / Capabilities). Static build; idle
card-pulse and Reveal entrance are M6 motion, omitted — cards at rest.
Hover states kept (pure CSS). */
.et_pb_section:has(.eb-capabilities) { padding: 0; background-color: transparent; }
.et_pb_section:has(.eb-capabilities) .et_pb_row { width: 100%; max-width: 100%; padding: 0; }
.eb-capabilities { background: var(--eb-white); padding: 80px var(--gutter); }
.eb-capabilities__head { max-width: 640px; margin: 0 auto var(--space-8); text-align: center; }
.eb-close__rule { display: block; width: 32px; height: 2px; background: var(--accent); margin: 0 auto 20px; }
.eb-close__label { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 12px; }
.eb-capabilities__title { font-family: var(--font-body); font-weight: 800; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; color: var(--text-primary); margin: 0 0 16px; }
.eb-capabilities__intro { font-family: var(--font-body); font-size: var(--type-lead); color: var(--text-secondary); margin: 0; }
.eb-capabilities__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.eb-capability {
display: block;
background: var(--surface-tint);
border: 1px solid var(--border-subtle);
border-radius: 18px;
padding: 44px 28px;
height: 100%;
text-align: center;
text-decoration: none;
color: inherit;
transition: transform 400ms var(--ease-standard), border-color 400ms var(--ease-standard), box-shadow 400ms var(--ease-standard);
}
.eb-capability:hover {
transform: translateY(-6px) scale(1.015) skewY(-1.5deg);
border-color: var(--accent);
box-shadow: 0 20px 40px rgba(23, 21, 20, .1);
}
.eb-capability__icon { display: block; width: 40px; height: 40px; color: var(--text-secondary); margin: 0 auto 24px; transition: transform 400ms var(--ease-standard); }
.eb-capability__icon svg { width: 100%; height: 100%; display: block; }
.eb-capability:hover .eb-capability__icon { transform: scale(1.2); }
.eb-capability__title { font-family: var(--font-body); font-weight: 800; font-size: clamp(21px, 2.2vw, 25px); line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; justify-content: center; color: var(--text-primary); margin: 0 0 16px; }
.eb-capability__desc { font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; color: var(--text-secondary); margin: 0; }
@media (max-width: 959px) { .eb-capabilities__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .eb-capabilities__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
.eb-capability:hover { transform: none; }
.eb-capability:hover .eb-capability__icon { transform: none; }
}
/* HOMEPAGE — Section 2 (Stats + Philosophy). Motion (reveal/rule-grow/
value-scale) is M6-deferred; rendered in final settled state. */
.et_pb_section:has(.eb-philosophy) { padding: 0; background-color: transparent; }
.et_pb_section:has(.eb-philosophy) .et_pb_row { width: 100%; max-width: 100%; padding: 0; }
.eb-philosophy { position: relative; overflow: hidden; background: var(--surface-pine); padding: 72px var(--gutter); text-align: center; min-height: 68svh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.eb-philosophy__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 72px; row-gap: 32px; margin: 0 0 56px; }
.eb-stat__value { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--text-primary); }
.eb-stat__rule { width: 24px; max-width: 24px; height: 2px; background: var(--accent); margin: 10px 0; }
.eb-stat__label { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.eb-stat--inverse .eb-stat__value { color: var(--text-inverse); }
.eb-stat--inverse .eb-stat__label { color: var(--text-inverse-secondary); }
.eb-philosophy__stats .eb-stat { text-align: center; }
.eb-philosophy__stats .eb-stat__value { display: inline-block; }
.eb-philosophy__stats .eb-stat__rule { margin-left: auto; margin-right: auto; width: 32px; max-width: 32px; }
.eb-philosophy__statement { font-size: clamp(30px, 4.1vw, 68px); line-height: 1.2; letter-spacing: .012em; max-width: 920px; margin: 0 auto; color: var(--text-inverse); }
/* Oversized serif quotation marks in accent orange at 50%. The opening mark is a
decorative wrap pseudo-element at the top-left; the closing mark flows inline
right after the final period (.eb-philosophy__qmark) so it always sits just
after the last word at any viewport. The mark takes zero width so it never
shifts the centered statement. */
.eb-philosophy__quotewrap { position: relative; max-width: 920px; margin: 0 auto; }
.eb-philosophy__statement { position: relative; z-index: 1; }
.eb-philosophy__quotewrap::before {
content: "\201C";
position: absolute;
z-index: 0;
top: -0.15em;
left: -0.04em;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(6rem, 12vw, 11rem);
line-height: 1;
color: var(--accent);
opacity: .5;
pointer-events: none;
}
.eb-philosophy__qmark { display: inline-block; width: 0; }
.eb-philosophy__qmark::after {
content: "\201D";
position: relative;
top: 0.30em;
margin-left: 0.05em;
font-family: Georgia, "Times New Roman", serif;
font-size: 2.6em;
line-height: 0;
color: var(--accent);
opacity: .5;
white-space: nowrap;
pointer-events: none;
}
.eb-philosophy__rule { display: block; width: 32px; height: 2px; background: var(--accent); margin: 34px auto 0; }
.eb-philosophy__sig { font-family: var(--font-body); font-size: 15px; letter-spacing: .08em; color: var(--text-inverse-secondary); margin: 18px 0 0; }
@media (max-width: 639px) { .eb-philosophy__stats { gap: 40px; row-gap: 24px; margin-bottom: 40px; } }
/* HOMEPAGE — Section 4 (Meet Ernie). Full-bleed 2-col: grayscale
portrait bleeds to the left edge, text centered on the right. No
deferred motion in this section. */
.et_pb_section:has(.eb-record) { padding: 0; background-color: transparent; }
.et_pb_section:has(.eb-record) .et_pb_row { width: 100%; max-width: 100%; padding: 0; }
.eb-record { background: var(--eb-charcoal); color: var(--text-inverse); padding: clamp(72px, 10vw, 128px) 0 0; }
.eb-record > .eb-container { max-width: none; }
.eb-record__grid { display: grid; grid-template-columns: minmax(340px, 42%) 1fr; min-height: 700px; }
.eb-record__media { position: relative; height: 100%; overflow: hidden; }
.eb-record__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; filter: grayscale(1); }
/* Portrait plate: an editorial caption anchored to the photo (accent rule +
label + name), over a bottom gradient scrim so it stays legible on the image. */
.eb-record__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(18, 20, 19, .82), rgba(18, 20, 19, 0) 44%); }
.eb-record__plate { position: absolute; z-index: 2; left: clamp(24px, 3vw, 44px); bottom: clamp(24px, 3vw, 44px); }
.eb-record__plate-rule { display: block; width: 40px; height: 2px; background: var(--accent); margin: 0 0 14px; }
.eb-record__plate-label { font-family: var(--font-body); font-size: var(--type-eyebrow); font-weight: 600; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--eb-paper); margin: 0; }
.eb-record__plate-name { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 48px); line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: #fff; margin: 8px 0 0; }
.eb-record__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; padding: 64px var(--gutter) 64px clamp(48px, 6vw, 96px); }
.eb-record__anecdote { font-family: var(--font-body); font-size: clamp(24px, 2.8vw, 36px); line-height: 1.45; color: var(--text-inverse); margin: 0 0 var(--space-6); max-width: 27ch; }
.eb-record__caption { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.9; color: var(--text-inverse-secondary); margin: 0 0 var(--space-5); max-width: 520px; }
.eb-record__more { font-size: 15px; color: var(--text-inverse); text-decoration-color: var(--border-inverse); }
.eb-record__more:hover { color: var(--eb-sandstone); }
@media (max-width: 767px) {
.eb-record { padding: clamp(72px, 10vw, 128px) var(--gutter); }
.eb-record__grid { grid-template-columns: 1fr; min-height: 0; gap: var(--space-6); }
.eb-record__media { height: 420px; }
.eb-record__text { padding: 0; }
}
/* HOMEPAGE — Section 5 (The Decisions, In Order). Static; hover
dim/underline/color are pure CSS, kept. No deferred motion. */
.et_pb_section:has(.eb-decisions) { padding: 0; background-color: transparent; }
.et_pb_section:has(.eb-decisions) .et_pb_row { width: 100%; max-width: 100%; padding: 0; }
.eb-decisions { padding: clamp(72px, 10vw, 128px) var(--gutter); }
.eb-stages__label { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 24px; }
/* Section header — matches the "Our Services -> What We Do." pattern: centered
accent rule + eyebrow (.eb-close__rule / .eb-close__label) over a title styled
like .eb-capabilities__title. */
.eb-decisions__head { max-width: 640px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
.eb-decisions__title { font-family: var(--font-body); font-weight: 800; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; color: var(--text-primary); margin: 0; }
.eb-decisions__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-8); }
.eb-service-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 24px; align-items: baseline; padding: 26px 0; border-top: 1px solid var(--border-subtle); text-decoration: none; }
.eb-service-row__index { font-family: var(--font-display); font-size: 22px; color: var(--text-tertiary); transition: color var(--dur-fast); }
.eb-service-row:hover .eb-service-row__index { color: var(--accent); }
.eb-service-row__title { font-family: var(--font-display); font-size: 34px; line-height: .95; text-transform: uppercase; color: var(--text-primary); transition: color var(--dur-fast); display: block; }
.eb-service-row:hover .eb-service-row__title { color: var(--eb-cedar); }
.eb-service-row__desc { font-family: var(--font-body); font-size: 16px; color: var(--text-secondary); display: block; margin-top: 8px; max-width: 520px; }
.eb-service-row__arrow { font-family: var(--font-body); font-size: 20px; color: var(--text-secondary); transition: transform var(--dur-med) var(--ease-standard), color var(--dur-fast); }
.eb-service-row:hover .eb-service-row__arrow { color: var(--accent); transform: translateX(6px); }
.eb-decisions__list .eb-service-row { position: relative; transition: opacity var(--dur-med) var(--ease-standard); }
.eb-decisions__list .eb-service-row::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--accent); transition: width var(--dur-med) var(--ease-standard); }
.eb-decisions__list:hover .eb-service-row { opacity: .4; }
.eb-decisions__list .eb-service-row:hover { opacity: 1; }
.eb-decisions__list .eb-service-row:hover::after { width: 100%; }
@media (max-width: 767px) { .eb-decisions__list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
.eb-decisions__list .eb-service-row { transition: none; }
.eb-decisions__list:hover .eb-service-row { opacity: 1; }
}
/* HOMEPAGE — Section 6 (What We Look For On A Lot). Full-bleed two-zone:
photo strip + charcoal ground. Reveal stagger/turn-rule-grow and the
parallax scroll-zoom are M6 motion — rendered in final settled state
(notes as direct grid children, turn-rule at 40px, image at scale 1). */
.et_pb_section:has(.eb-realities) { padding: 0; background-color: transparent; }
.et_pb_section:has(.eb-realities) .et_pb_row { width: 100%; max-width: 100%; padding: 0; }
.eb-realities { position: relative; padding: 0; }
.eb-realities > .eb-container { max-width: none; }
.eb-realities__photo { position: relative; overflow: hidden; min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 44px var(--gutter); }
.eb-realities-photo__media { position: absolute; inset: 0; overflow: hidden; }
/* Scroll-zoom: JS (realities-zoom.js) sets scale() on scroll; static at scale 1
with no JS / reduced motion. transform-origin center keeps the crop steady. */
.eb-realities-photo__img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; display: block; transform: scale(1); transform-origin: center; will-change: transform; }
.eb-realities-photo__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,21,20,.62) 0%, rgba(19,21,20,.12) 42%, rgba(19,21,20,.12) 60%, rgba(19,21,20,.8) 100%); }
.eb-realities__title { position: relative; font-family: var(--font-display); font-size: clamp(40px, 6vw, 84px); line-height: .96; margin: 0 auto var(--space-5); color: var(--text-inverse); }
.eb-realities__intro { position: relative; font-family: var(--font-body); font-size: var(--type-lead); color: var(--text-inverse-secondary); margin: 0 auto; max-width: 420px; }
.eb-realities__ground { background: var(--eb-charcoal); text-align: center; padding: clamp(40px, 5vw, 60px) var(--gutter) clamp(48px, 6vw, 72px); }
.eb-realities__content { max-width: 1040px; margin: 0 auto; }
.eb-realities__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-8); row-gap: var(--space-5); }
.eb-realities__grid > .eb-realities__note:nth-child(2n) { margin-top: clamp(12px, 2vw, 24px); }
.eb-realities__line { font-family: var(--font-body); font-weight: 400; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--text-inverse); max-width: 34ch; margin: 0 auto; }
.eb-realities__caption { display: block; margin-top: 14px; font-family: var(--font-body); font-size: 12px; letter-spacing: .1em; color: var(--text-inverse-secondary); opacity: .65; }
.eb-realities__turn { max-width: 840px; margin: clamp(20px, 3vw, 36px) auto 0; }
.eb-realities__turn-rule { display: block; width: 40px; height: 2px; background: var(--accent); margin: 0 auto 20px; }
.eb-realities__line--turn { font-size: clamp(21px, 2.3vw, 27px); line-height: 1.4; max-width: 40ch; }
.eb-realities__payoff { font-family: var(--font-body); font-weight: 400; font-size: clamp(22px, 2.6vw, 31px); line-height: 1.35; color: var(--text-inverse); max-width: 42ch; margin: clamp(24px, 3.5vw, 44px) auto 0; }
@media (max-width: 767px) { .eb-realities__title { font-size: clamp(34px, 11vw, 48px); } }
@media (max-width: 639px) {
.eb-realities__grid { grid-template-columns: 1fr; row-gap: var(--space-6); }
.eb-realities__grid > .eb-realities__note:nth-child(2n) { margin-top: 0; }
}
/* HOMEPAGE — Section 7 (Questions clients actually ask). The reference
FAQ toggle is React state + a grid-rows open animation (M6/JS). To keep
it fully usable with NO JavaScript, it's built on native