/*
Theme Name: MMM — JH
Theme URI: https://matchmarketing.ai
Description: GeneratePress child theme — Law Office of James M. Hoffmann (MMM 2.0, First Light generation). Built on the dev copy for the 2026 accepted-claim reframe; replaces the live hoffmannworkcomp.com theme at cutover.
Author: MatchMarketing™
Template: generatepress
Version: 1.0.0-JH
============================================================
TABLE OF CONTENTS
============================================================
1. FONTS (Fraunces display + Public Sans UI, self-hosted variable)
2. TOKENS — JH (navy / action blue / consultation green)
3. BASE
4. TYPOGRAPHY (Fraunces display, Public Sans UI)
5. LINKS
6. HEADER (base)
7. NAVIGATION (base)
8. BUTTONS
9. FORMS (base)
10. CONTENT SPACING / ALIGNFULL (flush pages + reading measure)
11. UTILITIES
11b. TRUST STRIP (reusable block sitewide override — legacy pages)
11c. CONTACT PAGE (card + map embed)
12. FOOTER (base — GP widget footer)
13. MOBILE STICKY CTA
14. UTILITY BAR
15. SECTION HELPERS
16. HERO BAND (base, reusable across pages)
17. CONSULT CARD (hero right column)
18. TRUST BAR (homepage, between hero and services)
19. PRACTICE AREAS (homepage, claim issue cards)
20. PROMISE PILLARS (homepage, 4 stats)
21. CLAIM ISSUES TRACK (homepage, denied/IME/retaliation/etc.)
22. HOW IT WORKS (homepage, 3 numbered steps)
23. RESULTS / CASE WINS (homepage, factual results strip)
24. REVIEWS (homepage, score + 3 cards)
25. SERVICE AREA (homepage, copy + map)
26. FAQ (homepage, details/summary accordion)
27. FINAL CTA (reusable closer band)
28. TRUST STRIP (reusable 4-icon component, light bg)
29. HEADER RESTYLE (JH custom)
30. FORMINATOR FORMS (universal)
31. CUSTOM FOOTER (.mm-footer hooked element)
32. HORIZON DIVIDER (First Light signature rule, blue)
33. ACCENT LINE (Fraunces italic, First Light register)
34. CARDS (image-top .mm-card system, First Light contract)
35. ATTORNEY BAND (.mm-atty, homepage/About)
36. DARK-BAND LINK COLOR (links in navy band body text)
============================================================
1.0.0-JH CHANGELOG (lineage: JH MMM 2.0 stylesheet + HLF First
Light 4.0.5 adoption — new mmm-jh child theme for the reframe)
- Folder renamed mmm-jh (per Child Theme Adaptation SOP);
fresh theme_mods namespace, fresh changelog. All JH machinery
carried forward unchanged: §10 flush-page + reading-measure
system, §11b live trust-strip UID override, §29 JH header
(nav-below-header, centered white logo on navy, multi-column
dropdowns), §30 Forminator skin, both footers.
- FONTS: Source Sans 3 / Roboto replaced by Fraunces (display)
+ Public Sans (UI), the four self-hosted VARIABLE woff2 from
the HLF First Light kit (carried over per Chris 2026-08-18).
Copy the four files from mmm-hlf/fonts/ into mmm-jh/fonts/
BEFORE activating; old static SS3/Roboto woff2 can be deleted.
@font-face src URLs are root-absolute to mmm-jh (FlyingPress
inlining requirement — do not make relative).
- §4: Fraunces carries h1, h2, .display, .mm-serif at weight
600 (JH sizes are smaller than HLF, so 600 not 560); Public
Sans carries body, UI, h3-h6, buttons. Display numerals
(pillars, results, review score, hero trust) recut to
Fraunces 600. FAQ summaries recut to Fraunces 500 (First
Light register). Header phone number stays Public Sans
(functional number, Brandon ruling).
- §2: new tokens --mm-blue-on-dark (was 28 scattered #dde8f5
literals, all replaced with the var), --mm-radius /
--mm-radius-lg / --mm-radius-pill (new sections consume
them; legacy literals converge when touched).
- NEW §32-§36 ported from HLF First Light and retinted to JH:
horizon divider (action blue), accent-line pattern (Fraunces
italic), image-top .mm-card contract, .mm-atty attorney
band, dark-band link color (blue-on-dark + underline).
============================================================
*/
/* ============================================================
1. FONTS — self-hosted VARIABLE woff2 (First Light kit,
carried over from HLF per Chris 2026-08-18)
Files live in /fonts/ inside this child theme
(/wp-content/themes/mmm-jh/fonts/):
fraunces-latin-full-normal.woff2
fraunces-latin-full-italic.woff2
public-sans-latin-wght-normal.woff2
public-sans-latin-wght-italic.woff2
Root-absolute src URLs: FlyingPress inlines used CSS into
the page; relative url('fonts/…') then resolves against the
page URL and every @font-face silently drops. Absolute
paths survive inlining. Do not make these relative.
Fraunces = display/brand (H1, H2, .display, accent lines,
serif moments). Public Sans = UI + body.
============================================================ */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/wp-content/themes/mmm-jh/fonts/fraunces-latin-full-normal.woff2') format('woff2-variations');
}
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('/wp-content/themes/mmm-jh/fonts/fraunces-latin-full-italic.woff2') format('woff2-variations');
}
@font-face {
font-family: 'Public Sans';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/wp-content/themes/mmm-jh/fonts/public-sans-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
font-family: 'Public Sans';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('/wp-content/themes/mmm-jh/fonts/public-sans-latin-wght-italic.woff2') format('woff2-variations');
}
/* ============================================================
2. TOKENS — JH
Brand: navy + action blue + consultation green. Calm, professional.
============================================================ */
:root {
--mm-brand: #304c7b; /* JH primary navy */
--mm-brand-hover: #243a60;
--mm-brand-2: #3a5d96; /* JH action blue */
--mm-brand-2-hover: #2e4a7a;
--mm-brand-3: #5d876f; /* consultation green */
--mm-brand-3-hover: #4f7460;
--mm-ink: #1f2937;
--mm-muted: #667085;
--mm-chrome: #ffffff;
--mm-surface: #f6f9fc;
--mm-surface-2: #e8eff7;
--mm-line: #dde6f0;
--mm-line-strong: #cfd9e5;
--mm-focus: #3a5d96;
--mm-blue-on-dark: #dde8f5; /* light blue — accents/links on navy bands */
--mm-radius: 10px; /* JH soft radius system (10-16px) */
--mm-radius-lg: 16px;
--mm-radius-pill: 999px;
/* GeneratePress token mapping */
--accent: var(--mm-brand-2);
--contrast: var(--mm-ink);
--contrast-2: var(--mm-muted);
--base: var(--mm-chrome);
--base-2: #ffffff;
--base-3: #ffffff;
}
/* ============================================================
3. BASE
============================================================ */
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scrollbar-gutter: stable;
}
body {
font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
color: var(--mm-ink);
background: var(--mm-chrome);
line-height: 1.65;
accent-color: var(--mm-brand-2);
}
/* ============================================================
4. TYPOGRAPHY
Mobile-first type ramp. H2 is always visibly smaller than H1.
Sizes scale up at 768px and 1024px breakpoints.
Sitewide font-size ladder (mobile -> desktop):
H1 30px -> 44px
H2 22px -> 30px
H3 19px -> 22px
H4 17px -> 18px
P 16px -> 17px (body default)
lede 18px -> 22px
============================================================ */
h1, h2, h3, h4, h5, h6,
.site-title, .main-title,
.button, .wp-block-button__link {
font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
/* First Light register: Fraunces carries H1, H2, .display and any
.mm-serif moment; Public Sans carries H3-H6, UI, buttons. */
h1, h2,
.display, h1.display, h2.display,
.mm-serif {
font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
}
h1 {
color: var(--mm-ink);
font-weight: 600;
font-size: 30px;
line-height: 1.15;
letter-spacing: -0.015em;
margin: 0 0 0.5em;
}
h2 {
color: var(--mm-brand);
font-weight: 600;
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.01em;
margin: 1.4em 0 0.5em;
}
h3 {
color: var(--mm-brand);
font-weight: 700;
font-size: 19px;
line-height: 1.25;
letter-spacing: -0.005em;
margin: 1.4em 0 0.5em;
}
h4 {
color: var(--mm-brand);
font-weight: 700;
font-size: 17px;
line-height: 1.3;
margin: 1.3em 0 0.4em;
}
h5, h6 {
color: var(--mm-brand);
font-weight: 700;
font-size: 15px;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 1.2em 0 0.4em;
}
@media (min-width: 768px) {
h1 {
font-size: 38px;
}
h2 {
font-size: 26px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 18px;
}
}
@media (min-width: 1024px) {
h1 {
font-size: 44px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 22px;
}
}
/* The .display utility is for hero/section-head headlines that should
render larger than the body ramp. Keep this opt-in via class. */
.display, h1.display, h2.display {
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.06;
}
p, li {
color: var(--mm-ink);
font-size: 16px;
line-height: 1.65;
}
@media (min-width: 768px) {
p, li {
font-size: 17px;
}
}
/* Lede / large-paragraph styling. Use this for hero subtitles or
intro paragraphs sitting just below an H1. */
.mm-lede,
.has-large-font-size {
font-size: 18px;
line-height: 1.55;
color: var(--mm-muted);
font-weight: 400;
}
@media (min-width: 768px) {
.mm-lede,
.has-large-font-size {
font-size: 22px;
}
}
small, .has-small-font-size {
color: var(--mm-muted);
}
/* ============================================================
5. LINKS
============================================================ */
a {
color: var(--mm-brand-2);
text-decoration: none;
transition: color 160ms ease;
}
a:hover, a:focus {
color: var(--mm-brand);
}
:focus-visible {
outline: 2px solid var(--mm-focus);
outline-offset: 2px;
}
/* ============================================================
6. HEADER (base — see Section 29 for JH restyle)
============================================================ */
.site-header {
background: var(--mm-chrome);
}
.site-logo img {
display: block;
max-width: 100%;
height: auto;
}
/* ============================================================
7. NAVIGATION (base — see Section 29 for JH restyle)
============================================================ */
.main-navigation,
.main-navigation ul ul {
background: var(--mm-chrome);
border: 0;
box-shadow: none;
}
.main-navigation .main-nav ul li > a,
.main-navigation .menu-bar-items {
color: var(--mm-brand);
font-weight: 600;
}
/* Hover/current state rules live in Section 29 (header restyle), where the
specificity is bumped to beat GP's inline :not([class*="current-menu-"])
customizer rule. Removing the lower-specificity rule that used to sit
here avoids two rules fighting over the same property. */
.main-navigation .menu-toggle {
color: var(--mm-brand);
background: transparent;
border: 0;
}
.main-navigation ul ul {
border: 1px solid var(--mm-line);
}
/* ============================================================
8. BUTTONS
JH keeps soft 10px radius (calm, professional — not industrial).
Primary = action blue. Secondary (.is-secondary) = consultation green.
============================================================ */
.button,
.wp-block-button__link,
button,
input[type="submit"] {
background: var(--mm-brand-2);
border: 1px solid var(--mm-brand-2);
color: #fff;
border-radius: 10px;
padding: 0.75em 1.2em;
font-weight: 600;
line-height: 1.1;
text-decoration: none;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
background: var(--mm-brand);
border-color: var(--mm-brand);
color: #fff;
}
.is-style-outline .wp-block-button__link,
.button.button-outline {
background: transparent;
border-color: var(--mm-line-strong);
color: var(--mm-brand);
}
.is-style-outline .wp-block-button__link:hover,
.button.button-outline:hover {
background: var(--mm-surface);
border-color: var(--mm-brand-2);
color: var(--mm-brand);
}
.button.is-secondary,
.wp-block-button.is-secondary .wp-block-button__link {
background: var(--mm-brand-3);
border-color: var(--mm-brand-3);
color: #fff;
}
.button.is-secondary:hover,
.wp-block-button.is-secondary .wp-block-button__link:hover {
background: var(--mm-brand-3-hover);
border-color: var(--mm-brand-3-hover);
color: #fff;
}
.wp-block-button__link .mm-icon,
.button .mm-icon {
width: 1em;
height: 1em;
margin-right: 0.5em;
vertical-align: -0.125em;
display: inline-block;
}
.wp-block-button.mm-btn-lg .wp-block-button__link,
a.button.mm-btn-lg {
padding: 16px 28px;
font-size: 15px;
}
/* ============================================================
9. FORMS (base — see Section 30 for Forminator overrides)
============================================================ */
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="search"], input[type="number"],
input[type="date"], select, textarea {
background: #fff;
border: 1px solid var(--mm-line-strong);
border-radius: 10px;
color: var(--mm-ink);
font-family: inherit;
box-shadow: none;
}
input::placeholder, textarea::placeholder {
color: var(--mm-muted);
}
input:focus, select:focus, textarea:focus {
border-color: var(--mm-brand-2);
outline: none;
}
/* ============================================================
10. CONTENT SPACING / ALIGNFULL
IMPORTANT: do NOT re-add padding to .site-content, .entry-content,
.inside-article, or .site-main — GP defaults create a 34px gap below
the header that breaks full-bleed bands.
============================================================ */
/* Alignfull works everywhere — that part is universal. */
.no-sidebar .entry-content .alignfull,
.entry-content > .alignfull {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: 100vw;
width: 100vw;
}
/* ---------- FLUSH PAGES (homepage and custom-built landing pages) ----------
Strip all default GP padding so .alignfull hero bands can sit flush
against the header. Opt-in via body.home, body.page-id-6, or by adding
the class `mm-flush-page` to a page (via the Page block editor sidebar:
Advanced > Additional CSS Class) when building a fully custom layout. */
body.home .site-content,
body.page-id-6 .site-content,
body.mm-flush-page .site-content,
body.home .site-main,
body.page-id-6 .site-main,
body.mm-flush-page .site-main,
body.home .inside-article,
body.page-id-6 .inside-article,
body.mm-flush-page .inside-article,
body.home .entry-content,
body.page-id-6 .entry-content,
body.mm-flush-page .entry-content {
padding: 0;
margin: 0;
}
/* ---------- REGULAR CONTENT PAGES (posts, standard pages, archives) ----------
Restore sensible vertical breathing room between the nav bar and the H1,
plus a comfortable reading column width. GP's `one-container` layout
wraps everything in .grid-container.container which already caps width
at ~1200px by default; we add inner padding so content doesn't kiss the
container edge on tablets. */
body:not(.home):not(.page-id-6):not(.mm-flush-page) .inside-article {
padding: 48px clamp(20px, 4vw, 56px) 64px;
}
/* Reading-measure cap, WordPress block-editor style:
- Default text blocks (p, h2, h3, ul, ol, blockquote, native headings,
plain images) cap to ~820px and center, so prose stays readable.
- .alignwide breaks out to ~1100px.
- .alignfull, wp-block-columns, gb-container, gb-grid-wrapper, and
anything aligned wide/full keep their full width — these are the
blocks that NEED room (two-column case-results layouts, hero strips,
CTAs that span edge-to-edge).
Applies only on regular content pages; flush pages keep full width. */
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > p:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > h1:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > h2:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > h3:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > h4:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > h5:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > h6:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > ul:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > ol:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > blockquote:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > figure:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .wp-block-image:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .wp-block-paragraph:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .wp-block-heading:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .wp-block-list:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .wp-block-quote:not(.alignwide):not(.alignfull) {
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
/* .alignwide gets a slightly wider cap. */
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .alignwide {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
/* .alignfull escapes the container entirely. */
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .alignfull {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: 100vw;
width: 100vw;
}
/* Multi-column / GenerateBlocks layouts span the full container — these
are the layouts where the page author has already decided on width via
GB. Do not cap them. */
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .wp-block-columns,
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .gb-container,
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .gb-grid-wrapper,
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .wp-block-group {
max-width: none;
width: 100%;
}
/* Hide the post header/footer block ONLY on pages that build their own
header inside a GenerateBlocks hero (homepage and other custom-built
landing pages). Blog posts and standard pages keep .entry-header so
their titles render normally. Add the body class `mm-no-entry-header`
(or the broader `mm-flush-page`) to any other page you build with a
custom hero. */
body.home .entry-header,
body.page-id-6 .entry-header,
body.mm-no-entry-header .entry-header,
body.mm-flush-page .entry-header,
body.home .entry-footer,
body.page-id-6 .entry-footer,
body.mm-no-entry-header .entry-footer,
body.mm-flush-page .entry-footer {
display: none !important;
}
/* When .entry-header IS present (blog posts), give it room to breathe
from the surrounding content. The title sits inside .entry-header > h1,
and post meta (date, author, etc.) typically follows. The entry-header
itself sits in the reading column. */
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-header {
max-width: 820px;
margin: 0 auto 28px;
}
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-header .entry-title {
margin: 0 0 12px;
/* Typography (size, color, weight, line-height) comes from the
Section 4 type ramp. Only layout/spacing overrides here. */
}
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-meta {
font-size: 13px;
color: var(--mm-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-meta a {
color: var(--mm-muted);
}
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-meta a:hover {
color: var(--mm-brand-2);
}
/* When the H1 is inside .entry-content as a Gutenberg block (the ACL Tear
page pattern: ), make sure it gets the
reading-column cap and the spacing below it without duplicating the
Section 4 typography ramp. */
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > h1.wp-block-heading,
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > h1 {
margin: 0 auto 28px;
max-width: 820px;
}
@media (max-width: 768px) {
.gb-grid-wrapper > .gb-grid-column {
padding-left: 0 !important;
padding-right: 0 !important;
}
body:not(.home):not(.page-id-6):not(.mm-flush-page) .inside-article {
padding: 32px clamp(16px, 4vw, 24px) 48px;
}
}
/* ============================================================
11. UTILITIES
============================================================ */
.mm-muted {
color: var(--mm-muted);
}
.mm-surface {
background: var(--mm-surface);
border: 1px solid var(--mm-line);
border-radius: 16px;
}
.mm-surface-dark {
background: var(--mm-brand);
color: #fff;
border-radius: 16px;
}
.mm-surface-dark h1,
.mm-surface-dark h2,
.mm-surface-dark h3,
.mm-surface-dark h4,
.mm-surface-dark h5,
.mm-surface-dark h6 {
color: #fff;
}
.mm-surface-dark a {
color: var(--mm-blue-on-dark);
}
/* ============================================================
11b. TRUST STRIP — sitewide reusable block override
The "30 YEARS EXPERIENCE / OVER $100 MILLION COLLECTED / ONLY WORK COMP"
trust strip is a single Reusable Block dropped onto every injury page.
Its outer container UID is gb-container-d7892f0a. The block is authored
as 3 inline-flex containers in a row, which falls apart on mobile and
has too much horizontal padding on desktop.
We override the layout entirely with CSS, scoped to the reusable block's
unique container ID so we don't affect other GB containers anywhere.
Goal: equal-width 3-up on desktop/tablet, stacked rows on mobile.
============================================================ */
.gb-container.gb-container-d7892f0a {
margin: 40px 0 !important;
padding: 28px clamp(16px, 3vw, 32px) !important;
background: var(--mm-surface);
border: 1px solid var(--mm-line);
border-radius: 16px;
}
/* Inner row container (gb-container-c66e5d4a is the flex parent of the
three items). Force grid layout that works on all viewports. */
.gb-container.gb-container-d7892f0a .gb-container-c66e5d4a {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px 24px;
align-items: center;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
}
/* Each of the three items (2d72d42e, 5d3c6a6c, e4e270ba). Strip the
inline-flex pill styling and convert to a clean stacked cell. */
.gb-container.gb-container-d7892f0a .gb-container-2d72d42e,
.gb-container.gb-container-d7892f0a .gb-container-5d3c6a6c,
.gb-container.gb-container-d7892f0a .gb-container-e4e270ba {
display: flex !important;
align-items: center;
justify-content: center;
padding: 0 !important;
margin: 0 !important;
text-align: center;
min-width: 0;
}
/* Inner headline blocks (the actual ). Reset all
the inline padding and border-right dividers — we use grid gap instead. */
.gb-container.gb-container-d7892f0a .gb-headline {
margin: 0 !important;
padding: 8px 12px !important;
border: 0 !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 15px !important;
font-weight: 700;
color: var(--mm-brand) !important;
line-height: 1.25;
text-align: left;
text-transform: uppercase;
letter-spacing: 0.02em;
width: 100%;
}
/* The checkmark icon. Force a consistent size and brand-3 (green) color
to read as "verified/trust" instead of generic. */
.gb-container.gb-container-d7892f0a .gb-headline .gb-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
color: var(--mm-brand-3);
display: inline-flex;
align-items: center;
justify-content: center;
}
.gb-container.gb-container-d7892f0a .gb-headline .gb-icon svg {
width: 22px;
height: 22px;
}
/* The headline text span. Strip the inner visual since the
block already styles bold via font-weight. Allows long labels to wrap
on narrow viewports. */
.gb-container.gb-container-d7892f0a .gb-headline-text {
font-weight: 700;
flex: 1;
min-width: 0;
}
.gb-container.gb-container-d7892f0a .gb-headline-text strong {
font-weight: inherit;
}
/* Tablet: keep 3-up but shrink type/padding so labels don't truncate. */
@media (max-width: 900px) {
.gb-container.gb-container-d7892f0a .gb-container-c66e5d4a {
gap: 10px 12px;
}
.gb-container.gb-container-d7892f0a .gb-headline {
font-size: 13px !important;
padding: 8px 6px !important;
gap: 8px;
flex-direction: column;
text-align: center;
}
.gb-container.gb-container-d7892f0a .gb-headline .gb-icon {
width: 24px;
height: 24px;
}
.gb-container.gb-container-d7892f0a .gb-headline .gb-icon svg {
width: 24px;
height: 24px;
}
}
/* Mobile: stack 1-per-row, icon-left layout, divider lines between. */
@media (max-width: 600px) {
.gb-container.gb-container-d7892f0a {
margin: 24px 0 !important;
padding: 8px 16px !important;
}
.gb-container.gb-container-d7892f0a .gb-container-c66e5d4a {
grid-template-columns: 1fr;
gap: 0;
}
.gb-container.gb-container-d7892f0a .gb-container-2d72d42e,
.gb-container.gb-container-d7892f0a .gb-container-5d3c6a6c,
.gb-container.gb-container-d7892f0a .gb-container-e4e270ba {
justify-content: flex-start;
padding: 14px 0 !important;
border-bottom: 1px solid var(--mm-line);
}
.gb-container.gb-container-d7892f0a .gb-container-e4e270ba {
border-bottom: 0;
}
.gb-container.gb-container-d7892f0a .gb-headline {
flex-direction: row;
justify-content: flex-start;
font-size: 14px !important;
padding: 0 !important;
text-align: left;
}
}
/* Classic-theme group wrapper pass-through: restores direct-child contracts on flush pages */
body.home .wp-block-group__inner-container,
body.page-id-6 .wp-block-group__inner-container,
body.mm-flush-page .wp-block-group__inner-container {
display: contents;
}
/* §10 addendum: flush single posts (Phase 2 nav-page pass) — hide post furniture. */
body.mm-flush-page.single .entry-footer,
body.mm-flush-page.single footer.entry-meta,
body.mm-flush-page.single .post-navigation,
body.mm-flush-page.single nav.post-navigation {
display: none;
}
/* ============================================================
11c. CONTACT PAGE — card + map embed
Lightweight styles for the contact page rewrite. The contact-card
sits in the right column with a soft surface treatment; the map
embed below the form gets a rounded frame.
============================================================ */
.mm-contact-card {
background: var(--mm-surface) !important;
border: 1px solid var(--mm-line);
border-radius: 16px !important;
}
.mm-contact-card .wp-block-separator {
border: 0;
border-top: 1px solid var(--mm-line);
background: transparent;
height: 0;
opacity: 1;
}
.mm-contact-card a {
color: var(--mm-brand);
}
.mm-contact-card a:hover {
color: var(--mm-brand-2);
}
.mm-map-embed {
border-radius: 12px;
overflow: hidden;
background: var(--mm-surface);
/* Maintain aspect ratio if iframe height attribute is missing */
min-height: 320px;
}
.mm-map-embed iframe {
display: block;
width: 100%;
border: 0;
border-radius: 12px;
}
/* ============================================================
12. FOOTER — 4-column grid (sitewide)
The footer uses GP-native widget areas (Footer Widget 1 through 4).
Each widget area becomes a single column in a 4-column grid on desktop,
collapsing to 2 columns on tablet and 1 column on mobile.
To populate:
WP Admin > Appearance > Widgets > Footer Widget 1
Add a Custom HTML widget with the markup from the footer-widgets/
reference file. Repeat for areas 2, 3, and 4.
Layout:
Col 1: Firm identity, NAP, phone CTA, "Available 24/7"
Col 2: Practice Areas (top injury types — high-intent landing pages)
Col 3: Claim Help (denied claim, IME/MMI, retaliation, etc.)
Col 4: About + Quick Links (James, Case Results, Blog, Contact)
Below the columns:
- Service area row (St. Louis + rotating MO cities)
- Copyright row (year + privacy + terms)
- Legal disclaimer (attorney advertising)
============================================================ */
.site-footer {
background: var(--mm-brand);
color: rgba(247, 250, 252, 0.72);
border-top: 0;
}
.footer-widgets {
background: var(--mm-brand);
color: rgba(247, 250, 252, 0.72);
padding: 64px 0 48px;
/* Subtle radial wash echoing the hero band — gives the footer presence
without being heavy. */
position: relative;
overflow: hidden;
}
.footer-widgets::before {
content: "";
position: absolute;
top: 0;
right: -300px;
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(58, 93, 150, 0.25), transparent 60%);
pointer-events: none;
}
.footer-widgets-container {
max-width: 1240px;
margin-inline: auto;
padding-inline: clamp(20px, 4vw, 48px);
position: relative;
z-index: 1;
}
/* The 4-column grid. GP's default flex layout for widget areas is replaced
with grid for predictable behavior. The Col 1 (firm identity) is given
slightly more horizontal space because it carries the NAP + phone CTA. */
.footer-widgets .inside-footer-widgets {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 40px 32px;
max-width: none;
padding: 0;
}
/* Each footer widget area is one grid cell. Reset GP's default widget
area styling. */
.footer-widgets [class*="footer-widget-"] {
padding: 0;
margin: 0;
}
.footer-widgets .widget {
background: transparent;
border: 0;
padding: 0;
margin: 0 0 20px;
}
.footer-widgets .widget:last-child {
margin-bottom: 0;
}
/* Widget titles + H4/H5 headings inside widgets. Used as column headers. */
.footer-widgets .widget-title,
.footer-widgets h4,
.footer-widgets h5,
.footer-widgets .mm-footer-col-title {
font-family: 'Public Sans', sans-serif;
font-weight: 700;
font-size: 12px;
color: var(--mm-chrome);
text-transform: uppercase;
letter-spacing: 0.12em;
margin: 0 0 20px;
line-height: 1.3;
}
/* Body copy in widgets */
.footer-widgets p,
.footer-widgets li,
.footer-widgets span,
.footer-widgets address {
color: rgba(247, 250, 252, 0.72);
font-size: 14px;
line-height: 1.65;
font-style: normal;
}
.footer-widgets p {
margin: 0 0 10px;
}
.footer-widgets p:last-child {
margin-bottom: 0;
}
.footer-widgets ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-widgets li {
padding: 5px 0;
}
.footer-widgets a {
color: rgba(247, 250, 252, 0.85);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-widgets a:hover {
color: var(--mm-blue-on-dark);
}
.footer-widgets strong {
color: var(--mm-chrome);
font-weight: 700;
}
/* --- Firm identity column helpers (Col 1) --- */
.footer-widgets .mm-footer-firm-name {
font-family: 'Public Sans', sans-serif;
font-weight: 700;
font-size: 17px;
color: var(--mm-chrome);
line-height: 1.25;
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.footer-widgets .mm-footer-tagline {
font-size: 13px;
color: var(--mm-blue-on-dark);
letter-spacing: 0.06em;
text-transform: uppercase;
margin: 0 0 22px;
font-weight: 600;
}
.footer-widgets .mm-footer-nap {
margin: 0 0 22px;
font-size: 14.5px;
line-height: 1.7;
color: rgba(247, 250, 252, 0.85);
}
.footer-widgets .mm-footer-phone {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(247, 250, 252, 0.15);
border-radius: 12px;
padding: 12px 18px;
margin: 0 0 14px;
color: var(--mm-chrome);
font-family: 'Public Sans', sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: -0.01em;
line-height: 1;
transition: background 0.2s, border-color 0.2s;
}
.footer-widgets .mm-footer-phone:hover {
background: rgba(255, 255, 255, 0.12);
border-color: var(--mm-blue-on-dark);
color: var(--mm-chrome);
}
.footer-widgets .mm-footer-phone-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--mm-blue-on-dark);
}
.footer-widgets .mm-footer-availability {
font-size: 13px;
color: rgba(247, 250, 252, 0.7);
margin: 0;
}
.footer-widgets .mm-footer-availability strong {
color: var(--mm-blue-on-dark);
display: inline-flex;
align-items: center;
gap: 6px;
}
.footer-widgets .mm-footer-availability strong::before {
content: "";
width: 8px;
height: 8px;
background: #5d876f;
border-radius: 50%;
display: inline-block;
}
/* --- Column list helpers (Cols 2, 3, 4) --- */
.footer-widgets .mm-footer-view-all {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 12px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--mm-blue-on-dark);
}
.footer-widgets .mm-footer-view-all:hover {
color: var(--mm-chrome);
gap: 8px;
}
/* --- Service area stub (sits at top of .site-info, or anywhere in footer) ---
Self-contained max-width + centering so it renders correctly regardless
of how GP wraps the customizer copyright HTML. */
.mm-footer-service-area-stub {
text-align: center;
padding: 22px clamp(20px, 4vw, 48px);
margin: 0 auto;
max-width: 1240px;
font-size: 14px;
color: rgba(247, 250, 252, 0.75);
line-height: 1.6;
border-bottom: 1px solid rgba(247, 250, 252, 0.08);
}
.mm-footer-service-area-stub strong {
color: var(--mm-blue-on-dark);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 12px;
display: block;
margin-bottom: 6px;
font-weight: 700;
}
/* When the stub IS nested inside .site-info, drop the padding/border
since site-info already provides outer padding and the copyright bar
provides the next divider. */
.site-info .mm-footer-service-area-stub {
padding: 0 0 22px;
margin: 0 0 18px;
max-width: none;
}
/* --- Site-info row (copyright + legal disclaimer) --- */
.site-info {
background: var(--mm-brand-hover);
color: rgba(247, 250, 252, 0.55);
padding: 24px 0 28px;
border-top: 1px solid rgba(247, 250, 252, 0.08);
font-size: 13px;
}
.site-info .inside-site-info {
max-width: 1240px;
margin-inline: auto;
padding-inline: clamp(20px, 4vw, 48px);
text-align: center;
}
.site-info .copyright-bar {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 8px 20px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(247, 250, 252, 0.08);
margin-bottom: 14px;
}
.site-info .copyright-bar p {
margin: 0;
color: rgba(247, 250, 252, 0.6);
}
.site-info .copyright-bar a {
color: rgba(247, 250, 252, 0.7);
}
.site-info .copyright-bar a:hover {
color: var(--mm-blue-on-dark);
}
.site-info .copyright-bar nav {
display: inline-flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.site-info .mm-legal-disclaimer {
font-size: 12px;
line-height: 1.6;
color: rgba(247, 250, 252, 0.45);
margin: 0 auto;
max-width: 900px;
text-align: center;
}
.site-info a {
color: rgba(247, 250, 252, 0.65);
}
.site-info a:hover {
color: var(--mm-blue-on-dark);
}
/* --- Responsive --- */
@media (max-width: 1024px) {
.footer-widgets .inside-footer-widgets {
grid-template-columns: 1fr 1fr;
gap: 40px 28px;
}
}
@media (max-width: 600px) {
.footer-widgets {
padding: 48px 0 32px;
}
.footer-widgets .inside-footer-widgets {
grid-template-columns: 1fr;
gap: 32px;
}
.footer-widgets .mm-footer-phone {
font-size: 17px;
padding: 14px 18px;
width: 100%;
justify-content: center;
}
.site-info .copyright-bar {
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
}
}
/* ============================================================
13. MOBILE STICKY CTA — fixed-bottom on phones
Call (action blue) + Consultation (green). Phone is highest priority.
============================================================ */
.mm-mobile-cta {
display: none;
}
@media (max-width: 767px) {
.mm-mobile-cta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 10px 14px;
background: var(--mm-brand);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
}
body {
padding-bottom: 72px;
}
.mm-mobile-cta .mm-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 0.8rem 0.85rem;
border-radius: 10px;
font-family: 'Public Sans', Arial, sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: background-color 150ms ease, color 150ms ease;
}
.mm-mobile-cta .mm-cta svg {
width: 1em;
height: 1em;
flex-shrink: 0;
}
.mm-cta--call {
background: var(--mm-brand-2);
color: #fff;
}
.mm-cta--call:hover, .mm-cta--call:focus, .mm-cta--call:active {
background: var(--mm-brand-2-hover);
color: #fff;
}
.mm-cta--consult {
background: var(--mm-brand-3);
color: #fff;
}
.mm-cta--consult:hover, .mm-cta--consult:focus, .mm-cta--consult:active {
background: var(--mm-brand-3-hover);
color: #fff;
}
}
/* ============================================================
14. UTILITY BAR — top hooked element
Calm, factual: "Free consultation • 30+ years • Missouri only".
No pulsing red dots — that's scare-tactic language, off-brand for JH.
============================================================ */
.mm-util-bar {
background: var(--mm-brand);
color: var(--mm-chrome);
font-size: 13.5px;
padding: 8px 0;
letter-spacing: 0.02em;
}
.mm-util-bar__inner {
max-width: 1240px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 48px);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.mm-util-bar__left {
display: flex;
gap: 22px;
align-items: center;
flex-wrap: wrap;
}
.mm-util-bar__item {
display: inline-flex;
gap: 6px;
align-items: center;
color: rgba(255, 255, 255, 0.9);
}
.mm-util-bar__item svg {
opacity: 0.85;
}
.mm-util-bar__item--accent {
color: #fff;
font-weight: 600;
}
.mm-util-bar__right {
display: flex;
gap: 16px;
}
.mm-util-bar a {
color: inherit;
}
.mm-util-bar a:hover {
color: var(--mm-blue-on-dark);
}
@media (max-width: 720px) {
.mm-util-bar .mm-hide-sm {
display: none;
}
}
/* ============================================================
15. SECTION HELPERS
============================================================ */
.mm-section {
padding: 90px 0;
}
.mm-section--sm {
padding: 60px 0;
}
.mm-section-inner {
max-width: 1240px;
margin-inline: auto;
padding-inline: clamp(16px, 3vw, 48px);
}
.mm-eyebrow {
display: inline-flex;
align-items: flex-start;
gap: 10px;
font-family: 'Public Sans', sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mm-brand-2);
margin: 0 0 16px;
}
.mm-eyebrow::before {
content: "";
width: 32px;
height: 2px;
background: var(--mm-brand-2);
flex-shrink: 0;
margin-top: 0.55em;
}
.mm-eyebrow--center {
justify-content: center;
}
.mm-eyebrow--center::after {
content: "";
width: 32px;
height: 2px;
background: var(--mm-brand-2);
flex-shrink: 0;
margin-top: 0.55em;
}
.mm-lede {
font-size: 19px;
line-height: 1.55;
}
.mm-section-head {
margin-bottom: 50px;
}
.mm-section-head h2 {
font-size: clamp(32px, 4.5vw, 52px);
color: var(--mm-ink);
max-width: 800px;
margin: 0 0 16px;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.08;
}
.mm-section-head .mm-sub {
color: var(--mm-muted);
font-size: 18px;
line-height: 1.55;
max-width: 680px;
margin: 0;
}
.mm-section-head--center {
text-align: center;
}
.mm-section-head--center .mm-eyebrow,
.mm-section-head--center h2,
.mm-section-head--center .mm-sub {
margin-left: auto;
margin-right: auto;
}
/* ============================================================
16. HERO BAND (base, reusable)
Deep navy with corner starburst, edge vignette, and a scrim
under the text column (depth pass 2026-08-20). Headline is
white on the scrim; accent line is light consultation green.
Primary CTA is the bright conversion green. Tune knobs:
scrim alpha .45, glow alpha .42, vignette end #1b2d4a.
============================================================ */
:root {
--mm-green-cta: #4f9d72;
--mm-green-cta-hover: #5fae82;
}
.mm-hero {
background-color: var(--mm-brand);
background-image: radial-gradient(ellipse 165% 135% at 30% 12%, #30507f 0%, #2c4770 45%, #22375a 80%, #1b2d4a 100%);
background-repeat: no-repeat;
color: var(--mm-chrome);
position: relative;
overflow: hidden;
padding: 80px 0 100px;
}
.mm-hero > .gb-grid-wrapper,
.mm-hero > [class*="gb-grid-wrapper"],
.mm-hero > .mm-section-inner {
max-width: 1240px;
margin-inline: auto;
padding-inline: clamp(16px, 3vw, 48px);
}
/* one overlay stack: glow high in the corner (clear of the
headline), faint green cast, then the scrim that keeps the
text column on a dark ground and fades before the form card */
.mm-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 820px 520px at 6% -12%, rgba(96, 130, 184, 0.42) 0%, rgba(96, 130, 184, 0) 58%),
radial-gradient(ellipse 520px 320px at 0% 0%, rgba(93, 135, 111, 0.16) 0%, rgba(93, 135, 111, 0) 55%),
linear-gradient(90deg, rgba(18, 30, 52, 0.45) 0%, rgba(18, 30, 52, 0.38) 44%, rgba(18, 30, 52, 0) 62%);
pointer-events: none;
}
/* stacked layouts: scrim becomes a full-width vertical wash */
@media (max-width: 1024px) {
.mm-hero::before {
background:
radial-gradient(ellipse 820px 520px at 6% -12%, rgba(96, 130, 184, 0.42) 0%, rgba(96, 130, 184, 0) 58%),
linear-gradient(180deg, rgba(18, 30, 52, 0.42) 0%, rgba(18, 30, 52, 0.20) 100%);
}
}
.mm-hero > *,
.mm-hero .mm-hero__grid,
.mm-hero > .wp-block-group__inner-container > * {
position: relative;
z-index: 2;
}
.mm-hero h1, .mm-hero h2, .mm-hero h3 {
color: var(--mm-chrome);
}
.mm-hero h1 {
text-shadow: 0 2px 28px rgba(10, 20, 40, 0.45);
}
.mm-hero p {
color: rgba(247, 250, 252, 0.85);
}
.mm-hero h1.display {
font-size: clamp(38px, 5.5vw, 72px);
line-height: 1.06;
margin: 0 0 24px;
font-weight: 600;
letter-spacing: -0.015em;
}
.mm-hero h1 .accent {
color: var(--mm-blue-on-dark);
display: block;
}
html body .mm-hero .mm-accent-line {
color: #a9ccb7;
}
.mm-hero .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
background-color: var(--mm-green-cta);
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%);
box-shadow: 0 8px 20px rgba(12, 22, 40, 0.4);
color: #fff;
border-color: var(--mm-green-cta);
}
.mm-hero .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
background-color: var(--mm-green-cta-hover);
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%);
color: #fff;
border-color: var(--mm-green-cta-hover);
}
.mm-hero .is-style-outline .wp-block-button__link {
background: transparent;
border-color: var(--mm-chrome);
border-width: 2px;
color: var(--mm-chrome);
}
.mm-hero .is-style-outline .wp-block-button__link:hover {
background: var(--mm-chrome);
color: var(--mm-brand);
border-color: var(--mm-chrome);
}
/* header consult button + badge track the CTA green (2026-08-20) */
.mm-header-cta__btn {
background-color: var(--mm-green-cta);
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%);
box-shadow: 0 6px 16px rgba(12, 22, 40, 0.35);
}
.mm-header-cta__btn:hover {
background-color: var(--mm-green-cta-hover);
}
.mm-consult-card .mm-consult-card__badge {
background-color: var(--mm-green-cta);
}
.mm-hero-trust {
display: flex;
gap: 28px;
flex-wrap: wrap;
align-items: center;
padding-top: 26px;
margin-top: 8px;
border-top: 1px solid rgba(247, 250, 252, 0.15);
}
.mm-hero-trust__item {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: rgba(247, 250, 252, 0.85);
font-weight: 500;
}
.mm-hero-trust__item .stars {
display: flex;
gap: 1px;
color: var(--mm-blue-on-dark);
}
.mm-hero-trust__item strong {
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
font-size: 21px;
color: var(--mm-chrome);
letter-spacing: -0.01em;
}
.mm-hero-trust__item svg {
color: var(--mm-blue-on-dark);
flex-shrink: 0;
}
.mm-hero-cta-row {
margin: 8px 0 38px;
gap: 14px;
}
@media (max-width: 600px) {
.mm-hero .wp-block-buttons {
flex-direction: column;
align-items: flex-start;
}
.mm-hero .wp-block-buttons .wp-block-button {
width: auto;
}
.mm-hero .wp-block-buttons .wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
}
.mm-hero__grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 48px;
align-items: center;
}
/* ============================================================
17. CONSULT CARD (hero right column)
White card sitting on the navy hero. Free-consultation framing.
Soft 16px radius (matches surface utility). No tilted badge — JH
keeps the tone composed.
============================================================ */
.mm-consult-card {
background: var(--mm-chrome);
color: var(--mm-ink);
padding: 36px;
position: relative;
box-shadow: 0 24px 60px rgba(31, 41, 55, 0.35);
border-radius: 16px;
}
.mm-consult-card h3 {
color: var(--mm-brand);
font-family: 'Public Sans', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.2;
margin: 0 0 8px;
letter-spacing: -0.01em;
}
.mm-consult-card p {
color: var(--mm-muted);
font-size: 14.5px;
margin: 0 0 22px;
}
.mm-consult-card__badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--mm-brand-3);
color: #fff;
font-family: 'Public Sans', sans-serif;
font-weight: 700;
font-size: 12px;
padding: 6px 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px;
margin-bottom: 18px;
}
.mm-consult-card p.mm-consult-card__badge { color: #fff; }
/* ============================================================
18. TRUST BAR (between hero and content)
Dark navy strip flush against the hero bottom. 4 short signals.
============================================================ */
.mm-trust-bar {
background: var(--mm-brand-hover);
color: var(--mm-chrome);
border-top: 1px solid rgba(247, 250, 252, 0.08);
padding: 0 clamp(16px, 3vw, 48px);
}
.mm-trust-bar__row {
max-width: 1240px;
margin-inline: auto;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding: 18px 0;
gap: 16px 28px;
}
.mm-trust-bar__pill {
display: inline-flex;
gap: 10px;
align-items: center;
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(247, 250, 252, 0.9);
}
.mm-trust-bar__pill svg {
color: var(--mm-blue-on-dark);
flex-shrink: 0;
}
/* ============================================================
19. PRACTICE AREAS (homepage)
Cool surface. Card grid for high-intent claim types — denied claims,
IME/MMI, return-to-work, retaliation, settlement questions, etc.
============================================================ */
.mm-practice-section {
background: var(--mm-surface);
padding: 90px 0;
}
.mm-practice-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 40px;
}
.mm-practice-card {
background: var(--mm-chrome);
border: 1px solid var(--mm-line);
border-radius: 16px;
padding: 28px 24px 24px;
position: relative;
transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
color: var(--mm-ink);
text-decoration: none;
display: flex;
flex-direction: column;
min-height: 320px;
}
.mm-practice-card:hover {
transform: translateY(-4px);
border-color: var(--mm-brand-2);
box-shadow: 0 18px 40px rgba(48, 76, 123, 0.15);
color: var(--mm-ink);
}
.mm-practice-card__icon {
width: 56px;
height: 56px;
background: var(--mm-brand);
color: #fff;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
flex-shrink: 0;
}
.mm-practice-card h3 {
font-family: 'Public Sans', sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--mm-brand);
line-height: 1.25;
margin: 0 0 10px;
letter-spacing: -0.01em;
}
.mm-practice-card p {
font-size: 14.5px;
color: var(--mm-muted);
margin: 0 0 18px;
flex-grow: 1;
}
.mm-practice-card__cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--mm-brand-2);
transition: gap 0.2s, color 0.2s;
}
.mm-practice-card:hover .mm-practice-card__cta {
gap: 10px;
color: var(--mm-brand);
}
.mm-practice-mini-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.mm-practice-mini {
background: var(--mm-chrome);
border: 1px solid var(--mm-line);
border-radius: 12px;
padding: 18px 14px;
text-align: center;
transition: all 0.2s;
color: var(--mm-ink);
text-decoration: none;
display: block;
}
.mm-practice-mini:hover {
border-color: var(--mm-brand-2);
background: var(--mm-brand);
color: #fff;
}
.mm-practice-mini__ico {
width: 32px;
height: 32px;
margin: 0 auto 10px;
color: var(--mm-brand);
transition: color 0.2s;
display: block;
}
.mm-practice-mini:hover .mm-practice-mini__ico {
color: #fff;
}
.mm-practice-mini__nm {
font-size: 13px;
font-weight: 700;
color: inherit;
display: block;
letter-spacing: 0.01em;
}
.mm-practice-seeall {
text-align: center;
margin-top: 36px;
}
@media (max-width: 1000px) {
.mm-practice-grid {
grid-template-columns: repeat(2, 1fr);
}
.mm-practice-mini-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 540px) {
.mm-practice-grid {
grid-template-columns: 1fr;
}
.mm-practice-mini-grid {
grid-template-columns: repeat(2, 1fr);
}
.mm-practice-section {
padding: 60px 0;
}
}
/* ============================================================
20. PROMISE PILLARS (homepage)
Dark navy band, 4 stats. 30+ Years / $100M+ Collected /
Direct Attorney Access / Missouri Only.
============================================================ */
.mm-promise {
background: var(--mm-brand);
color: var(--mm-chrome);
padding: 90px 0;
position: relative;
overflow: hidden;
}
.mm-promise::before {
content: "";
position: absolute;
top: 0;
right: -200px;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(58, 93, 150, 0.45), transparent 60%);
pointer-events: none;
}
.mm-promise > .mm-section-inner {
position: relative;
z-index: 1;
}
.mm-promise .mm-section-head h2 {
color: var(--mm-chrome);
}
.mm-promise .mm-section-head .mm-sub {
color: rgba(247, 250, 252, 0.8);
}
.mm-pillars {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.mm-pillar {
border-left: 3px solid var(--mm-blue-on-dark);
padding: 6px 0 6px 22px;
}
.mm-pillar__num {
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
font-size: 48px;
color: var(--mm-blue-on-dark);
line-height: 1;
letter-spacing: -0.02em;
margin: 0 0 10px;
display: block;
}
.mm-pillar h4 {
font-family: 'Public Sans', sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--mm-chrome);
letter-spacing: -0.01em;
margin: 0 0 8px;
}
.mm-pillar p {
color: rgba(247, 250, 252, 0.75);
font-size: 14.5px;
line-height: 1.6;
margin: 0;
}
@media (max-width: 900px) {
.mm-pillars {
grid-template-columns: repeat(2, 1fr);
gap: 36px 24px;
}
}
@media (max-width: 540px) {
.mm-pillars {
grid-template-columns: 1fr;
gap: 32px;
}
.mm-promise {
padding: 60px 0;
}
}
/* ============================================================
21. CLAIM ISSUES TRACK (homepage)
Alt cool surface. Header + 8 issue cards.
Denied claim / employer dispute / retaliation / IME / MMI /
light duty pressure / surveillance / settlement questions.
No "urgent badge" — tone is calm and informative, not panicked.
============================================================ */
.mm-issues {
background: var(--mm-surface-2);
padding: 90px 0;
}
.mm-issues-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: end;
margin-bottom: 50px;
}
.mm-issues-head h2 {
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
font-size: clamp(32px, 4.5vw, 52px);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--mm-ink);
margin: 0;
}
.mm-issues-head__copy p {
color: var(--mm-ink);
font-size: 17px;
line-height: 1.6;
margin: 0;
}
.mm-issues-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.mm-issue-card {
background: var(--mm-chrome);
border: 1px solid var(--mm-line);
border-radius: 14px;
padding: 24px 20px;
transition: all 0.25s;
color: var(--mm-ink);
text-decoration: none;
display: block;
}
.mm-issue-card:hover {
background: var(--mm-brand);
border-color: var(--mm-brand);
transform: translateY(-3px);
color: var(--mm-chrome);
}
.mm-issue-card__ico {
width: 44px;
height: 44px;
color: var(--mm-brand);
margin-bottom: 16px;
transition: color 0.2s;
display: block;
}
.mm-issue-card:hover .mm-issue-card__ico {
color: var(--mm-blue-on-dark);
}
.mm-issue-card h4 {
font-family: 'Public Sans', sans-serif;
font-size: 17px;
font-weight: 700;
line-height: 1.25;
color: var(--mm-brand);
margin: 0 0 6px;
letter-spacing: -0.01em;
transition: color 0.2s;
}
.mm-issue-card:hover h4 {
color: var(--mm-chrome);
}
.mm-issue-card p {
font-size: 13px;
color: var(--mm-muted);
margin: 0;
line-height: 1.5;
transition: color 0.2s;
}
.mm-issue-card:hover p {
color: rgba(247, 250, 252, 0.78);
}
.mm-issues-cta {
margin-top: 40px;
background: var(--mm-brand);
color: var(--mm-chrome);
border-radius: 16px;
padding: 32px 36px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 22px;
}
.mm-issues-cta__left strong {
font-family: 'Public Sans', sans-serif;
font-weight: 700;
font-size: 22px;
color: var(--mm-chrome);
display: block;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.mm-issues-cta__left span {
color: rgba(247, 250, 252, 0.75);
font-size: 14px;
}
@media (max-width: 1000px) {
.mm-issues-head {
grid-template-columns: 1fr;
gap: 24px;
align-items: start;
}
.mm-issues-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 540px) {
.mm-issues {
padding: 60px 0;
}
.mm-issues-cta {
padding: 24px;
}
}
/* ============================================================
22. HOW IT WORKS (homepage)
Cool surface. 3 numbered steps: Call → Review → Pursue.
"Free consultation" framing on step 1.
============================================================ */
.mm-how-it-works {
background: var(--mm-surface);
padding: 90px 0;
}
.mm-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 30px;
}
.mm-step {
background: var(--mm-chrome);
border: 1px solid var(--mm-line);
border-radius: 16px;
padding: 36px 32px;
position: relative;
}
.mm-step__num {
position: absolute;
top: -22px;
left: 32px;
background: var(--mm-brand);
color: #fff;
font-family: 'Public Sans', sans-serif;
font-weight: 900;
font-size: 22px;
line-height: 1;
width: 52px;
height: 52px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
border: 4px solid var(--mm-surface);
}
.mm-step h4 {
font-family: 'Public Sans', sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
color: var(--mm-brand);
margin: 22px 0 12px;
letter-spacing: -0.01em;
}
.mm-step p {
color: var(--mm-muted);
font-size: 15px;
line-height: 1.6;
margin: 0;
}
.mm-step__duration {
margin-top: 18px;
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--mm-brand-2);
display: block;
}
@media (max-width: 900px) {
.mm-steps {
grid-template-columns: 1fr;
gap: 38px;
}
}
@media (max-width: 540px) {
.mm-how-it-works {
padding: 60px 0;
}
}
/* ============================================================
23. RESULTS / CASE WINS (homepage)
Deep navy band, factual results strip. Compliance: results are
factual references only, no guarantees. Every card carries a
"Every case is different" framing through the section sub.
============================================================ */
.mm-results {
background: var(--mm-brand);
background-image: radial-gradient(ellipse at top right, rgba(58, 93, 150, 0.35), transparent 50%), linear-gradient(135deg, var(--mm-brand), var(--mm-brand-hover));
color: var(--mm-chrome);
padding: 90px 0;
position: relative;
overflow: hidden;
}
.mm-results > .mm-section-inner {
position: relative;
z-index: 1;
}
.mm-results .mm-section-head h2 {
color: var(--mm-chrome);
}
.mm-results .mm-section-head .mm-sub {
color: rgba(247, 250, 252, 0.8);
}
.mm-results-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 30px;
}
.mm-result {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
padding: 28px;
position: relative;
transition: all 0.25s;
color: var(--mm-chrome);
display: flex;
flex-direction: column;
}
.mm-result:hover {
background: rgba(255, 255, 255, 0.10);
border-color: var(--mm-blue-on-dark);
transform: translateY(-4px);
}
.mm-result__amount {
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
font-size: 36px;
line-height: 1;
color: var(--mm-blue-on-dark);
letter-spacing: -0.02em;
margin: 0 0 14px;
}
.mm-result__type {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(247, 250, 252, 0.75);
margin: 0 0 10px;
}
.mm-result p {
font-size: 14.5px;
color: rgba(247, 250, 252, 0.9);
line-height: 1.55;
margin: 0;
}
.mm-results-fineprint {
margin: 36px 0 0;
font-size: 13.5px;
color: rgba(247, 250, 252, 0.65);
text-align: center;
line-height: 1.6;
font-style: italic;
}
@media (max-width: 900px) {
.mm-results-grid {
grid-template-columns: 1fr;
gap: 18px;
}
}
@media (max-width: 540px) {
.mm-results {
padding: 60px 0;
}
}
.mm-results .mm-section-inner > p:not(.mm-results-fineprint),
.mm-results .wp-block-group__inner-container > p:not(.mm-results-fineprint) {
color: rgba(247, 250, 252, 0.85);
max-width: 68ch;
}
/* ============================================================
24. REVIEWS (homepage)
Cool surface. Score header (rating + total + Google) + 3 review cards.
============================================================ */
.mm-reviews {
background: var(--mm-surface);
padding: 90px 0;
}
.mm-reviews-top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
padding-bottom: 32px;
border-bottom: 1px solid var(--mm-line);
margin-bottom: 44px;
}
.mm-reviews-score {
display: flex;
align-items: center;
gap: 22px;
}
.mm-reviews-score__big {
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
font-size: 64px;
color: var(--mm-brand);
line-height: 1;
letter-spacing: -0.02em;
}
.mm-reviews-score__stars {
display: flex;
gap: 2px;
color: var(--mm-brand-2);
margin-bottom: 4px;
}
.mm-reviews-score__meta {
font-size: 14px;
color: var(--mm-muted);
}
.mm-reviews-score__meta strong {
color: var(--mm-ink);
}
.mm-reviews-google {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: var(--mm-muted);
font-weight: 600;
}
.mm-reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.mm-review {
background: var(--mm-chrome);
border: 1px solid var(--mm-line);
border-radius: 16px;
padding: 26px 24px;
}
.mm-review__stars {
color: var(--mm-brand-2);
display: flex;
gap: 1px;
margin-bottom: 14px;
}
.mm-review__text {
font-size: 15px;
color: var(--mm-ink);
line-height: 1.6;
margin: 0 0 16px;
}
.mm-review__author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 14px;
border-top: 1px solid var(--mm-line);
}
.mm-review__ava {
width: 38px;
height: 38px;
background: var(--mm-brand);
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
.mm-review__nm {
font-weight: 700;
font-size: 14px;
color: var(--mm-ink);
display: block;
}
.mm-review__src {
font-size: 12px;
color: var(--mm-muted);
display: block;
}
@media (max-width: 900px) {
.mm-reviews-grid {
grid-template-columns: 1fr;
}
.mm-reviews-score__big {
font-size: 48px;
}
}
@media (max-width: 540px) {
.mm-reviews {
padding: 60px 0;
}
}
/* ============================================================
25. SERVICE AREA (homepage)
Dark navy band: copy left + map right. St. Louis primary chip,
rotate 1–2 nearby MO cities per the service-area guidance.
============================================================ */
.mm-area {
background: var(--mm-brand);
color: var(--mm-surface);
padding: clamp(48px, 8vw, 96px) 0;
}
.mm-area .mm-section-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 48px);
}
.mm-area .display,
.mm-area h2 {
color: var(--mm-surface);
}
.mm-area .mm-sub {
color: rgba(247, 250, 252, 0.8);
margin: 0 0 24px;
}
.mm-area-left {
display: flex;
flex-direction: column;
justify-content: center;
}
.mm-area-right {
min-height: 420px;
}
.mm-map {
position: relative;
width: 100%;
height: 100%;
min-height: 420px;
overflow: hidden;
border-radius: 16px;
border: 1px solid rgba(247, 250, 252, 0.15);
}
.mm-map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
@media (max-width: 768px) {
.mm-area-right, .mm-map {
min-height: 320px;
}
}
.mm-cities {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.mm-city-chip {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid rgba(247, 250, 252, 0.25);
background: transparent;
color: var(--mm-surface);
font-size: 14px;
line-height: 1;
white-space: nowrap;
}
.mm-city-chip--primary {
background: var(--mm-brand-2);
color: #fff;
border-color: var(--mm-brand-2);
font-weight: 600;
}
/* ============================================================
26. FAQ (homepage)
Deeper cool surface. Native details/summary accordion.
Mirrors high-intent natural-language queries (IME, MMI, denial, etc.).
============================================================ */
.mm-faq {
background: var(--mm-surface-2);
padding: 90px 0;
}
.mm-faq-list {
max-width: 880px;
margin: 30px auto 0;
}
.mm-faq-item {
border-bottom: 1px solid var(--mm-line-strong);
}
.mm-faq-item summary {
list-style: none;
cursor: pointer;
padding: 26px 40px 26px 0;
font-family: 'Fraunces', Georgia, serif;
font-size: 19px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--mm-ink);
line-height: 1.4;
position: relative;
}
.mm-faq-item summary::-webkit-details-marker {
display: none;
}
.mm-faq-item summary::after {
content: "+";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-family: 'Fraunces', Georgia, serif;
font-weight: 400;
font-size: 28px;
line-height: 1;
color: var(--mm-brand);
}
.mm-faq-item[open] summary::after {
content: "\2212";
}
.mm-faq-item__answer {
padding: 0 0 28px;
}
.mm-faq-item__answer p {
font-size: 16px;
color: var(--mm-muted);
line-height: 1.7;
margin: 0 0 12px;
}
.mm-faq-item__answer p:last-child {
margin-bottom: 0;
}
@media (max-width: 540px) {
.mm-faq {
padding: 60px 0;
}
.mm-faq-item summary {
font-size: 17px;
padding-right: 36px;
}
}
/* ============================================================
27. FINAL CTA — reusable closer band
Navy background, paired CTAs (phone + form). Used at the bottom of
conversion pages. "Talk directly with Attorney James M. Hoffmann"
reinforced through copy in markup, not styling.
============================================================ */
.mm-final-cta {
background: var(--mm-brand);
color: #fff;
padding: 80px 0;
text-align: center;
}
.mm-final-cta .mm-section-inner {
padding-block: 0;
}
.mm-final-cta h2 {
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
font-size: clamp(32px, 5vw, 56px);
line-height: 1.1;
letter-spacing: -0.02em;
color: #fff;
margin: 0 0 20px;
}
.mm-final-cta p {
font-size: 19px;
line-height: 1.55;
max-width: 620px;
margin: 0 auto 32px;
color: rgba(255, 255, 255, 0.9);
}
.mm-final-cta__ctas {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.mm-final-cta .button,
.mm-final-cta .wp-block-button__link {
background: #fff;
color: var(--mm-brand);
border-color: #fff;
}
.mm-final-cta .button:hover,
.mm-final-cta .wp-block-button__link:hover {
background: var(--mm-brand-3);
color: #fff;
border-color: var(--mm-brand-3);
}
.mm-final-cta .is-style-outline .wp-block-button__link {
background: transparent;
color: #fff;
border-color: #fff;
}
.mm-final-cta .is-style-outline .wp-block-button__link:hover {
background: #fff;
color: var(--mm-brand);
border-color: #fff;
}
.mm-final-cta .button.button-outline {
background: transparent;
border: 2px solid #fff;
color: #fff;
}
.mm-final-cta .button.button-outline:hover {
background: #fff;
color: var(--mm-brand);
}
@media (max-width: 540px) {
.mm-final-cta {
padding: 60px 0;
}
}
/* ============================================================
28. TRUST STRIP — reusable 4-icon component (light bg)
For interior pages (About, practice hubs). Different pattern than
the homepage .mm-trust-bar.
============================================================ */
.mm-trust-strip {
background: var(--mm-chrome);
padding: 60px 0;
border-top: 1px solid var(--mm-line);
border-bottom: 1px solid var(--mm-line);
}
.mm-trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
text-align: center;
}
.mm-trust-item {
display: flex;
flex-direction: column;
align-items: center;
}
.mm-trust-item svg {
width: 32px;
height: 32px;
color: var(--mm-brand);
margin-bottom: 12px;
flex-shrink: 0;
}
.mm-trust-item h4 {
font-family: 'Public Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.2;
color: var(--mm-brand);
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.mm-trust-item p {
font-size: 13.5px;
line-height: 1.5;
color: var(--mm-muted);
margin: 0;
}
@media (max-width: 900px) {
.mm-trust-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
}
@media (max-width: 540px) {
.mm-trust-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
29. HEADER RESTYLE (JH custom)
JH's GP layout uses body.nav-below-header + body.header-aligned-center.
That means: .site-header contains only the logo and is centered; the
.main-navigation renders as a SIBLING below .site-header, not inside it.
We style both as a unified band: navy header strip (the JH logo is
white-on-transparent, so the header MUST stay dark) + white nav bar
underneath. The optional .mm-header-cta hooked element can be slotted
into the header via GP Elements -> Hook -> inside_header.
IMPORTANT: header bg matches the hero bg (--mm-brand) so there is no
visible seam when the hero band sits flush below.
============================================================ */
.site-header {
background: var(--mm-brand-hover);
border-bottom: none;
padding: 10px 0;
position: relative;
}
.inside-header {
max-width: 1240px;
margin-inline: auto;
padding-inline: clamp(16px, 3vw, 48px);
/* GP's main.min.css defaults .inside-header to `padding: 20px 40px`.
We've overridden the inline (left/right) above; explicitly zero the
block (top/bottom) so the header band height is driven by the logo
+ .site-header padding alone, not GP's hidden vertical chrome. */
padding-block: 0;
/* Override GP's column flex for header-aligned-center: center the
logo via text-align so any optional hooked CTA can absolutely
position to the right without breaking the centered logo. */
display: block !important;
text-align: left;
}
.site-logo {
display: inline-block;
line-height: 0;
}
.site-logo img,
.site-header .header-image.is-logo-image {
/* Renders at the file's natural size up to this cap. If the served
bytes are smaller than the cap, the image displays at its native
size (sharp); CSS doesn't upscale. To get a larger displayed logo,
re-upload at higher resolution and/or purge any CDN-cached variant. */
max-height: 78px;
width: auto;
height: auto;
display: inline-block;
}
.site-branding, .site-title, .main-title {
display: none;
}
/* Optional CTA slot — pinned top-right of the header band when present.
Hook into GP Elements at `inside_header` or `after_header_content`. */
.mm-header-cta {
position: absolute;
top: 50%;
right: clamp(16px, 3vw, 48px);
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 14px;
z-index: 5;
}
.mm-header-cta__phone {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 10px;
color: var(--mm-chrome);
text-decoration: none;
font-family: 'Public Sans', sans-serif;
line-height: 1;
}
.mm-header-cta__phone:hover {
color: var(--mm-blue-on-dark);
}
.mm-header-cta__phone-icon {
width: 36px;
height: 36px;
background: var(--mm-chrome);
color: var(--mm-brand);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 160ms ease, color 160ms ease;
}
.mm-header-cta__phone:hover .mm-header-cta__phone-icon {
background: var(--mm-blue-on-dark);
color: var(--mm-brand);
}
.mm-header-cta__phone-text {
line-height: 1.1;
text-align: left;
}
.mm-header-cta__phone-tag {
font-size: 10px;
font-weight: 700;
color: rgba(247, 250, 252, 0.7);
text-transform: uppercase;
letter-spacing: 0.12em;
display: block;
margin-bottom: 2px;
}
.mm-header-cta__phone-num {
font-family: 'Public Sans', sans-serif;
font-weight: 900;
font-size: 20px;
letter-spacing: -0.01em;
display: block;
color: inherit;
}
.mm-header-cta__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--mm-brand-3);
color: #fff;
font-family: 'Public Sans', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
text-decoration: none;
line-height: 1;
border-radius: 10px;
transition: background 160ms ease;
}
.mm-header-cta__btn:hover {
background: var(--mm-brand-3-hover);
color: #fff;
}
.mm-header-cta__btn svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* -------- NAVIGATION (rendered below header by GP's nav-below-header) --- */
.main-navigation {
background: var(--mm-chrome);
border: 0;
border-top: 1px solid var(--mm-line);
border-bottom: 1px solid var(--mm-line);
box-shadow: none;
}
/* Specificity note: GP's main.min.css sets
`.main-navigation .inside-navigation { justify-content: space-between }`
(specificity 0,2,0). We match it with .main-navigation .inside-navigation
so center wins without !important. */
.main-navigation .inside-navigation {
max-width: 1240px;
margin-inline: auto;
padding-inline: clamp(16px, 3vw, 48px);
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
gap: 18px;
}
.main-navigation .main-nav {
margin: 0;
}
.main-navigation .main-nav > ul {
display: flex;
gap: 6px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
background: transparent;
padding: 0;
margin: 0;
}
.main-navigation .main-nav ul li {
background: transparent;
}
.main-navigation .main-nav ul li a {
padding: 16px 18px;
color: var(--mm-brand);
font-family: 'Public Sans', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.04em;
line-height: 1;
position: relative;
transition: color 160ms ease;
}
.main-navigation .main-nav ul li a::after {
content: "";
position: absolute;
left: 18px;
right: 18px;
bottom: 6px;
height: 2px;
background: var(--mm-brand-2);
transform: scaleX(0);
transform-origin: left;
transition: transform 180ms ease;
}
.main-navigation .main-nav ul li:hover > a::after,
.main-navigation .main-nav ul li:focus-within > a::after,
.main-navigation .main-nav ul li.current-menu-item > a::after,
.main-navigation .main-nav ul li[class*="current-menu-"] > a::after {
transform: scaleX(1);
}
/* Specificity note: GP outputs an inline rule at 0,4,2 like
`.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a`
which sets color to var(--base-3) = #ffffff. On a white nav that makes
links vanish on hover. We match the :not() selector specificity to win.
Also covers .sfHover (Superfish JS class) and :focus, like GP does. */
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus-within > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
color: var(--mm-brand-2);
}
/* -------- Submenus --------
Long dropdowns flow into 2 or 3 columns so they don't run below the
viewport. Auto-triggered by item count via :has() (Chrome 105+, FF 121+,
Safari 15.4+). Manual override via .menu-cols-2 / .menu-cols-3 added to
the parent nav item in WP Admin > Appearance > Menus > CSS Classes.
GP positions submenus `left: 0` relative to the parent . For wide
dropdowns near the right edge, GP's own JS shifts them; we don't need to
handle that here. Just keep widths sane so they don't trigger overflow.
*/
.main-navigation ul ul {
background: var(--mm-chrome);
border: 1px solid var(--mm-line);
box-shadow: 0 12px 28px rgba(14, 10, 20, 0.1);
padding: 8px 0;
/* default single-column width */
min-width: 240px;
}
.main-navigation ul ul li a {
padding: 9px 18px !important;
font-size: 13px !important;
letter-spacing: 0.02em !important;
line-height: 1.35 !important;
white-space: normal !important;
/* lets long labels like "Can my employer cancel my health insurance" wrap */
}
.main-navigation ul ul li a::after {
display: none;
}
/* ----- 2-column dropdown -----
Triggered automatically when a top-level item has 8+ children, or
manually via .menu-cols-2 on the parent . ~480px wide. */
.main-navigation .main-nav ul > li.menu-cols-2 > ul,
.main-navigation .main-nav ul > li:has(> ul > li:nth-child(8)) > ul {
display: grid;
grid-template-columns: 1fr 1fr;
width: 480px;
min-width: 480px;
column-gap: 0;
padding: 10px 0;
}
/* ----- 3-column dropdown -----
Triggered automatically when a top-level item has 16+ children, or
manually via .menu-cols-3 on the parent . ~700px wide.
`.menu-cols-3` selector is written second so it can override the auto
2-col rule if both somehow apply. */
.main-navigation .main-nav ul > li:has(> ul > li:nth-child(16)) > ul,
.main-navigation .main-nav ul > li.menu-cols-3 > ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 700px;
min-width: 700px;
column-gap: 0;
padding: 10px 0;
}
/* Submenu items inside a grid dropdown — make sure each behaves as
a grid cell, not a stacked block. GP's default styling has
`position: relative` which works fine inside grid. */
.main-navigation .main-nav ul > li.menu-cols-2 > ul > li,
.main-navigation .main-nav ul > li.menu-cols-3 > ul > li,
.main-navigation .main-nav ul > li:has(> ul > li:nth-child(8)) > ul > li,
.main-navigation .main-nav ul > li:has(> ul > li:nth-child(16)) > ul > li {
width: auto;
border-bottom: 0;
}
.main-navigation .main-nav ul > li.menu-cols-2 > ul > li > a,
.main-navigation .main-nav ul > li.menu-cols-3 > ul > li > a,
.main-navigation .main-nav ul > li:has(> ul > li:nth-child(8)) > ul > li > a,
.main-navigation .main-nav ul > li:has(> ul > li:nth-child(16)) > ul > li > a {
padding: 8px 18px !important;
}
/* Edge-overflow guard: if a wide dropdown sits under a nav item close to
the right edge of the centered nav, shift it leftward so it stays in
the viewport. GP also tries to do this with JS; this is belt-and-braces. */
.main-navigation .main-nav ul > li.menu-cols-3:nth-last-child(-n+2) > ul,
.main-navigation .main-nav ul > li:has(> ul > li:nth-child(16)):nth-last-child(-n+2) > ul {
left: auto;
right: 0;
}
.main-navigation .main-nav ul > li.menu-cols-2:nth-last-child(-n+2) > ul,
.main-navigation .main-nav ul > li:has(> ul > li:nth-child(8)):nth-last-child(-n+2) > ul {
left: auto;
right: 0;
}
@media (max-width: 900px) {
/* On narrower viewports, collapse multi-col dropdowns back to single
column so they don't overflow. The full mobile menu uses GP's
slide-out drawer pattern below this breakpoint anyway. */
.main-navigation .main-nav ul > li.menu-cols-2 > ul,
.main-navigation .main-nav ul > li.menu-cols-3 > ul,
.main-navigation .main-nav ul > li:has(> ul > li:nth-child(8)) > ul,
.main-navigation .main-nav ul > li:has(> ul > li:nth-child(16)) > ul {
display: block;
width: auto;
min-width: 0;
}
}
/* Mobile toggle */
.main-navigation .menu-toggle {
color: var(--mm-brand);
background: transparent;
border: 0;
font-weight: 700;
letter-spacing: 0.04em;
}
/* Search icon in nav, if present */
.main-navigation .navigation-search {
flex-shrink: 0;
}
.main-navigation .navigation-search input[type="search"] {
border-radius: 10px;
}
/* -------- Responsive -------- */
@media (max-width: 1180px) {
.mm-header-cta__phone-tag {
display: none;
}
.mm-header-cta__phone-num {
font-size: 18px;
}
}
@media (max-width: 1024px) {
.mm-header-cta {
display: none;
}
.site-logo img,
.site-header .header-image.is-logo-image {
max-height: 64px;
}
.main-navigation .main-nav ul li a {
padding: 14px 12px;
font-size: 13px;
}
}
@media (max-width: 768px) {
.site-header {
padding: 8px 0;
}
.site-logo img,
.site-header .header-image.is-logo-image {
max-height: 56px;
}
}
/* ============================================================
30. FORMINATOR FORMS (universal)
Plugin uses inline + heavy specificity; !important is unavoidable.
============================================================ */
.forminator-ui,
.forminator-custom-form {
font-family: "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.forminator-ui .forminator-label,
.forminator-custom-form label.forminator-label {
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
color: var(--mm-muted) !important;
margin-bottom: 4px !important;
}
.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui input[type="tel"],
.forminator-ui input[type="number"],
.forminator-ui select,
.forminator-ui textarea,
.forminator-custom-form input[type="text"],
.forminator-custom-form input[type="email"],
.forminator-custom-form input[type="tel"],
.forminator-custom-form select,
.forminator-custom-form textarea {
background: #fff !important;
border: 1.5px solid var(--mm-line-strong) !important;
border-radius: 10px !important;
padding: 12px 14px !important;
font-family: inherit !important;
font-size: 15px !important;
color: var(--mm-ink) !important;
box-shadow: none !important;
}
.forminator-ui input:focus,
.forminator-ui select:focus,
.forminator-ui textarea:focus {
border-color: var(--mm-brand-2) !important;
outline: none !important;
}
.forminator-ui .forminator-button,
.forminator-ui button[type="submit"],
.forminator-custom-form button[type="submit"] {
background: var(--mm-brand-2) !important;
color: #fff !important;
border: 0 !important;
border-radius: 10px !important;
padding: 16px 28px !important;
font-family: 'Public Sans', sans-serif !important;
font-weight: 700 !important;
font-size: 15px !important;
letter-spacing: 0.04em !important;
width: 100% !important;
cursor: pointer !important;
transition: background 160ms ease !important;
}
.forminator-ui .forminator-button:hover,
.forminator-ui button[type="submit"]:hover,
.forminator-custom-form button[type="submit"]:hover {
background: var(--mm-brand) !important;
}
.mm-form-success {
background: var(--mm-surface);
border-left: 4px solid var(--mm-brand-3);
border-radius: 10px;
padding: 18px 22px;
}
.mm-form-success strong {
display: block;
font-family: 'Public Sans', sans-serif;
font-weight: 700;
font-size: 20px;
color: var(--mm-brand);
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.mm-form-success p {
margin: 0;
font-size: 15px;
color: var(--mm-ink);
}
.mm-form-success a {
color: var(--mm-brand);
font-weight: 700;
text-decoration: underline;
}
/* §30 addendum — consent links inside the consult card (override §36 dark-band link color) */
.mm-consult-card .forminator-consent__label a {
color: #3a5d96;
text-decoration: underline;
}
/* ============================================================
31. CUSTOM FOOTER (.mm-footer hooked element)
Dark navy band, 4-col grid: brand + NAP / nav col 1 / nav col 2 / hours.
============================================================ */
.site-footer { display: none; }
.mm-footer {
background: var(--mm-brand);
color: rgba(247, 250, 252, 0.7);
padding: 70px 0 0;
}
.mm-footer__inner {
max-width: 1240px;
margin-inline: auto;
padding-inline: clamp(16px, 3vw, 48px);
}
.mm-footer__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: 48px;
margin-bottom: 56px;
}
.mm-footer__b1 {
font-family: 'Fraunces', Georgia, serif;
font-weight: 560;
font-size: 25px;
color: var(--mm-chrome);
letter-spacing: -0.01em;
line-height: 1.15;
margin-bottom: 6px;
}
.mm-footer__b2 {
font-size: 12px;
font-weight: 600;
color: var(--mm-blue-on-dark);
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 22px;
}
.mm-footer__brand p {
font-size: 14.5px;
line-height: 1.6;
margin: 0 0 18px;
color: inherit;
}
.mm-footer__nap {
font-size: 14px;
line-height: 1.7;
color: rgba(247, 250, 252, 0.85);
}
.mm-footer__nap strong {
color: var(--mm-chrome);
display: block;
margin-bottom: 4px;
}
.mm-footer__nap a {
color: var(--mm-blue-on-dark);
font-weight: 700;
}
.mm-footer__nap a:hover {
color: var(--mm-chrome);
}
.mm-footer__col h5 {
font-family: 'Public Sans', sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--mm-chrome);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 18px;
}
.mm-footer__col ul {
list-style: none;
padding: 0;
margin: 0;
}
.mm-footer__col li {
padding: 5px 0;
}
.mm-footer__col a {
font-size: 14px;
color: rgba(247, 250, 252, 0.7);
transition: color 0.2s;
}
.mm-footer__col a:hover {
color: var(--mm-blue-on-dark);
}
.mm-footer__bottom {
border-top: 1px solid rgba(247, 250, 252, 0.1);
padding: 22px 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
font-size: 13px;
color: rgba(247, 250, 252, 0.5);
}
.mm-footer__bottom a {
color: rgba(247, 250, 252, 0.5);
margin-right: 16px;
}
.mm-footer__bottom-links a:last-child {
margin-right: 0;
}
.mm-footer__bottom a:hover {
color: var(--mm-blue-on-dark);
}
@media (max-width: 900px) {
.mm-footer__grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
}
@media (max-width: 540px) {
.mm-footer__grid {
grid-template-columns: 1fr;
gap: 32px;
}
.mm-footer {
padding: 50px 0 0;
}
}
/* Footer paragraph color (columns + bottom legal) */
.mm-footer__col p,
.mm-footer__bottom p {
color: rgba(247, 250, 252, 0.72);
}
/* ============================================================
32. HORIZON DIVIDER — First Light signature rule (JH tint)
A thin gradient rule that fades in from the left, peaks in
action blue, and fades out. Use between major page sections
instead of a plain
On navy bands use the --dark variant.
============================================================ */
.mm-horizon {
height: 2px;
width: min(320px, 60%);
margin: 0 auto;
background: linear-gradient(90deg, transparent, var(--mm-brand-2) 50%, transparent);
border: 0;
}
.mm-horizon--left {
margin: 0;
background: linear-gradient(90deg, var(--mm-brand-2), transparent);
}
.mm-horizon--dark {
background: linear-gradient(90deg, transparent, var(--mm-blue-on-dark) 50%, transparent);
opacity: 0.7;
}
/* Native separator block picks up the same treatment so editors
don't have to remember the custom class. */
hr.wp-block-separator {
height: 2px;
width: min(320px, 60%);
margin-inline: auto;
background: linear-gradient(90deg, transparent, var(--mm-brand-2) 50%, transparent);
border: 0;
opacity: 1;
}
/* ============================================================
33. ACCENT LINE — Fraunces italic (First Light register)
A short serif-italic line that sits directly under an H1 or
section H2 and carries the emotional beat ("An accepted claim
is not a protected claim."). Pattern: separate immediately
after the heading, never inline in the heading itself.
…
Action blue on light backgrounds; light blue on navy bands
(scoped automatically inside the known dark sections).
============================================================ */
.mm-accent-line {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-weight: 460;
font-size: clamp(19px, 2.2vw, 24px);
line-height: 1.4;
letter-spacing: -0.005em;
color: var(--mm-brand-2);
margin: 0 0 20px;
}
.mm-hero .mm-accent-line,
.mm-promise .mm-accent-line,
.mm-results .mm-accent-line,
.mm-area .mm-accent-line,
.mm-final-cta .mm-accent-line,
.mm-surface-dark .mm-accent-line {
color: var(--mm-blue-on-dark);
}
/* ============================================================
34. CARDS — image-top .mm-card contract (First Light, JH tint)
General-purpose linked card with an image cap: injury-type
grids, Who-We-Help industry cards, hub tiles. Anatomy:
Shoulder Injuries
Short supporting line.
Learn more
Wrap a set in .mm-card-grid (3-up desktop, 2-up tablet,
1-up mobile). Cards are equal height via flex.
============================================================ */
.mm-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.mm-card {
background: var(--mm-chrome);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
color: var(--mm-ink);
text-decoration: none;
transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.mm-card:hover {
transform: translateY(-4px);
border-color: var(--mm-brand-2);
box-shadow: 0 18px 40px rgba(48, 76, 123, 0.15);
color: var(--mm-ink);
}
.mm-card__media {
position: relative;
aspect-ratio: 16 / 10;
background: var(--mm-surface-2);
overflow: hidden;
}
.mm-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.mm-card:hover .mm-card__media img {
transform: scale(1.04);
}
/* Navy wash anchors the image to the brand and keeps mixed
photography reading as one family. */
.mm-card__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(48, 76, 123, 0.08), rgba(48, 76, 123, 0.28));
pointer-events: none;
}
.mm-card__body {
padding: 22px 22px 24px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.mm-card__rule {
width: 36px;
height: 3px;
background: var(--mm-brand-2);
border-radius: var(--mm-radius-pill);
margin: 0 0 14px;
}
.mm-card__body h3 {
font-family: 'Public Sans', sans-serif;
font-size: 19px;
font-weight: 700;
color: var(--mm-brand);
line-height: 1.25;
letter-spacing: -0.01em;
margin: 0 0 8px;
}
.mm-card__body p {
font-size: 14.5px;
color: var(--mm-muted);
line-height: 1.55;
margin: 0 0 16px;
flex-grow: 1;
}
.mm-card__cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--mm-brand-2);
transition: gap 0.2s, color 0.2s;
}
.mm-card:hover .mm-card__cta {
gap: 10px;
color: var(--mm-brand);
}
@media (max-width: 1000px) {
.mm-card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.mm-card-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
35. ATTORNEY BAND — .mm-atty (homepage/About)
Two-column band: attorney photo card left, direct-access copy
right. Reinforces "talk directly with Attorney James M.
Hoffmann" — the anti-call-center pillar. Anatomy:
(GB container / columns)
James M. Hoffmann · Attorney