and
lifted to 60, in lockstep with frannet-core.css. This copy is inlined into front-page.php
AFTER the core inherited global p color #242424 on navy (1.01:1); give footer body paragraphs the light footer text color. Excludes .phone/.disclaimer (kept as-is) and inline-styled copyright lines (inline color wins). */
footer p:not(.phone):not(.disclaimer){color:#c7d2e6}
/* WCAG-AA contrast: utility-bar links (#f6602d on #fff = 3.22:1, fails) -> deeper burnt-orange 5.3:1 */
.utility a{color:#c2410c}
/* AA: primary CTA red — white text on #fc2e37 (~3.9:1) fails; #d21f27 (~5.3:1) passes. All primary buttons. */
.et_pb_button_0,.et_pb_button_1,.et_pb_button_2,.franchisebtn{background-color:#d21f27!important;border-color:#d21f27!important}
.et_pb_button_0:hover,.et_pb_button_1:hover,.et_pb_button_2:hover,.franchisebtn:hover{background-color:#b91b22!important;border-color:#b91b22!important}
/* Heading-hierarchy mirrors: trio blurb headers moved h4->h2 (class-styled, unchanged look);
footer column headers h4->h2; mega-menu category labels h4->div.mega-h (no headings before H1). */
.mega .mega-h{font-size:.74rem;text-transform:uppercase;letter-spacing:1px;color:var(--blue);margin:0 0 12px;font-weight:700}
footer h2{color:#fff;font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.3}
/* Visible keyboard focus on interactive elements (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,summary:focus-visible,.et_pb_button:focus-visible{outline:3px solid #1a4fa3;outline-offset:2px}
/* Accessible video play control — replaces Divi's ETmodules glyph ( .et_pb_video_play::before content:"I" )
with a real holding an inline SVG. !important beats the 3-class bundle sizing rule. */
.fn-video-play::before{display:none!important}
.et_pb_video_play.fn-video-play{width:84px!important;height:84px!important;margin-left:-42px!important;margin-top:-42px!important;padding:0;border:0;background:none;cursor:pointer;font-size:0;line-height:0}
.fn-video-play svg{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 10px rgba(0,0,0,.45));transition:transform .15s ease}
.fn-video-play:hover svg{transform:scale(1.06)}
.fn-video-play:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:50%}
.et_pb_video_box.fn-playing + .et_pb_video_overlay,.et_pb_video_playing .et_pb_video_overlay{display:none}
/* Optimized watermark: AVIF (48KB) -> WebP (111KB) -> prod PNG fallback; explicit background-size
reproduces the original 1920x5721 render box so layout is unchanged despite the smaller file. */
body.page-id-2 article#post-2 .et-l.et-l--post .et_builder_inner_content::after{
background-image:url(https://frannet.com/wp-content/uploads/2022/04/homepagefullshapbg.png);
background-image:image-set(url(/wp-content/themes/frannet/assets/img/homepagefullshapbg.avif) type("image/avif"),url(/wp-content/themes/frannet/assets/img/homepagefullshapbg.webp) type("image/webp"));
background-size:1920px auto;
}
/* Optimized desktop hero couple (was 205KB PNG background -> 32KB AVIF); render box unchanged */
#herobanner1::after{
background-image:url(https://frannet.com/wp-content/uploads/2022/09/frannet-home-bg.png);
background-image:image-set(url(/wp-content/themes/frannet/assets/img/frannet-home-bg.avif) type("image/avif"),url(/wp-content/themes/frannet/assets/img/frannet-home-bg.webp) type("image/webp"));
}
/* ── Trio heading capitalize (1:1 with live) ────────────────────────────────
Restores live's text-transform:capitalize on the three #herobanner blurb
headers (Who / What / How). Live scopes capitalize to these blurb headers;
the CSS purge dropped it, so the literally-lowercase source word "what" was
rendering lowercase. Scoped to the 3 hero blurbs only — matches live's scope
and leaves Brokers/Advice/Journey headers (et_pb_text, transform:none) alone.
Verified in-browser on staging: renders "What", others unaffected, wins
specificity without !important. ─────────────────────────────────────────── */
#herobanner .et_pb_blurb .et_pb_module_header{text-transform:capitalize}
/* ── Header nav: never wrap (Divi parity). Root cause of the 1440px wrap: links
computed white-space:normal; the 1400px/285px header changes consumed the slack
masking it. Measured fit at 980-1720 with real scrollbars. ─────────────── */
.menu .links a,.menu .cta a,.has-mega>a{white-space:nowrap}
.mega-h{white-space:nowrap}
/* 961-1279px: squeeze band so nowrap cannot overflow (hamburger takes over ≤960).
Values measured to fit at 980 (was overflowing 226px): 14px links, 14px gaps,
210px logo, compact CTA buttons. */
/* ── Chrome responsive blocks — MUST stay at end of file: equal-specificity rules
resolve by source order, and these override the base chrome rules above.
(Cascade-order bug fixed 2026-07-16: base .hamburger{display:none} was declared
AFTER this media block, permanently killing the mobile hamburger.) ─────── */
@media(max-width:960px){.mega{display:none}}
@media(max-width:960px){.menu .links{display:none}.menu .cta{display:none}.utility{display:none}.hamburger{display:flex}}
@media(min-width:961px) and (max-width:1608px){
.menu{font-size:14px;gap:14px}
.menu .links{gap:14px}
.nav{gap:14px}
.nav .logo img{width:210px}
.menu .cta a{padding:8px 12px;font-size:13px}
}
/* ---------------------------------------------------------------------------
FIX 2026-07-16 — all four eyebrow links were 100% unclickable on desktop.
ROOT CAUSE (a pre-existing landmine, not new code):
The purged Divi Theme Options custom CSS contains, at ~offset 151642:
.et_builder_inner_content{position:static!important;z-index:0!important}
That kills the containing block for the decorative homepage watermark:
body.page-id-2 ... .et_builder_inner_content::after
{ content:""; position:absolute; top:4%; width:100%; height:100% }
With the wrapper forced static, that ::after resolves 4%/100% against the
VIEWPORT instead of its 4072px-tall parent. Result: an invisible,
transparent 1705x749 rectangle painted over the top of the page.
It is `position:absolute`, so it paints above the eyebrow purely by
painting order — positioned elements paint above non-positioned ones at
equal z-index. The eyebrow's entire ancestry (.utility > .wrap > a) is
position:static, so it loses without any z-index being involved.
This rule has been live for years. It never surfaced because Divi's old
header (#topmenusection, z-index:1000000) was positioned and painted above
it. The coded homepage replaced that with a static .utility div and stepped
on the landmine. Desktop only: the watermark is display:none <=980px, so
mobile was never affected. Homepage only: the ::after is scoped to
body.page-id-2, which is why /become-a-consultant/ hit-tests clean.
THE FIX: it is decoration. It must never be a click target.
pointer-events does not affect painting, so this moves zero pixels.
Deliberately NOT reverting position:static!important — that would resize
the watermark box 749px -> 4072px and re-crop a 1920x5721 image, i.e. a
real visual change to a years-old live rule.
Verified with document.elementFromPoint() at 375/768/960/1280/1440/1720.
--------------------------------------------------------------------------- */
body.page-id-2 article#post-2 .et-l.et-l--post .et_builder_inner_content::after{pointer-events:none}
/* ---------------------------------------------------------------------------
HOTFIX 2026-07-29 — post-Divi-removal regressions on the homepage.
The coded homepage still renders Divi's et_pb_* markup snapshots, and this file
still carries Divi's stylesheet snapshot. Two of those inherited rules only ever
worked because Divi's THEME assets were present. Both broke when Divi was removed.
(A) BUTTONS RENDERED RED-ON-RED.
Divi shipped the default button colour as
.et_pb_bg_layout_light.et_pb_module.et_pb_button{color:#fc2e37}
and relied on its JAVASCRIPT to add `et_pb_button_helper_class` to , which
activated the white-text rule
body.et_pb_button_helper_class .et_pb_button{color:#fff}
Divi's JS is gone, that body class is never added, so every button fell back to
red text (#fc2e37) sitting on the red background painted by
.et_pb_button_0,.et_pb_button_1,.et_pb_button_2,.franchisebtn
{background-color:#d21f27!important}
Fixing the colour rather than reinstating the class: the class was only ever a
Divi JS implementation detail, and nothing else depends on it.
(B) A LITERAL "5" APPEARED ON BUTTON HOVER.
Divi's arrow glyph is a private-use codepoint in its ETmodules icon font:
.et_pb_button::after{content:"5";font-family:ETmodules;opacity:0}
.et_pb_button:hover::after{opacity:1}
The @font-face for ETmodules in this file points at
core/admin/fonts/modules/all/modules.woff
which lived inside the DELETED Divi theme directory, so the font 404s and the
browser renders the raw character "5" on hover.
Same failure mode, same remedy as the video-play control fixed earlier in this
file: stop depending on ETmodules. Here the arrow is purely decorative next to a
text label, so it is removed outright rather than replaced — `content:none` plus
the padding reset that Divi's hover applied to make room for it.
NOT A BUG (checked, no change made): this file also carries
#qualitycandidates .et_pb_accordion_item.et_pb_toggle_open h5::after
{content:"2";font-family:ETmodules!important}
which would be the same literal-glyph failure — but `qualitycandidates` exists ONLY
inside the inlined