/* ============================================================
Mirador Law — Review Fixes (MDL_Review_-_Daniyal)
Single override stylesheet, enqueued LAST site-wide so it
wins on load order. Each block maps to a numbered review item.
============================================================ */
:root{
--mdl-link-gold: #C9A24B; /* standard inline-link gold */
--mdl-link-gold-dark: #A9852F;
}
/* ------------------------------------------------------------
GLOBAL — Standardize inline content links
(Contact / Locations / bios / blog body): gold, bolder, no underline.
Scoped to content/body regions so it never touches nav, buttons,
cards or footer link styles.
------------------------------------------------------------ */
.entry-content a,
.mdl-bio a,
.mdl-team-bio a,
.single-team .mdl-team-bio a,
.mdl-rich-text a,
.mdl-prose a,
.mdl-contact-v4 .mdl-contact-form a,
.mdl-location-v4 .mdl-prose a,
.mdl-case-body a,
.mdl-press-card__excerpt a,
.mdl-news-card__excerpt a,
.mdl-pa-copy a,
.mdl-blog-v4 .mdl-blog-content a,
.mdl-cri-v4 .mdl-cri-prose a{
color: #243952 !important;
font-weight: 700 !important;
text-decoration: underline !important;
text-decoration-color: #243952 !important;
}
.entry-content a:hover,
.mdl-bio a:hover,
.mdl-team-bio a:hover,
.mdl-rich-text a:hover,
.mdl-prose a:hover,
.mdl-contact-v4 .mdl-contact-form a:hover,
.mdl-case-body a:hover,
.mdl-pa-copy a:hover,
.mdl-blog-v4 .mdl-blog-content a:hover,
.mdl-cri-v4 .mdl-cri-prose a:hover{
color: #1A2A3D !important;
text-decoration: underline !important;
text-decoration-color: #1A2A3D !important;
}
/* Consent / "I have read … Privacy Policy" line: gold + bold, no underline */
.mdl-contact-v4 .mdl-form-consent a,
.mdl-contact-v4 .mdl-consent a,
.mdl-form-consent a{
color: #243952 !important;
font-weight: 700 !important;
text-decoration: underline !important;
text-decoration-color: #243952 !important;
}
/* ------------------------------------------------------------
NAV — Add carets to dropdown parent items
------------------------------------------------------------ */
.mdl-nav-menu > li.menu-item-has-children > a::after{
content: "";
display: inline-block;
width: 0; height: 0;
margin-left: 7px;
vertical-align: middle;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
opacity: .85;
transition: transform .2s ease;
}
.mdl-nav-menu > li.menu-item-has-children:hover > a::after,
.mdl-nav-menu > li.menu-item-has-children:focus-within > a::after{
transform: rotate(180deg);
}
/* Nested (second-level) parents get a right-pointing caret */
.mdl-nav-menu .sub-menu li.menu-item-has-children > a::after,
.mdl-nav-menu ul.children li.menu-item-has-children > a::after{
content: "";
float: right;
width: 0; height: 0;
margin-top: .55em;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 5px solid currentColor;
opacity: .85;
}
/* ------------------------------------------------------------
HOMEPAGE — Video lightbox close button
NOTE: the canonical circular-close styling now lives in ONE place —
the "Round 16" block below, finalised by "Round 43" at the end of
this file. The old 44px rule that used to sit here was removed so a
single source of truth controls every video close button.
------------------------------------------------------------ */
/* ------------------------------------------------------------
HOMEPAGE — Team attorney name stays WHITE on hover
------------------------------------------------------------ */
.mdl-home-v4 .mdl-team__card a:hover .mdl-team__name,
.mdl-home-v4 .mdl-team__card a:hover .mdl-team__title,
.mdl-home-v4 .mdl-team__card:hover .mdl-team__name,
.mdl-home-v4 .mdl-team__card:hover .mdl-team__title,
.mdl-home-v4 .mdl-attorney-card:hover .mdl-attorney-card__name,
.mdl-home-v4 .mdl-attorney-card a:hover{
color: #fff !important;
}
/* ------------------------------------------------------------
HOMEPAGE — Press & News cards: show FULL titles (like blog)
------------------------------------------------------------ */
.mdl-home-v4 .mdl-press__card-title,
.mdl-home-v4 .mdl-news__card-title{
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: initial !important;
overflow: visible !important;
}
/* Let the blurbs breathe a little more (5 lines instead of 4) */
.mdl-home-v4 .mdl-press__card-body,
.mdl-home-v4 .mdl-news__card-excerpt{
-webkit-line-clamp: 5 !important;
}
/* ------------------------------------------------------------
HOMEPAGE / FOOTER — "Get Directions" links consistent
------------------------------------------------------------ */
.mdl-footer__directions,
.mdl-home-v4 .mdl-loc-card__directions,
.mdl-loc-card__directions{
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: .04em;
text-decoration: none !important;
}
.mdl-footer__directions:hover,
.mdl-home-v4 .mdl-loc-card__directions:hover,
.mdl-loc-card__directions:hover{
color: var(--mdl-link-gold) !important;
}
/* ------------------------------------------------------------
PRACTICE AREA / ABOUT / CONTACT — remove white line under nav
(banner sits flush under the header, like the homepage)
------------------------------------------------------------ */
.page-banner,
.mdl-page-banner,
.inner-banner,
.banner-section{
margin-top: 0 !important;
}
.site-main > .page-banner:first-child,
#main > .page-banner:first-child{
margin-top: 0 !important;
border-top: 0 !important;
}
/* ------------------------------------------------------------
PRACTICE AREA — more space between blurb and button
------------------------------------------------------------ */
.mdl-pa-v4 .mdl-pa-cta__sub,
.mdl-practice-v4 .mdl-cta__sub,
.mdl-pa-cta__sub{
margin-bottom: 28px !important;
}
/* ------------------------------------------------------------
CASE RESULTS — "Read More" smaller (match homepage tiles)
------------------------------------------------------------ */
.mdl-cr-v4 .mdl-cr-result__more{
font-size: 14px !important;
letter-spacing: .04em !important;
}
/* ------------------------------------------------------------
TEAM BIO — press card "Read More" aligned to bottom
------------------------------------------------------------ */
.single-team .mdl-team-press__grid{ align-items: stretch; }
.single-team .mdl-team-press-card{
display: flex !important;
flex-direction: column !important;
height: 100%;
}
.single-team .mdl-team-press-card__more{ margin-top: auto !important; }
/* ------------------------------------------------------------
ABOUT — CTA: more space above button / below blurb
------------------------------------------------------------ */
.mdl-about-v4 .mdl-about-cta__sub,
.mdl-about-v4 .mdl-cta__sub{ margin-bottom: 30px !important; }
.mdl-about-v4 .mdl-about-cta,
.mdl-about-v4 .mdl-cta{ padding-top: 56px !important; padding-bottom: 56px !important; }
/* ------------------------------------------------------------
CONTACT — calmer moving background + smaller pattern
(only the decorative chevron pattern; NOT the section's own image)
------------------------------------------------------------ */
.mdl-contact-v4 .mdl-consult__bg,
.mdl-contact-v4 .mdl-chevron-bg{
animation: none !important;
background-size: 320px auto !important; /* tame the moving pattern only */
}
/* If a background image is added to the main section, keep it full-bleed. */
.mdl-contact-v4 .mdl-consult.mdl-consult--has-bg{
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* ------------------------------------------------------------
CONTACT — consent checkmark: thinner stroke + rounded corners
------------------------------------------------------------ */
.mdl-contact-v4 input[type="checkbox"]{
border-radius: 4px !important;
border-width: 1.5px !important;
}
.mdl-contact-v4 input[type="checkbox"]:checked{
border-radius: 4px !important;
}
/* ------------------------------------------------------------
TESTIMONIALS PAGE — play buttons match the rest of the site
(gold circle, white triangle, consistent size)
------------------------------------------------------------ */
.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-card__play{
width: 88px !important;
height: 88px !important;
background: #CAA45D !important;
border-radius: 50% !important;
box-shadow: none !important;
}
.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-card__play svg{
width: 88px !important;
height: 88px !important;
margin: 0 !important;
fill: #fff !important;
}
/* ------------------------------------------------------------
PRESS PAGE — full titles, no arrows, hover matches homepage
------------------------------------------------------------ */
.mdl-press-v4 .mdl-press-card__title,
.mdl-press-v4 h2.mdl-press-card__title{
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: initial !important;
overflow: visible !important;
}
/* Kill the parent-theme "→" arrow on press Read More (as already done on News) */
.mdl-press-v4 .mdl-press-card__more::after,
.mdl-press-v4 .mdl-press-card__more::before,
.mdl-press-v4 a.mdl-press-card__more::after,
.mdl-press-v4 a.mdl-press-card__more::before{
content: none !important;
}
/* Hover lift to match the homepage press cards */
.mdl-press-v4 .mdl-press-card{ transition: transform .2s ease, box-shadow .2s ease; }
.mdl-press-v4 .mdl-press-card:hover{
transform: translateY(-4px);
box-shadow: 0 10px 26px rgba(31,58,95,.14);
}
.mdl-press-v4 .mdl-press-card:hover .mdl-press-card__more{ color: var(--mdl-link-gold-dark) !important; }
/* PRESS — filter select: clean underline (no gold box) to match the keyword field */
.mdl-press-v4 .mdl-press-controls__field--select,
.mdl-press-v4 select#mdl-press-author{
border: 0 !important;
border-bottom: 1px solid #C4CDD6 !important;
border-radius: 0 !important;
font-weight: 600 !important;
color: #1F3A5F !important;
background-color: transparent !important;
}
.mdl-press-v4 .mdl-press-controls__field--select:focus-within,
.mdl-press-v4 select#mdl-press-author:focus{
outline: none !important;
border-bottom-color: #243952 !important;
box-shadow: none !important;
}
/* ------------------------------------------------------------
NEWS PAGE — full titles + hover matches homepage
------------------------------------------------------------ */
.mdl-news-v4 .mdl-news-card__title,
.mdl-news-v4 h2.mdl-news-card__title{
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: initial !important;
overflow: visible !important;
}
.mdl-news-v4 .mdl-news-card{ transition: transform .2s ease, box-shadow .2s ease; }
.mdl-news-v4 .mdl-news-card:hover{
transform: translateY(-4px);
box-shadow: 0 10px 26px rgba(31,58,95,.14);
}
.mdl-news-v4 .mdl-news-card:hover .mdl-news-card__more{ color: var(--mdl-link-gold-dark) !important; }
/* ------------------------------------------------------------
TEAM BIO — caption under media video (new per-video caption)
------------------------------------------------------------ */
.single-team .mdl-team-media__caption{
margin: 12px 2px 0;
font-size: 14px;
line-height: 21px;
color: #4A5A6A;
font-style: italic;
}
/* ------------------------------------------------------------
TEAM BIO — YouTube Shorts (9:16) sit centered in the media area
so vertical videos don't stretch. Targets shorts posters, which
are square-ish; centers the slide content.
------------------------------------------------------------ */
.single-team .mdl-team-media__list .mdl-team-carousel__slide{
display: flex;
flex-direction: column;
align-items: center;
}
.single-team .mdl-team-media__item{
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Landscape (16:9) videos FILL the 16:9 tile (crops YouTube's hqdefault
letterboxing). Only true vertical Shorts keep their aspect with `contain`. */
.single-team .mdl-team-media__poster{
object-fit: cover;
background: #0c1622;
}
.single-team .mdl-team-media__item--short .mdl-team-media__poster{
object-fit: contain;
}
/* ------------------------------------------------------------
Interior Page — No Banner + Sidebar template
(Privacy / Disclaimer / Transcript). Reuses the Case Result
Individual layout (.mdl-cri-v4); these are just page-specific
niceties. Long-form page copy reads better with normal line
length, and inline links inherit the global gold/bold style.
------------------------------------------------------------ */
.mdl-cri-v4--page .mdl-cri-prose{ font-size: 16px; line-height: 27px; color: #506272; }
.mdl-cri-v4--page .mdl-cri-prose p,
.mdl-cri-v4--page .mdl-cri-prose li{ color: #506272; }
.mdl-cri-v4--page .mdl-cri-prose h2{ margin-top: 1.4em; }
.mdl-cri-v4--page .mdl-cri-prose h3{ margin-top: 1.2em; }
.mdl-cri-v4--page .mdl-cri-prose a{
color: #243952 !important;
font-weight: 700 !important;
text-decoration: underline !important;
text-decoration-color: #243952 !important;
}
/* ------------------------------------------------------------
Interior Page (No Banner + Sidebar): GUARANTEE the body is
visible. The theme's scroll-reveal (animations.css/js) starts
content at opacity:0 (.mdl-reveal) and reveals it via JS; if any
page script throws before the reveal runs, the body would stay
invisible. Force it visible on this template so legal copy always
shows, animation or not.
------------------------------------------------------------ */
.mdl-cri-v4--page .mdl-reveal,
.mdl-cri-v4--page .mdl-cri-content,
.mdl-cri-v4--page .mdl-cri-content *,
.mdl-cri-v4--page .mdl-cri-prose,
.mdl-cri-v4--page .mdl-cri-prose *{
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
filter: none !important;
clip-path: none !important;
}
/* The crashing text-replace snippet sets the container to display:none to
process it, then dies before restoring it — force it back. */
.mdl-cri-v4 .mdl-cri-prose,
.mdl-cri-v4 .mdl-cri-content,
.mdl-cri-v4--page .mdl-cri-prose,
.mdl-cri-v4--page .mdl-cri-content{
display: block !important;
}
/* ------------------------------------------------------------
"Get Directions" on the location cards (Contact + Home v4
locations) — match the homepage locations Figma spec:
Montserrat 500, 14px / 17px, UPPERCASE, light blue #BECCD7.
(Overrides the prussian underlined default.)
------------------------------------------------------------ */
.mdl-loc-card__dirs,
.mdl-home-v4 .mdl-loc-card__dirs{
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
font-style: normal !important;
font-weight: 500 !important;
font-size: 14px !important;
line-height: 17px !important;
display: flex !important;
align-items: center !important;
text-transform: uppercase !important;
color: #243952 !important;
text-decoration: underline !important;
text-underline-offset: 3px;
width: max-content;
}
.mdl-loc-card__dirs:hover,
.mdl-home-v4 .mdl-loc-card__dirs:hover{
color: var(--mdl-link-gold, #C9A24B) !important;
}
/* ============================================================
Round 11 — banner top gap + news/press grid alignment
============================================================ */
/* WHITE GAP ABOVE THE BANNER — Google Translate injects a hidden
banner-frame iframe and sets `body { top: 40px }`, which pushes the
whole page (header + banner) down and leaves a white strip. Neutralize
it and keep the (custom EN/ES) translate gadget usable but off-screen. */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate{ display: none !important; }
body{ top: 0 !important; }
#google_translate_element{
position: absolute !important;
left: -9999px !important;
top: 0 !important;
width: 1px !important; height: 1px !important;
overflow: hidden !important;
}
/* Make sure the v4 hero/banners sit flush under the sticky header. */
.mdl-news-v4 .mdl-news-hero,
.mdl-press-v4 .mdl-press-hero{ margin-top: 0 !important; border-top: 0 !important; }
/* WHITE GAP UNDER THE HEADER (above the banner): the scroll-parallax applies
`transform: translateY(--mdl-parallax-y)` to the WHOLE hero section (these
heroes have no separate background layer), so on load it shifts the section
down and opens a gap under the header. Neutralize the transform on the
inner-page heroes so they sit flush. (Homepage .mdl-hero keeps its drift.) */
.mdl-about-hero.mdl-parallax,
.mdl-contact-hero.mdl-parallax,
.mdl-pi-hero.mdl-parallax,
.mdl-news-hero.mdl-parallax,
.mdl-press-hero.mdl-parallax,
.mdl-cr-hero.mdl-parallax{
transform: none !important;
}
/* PRESS GRID — 3-up, equal-height rows. Press per-page is forced to a multiple
of 3 so full pages have full rows; but if a page ends with 1-2 cards (e.g. the
last page), they CENTER instead of leaving empty trailing columns. */
.mdl-press-v4 .mdl-press-grid{
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: stretch !important;
gap: 24px !important;
}
.mdl-press-v4 .mdl-press-grid > .mdl-press-card{
flex: 0 1 calc((100% - 48px) / 3) !important; /* 3 per row, 2 gaps of 24px */
max-width: calc((100% - 48px) / 3) !important;
min-width: 0 !important;
width: auto !important;
height: auto !important;
}
@media (max-width: 860px){
.mdl-press-v4 .mdl-press-grid > .mdl-press-card{
flex-basis: calc((100% - 24px) / 2) !important;
max-width: calc((100% - 24px) / 2) !important;
}
}
@media (max-width: 560px){
.mdl-press-v4 .mdl-press-grid > .mdl-press-card{
flex-basis: 100% !important;
max-width: 100% !important;
}
}
/* NEWS GRID — 3-up with equal-height rows, but a partial LAST ROW (1 or 2
cards) is CENTERED rather than left-aligned (flex, per request). */
.mdl-news-v4 .mdl-news-grid{
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: stretch !important;
gap: 24px !important;
}
.mdl-news-v4 .mdl-news-grid > .mdl-news-card{
flex: 0 0 calc((100% - 48px) / 3) !important;
max-width: calc((100% - 48px) / 3) !important;
width: calc((100% - 48px) / 3) !important;
height: auto !important;
}
@media (max-width: 860px){
.mdl-news-v4 .mdl-news-grid > .mdl-news-card{
flex-basis: calc((100% - 24px) / 2) !important;
max-width: calc((100% - 24px) / 2) !important;
width: calc((100% - 24px) / 2) !important;
}
}
@media (max-width: 560px){
.mdl-news-v4 .mdl-news-grid > .mdl-news-card{
flex-basis: 100% !important; max-width: 100% !important; width: 100% !important;
}
}
/* ============================================================
Round 16 — stylish video close (X) + clean media thumbnails
============================================================ */
/* Stylish circular close button used by every embedded video player in the
theme: homepage/testimonial lightbox (.mdl-modal__close), case-result
lightbox (.mdl-cr-modal__close) and the inline team player (.mdl-media-close,
which sits in a bar ABOVE the video). Dark frosted DISC (forced circle),
white X, rotates to gold on hover. */
.mdl-modal__close,
.mdl-cr-modal__close,
.mdl-media-close{
-webkit-appearance: none !important; appearance: none !important;
box-sizing: border-box !important;
width: 46px !important; height: 46px !important;
min-width: 46px !important; max-width: 46px !important;
min-height: 46px !important; max-height: 46px !important;
flex: 0 0 46px !important;
aspect-ratio: 1 / 1 !important;
padding: 0 !important; margin: 0 !important;
border: 0 !important; border-radius: 50% !important;
background: rgba(18,26,36,.72) !important;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
cursor: pointer; z-index: 30;
display: flex !important; align-items: center !important; justify-content: center !important;
font-size: 0 !important; line-height: 0 !important; color: transparent !important;
transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
transform: none !important; transform-origin: 50% 50% !important;
}
/* Position: lightboxes pin to the panel corner; the team player's button is
in its own bar above the video (in normal flow). */
.mdl-modal__close,
.mdl-cr-modal__close{ position: absolute !important; top: 12px !important; right: 12px !important; }
.mdl-media-close{ position: static !important; }
.mdl-modal__close:hover,
.mdl-cr-modal__close:hover,
.mdl-media-close:hover{
background: var(--mdl-link-gold, #C9A24B) !important;
/* Uniform scale only — NO rotation. A rotation made the disc look like it
flipped to a vertical oval on hover; a uniform scale keeps it a perfect
symmetric circle. */
transform: scale(1.06) !important;
box-shadow: 0 8px 22px rgba(0,0,0,.45) !important;
}
.mdl-modal__close:focus-visible,
.mdl-cr-modal__close:focus-visible,
.mdl-media-close:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
/* The two strokes of the X */
.mdl-media-close__x{ position: absolute; inset: 0; }
.mdl-modal__close::before, .mdl-modal__close::after,
.mdl-cr-modal__close::before, .mdl-cr-modal__close::after,
.mdl-media-close__x::before, .mdl-media-close__x::after{
content: ""; position: absolute; top: 50%; left: 50%;
width: 18px; height: 2px; background: #fff; border-radius: 2px;
}
.mdl-modal__close::before, .mdl-cr-modal__close::before, .mdl-media-close__x::before{ transform: translate(-50%,-50%) rotate(45deg); }
.mdl-modal__close::after, .mdl-cr-modal__close::after, .mdl-media-close__x::after{ transform: translate(-50%,-50%) rotate(-45deg); }
/* Team MEDIA opens in a popup (lightbox). The circular close (X) sits ABOVE
the video, not on it. */
.mdl-video-modal{
position: fixed; inset: 0; z-index: 99999;
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.mdl-video-modal__backdrop{
position: absolute; inset: 0;
background: rgba(8,12,18,.82);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.mdl-video-modal__dialog{ position: relative; width: min(92vw, 960px); }
.mdl-video-modal__frame{
position: relative; width: 100%; aspect-ratio: 16 / 9;
background: #000; border-radius: 10px; overflow: hidden;
box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.mdl-video-modal__frame iframe,
.mdl-video-modal__frame video{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* close button positioned ABOVE the video frame, right-aligned */
.mdl-video-modal .mdl-media-close{ position: absolute !important; top: -58px; right: 0; }
@media (max-width: 560px){
.mdl-video-modal .mdl-media-close{ top: -52px; right: 50%; transform: translateX(50%); }
}
/* Team MEDIA thumbnails — never show a black frame. Robust YouTube parsing
(PHP/JS) now always yields a real poster; cover-fit it and give the tile a
brand backing color so any letterboxing reads as brand, not black. */
.mdl-team-media__item{ position: relative; background: #243952; overflow: hidden; }
.mdl-team-media__poster{ width: 100%; height: 100%; object-fit: cover; display: block; }
.mdl-team-media__item--playing{ position: relative; }
.mdl-team-media__embed{ width: 100%; height: 100%; border: 0; display: block; }
/* ============================================================
Round 23 — mobile hamburger visibility + clean submenu caret
============================================================ */
@media (max-width: 992px){
/* Force the hamburger button visible and its three bars to render as solid
white lines (some stale/!important rules were leaving the bars blank). */
.mdl-header .mdl-header__menu-toggle,
.mdl-header button.mdl-header__menu-toggle{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
width: 44px !important;
height: 44px !important;
padding: 9px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
cursor: pointer !important;
flex: 0 0 auto !important;
z-index: 20 !important;
}
.mdl-header .mdl-header__menu-toggle span,
.mdl-header button.mdl-header__menu-toggle span{
display: block !important;
width: 26px !important;
height: 3px !important;
background: #ffffff !important;
border-radius: 2px !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Keep the open (X) animation working with the 3px bars + 5px gap. */
.mdl-header .mdl-header__menu-toggle[aria-expanded="true"] span:nth-child(1){
transform: translateY(8px) rotate(45deg) !important;
}
.mdl-header .mdl-header__menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0 !important; }
.mdl-header .mdl-header__menu-toggle[aria-expanded="true"] span:nth-child(3){
transform: translateY(-8px) rotate(-45deg) !important;
}
/* Clean down-chevron on parent items (replaces the skewed arrow). */
.mdl-header .mdl-nav-menu li.menu-item-has-children > a::after,
.mdl-header .mdl-nav-menu li.page_item_has_children > a::after{
content: "" !important;
display: inline-block !important;
width: 9px !important;
height: 9px !important;
margin-left: 10px !important;
border: 0 !important;
border-right: 2px solid #fff !important;
border-bottom: 2px solid #fff !important;
transform: rotate(45deg) !important; /* points down */
vertical-align: middle !important;
transition: transform .25s ease !important;
}
.mdl-header .mdl-nav-menu li.is-open > a::after{
transform: rotate(-135deg) !important; /* points up when open */
}
}
/* ============================================================
Round 24 — consult bg motion off + mobile section-head stacking
============================================================ */
/* Remove the animated "gradient shift" background motion on the homepage
contact-form (consult) section, on desktop AND mobile. Keeps the static
background; just stops the movement. */
.mdl-consult{ animation: none !important; }
/* On mobile, any section header that pairs a heading with a button
(e.g. RECENT PRESS + VIEW ALL, RECENT NEWS, etc.) should stack the two
and centre them so it doesn't look cramped. */
@media (max-width: 768px){
.mdl-section-head,
.mdl-home-v4 .mdl-section-head{
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 16px !important;
}
.mdl-section-head > *,
.mdl-home-v4 .mdl-section-head > *{
align-self: center !important;
text-align: center !important;
}
.mdl-section-head .mdl-btn,
.mdl-home-v4 .mdl-section-head .mdl-btn{ width: auto; }
}
/* ============================================================
Round 26 — "Vantage Point" section: responsive + smaller on mobile
============================================================ */
@media (max-width: 992px){
.mdl-home-v4 .mdl-vantage{ padding: 48px 18px !important; }
.mdl-home-v4 .mdl-vantage__inner{ padding: 0 !important; }
.mdl-home-v4 .mdl-vantage__inner .mdl-h2{ font-size: 24px !important; line-height: 30px !important; margin-bottom: 18px !important; }
.mdl-home-v4 .mdl-vantage__copy{ font-size: 16px !important; line-height: 26px !important; max-width: 640px !important; }
}
@media (max-width: 600px){
.mdl-home-v4 .mdl-vantage{ padding: 36px 16px !important; }
.mdl-home-v4 .mdl-vantage__inner .mdl-h2{ font-size: 20px !important; line-height: 26px !important; margin-bottom: 14px !important; }
.mdl-home-v4 .mdl-vantage__copy{ font-size: 14px !important; line-height: 22px !important; }
}
@media (max-width: 380px){
.mdl-home-v4 .mdl-vantage__inner .mdl-h2{ font-size: 18px !important; line-height: 24px !important; }
.mdl-home-v4 .mdl-vantage__copy{ font-size: 13px !important; line-height: 21px !important; }
}
/* ============================================================
Round 29 — no hyphenation, hamburger alignment, mobile heading sizes
============================================================ */
/* Never hyphenate/split words; let whole words wrap to the next line. */
*, *::before, *::after{
-webkit-hyphens: none !important;
-ms-hyphens: none !important;
hyphens: none !important;
}
@media (max-width: 992px){
/* Hamburger: right-aligned at the far edge, with breathing room. */
.mdl-header__actions{ margin-left: auto !important; }
.mdl-header .mdl-header__menu-toggle,
.mdl-header button.mdl-header__menu-toggle{
order: 99 !important; /* keep it the right-most control */
margin-left: 8px !important;
margin-right: 0 !important;
padding: 9px !important;
}
.mdl-header__container{ padding-left: 16px !important; padding-right: 16px !important; }
/* Third home section heading ("Experience That Drives Outcomes") matched to
the Vantage Point heading size so it isn't oversized on mobile. */
.mdl-home-v4 .mdl-team__title{ font-size: 24px !important; line-height: 30px !important; }
}
@media (max-width: 600px){
.mdl-home-v4 .mdl-team__title{ font-size: 20px !important; line-height: 26px !important; }
}
@media (max-width: 380px){
.mdl-home-v4 .mdl-team__title{ font-size: 18px !important; line-height: 24px !important; }
}
/* ============================================================
Round 39 — footer phone/fax number stays on one line
============================================================ */
.mdl-footer__line { white-space: nowrap !important; }
.mdl-footer__line a { white-space: nowrap !important; } /* never split (925) 515-5264 */
/* On the 5-column desktop footer, the contact column (Phone/Fax) is a fixed
190px so the number sits on one line (3-col/mobile layouts untouched). */
@media (min-width: 1201px){
.mdl-footer__main { grid-template-columns: 2fr 190px 1fr 1fr 1fr !important; }
}
/* ============================================================
Round 42 — Bootstrap modal close (×) -> perfect circle
Case-result / verdict / practice-area popups use
which fell back to Bootstrap's oval on hover. Force a 46x46 disc like the
other video close buttons.
============================================================ */
.centered-modal .close,
.modal.centered-modal .modal-header .close,
.centered-modal .modal-header > .close{
-webkit-appearance: none !important; appearance: none !important;
box-sizing: border-box !important;
position: absolute !important; top: 12px !important; right: 12px !important;
width: 46px !important; height: 46px !important;
min-width: 46px !important; max-width: 46px !important;
min-height: 46px !important; max-height: 46px !important;
aspect-ratio: 1 / 1 !important;
padding: 0 !important; margin: 0 !important;
border: 0 !important; border-radius: 50% !important;
background: rgba(18,26,36,.72) !important;
color: #fff !important; opacity: 1 !important;
font-size: 26px !important; font-weight: 400 !important; line-height: 1 !important;
display: flex !important; align-items: center !important; justify-content: center !important;
text-shadow: none !important; cursor: pointer !important; z-index: 1060 !important;
box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
transition: transform .25s ease, background .25s ease, box-shadow .25s ease !important;
}
.centered-modal .close:hover,
.centered-modal .modal-header > .close:hover{
background: var(--mdl-link-gold, #C9A24B) !important;
transform: scale(1.06) !important; /* uniform — no rotation, stays a circle */
opacity: 1 !important;
box-shadow: 0 8px 22px rgba(0,0,0,.45) !important;
}
.centered-modal .close:focus,
.centered-modal .close:focus-visible{ outline: 2px solid #fff !important; outline-offset: 2px !important; }
/* ============================================================
Round 43 — every close (×) button is a SYMMETRIC CIRCLE, and
the hover no longer flips it to a vertical oval.
------------------------------------------------------------
This is the single, final word on close-button geometry. It is
intentionally placed last in the last-loaded stylesheet, and the
selectors are scoped under their modal containers (and element-
qualified) so they out-rank every earlier rule on specificity AND
cascade order. Covers all three video players + the Bootstrap popups:
• .mdl-modal__close (homepage / testimonials / about / PI / location lightbox)
• .mdl-cr-modal__close (case-result lightbox)
• .mdl-media-close (team attorney media player)
• .centered-modal .close (case-result / verdict / practice-area popups)
============================================================ */
.mdl-modal .mdl-modal__close,
.mdl-cr-modal .mdl-cr-modal__close,
.mdl-video-modal .mdl-media-close,
button.mdl-modal__close,
button.mdl-cr-modal__close,
button.mdl-media-close,
.centered-modal .close,
.modal.centered-modal .modal-header .close{
box-sizing: border-box !important;
width: 46px !important; height: 46px !important;
min-width: 46px !important; max-width: 46px !important;
min-height: 46px !important; max-height: 46px !important;
aspect-ratio: 1 / 1 !important;
padding: 0 !important;
border-radius: 50% !important;
/* keep the resting state perfectly upright; only :hover applies a transform */
transform: none !important;
transform-origin: 50% 50% !important;
}
/* Hover: gold + a gentle UNIFORM scale. A uniform scale multiplies both axes
equally, so a circle can never render as a vertical/horizontal oval. */
.mdl-modal .mdl-modal__close:hover,
.mdl-cr-modal .mdl-cr-modal__close:hover,
.mdl-video-modal .mdl-media-close:hover,
button.mdl-modal__close:hover,
button.mdl-cr-modal__close:hover,
button.mdl-media-close:hover,
.centered-modal .close:hover,
.modal.centered-modal .modal-header .close:hover{
transform: scale(1.06) !important;
}
/* ============================================================
Round 45 — mobile breathing room under the fixed header.
(Superseded by the Round 57/59 consolidated rule further down, which sets
the body offset per page type. Kept as a comment for history.)
============================================================ */
/* ============================================================
Round 46 — default preloader removed; keep the body visible.
------------------------------------------------------------
The branded splash preloader (mdl_render_preloader) used to print an
inline `html:not(.mdl-loaded) body{opacity:1 !important}` that retired
the old page-entrance fade in animations.css (which sets the body to
opacity:0 until JS adds .mdl-loaded). With the preloader gone we keep
that override here so the page never starts blank and any custom
preloader gets a flash-free base. Other animations are unaffected.
============================================================ */
html:not(.mdl-loaded) body { opacity: 1 !important; }
/* ============================================================
Round 48 — hero/banner heights scale with the viewport on desktop,
so they look balanced on both 16:9 and 16:10 monitors.
------------------------------------------------------------
The heroes were fixed pixel heights, so on a taller 16:10 screen
(or a large monitor) they occupied a smaller slice and looked like
a short strip. Here each hero's height becomes a proportion of the
viewport HEIGHT (vh) with a min/max clamp:
• the MIN equals the old fixed height, so on a standard 1920x1080
(16:9) screen the familiar look is preserved;
• the vh value grows the hero on taller 16:10 screens and larger
monitors so the proportion stays consistent;
• the MAX caps it on very tall displays.
Desktop only (>=993px) — the mobile/tablet hero rules (<=992px) are
untouched. Mirrors the v4 desktop breakpoint.
============================================================ */
@media (min-width: 993px) {
.mdl-home-v4 .mdl-hero { min-height: clamp(720px, 67vh, 960px) !important; } /* was 720px */
.mdl-news-v4 .mdl-news-hero { min-height: clamp(440px, 41vh, 640px) !important; } /* was 440px */
.mdl-press-v4 .mdl-press-hero { min-height: clamp(560px, 52vh, 800px) !important; } /* was 560px */
.mdl-about-v4 .mdl-about-hero { min-height: clamp(500px, 46vh, 720px) !important; } /* was 500px */
.mdl-cr-v4 .mdl-cr-hero { min-height: clamp(450px, 42vh, 650px) !important; } /* was 450px */
.mdl-pi-v4 .mdl-pi-hero { min-height: clamp(560px, 52vh, 800px) !important; } /* was 560px */
}
/* ============================================================
Round 49 — FAQ page banner + full-width accordion (no sidebar).
The FAQ template now renders a bottom-aligned hero banner (like the
other v4 heroes) and drops the two-column sidebar layout. All rules
are scoped under `.mdl-faq-v4` so the shared `.mdl-pi-faq` accordion
styles on the Personal Injury page are NOT affected.
============================================================ */
.mdl-faq-v4 .mdl-faq-hero {
position: relative;
min-height: 400px;
background-color: #243952;
background-position: center top; /* top-anchored so faces stay in frame */
background-size: cover; /* fill without stretching/squeezing */
background-repeat: no-repeat;
color: #fff;
display: flex;
align-items: flex-end; /* banner content bottom-aligned */
justify-content: center;
text-align: center;
padding: 88px 24px 56px;
}
.mdl-faq-v4 .mdl-faq-hero__inner { max-width: 880px; margin: 0 auto; }
.mdl-faq-v4 .mdl-faq-hero__title {
font-family: var(--mdl-font, inherit);
font-weight: 700;
color: #fff;
margin: 0 0 14px;
font-size: clamp(34px, 5vw, 56px);
line-height: 1.08;
letter-spacing: .02em;
}
.mdl-faq-v4 .mdl-faq-hero__sub {
color: rgba(255,255,255,.92);
margin: 0;
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.6;
font-weight: 600;
}
/* Full-width accordion section (gutters, since there is no column now) */
.mdl-faq-v4 .mdl-pi-faq { padding: 72px 20px; }
/* Banner scales with the viewport on desktop so it stays balanced on
16:9 and 16:10 monitors (same approach as the Round 48 heroes). */
@media (min-width: 993px) {
.mdl-faq-v4 .mdl-faq-hero {
min-height: 400px;
height: 400px;
background-size: cover;
background-position: center top;
}
}
@media (max-width: 768px) {
.mdl-faq-v4 .mdl-faq-hero {
min-height: 300px;
height: auto;
padding: 56px 18px 32px;
background-size: cover; /* mobile: cover (no stretch/distortion) */
background-position: center top; /* anchor near the faces, less dead crop */
}
.mdl-faq-v4 .mdl-pi-faq { padding: 48px 16px; }
}
/* ============================================================
Round 50 — Interior Page (sidebar template) full-width variant.
Privacy Policy / Disclaimer use the "Interior Page — No Banner +
Sidebar" template (template-sidebar-page.php). That template now drops
the sidebar for those pages and adds `.mdl-cri-grid--full`; this makes
the content span the full container instead of leaving the 379px
sidebar column empty. Other pages using the template are unaffected.
============================================================ */
.mdl-cri-v4 .mdl-cri-grid--full {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
/* ============================================================
Round 52 — title bar on the team MEDIA video popup.
Every opened video shows a heading (the video's caption, or the
team member's name) on top, with the close (X) on the right.
The close button moves from floating above the frame into this
header row; it stays position:relative so its X stays centered.
============================================================ */
.mdl-video-modal__head{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
margin: 0 0 12px;
}
.mdl-video-modal__title{
margin: 0;
flex: 1 1 auto;
min-width: 0;
color: #fff;
font-family: var(--mdl-font, inherit);
font-weight: 700;
font-size: clamp(16px, 2.2vw, 20px);
line-height: 1.3;
letter-spacing: .01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mdl-video-modal__head .mdl-media-close{
position: relative !important;
top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
}
@media (max-width: 560px){
.mdl-video-modal__head .mdl-media-close{ transform: none !important; }
.mdl-video-modal__head .mdl-media-close:hover{ transform: scale(1.06) !important; }
.mdl-video-modal__title{ white-space: normal; }
}
/* ============================================================
Round 54 — visible heading on the shared video lightbox (site-wide).
The `.mdl-modal` video popup (home, testimonials, PI, about, location)
now shows a title bar in the strip above the video, on the left, with
the existing close (X) on the right. Title text is injected by
assets/js/video-modal-title.js. Mirrors the team-page video heading.
============================================================ */
.mdl-modal__titlebar{
position: absolute;
top: -35px;
left: 2px;
right: 44px; /* clear the × close button (right:0) */
margin: 0;
color: #fff;
font-family: var(--mdl-font, inherit);
font-weight: 700;
font-size: clamp(15px, 2vw, 19px);
line-height: 1.3;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none; /* purely a label */
}
/* ============================================================
Round 55 — team member name stays WHITE on hover (not gold).
The Personal-Injury "Meet the Team" grid turned each member's name
gold on card hover; keep it white per request. The card still gets
its gentle lift + shadow on hover — only the gold name is removed.
============================================================ */
.mdl-pi-v4 .mdl-pi-team__card:hover .mdl-pi-team__name,
.mdl-pi-v4 .mdl-pi-team__card:focus-visible .mdl-pi-team__name{
color: #fff !important;
}
/* ============================================================
Round 56 — About page: kill the big empty band below the hero
on mobile. On desktop the chevron watermark (.mdl-about-intro__
logomark) sits BESIDE the intro text; on mobile about-v4.css
uses flex-direction:column-reverse, which flips that tall
decorative image ABOVE the copy and leaves a large blank gap
between the hero banner and the "Founded by…" text. The mark is
purely decorative (aria-hidden), so hide it on mobile — the copy
then starts directly under the hero.
============================================================ */
@media (max-width: 992px){
.mdl-about-v4 .mdl-about-intro__logomark{ display: none !important; }
}
/* ============================================================
Round 57 — mobile header height + spacing pass
============================================================ */
/* (6) Slimmer mobile header + (4) remove the gap under it.
The fixed mobile header was ~85px (logo 48 + 18px×2 padding + 1px border)
but body padding-top was 116px, leaving ~31px of empty space under the
header on the homepage (and everywhere). Trim the bar padding to 12px
(header ≈ 73px) and set the body offset to match exactly, so the hero /
photo sits flush under the header with no white gap. */
@media (max-width: 992px){
.mdl-header__bar .mdl-header__container{
padding-top: 12px !important;
padding-bottom: 12px !important;
}
/* Body offset = exact fixed-header height so full-bleed hero banners (About,
FAQ) sit FLUSH under the header with no white gap line. */
body{ padding-top: 100px !important; }
body.admin-bar{ padding-top: 146px !important; } /* +46px WP admin bar */
/* Inner pages whose first element is a HEADING (not a full-bleed hero) get a
little extra so the title has breathing room under the header.
Both WP body-class formats are targeted for reliability. */
body.page-template-template-location-v4,
body.page-template-templatestemplate-location-v4-php,
body.page-template-template-practice-area,
body.page-template-templatestemplate-practice-area-php,
body.single,
body.single-post{ padding-top: 124px !important; }
body.page-template-template-location-v4.admin-bar,
body.page-template-templatestemplate-location-v4-php.admin-bar,
body.page-template-template-practice-area.admin-bar,
body.page-template-templatestemplate-practice-area-php.admin-bar,
body.single.admin-bar,
body.single-post.admin-bar{ padding-top: 170px !important; }
}
/* (1) Footer logo was width:100% → huge once the footer collapses to a
single column on mobile. Cap it to a sensible size, centered. */
@media (max-width: 768px){
.mdl-footer__brand .mdl-footer__logo-img{
width: auto !important;
max-width: 200px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* (3) Team pages — centre the Media / Associations carousel arrows on
their own row UNDER the heading on mobile (they were dropping to the
left edge). Heading keeps its left alignment. */
@media (max-width: 768px){
.mdl-team-v4 .mdl-team-section-head{ flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
.mdl-team-v4 .mdl-team-section-head .mdl-team-section-title{ text-align: left !important; }
.mdl-team-v4 .mdl-team-arrows{ display: flex !important; width: 100% !important; justify-content: center !important; }
}
/* (5) Homepage consult / contact-form section — on mobile the cover
background was over-enlarged and looked low-res. Show the whole image
zoomed out on the slate backdrop (slate fills any margin, so no white
gap) for a sharper result. */
@media (max-width: 768px){
.mdl-home-v4 .mdl-consult.mdl-consult--has-bg{
background-color: var(--mdl-slate, #4E6072) !important;
background-size: contain !important;
background-position: center top !important;
background-repeat: no-repeat !important;
}
}
/* ============================================================
Round 58 — homepage hero scroll-drift gap + About CTA spacing
============================================================ */
/* (1) Homepage hero drifts on scroll and opens a small gap beneath it.
Cause: animations.js looks for a .mdl-hero__bg layer to parallax, but this
hero uses .mdl-hero__media, so it falls back to transforming the WHOLE
.mdl-hero section (translateY from --mdl-parallax-y). A transform moves the
section visually but leaves its layout box behind → the gap. Neutralize the
transform so the hero stays put and sits flush against the next section.
(Only the homepage has .mdl-hero; inner-page heroes were handled earlier.) */
.mdl-home-v4 .mdl-hero.mdl-parallax{ transform: none !important; }
/* (2) About page CTA: the sub-line sat too close to the button (the flex
column gap is only 16px). Add breathing room below the sub on the About
CTA only, so the button gets more separation. */
.mdl-about-v4 .mdl-about-cta .mdl-pi-cta__sub{ margin-bottom: 24px !important; }
/* ============================================================
Round 59 — consistent header gap across ALL pages (mobile)
============================================================ */
/* header-v4.css forces padding-top:0 on these page types, so on mobile their
first heading / photo slid UNDER the fixed header (e.g. the team headshot
was tucked behind it). The general body offset is now 90px (header ~73px +
~17px gap); restore that offset on these pages too. */
@media (max-width: 992px){
body.single,
body.archive,
body.search,
body.single-team{ padding-top: 90px !important; }
body.single.admin-bar,
body.archive.admin-bar,
body.search.admin-bar,
body.single-team.admin-bar{ padding-top: 136px !important; }
/* Location pages and team pages already add their own top padding, so don't
double the buffer up — trim it so the heading / headshot sits a clean
~30px below the header rather than being pushed too far down. */
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4{ padding-top: 16px !important; }
.mdl-team-v4 .mdl-team-main{ padding-top: 30px !important; }
/* Full-bleed hero banners must stay flush under the header (no white gap),
so cancel the ~17px buffer on them. (Homepage stays gap-free.) */
.mdl-home-v4 .mdl-hero,
.mdl-about-hero,
.mdl-pi-hero,
.mdl-news-hero,
.mdl-press-hero,
.mdl-cr-hero,
.mdl-faq-hero{ margin-top: -21px !important; }
}
/* ============================================================
Round 60 — footer addresses: keep each line unbroken
============================================================ */
/* The 3 office addresses are \n-delimited (rendered as ), so every line —
e.g. "39899 Balentine Drive", "1901 Harrison Street" — is meant to be ONE
line. In the 5-column footer grid the 1fr office columns are a touch narrow
for the 16px text, so the last word ("Drive" / "Street" / "94588") was
wrapping to a second line. Keep each line unbroken on the multi-column
layout; the text simply uses the wide 88px column gap. min-width:0 stops the
nowrap text from stretching the grid tracks, so the columns stay even.
Mobile (<=768px) is a single full-width column, so wrapping is left alone. */
.mdl-footer__main .mdl-footer__office{ min-width: 0; }
@media (min-width: 769px){
.mdl-footer__main .mdl-footer__address{ white-space: nowrap; }
}
/* ============================================================
Round 61 — mobile header polish + clickable parent menu items
============================================================ */
@media (max-width: 992px){
/* (3) Smaller logo in the mobile header. The hamburger (44px) is now the
tallest element, so the header bar is ~4px shorter — the hero offset
above (-21px) keeps full-bleed heroes flush. */
.mdl-header__logo-img{ max-height: 40px !important; }
/* (4) Give the hamburger a little breathing room on the right so it is not
jammed against the edge (the bar padding had been cut to 4px). */
.mdl-header__bar .mdl-header__container{ padding-right: 16px !important; }
/* (5) Parent items (About, Practice Areas) must be CLICKABLE on mobile.
The JS now lets a tap on the label navigate, and only a tap in the caret
zone on the right toggles the submenu. Pin the caret to the far right so
it lines up with that tap zone, and reserve room for it on the link. */
.mdl-header .mdl-nav-menu li.menu-item-has-children > a,
.mdl-header .mdl-nav-menu li.page_item_has_children > a{
position: relative !important;
padding-right: 56px !important;
}
.mdl-header .mdl-nav-menu li.menu-item-has-children > a::after,
.mdl-header .mdl-nav-menu li.page_item_has_children > a::after{
position: absolute !important;
right: 24px !important;
top: 50% !important;
margin: 0 !important;
transform: translateY(-50%) rotate(45deg) !important;
}
.mdl-header .mdl-nav-menu li.is-open > a::after{
transform: translateY(-50%) rotate(225deg) !important;
}
}
/* ============================================================
Round 66 — remove the video-popup title heading site-wide.
Per request: no heading above any video popup.
- Shared lightbox heading (.mdl-modal__titlebar, injected by
video-modal-title.js on home / testimonials / PI / about / location) is
absolutely positioned, so hiding it has no layout impact; the separate
× close stays put and the video is unchanged.
- Team player heading (.mdl-video-modal__title, from team-individual-v4.js)
sits in a flex head row with the close button; hide the title and
right-align the row so the × stays top-right.
Accessible names are untouched — the SR heading and the team overlay's
aria-label still carry the video title for screen readers.
============================================================ */
.mdl-modal__titlebar,
.mdl-video-modal__title { display: none !important; }
.mdl-video-modal__head { justify-content: flex-end !important; }
/* ============================================================
Round 67 — mobile: Client Testimonials "View All" button moves BELOW the
two testimonials. Applies on the home, personal-injury and about pages
(all share .mdl-testimonials > .mdl-testimonials__wrap > .mdl-section-head
[heading + View All] + .mdl-testimonials__grid). The button is nested in
.mdl-section-head, so display:contents flattens that row — heading, grid and
button become flex items of .mdl-testimonials__wrap and can be reordered.
Desktop layout is untouched.
============================================================ */
@media (max-width: 768px) {
.mdl-home-v4 .mdl-testimonials__wrap { display: flex; flex-direction: column; }
.mdl-home-v4 .mdl-testimonials .mdl-section-head { display: contents; }
.mdl-home-v4 .mdl-testimonials .mdl-section-head > .mdl-h2 { order: 1; margin: 0 0 28px; text-align: center; }
.mdl-home-v4 .mdl-testimonials__grid { order: 2; }
.mdl-home-v4 .mdl-testimonials .mdl-section-head > .mdl-btn { order: 3; align-self: center; margin: 28px 0 0; }
}
/* Bolded inline links (some are wrapped in ) keep the same blue */
.entry-content a strong,
.mdl-team-bio a strong,
.mdl-rich-text a strong,
.mdl-prose a strong,
.mdl-location-v4 .mdl-prose a strong,
.mdl-case-body a strong,
.mdl-pa-copy a strong,
.mdl-blog-v4 .mdl-blog-content a strong,
.mdl-cri-v4 .mdl-cri-prose a strong,
.mdl-cri-v4--page .mdl-cri-prose a strong{
color: inherit !important;
font-weight: inherit !important;
}
/* ============================================================
Round 50 — Mobile hero banner sharpness (About / Practice Areas /
FAQ / News / Press / Case Results / Locations) + slightly taller
About hero on phones.
------------------------------------------------------------
The Practice Areas (.mdl-pi-hero), FAQ (.mdl-faq-hero), Case
Results (.mdl-cr-hero) and Locations (.mdl-locs-hero) banners
were CSS background-images; they now render the same real
+ srcset pattern as the other v4 heroes (see mdl_hero_banner_img()
in functions.php), with an optional dedicated MOBILE image per page
in the Customizer. Rules below keep the converted heroes stable.
============================================================ */
/* must not participate in layout — the absolutely-positioned
hero inside it fills the banner section directly. */
.mdl-hero-banner__picture { display: contents; }
/* Solid navy behind the hero while it loads (PI hero had no
background-color before; FAQ already had one). */
.mdl-pi-v4 .mdl-pi-hero { background-color: #243952; }
/* About hero: a bit taller on phones (was 340 / 280). */
@media (max-width: 768px) {
.mdl-about-v4 .mdl-about-hero { min-height: 400px; }
}
@media (max-width: 480px) {
.mdl-about-v4 .mdl-about-hero { min-height: 340px; }
}
/* ============================================================
Round 72 (v4.96.2) — GLOBAL RECURRING STANDARDS
Client review checklist, enforced theme-wide from this single
last-loaded sheet. Each block is numbered to the checklist item.
Nothing else in the theme was restructured.
============================================================ */
/* ------------------------------------------------------------
[1] SQUARE CORNERS SITE-WIDE (no rounded rectangles).
Everything is flattened to 0, then genuinely-circular UI
(play buttons, close discs, search toggle, slider dots/arrows,
pagination bullets, radio inputs, chip × button) is restored to
a true circle. Class-based restores out-specify the universal
rule, so circles win without relying on load order.
------------------------------------------------------------ */
*, *::before, *::after { border-radius: 0 !important; }
/* Restore true circles / pills for elements meant to be round. */
.mdl-vid-card__play,
.mdl-testimonials-v4 .mdl-vid-card__play,
.mdl-team-media__play,
.mdl-team-v4 .mdl-team-media__play,
.mdl-pi-card__arrow,
.mdl-media-close,
.mdl-video-modal__close,
.mdl-modal__close,
.modal-header .close,
.centered-modal .modal-header > .close,
.modal.centered-modal .modal-header .close,
.btn-close,
.mdl-header__search-toggle,
.mdl-header button.mdl-header__search-toggle,
.mdl-cri-summary-btn,
.mdl-cri-v4 .mdl-cri-summary-btn,
.mdl-press-chip__x,
.mdl-press-v4 .mdl-press-chip__x,
.slick-arrow,
.slick-dots li,
.slick-dots li button,
.pagination .nav-links a,
.pagination .nav-links span,
.page-icon,
.mdl-social a,
.mdl-footer__social a,
input[type="radio"],
.form-check-input[type="radio"] { border-radius: 50% !important; }
/* ------------------------------------------------------------
[2] MONTSERRAT EVERYWHERE (no Arial / system fallback).
Body already uses Montserrat; form controls, buttons and tables
don't inherit font-family by default, so pin them explicitly.
(Deliberately NOT a universal selector, so icon fonts — Slick,
dashicons, etc. — keep their own font-family and still render.)
------------------------------------------------------------ */
body,
input, select, textarea, button,
.btn, .mdl-btn,
table, th, td,
.form-control, .form-select {
font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
/* [6] Recirculation links (Practice-Area pages used Arial in places) — force
Montserrat on the recirc "Read More"/"See All" links AND the in-copy
cross-links ("… lawyers by location: Pleasanton | Oakland | …"). !important
beats any inline Arial that content editors may have pasted in.
The `.mdl-pa-copy *` selector covers descendant / elements
that carry their OWN inline font-family:Arial (e.g. the bold
"Wrongful death lawyers by location:" label), which a parent-only rule
can't override. */
.mdl-pa-copy,
.mdl-pa-copy *,
.mdl-pa-copy a,
.mdl-pa-news-card__more,
.mdl-press-card__more,
.mdl-news-card__more,
.mdl-cr-result__more,
.mdl-cri-result__more,
.mdl-cri-related-card__more,
.mdl-pi-result__more,
.mdl-verdict__more,
.mdl-team-press-card__more,
.mdl-team-press__see-all,
.mdl-press__see-all,
.mdl-news__see-all {
font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
/* ------------------------------------------------------------
[3][4] HEADING SIZES STANDARDIZED TO THE LOCATION-PAGE STYLE
across the Practice-Area pages. Reference (page-location-v4.css):
main title = Montserrat 700 / 46px / 58px / uppercase / #243952
section H2 = Montserrat 700 / 32px / 38px / uppercase
Locks the practice-area page + section headings to those values
so they can't drift from the location page.
------------------------------------------------------------ */
.mdl-pa-v4 .mdl-pa-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 46px !important;
line-height: 52px !important;
text-transform: uppercase !important;
color: #243952 !important;
}
.mdl-pa-v4 .mdl-pa-news__title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 32px !important;
line-height: 38.4px !important;
text-transform: uppercase !important;
}
/* ============================================================
[3][4] CANONICAL HEADING SYSTEM — verified against Figma
(file PQ8Pvz6OLL9P03mMQYdn6l) via the design tokens:
Website H1: Montserrat 700 · 46px / 52px
Website H2: Montserrat 700 · 32px / 38.4px
Website H3: Montserrat 600 · 22px / 30px
Website H4: Montserrat 600 · 21px / 28px
The page-specific stylesheets had drifted on LINE-HEIGHT
(46px titles used 56/58/1.25; 32px used 38/40/1.2) while size
and weight were already correct. This last-loaded block pins
every NAMED heading class across all page types to the exact
Figma metrics so they are visually identical everywhere. Colour
and text-transform are intentionally NOT forced here — those are
context-specific (white on dark heroes, prussian on light, etc.)
and already correct per design. Non-heading 32px/46px elements
(case amounts, attorney names, modal-close buttons) are
deliberately excluded.
============================================================ */
/* ---- H1 / page + hero titles → 46px / 52px / 700 ---- */
.mdl-about-hero__title,
.mdl-blog-title,
.mdl-cr-hero__title,
.mdl-hero__title,
.mdl-loc-v4__title,
.mdl-locs-hero__title,
.mdl-news-hero__title,
.mdl-press-hero__title,
.mdl-test-v4__title,
.mdl-pa-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 46px !important;
line-height: 52px !important;
}
/* ---- H2 / section headings → 32px / 38.4px / 700 ---- */
.mdl-h2,
.mdl-cr-h2,
.mdl-cri-h2,
.mdl-pi-h2,
.mdl-team-section-title,
.mdl-team__title,
.mdl-team-cta__title,
.mdl-pa-cta__title,
.mdl-ready-cta__title,
.mdl-pa-news__title,
.mdl-blog-more__title,
.mdl-blog-cta__title,
.mdl-cri-more-h,
.mdl-loc-v4__subhead {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 32px !important;
line-height: 38.4px !important;
}
/* ---- H3 / in-copy sub-headings → 22px / 30px / 600 ---- */
.mdl-blog-v4 .mdl-blog-content h3,
.mdl-pa-copy h2,
.mdl-cri-prose h2,
.mdl-loc-v4__main h2 {
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
font-size: 22px !important;
line-height: 30px !important;
}
/* ---- H4 / small headings → 21px / 28px / 600 ---- */
.mdl-pa-copy h3,
.mdl-blog-v4 .mdl-blog-content h4,
.mdl-cri-prose h3 {
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
font-size: 21px !important;
line-height: 28px !important;
}
/* Mobile: scale the two large heading levels down proportionally but keep
the Figma RATIO (line-height ≈ 1.25× for H1, 1.2× for H2). */
@media (max-width: 768px) {
.mdl-about-hero__title,
.mdl-blog-title,
.mdl-cr-hero__title,
.mdl-hero__title,
.mdl-loc-v4__title,
.mdl-locs-hero__title,
.mdl-news-hero__title,
.mdl-press-hero__title,
.mdl-test-v4__title,
.mdl-pa-title {
font-size: 34px !important;
line-height: 42px !important;
}
.mdl-h2,
.mdl-cr-h2,
.mdl-cri-h2,
.mdl-pi-h2,
.mdl-team-section-title,
.mdl-team__title,
.mdl-team-cta__title,
.mdl-pa-cta__title,
.mdl-ready-cta__title,
.mdl-pa-news__title,
.mdl-blog-more__title,
.mdl-blog-cta__title,
.mdl-cri-more-h,
.mdl-loc-v4__subhead {
font-size: 26px !important;
line-height: 32px !important;
}
}
/* ------------------------------------------------------------
[5] DIVIDER = LIGHTER STYLE, PLACED AFTER THE FAQs.
Location page uses a 1px #647C90 rule. On practice-area pages
the divider belongs AFTER the FAQ block (i.e. above the Recent
Post section, which immediately follows the FAQs) — not before
the FAQs. It also must be the light weight, replacing the old
heavy prussian line. So: no rule before the FAQ block, and a
single light rule above Recent Post.
------------------------------------------------------------ */
.mdl-pa-v4 .mdl-pa-faq-wrap {
border-top: 0;
margin-top: 32px;
padding-top: 0;
}
/* Only ONE section divider on practice-area pages — the light rule AFTER the
FAQ block (i.e. above the Recent Post section). Lighten the old heavy
prussian separator to the 1px #647C90 weight used on the location page. */
.mdl-pa-v4 .mdl-pa-news {
border-top: 0 !important; /* divider is now the explicit
above */
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ------------------------------------------------------------
[6] RECIRCULATION LINKS — ONE CONSISTENT WEIGHT.
The "Read More" / "See All" recirculation links used a mix of
Montserrat 500 (most cards) and 600 (Personal-Injury results).
Unify the WEIGHT to 500 across all of them (sizes/colours per
their own breakpoints are left as designed).
------------------------------------------------------------ */
.mdl-pa-news-card__more,
.mdl-press-card__more,
.mdl-news-card__more,
.mdl-cr-result__more,
.mdl-cri-result__more,
.mdl-cri-related-card__more,
.mdl-pi-result__more,
.mdl-verdict__more,
.mdl-team-press-card__more,
.mdl-team-press__see-all,
.mdl-press__see-all,
.mdl-news__see-all {
font-weight: 500 !important;
}
/* [6c] Recent-Posts / news / press CARD links must keep their DESIGNED gold
scheme — NOT the blue underlined content-link style. On practice-area
pages content-links.css turns every link inside .mdl-pa-main slate-blue +
underline via !important, and its own exclusion then sets these card links
to `color: inherit` — which is why "READ MORE" showed slate (inherited
body colour) instead of gold. Both competing rules are specificity (0,1,1);
the overrides below use (0,2,0)+ (parent class + link class) so they
outrank them and restore the Figma gold for base AND hover. */
.mdl-pa-news-card .mdl-pa-news-card__title a,
.mdl-news-card .mdl-news-card__title a,
.mdl-press-card .mdl-press-card__title a {
color: #243952 !important;
text-decoration: none !important;
}
.mdl-pa-news-card .mdl-pa-news-card__title a:hover,
.mdl-pa-news-card .mdl-pa-news-card__title a:focus,
.mdl-news-card .mdl-news-card__title a:hover,
.mdl-press-card .mdl-press-card__title a:hover {
color: #CAA45D !important;
text-decoration: none !important;
}
.mdl-pa-news-card a.mdl-pa-news-card__more,
.mdl-news-card a.mdl-news-card__more,
.mdl-press-card a.mdl-press-card__more {
color: #CAA45D !important;
text-decoration: none !important;
}
.mdl-pa-news-card a.mdl-pa-news-card__more:hover,
.mdl-pa-news-card a.mdl-pa-news-card__more:focus,
.mdl-news-card a.mdl-news-card__more:hover,
.mdl-press-card a.mdl-press-card__more:hover {
color: #B5903F !important;
text-decoration: none !important;
}
/* [6b] Blog / News / Press article bodies — same Arial-paste fix as the
practice-area copy above. The article body renders via the_content()
inside .mdl-blog-content, and editors sometimes paste text carrying an
inline font-family:Arial (e.g. the "Wrongful death lawyers by location:"
recirculation line). Force Montserrat on the wrapper AND every descendant
so those pasted spans can't fall back to Arial. Links keep their own
colour/decoration from single-blog-v4.css; only the font-family is pinned. */
.mdl-blog-v4 .mdl-blog-content,
.mdl-blog-v4 .mdl-blog-content * {
font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
/* [7] No em dashes in CTA copy: the theme's CTA defaults are already
em-dash-free. Any em dash on a live CTA is a Customizer/content
value — edit it in Appearance → Customize (not a theme file). */
/* ============================================================
[8] BUTTONS RENDERED AS MUST NEVER UNDERLINE OR RECOLOUR.
The broad in-copy link rules (content-links.css and the blocks
above) apply BOTH `text-decoration: underline !important` AND
`color: #3d4d59 !important` (slate-blue) to EVERY inside
content containers (.mdl-pa-main, .mdl-pa-copy, .entry-content,
.mdl-blog-content, .mdl-cri-prose, etc.) on hover/focus. Site
CTAs are and, when they live inside one of
those containers (the practice-area "SEE ALL" and the "Call (…)"
button in the Ready-to-Discuss CTA), they were turning
blue + underlined on hover instead of staying white.
This reset loads LAST and is written at high specificity so it
out-ranks every offending rule (the strongest is (0,3,0)). It
pins buttons to WHITE text and NO underline in every state.
The inner is included so it can't inherit the slate hover
colour from the .
============================================================ */
a.mdl-btn,
a.mdl-btn:link,
a.mdl-btn:visited,
a.mdl-btn:hover,
a.mdl-btn:focus,
a.mdl-btn:active,
a.mdl-btn:hover span,
a.mdl-btn:focus span,
a.mdl-btn--gold:hover,
a.mdl-btn--gold:focus,
a.mdl-btn--prussian:hover,
a.mdl-btn--prussian:focus,
a.mdl-ready-cta__btn:hover,
a.mdl-ready-cta__btn:focus,
a.mdl-ready-cta__btn:hover span,
a.mdl-ready-cta__btn:focus span,
.mdl-pa-main a.mdl-btn:hover,
.mdl-pa-main a.mdl-btn:focus,
.mdl-pa-main a.mdl-btn:hover span,
.mdl-pa-main a.mdl-btn:focus span,
.mdl-pa-news a.mdl-btn:hover,
.mdl-pa-news a.mdl-btn:focus,
.mdl-pa-copy a.mdl-btn:hover,
.mdl-pa-copy a.mdl-btn:focus,
.mdl-blog-content a.mdl-btn:hover,
.mdl-blog-content a.mdl-btn:focus,
.entry-content a.mdl-btn:hover,
.entry-content a.mdl-btn:focus,
.mdl-cri-prose a.mdl-btn:hover,
.mdl-cri-prose a.mdl-btn:focus,
.mdl-cri-v4--page .mdl-cri-prose a.mdl-btn:hover,
.mdl-cri-v4--page .mdl-cri-prose a.mdl-btn:focus {
color: #fff !important;
text-decoration: none !important;
}
/* ============================================================
[9] GLOBAL ELEMENT-LEVEL HEADING ENFORCEMENT — EVERY TEMPLATE.
The class-based canonical block above ([3][4]) only covers the
heading classes it names, so headings using OTHER classes (or no
class) still varied per template. This block is the final
authority: it pins the semantic elements h1–h4 THEMSELVES, so
every heading on every single template gets the same spec:
H1 Montserrat 700 · 46px / 52px
H2 Montserrat 700 · 32px / 38.4px
H3 Montserrat 600 · 22px / 30px
H4 Montserrat 600 · 21px / 28px
Loads last + !important, so it beats every non-important
template rule. The HOME PAGE is deliberately excluded
(body:not(.home)) — its headings keep the home-v4 design sizes. Colour is NOT forced (context: white on dark
heroes, prussian on light). The named-class mobile scaling in
[3][4] still outranks these element rules at ≤768px (class >
element among !important rules), and the element-level mobile
block below covers unnamed headings the same way.
============================================================ */
body:not(.home) h1 {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 46px !important;
line-height: 52px !important;
}
body:not(.home) h2 {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 32px !important;
line-height: 38.4px !important;
}
body:not(.home) h3 {
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
font-size: 22px !important;
line-height: 30px !important;
}
body:not(.home) h4 {
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
font-size: 21px !important;
line-height: 28px !important;
}
/* Element-level mobile scaling (same ratios as the named-class
block: H1 ≈1.25, H2 ×1.2, H3/H4 slightly reduced). */
@media (max-width: 768px) {
body:not(.home) h1 { font-size: 34px !important; line-height: 42px !important; }
body:not(.home) h2 { font-size: 26px !important; line-height: 32px !important; }
body:not(.home) h3 { font-size: 20px !important; line-height: 30px !important; }
body:not(.home) h4 { font-size: 18px !important; line-height: 26px !important; }
}
/* ============================================================
[10] CONTENT HEADING COLOUR — one colour everywhere.
The location page's in-copy H2 was rgb(80,95,112) while blog /
article H2s rendered prussian rgb(36,57,82) — each template set
its own heading colour. Pin every heading INSIDE body-content
wrappers to rgb(80,95,112) so they match on every template.
Hero/page titles and section headings outside content wrappers
are untouched (they are context-coloured: white on dark, etc.).
============================================================ */
.mdl-blog-v4 .mdl-blog-content h2,
.mdl-blog-v4 .mdl-blog-content h3,
.mdl-blog-v4 .mdl-blog-content h4,
.mdl-blog-v4 .mdl-blog-content p:has(> strong:only-child) > strong,
.mdl-blog-v4 .mdl-blog-content p:has(> b:only-child) > b,
.mdl-pa-copy h2,
.mdl-pa-copy h3,
.mdl-pa-copy h4,
.mdl-cri-prose h2,
.mdl-cri-prose h3,
.mdl-cri-prose h4,
.mdl-loc-v4__main h2,
.mdl-loc-v4__main h3,
.mdl-loc-v4__main h4,
.entry-content h2,
.entry-content h3,
.entry-content h4,
/* Bold/spans INSIDE headings too — editors often wrap heading text in
, and the theme's `.mdl-blog-content strong { prussian }` rule
was recolouring that inner text darker while the h2 itself was correct. */
.mdl-blog-v4 .mdl-blog-content h2 *,
.mdl-blog-v4 .mdl-blog-content h3 *,
.mdl-blog-v4 .mdl-blog-content h4 *,
.mdl-pa-copy h2 *, .mdl-pa-copy h3 *, .mdl-pa-copy h4 *,
.mdl-cri-prose h2 *, .mdl-cri-prose h3 *, .mdl-cri-prose h4 *,
.mdl-loc-v4__main h2 *, .mdl-loc-v4__main h3 *, .mdl-loc-v4__main h4 *,
.entry-content h2 *, .entry-content h3 *, .entry-content h4 * {
color: rgb(80, 95, 112) !important;
}
/* ============================================================
[11] BULLETS IN ARTICLE BODIES.
theme-style.css globally resets `ul { list-style: none }`, and
the blog-content list rule only set margins — so bullet points
added in the editor never showed on the front end. Restore real
bullets/numbers for lists inside every article body wrapper
(same fix .mdl-pa-copy already had).
============================================================ */
.mdl-blog-v4 .mdl-blog-content ul,
.mdl-cri-prose ul,
.entry-content ul {
list-style-type: disc !important;
list-style-position: outside !important;
padding-left: 1.5em !important;
}
.mdl-blog-v4 .mdl-blog-content ol,
.mdl-cri-prose ol,
.entry-content ol {
list-style-type: decimal !important;
list-style-position: outside !important;
padding-left: 1.5em !important;
}
.mdl-blog-v4 .mdl-blog-content li,
.mdl-cri-prose li,
.entry-content li {
display: list-item !important;
margin: 0 0 10px !important;
}
.mdl-blog-v4 .mdl-blog-content ul li::marker,
.mdl-cri-prose ul li::marker,
.entry-content ul li::marker { color: rgb(80, 95, 112); }
/* ============================================================
[12] TABLES IN ARTICLE BODIES — global styling.
The theme had NO table styles for article content, so editor
tables rendered squished: zero cell padding, no borders, cramped
columns. One global block styles every table inside every
article body wrapper (blog/news/press posts, practice-area copy,
case-result prose, location content) — no per-post fixes needed.
============================================================ */
.mdl-blog-v4 .mdl-blog-content table,
.mdl-pa-copy table,
.mdl-cri-prose table,
.mdl-loc-v4__main table,
.entry-content table {
width: 100% !important;
border-collapse: collapse !important;
margin: 0 0 27px !important;
font-size: 16px;
line-height: 24px;
}
.mdl-blog-v4 .mdl-blog-content table th,
.mdl-blog-v4 .mdl-blog-content table td,
.mdl-pa-copy table th, .mdl-pa-copy table td,
.mdl-cri-prose table th, .mdl-cri-prose table td,
.mdl-loc-v4__main table th, .mdl-loc-v4__main table td,
.entry-content table th, .entry-content table td {
border: 1px solid #D7DEE5 !important;
padding: 12px 16px !important;
text-align: left !important;
vertical-align: top !important;
color: rgb(80, 95, 112);
}
.mdl-blog-v4 .mdl-blog-content table th,
.mdl-pa-copy table th,
.mdl-cri-prose table th,
.mdl-loc-v4__main table th,
.entry-content table th,
.mdl-blog-v4 .mdl-blog-content table thead td,
.entry-content table thead td {
background: #F4F6F8 !important;
font-weight: 700 !important;
color: #243952;
}
/* Zebra striping for readability on long tables */
.mdl-blog-v4 .mdl-blog-content table tbody tr:nth-child(even) td,
.entry-content table tbody tr:nth-child(even) td {
background: #FAFBFC;
}
/* Mobile: let wide tables scroll sideways instead of crushing columns */
@media (max-width: 768px) {
.mdl-blog-v4 .mdl-blog-content table,
.mdl-pa-copy table,
.mdl-cri-prose table,
.entry-content table {
display: block !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
}
/* ============================================================
[13] PI TEAM GRID — CENTER THE INCOMPLETE LAST ROW.
The Personal Injury landing team section used a 3-column CSS
grid, so a trailing row of 1–2 cards hugged the grid tracks
instead of centering. Switch to the same flex-centered layout
the About page team uses: leftover cards in the final row sit
centered. (About's own override already does this; these rules
match it so both pages behave identically.)
============================================================ */
.mdl-pi-v4 .mdl-pi-team__grid {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 32px !important;
}
.mdl-pi-v4 .mdl-pi-team__card {
flex: 0 0 calc((100% - 64px) / 3) !important;
max-width: calc((100% - 64px) / 3) !important;
}
@media (max-width: 1100px) {
.mdl-pi-v4 .mdl-pi-team__card {
flex-basis: calc((100% - 32px) / 2) !important;
max-width: calc((100% - 32px) / 2) !important;
}
}
@media (max-width: 768px) {
.mdl-pi-v4 .mdl-pi-team__card {
flex-basis: 100% !important;
max-width: 100% !important;
}
}
/* ============================================================
[14] BLOG RECIRC TILES — FEATURED IMAGE.
On blog singles the "MORE POSTS" tiles now render the featured
image on top (matching the /blog archive .mdl-news-card tiles:
full-bleed media block, cover crop, subtle hover zoom). Press /
news recirc tiles stay text-only — the media block is simply not
rendered there (handled in single-post.php).
============================================================ */
.mdl-blog-v4 .mdl-blog-more-card__media {
display: block;
width: 100%; /* inset inside the card's 25px padding,
matching the practice-area Recent Posts tiles */
aspect-ratio: 16 / 9;
overflow: hidden;
background: #DDE3E8;
}
.mdl-blog-v4 .mdl-blog-more-card__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .35s ease;
}
.mdl-blog-v4 .mdl-blog-more-card__media:hover .mdl-blog-more-card__img {
transform: scale(1.04);
}
/* ============================================================
[15] DIVIDER WEIGHT + COLOUR CONSISTENCY (site audit).
============================================================ */
/* (a) Practice-area section divider — the explicit rendered
after the FAQs/CTA on every practice page (see template).
1px #647C90, the same rule location/blog pages use. */
.mdl-pa-v4 .mdl-pa-divider {
border: 0;
border-top: 1px solid #647C90;
height: 0;
margin: 40px 0 32px;
}
/* (b) Case-result pages: .mdl-cri-divider rendered 3px — three times
heavier than every other 1px section divider. Same colour, 1px. */
.mdl-cri-v4 .mdl-cri-divider {
height: 1px !important;
}
/* (c) Small in-card rules used three different light grays
(#B7BFC7 / #BECCD7 / #DEE3E8). Unify on the theme's light-blue
token #BECCD7. */
.mdl-home-v4 .mdl-news__rule,
.mdl-home-v4 .mdl-press__card-rule,
.mdl-team-v4 .mdl-team-press-card__hr {
background: #BECCD7 !important;
border-color: #BECCD7 !important;
}