/*
Theme Name: Lawson Hatch
Theme URI: https://lawsonhatch.com
Description: Custom WordPress block theme for Lawson Hatch, PLLC. Built without page builder dependencies. Full Site Editing (FSE) architecture with native WordPress blocks.
Version: 0.2.3
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
Author: Songbird
License: Proprietary
License URI: https://lawsonhatch.com
Text Domain: hatch-law
*/
/* ==========================================================================
DESIGN TOKEN COMPATIBILITY ALIASES
WordPress converts slug "4xl" → CSS variable "--wp--preset--font-size--4-xl"
(hyphen at digit-letter boundary). Block inline styles and theme.json element
rules reference the non-hyphenated form ("--wp--preset--font-size--4xl"),
which WordPress never defines. These aliases bridge the gap so both naming
styles resolve to the same fluid value everywhere in the theme.
========================================================================== */
:root {
--wp--preset--font-size--2xl: var(--wp--preset--font-size--2-xl);
--wp--preset--font-size--3xl: var(--wp--preset--font-size--3-xl);
--wp--preset--font-size--4xl: var(--wp--preset--font-size--4-xl);
--wp--preset--font-size--5xl: var(--wp--preset--font-size--5-xl);
}
/* ==========================================================================
SITE HEADER
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background-color: #ffffff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.site-header-inner {
width: 100%;
max-width: var(--wp--style--global--wide-size, 1200px);
margin-inline: auto;
padding-inline: var(--wp--preset--spacing--5, 1.5rem);
padding-block: 14px;
}
/* Header CTA button — override theme.json accent for header-specific styling */
.header-cta .wp-block-button__link {
background-color: var(--wp--preset--color--secondary) !important;
color: #ffffff !important;
font-size: var(--wp--preset--font-size--sm);
letter-spacing: 0.03em;
white-space: nowrap;
}
.header-cta .wp-block-button__link:hover {
opacity: 1;
}
/* Primary navigation links */
.primary-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
font-family: var(--wp--preset--font-family--body);
font-size: 1.125rem;
font-weight: 600;
color: var(--wp--preset--color--primary);
padding-block: 0.25rem;
padding-inline: 0.5rem;
text-decoration: none;
transition: color 0.15s ease;
}
.primary-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
color: var(--wp--preset--color--secondary);
}
/* Navigation dropdown */
.wp-block-navigation .wp-block-navigation__submenu-container {
background-color: #ffffff;
border-top: 2px solid var(--wp--preset--color--secondary);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
min-width: 220px;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--sm);
padding: 0.6rem 1rem;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
background-color: var(--wp--preset--color--light-bg);
color: var(--wp--preset--color--secondary);
}
/* ==========================================================================
SITE FOOTER
========================================================================== */
.site-footer {
background-color: var(--wp--preset--color--primary);
/* Thin rule separates footer from any same-colour section above (e.g. CTA) */
border-top: 1px solid rgba(255, 255, 255, 0.15);
/* WP flow layout injects 32px margin-top between template blocks — kill it */
margin-top: 0 !important;
}
/* Homepage: kill 32px block-gap between the hero cover and the first content section */
.home-page .home-hero-cover + .wp-block-group {
margin-top: 0 !important;
}
.site-footer-inner {
width: 100%;
max-width: var(--wp--style--global--wide-size, 1200px);
margin-inline: auto;
/* Block-grammar padding attrs don't render in file-based template parts — set here */
padding: 3rem 1.5rem 2rem;
}
/* Footer navigation links */
.footer-nav-list {
list-style: none;
margin: 0;
padding: 0;
}
.footer-nav-list li + li {
margin-top: 0.5rem;
}
.footer-nav-list a {
color: rgba(255, 255, 255, 0.75);
font-size: var(--wp--preset--font-size--sm);
text-decoration: none;
transition: color 0.15s ease;
}
.footer-nav-list a:hover {
color: var(--wp--preset--color--accent);
}
/* Footer column headings */
.site-footer-inner h4 {
color: #ffffff;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-block: 0 var(--wp--preset--spacing--3);
}
/* Footer tagline and contact details */
.footer-tagline,
.footer-contact-details {
color: rgba(255, 255, 255, 0.65);
font-size: var(--wp--preset--font-size--sm);
line-height: 1.7;
}
.footer-contact-details a {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
}
.footer-contact-details a:hover {
color: var(--wp--preset--color--accent);
}
/* Footer bottom bar — copyright + legal links row */
.footer-bottom-bar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--wp--preset--spacing--3);
}
.footer-legal-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
}
.footer-legal-links a {
color: rgba(255, 255, 255, 0.5);
font-size: var(--wp--preset--font-size--xs);
text-decoration: none;
}
.footer-legal-links a:hover {
color: rgba(255, 255, 255, 0.8);
}
/* ==========================================================================
PAGE HEADER BAND (interior pages)
========================================================================== */
.page-header {
background-color: var(--wp--preset--color--primary);
}
.page-header .wp-block-post-title {
color: #ffffff;
font-family: var(--wp--preset--font-family--heading);
margin: 0;
}
/* ==========================================================================
TEAM / ATTORNEY PROFILE PAGES
========================================================================== */
.team-member-header {
display: flex;
align-items: flex-start;
gap: var(--wp--preset--spacing--6);
}
.team-member-photo img {
border-radius: 4px;
display: block;
}
.team-member-title {
color: var(--wp--preset--color--secondary);
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--lg);
font-weight: 600;
margin-block: 0.25rem 1rem;
}
.team-contact-info {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.team-contact-info li a {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--sm);
font-weight: 600;
text-decoration: none;
}
.team-contact-info li a:hover {
color: var(--wp--preset--color--secondary);
}
/* ==========================================================================
SERVICES PAGE
========================================================================== */
.service-section {
border-bottom: 1px solid var(--wp--preset--color--light-gray);
padding-block: var(--wp--preset--spacing--7);
}
.service-section:last-child {
border-bottom: none;
}
.service-section h3 {
color: var(--wp--preset--color--primary);
margin-block-end: var(--wp--preset--spacing--4);
}
.service-section h6 {
color: var(--wp--preset--color--secondary);
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--3);
}
/* ==========================================================================
HERO / COVER SYSTEM
Shared rules for .home-hero-cover (homepage) and .page-hero (interior pages).
Both use wp:cover with a primary-color overlay over a landscape photograph.
dimRatio is set in block attributes; fine-tuned here per-class.
========================================================================== */
/* ── Homepage photo hero ─────────────────────────────────────────────────── */
.home-hero-cover .wp-block-cover__background.has-background-dim {
opacity: 0.85;
}
.home-hero-cover .wp-block-cover__inner-container {
padding-top: var(--wp--preset--spacing--9);
padding-bottom: var(--wp--preset--spacing--9);
width: 100%;
}
/* Large-scale editorial H1 — matches reference treatment */
.home-hero-cover h1.wp-block-heading {
font-family: var(--wp--preset--font-family--heading) !important;
color: #ffffff !important;
max-width: 820px;
font-size: clamp(3rem, 2rem + 4.5vw, 5rem) !important;
line-height: 1.05 !important;
letter-spacing: -0.015em;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
margin-bottom: var(--wp--preset--spacing--5) !important;
}
.home-hero-cover p {
max-width: 540px;
font-size: var(--wp--preset--font-size--lg) !important;
color: rgba(255, 255, 255, 0.88) !important;
}
/* Wide frosted CTA button — matches reference single-button treatment */
.home-hero-cover .wp-block-buttons {
margin-top: var(--wp--preset--spacing--6) !important;
}
.home-hero-cover .wp-block-button:not(.is-style-outline) .wp-block-button__link {
background-color: rgba(255, 255, 255, 0.18) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.35) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-family: 'Montserrat', sans-serif !important;
font-size: 0.9375rem !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 1.1rem 2.5rem !important;
border-radius: 6px !important;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.home-hero-cover .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
background-color: rgba(255, 255, 255, 0.28) !important;
border-color: rgba(255, 255, 255, 0.55) !important;
}
/* Outline phone button */
.home-hero-cover .wp-block-button.is-style-outline .wp-block-button__link {
font-family: 'Montserrat', sans-serif !important;
font-size: 0.9375rem !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
padding: 1.1rem 2rem !important;
}
/* ── Interior page photo hero ────────────────────────────────────────────── */
.page-hero .wp-block-cover__background.has-background-dim {
opacity: 0.52;
}
/* ── About hero — 55% overlay, photo reads clearly through tint ───────────── */
.about-hero .wp-block-cover__background.has-background-dim {
opacity: 0.55;
}
.page-hero .wp-block-cover__inner-container {
padding-top: var(--wp--preset--spacing--8);
padding-bottom: var(--wp--preset--spacing--8);
width: 100%;
}
.page-hero h1.wp-block-heading {
font-family: var(--wp--preset--font-family--heading) !important;
color: #ffffff !important;
font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem) !important;
line-height: 1.1 !important;
letter-spacing: -0.01em;
text-shadow: 0 1px 16px rgba(0, 0, 0, 0.18);
max-width: 680px;
margin-bottom: 0.5rem !important;
}
/* Eyebrow label — editorial sentence-case label, matches reference */
.page-hero-eyebrow {
font-family: 'DM Sans', sans-serif !important;
font-size: 1.0625rem !important;
font-weight: 400 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
color: rgba(255, 255, 255, 0.78) !important;
line-height: 1.5 !important;
margin-bottom: var(--wp--preset--spacing--3) !important;
}
/* ── Solid-color fallback (retains .hero-section for any non-photo uses) ─── */
.hero-section {
background-color: var(--wp--preset--color--primary);
background-image: linear-gradient(135deg, #214845 0%, #1a3a38 100%);
}
.hero-section h1 {
font-family: var(--wp--preset--font-family--heading);
color: #ffffff;
max-width: 760px;
}
/* ==========================================================================
HOME PAGE SECTIONS
========================================================================== */
.section-services h2 {
color: var(--wp--preset--color--secondary);
}
.section-services h3 {
color: var(--wp--preset--color--primary);
}
.section-services .wp-block-column h4 {
color: var(--wp--preset--color--primary);
font-family: var(--wp--preset--font-family--heading);
margin-block-end: 0.75rem;
}
/* Service preview card grid — equal-height rows */
.section-services .wp-block-columns {
align-items: stretch;
}
.section-services .wp-block-column {
display: flex;
flex-direction: column;
}
.section-services .wp-block-column > .service-preview-card {
flex: 1;
}
/* Card container */
.service-preview-card {
border: 1px solid rgba(33, 72, 69, 0.08);
border-top: 3px solid var(--wp--preset--color--secondary);
box-shadow: 0 2px 16px rgba(33, 72, 69, 0.07);
display: flex;
flex-direction: column;
box-sizing: border-box;
transition: box-shadow 0.2s ease;
}
.service-preview-card:hover {
box-shadow: 0 4px 24px rgba(33, 72, 69, 0.12);
}
/* SVG icon — replaces numbered 01–04 markers */
.service-card-icon {
display: block;
color: var(--wp--preset--color--secondary);
margin-top: 0;
margin-bottom: var(--wp--preset--spacing--4);
line-height: 0;
}
.service-card-icon svg {
display: block;
width: 44px;
height: 44px;
}
/* Card heading — override Elementor Kit h4 */
.section-services .service-preview-card h4.wp-block-heading {
font-family: 'Frank Ruhl Libre', serif !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
color: var(--wp--preset--color--primary) !important;
line-height: 1.3 !important;
}
/* Card excerpt */
.section-services .service-preview-card p:not(.service-card-link) {
font-size: 0.9375rem;
line-height: 1.72;
color: var(--wp--preset--color--text);
flex-grow: 1;
}
/* Learn More link — pinned to card bottom */
.service-card-link {
margin-top: auto !important;
}
.service-card-link a {
font-family: 'Montserrat', sans-serif !important;
font-size: 0.875rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--wp--preset--color--primary) !important;
text-decoration: none !important;
}
.service-card-link a:hover {
color: var(--wp--preset--color--secondary) !important;
}
/* Why us section */
.section-why-us {
background-color: var(--wp--preset--color--light-bg);
}
.section-why-us h2 {
color: var(--wp--preset--color--secondary);
}
.section-why-us h3 {
color: var(--wp--preset--color--primary);
}
/* CTA section */
.section-contact-cta {
background-color: var(--wp--preset--color--primary);
}
/* ==========================================================================
CONSULTATION / FORM PAGES
========================================================================== */
.consultation-intro {
max-width: 680px;
}
.form-placeholder {
background-color: var(--wp--preset--color--light-bg);
border: 2px dashed var(--wp--preset--color--light-gray);
border-radius: 4px;
padding: var(--wp--preset--spacing--7);
text-align: center;
color: var(--wp--preset--color--text);
}
/* ==========================================================================
CONTACT PAGE
========================================================================== */
.contact-info-item h4 {
color: var(--wp--preset--color--primary);
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-block: 0 0.25rem;
}
.contact-info-item p {
margin: 0;
}
.contact-info-item a {
color: var(--wp--preset--color--primary);
font-weight: 600;
}
/* ==========================================================================
SERVICES PAGE — PARITY RECONSTRUCTION
========================================================================== */
/* Cover hero on Services page */
.services-hero-cover .wp-block-cover__inner-container {
text-align: center;
}
/* Two-column service layout: bullets sidebar card */
.service-bullets-card {
background-color: var(--wp--preset--color--light-bg);
border-left: 3px solid var(--wp--preset--color--secondary);
padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--5);
border-radius: 2px;
}
.service-bullets-card h4 {
color: var(--wp--preset--color--secondary);
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-block: 0 var(--wp--preset--spacing--3);
}
.service-bullets-card .wp-block-list {
margin: 0;
padding-inline-start: 1.25rem;
}
.service-bullets-card .wp-block-list li {
font-size: var(--wp--preset--font-size--sm);
line-height: 1.6;
margin-block-end: 0.4rem;
}
/* Services bottom intro section — dark green, centered */
.services-intro-bottom h2 {
color: #ffffff;
}
.services-intro-bottom .services-icon-label {
border-right: 1px solid rgba(255, 255, 255, 0.15);
padding-inline: var(--wp--preset--spacing--4);
}
.services-intro-bottom .services-icon-label:last-child {
border-right: none;
}
.services-team-photo {
max-width: 680px;
margin-inline: auto;
}
.services-team-photo img {
border-radius: 4px;
display: block;
margin-inline: auto;
}
/* Tagline band */
.services-tagline-band p {
margin: 0;
}
/* ==========================================================================
BIO PAGES — PARITY RECONSTRUCTION
========================================================================== */
.bio-page-header {
border-bottom: 3px solid var(--wp--preset--color--secondary);
}
.bio-headshot img {
border-radius: 4px;
display: block;
width: 100%;
max-width: 340px;
}
.bio-title {
color: var(--wp--preset--color--secondary) !important;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--lg);
font-weight: 600;
margin-block: 0.25rem 1rem;
}
.bio-page-header .wp-block-column h2 {
margin-block-end: 0.25rem;
color: var(--wp--preset--color--primary);
}
.bio-page-header .wp-block-column p a {
color: var(--wp--preset--color--primary);
font-weight: 600;
text-decoration: none;
}
.bio-page-header .wp-block-column p a:hover {
color: var(--wp--preset--color--secondary);
}
/* ==========================================================================
ABOUT US — PARITY RECONSTRUCTION
========================================================================== */
.about-group-photo img {
border-radius: 4px;
display: block;
width: 100%;
}
.about-values-section h2 {
color: var(--wp--preset--color--primary);
}
.about-values-section h3 {
color: var(--wp--preset--color--secondary);
}
/* ==========================================================================
CONTACT PAGE — PARITY RECONSTRUCTION
========================================================================== */
.contact-info-card {
background-color: #ffffff;
border: 1px solid var(--wp--preset--color--light-gray);
border-top: 3px solid var(--wp--preset--color--secondary);
border-radius: 2px;
padding: var(--wp--preset--spacing--6);
}
.contact-info-card h4 {
color: var(--wp--preset--color--primary);
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-block: 0 0.5rem;
}
.contact-info-card p {
margin: 0;
font-size: var(--wp--preset--font-size--base);
line-height: 1.6;
}
.contact-info-card a {
color: var(--wp--preset--color--primary);
font-weight: 600;
text-decoration: none;
}
.contact-info-card a:hover {
color: var(--wp--preset--color--secondary);
}
.map-placeholder {
background-color: var(--wp--preset--color--light-bg);
border: 2px dashed var(--wp--preset--color--light-gray);
border-radius: 4px;
padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--5);
text-align: center;
min-height: 240px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* ==========================================================================
404 PAGE
========================================================================== */
.error-404 {
text-align: center;
}
/* ==========================================================================
MOBILE RESPONSIVE
========================================================================== */
@media (max-width: 782px) {
/* Header — compact on mobile */
.site-header-inner {
padding-inline: var(--wp--preset--spacing--4, 1rem);
padding-block: 8px;
}
.site-header .wp-block-site-logo img,
.site-header .custom-logo {
max-height: 52px !important;
}
/* Hero — photo cover + solid fallback */
.hero-section h1,
.home-hero-cover h1.wp-block-heading,
.page-hero h1.wp-block-heading {
font-size: var(--wp--preset--font-size--3xl) !important;
}
/* Footer — reduce top/bottom padding on mobile */
.site-footer-inner {
padding: 2rem 1.25rem 1.5rem;
}
/* Footer columns stack */
.site-footer-inner .wp-block-columns {
flex-direction: column;
}
.site-footer-inner .wp-block-column {
flex-basis: 100% !important;
}
/* Footer bottom bar — stack copyright above legal links on mobile */
.footer-bottom-bar {
flex-direction: column;
align-items: flex-start;
gap: var(--wp--preset--spacing--3);
}
/* Team photo */
.team-member-header {
flex-direction: column;
}
.team-member-photo img {
max-width: 280px;
}
/* Bio page header — stack on mobile */
.bio-page-header .wp-block-columns {
flex-direction: column;
}
.bio-page-header .wp-block-column {
flex-basis: 100% !important;
}
.bio-headshot img {
max-width: 220px;
}
/* Service two-column — stack on mobile */
.service-two-col.wp-block-columns {
flex-direction: column;
}
.service-two-col .wp-block-column {
flex-basis: 100% !important;
}
.service-bullets-card {
border-left: none;
border-top: 3px solid var(--wp--preset--color--secondary);
}
/* Services icon labels — wrap */
.services-intro-bottom .services-icon-label {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding-block: var(--wp--preset--spacing--3);
}
/* Contact cards stack */
.contact-cards-section .wp-block-columns {
flex-direction: column;
}
.contact-cards-section .wp-block-column {
flex-basis: 100% !important;
}
/* About Us intro stack */
.about-intro-section .wp-block-columns {
flex-direction: column;
}
.about-intro-section .wp-block-column {
flex-basis: 100% !important;
}
}
@media (max-width: 480px) {
.hero-section h1,
.home-hero-cover h1.wp-block-heading,
.page-hero h1.wp-block-heading {
font-size: var(--wp--preset--font-size--2xl) !important;
}
}
/* ==========================================================================
POLISH PASS — 2026-04-03
Header, Services nav, Bio/About/Contact improvements, typography rhythm
========================================================================== */
/* ─── HEADER REFINEMENTS ─────────────────────────────────────────────────── */
/* Logo: constrain height so header stays compact */
.site-header .wp-block-site-logo img,
.site-header .custom-logo {
max-height: 76px !important;
width: auto !important;
}
/* Header right-side grouping (phone + CTA) */
.header-right {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--4);
margin-left: auto !important;
white-space: nowrap;
}
/* Header phone number */
.header-phone a {
color: var(--wp--preset--color--primary) !important;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--base);
font-weight: 700;
text-decoration: none;
letter-spacing: 0.01em;
transition: color 0.15s ease;
}
.header-phone a:hover {
color: var(--wp--preset--color--secondary) !important;
text-decoration: underline;
}
/* Ensure header CTA doesn't wrap */
.header-cta .wp-block-button__link {
white-space: nowrap;
padding-block: 0.55rem;
padding-inline: 1.1rem;
font-size: var(--wp--preset--font-size--base) !important;
font-weight: 600 !important;
}
/* Nav separator style between links (matches original) */
.primary-navigation .wp-block-navigation__container > .wp-block-navigation-item {
position: relative;
}
.primary-navigation .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item::before {
content: "";
position: absolute;
left: 0;
top: 20%;
height: 60%;
width: 1px;
background: rgba(33, 72, 69, 0.18);
}
/* ─── PAGE HEADER BAND (INTERIOR) ────────────────────────────────────────── */
.page-header {
padding-block: var(--wp--preset--spacing--6) !important;
}
.page-header .wp-block-post-title {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--3xl);
font-weight: 400;
color: #ffffff !important;
margin: 0;
text-align: center;
letter-spacing: -0.01em;
}
/* Interior page content wrapper: add breathing room */
.site-main.interior-page > .wp-block-group:last-of-type {
padding-top: var(--wp--preset--spacing--7) !important;
padding-bottom: var(--wp--preset--spacing--8) !important;
}
/* ─── SERVICES PAGE POLISH ───────────────────────────────────────────────── */
/*
* Services hero — rendered hierarchy fix (2026-04-04)
*
* Root cause: the 5xl token resolves to clamp(2rem,…,3.5rem) = 56px max.
* That ceiling is fine for interior headings but insufficient for a flat-color
* hero that has no photo background to supply visual weight. The homepage H1
* uses the same token but a cover block with a dark image overlay compensates.
* Here there is no compensation, so 56px reads as a page heading, not a hero.
*
* Inline styles (specificity 1-0-0-0) cannot be overridden without !important.
* !important is the only valid option for font-size and line-height on this element.
*/
/* H1: push beyond the 56px token ceiling.
clamp(2.75rem,2rem+3.5vw,4.5rem):
320px → 2.75rem = 44px (min clamp)
768px → ~3.7rem = 59px
1024px → ~4.1rem = 66px
1200px → 4.5rem = 72px (max, capped)
!important required: inline style font-size:var(--wp--preset--font-size--5xl) wins
at specificity 1-0-0-0 and cannot be beaten by any class/element selector. */
.services-page-header h1 {
font-family: 'Frank Ruhl Libre', serif;
font-size: clamp(2.75rem, 2rem + 3.5vw, 4.5rem) !important;
line-height: 1.05 !important;
letter-spacing: -0.025em;
font-weight: 700;
margin-bottom: 1.125rem;
}
/* Tagline: two issues fixed here.
(a) .has-text-color applies color:#5D5D5D !important globally — beats the inline
rgba white. Re-assert white at higher specificity with !important.
(b) Inline margin-top:var(--spacing--3)=0.75rem is too tight against a 72px heading.
Push to 0 (the h1's own margin-bottom handles the gap cleanly). */
.services-page-header p.has-text-color {
color: rgba(255, 255, 255, 0.86) !important;
margin-top: 0 !important;
}
/* Kill WP layout block-gap between hero and selector nav.
The selector's own margin-block-start:0 handles it in lhl-component-selectors.css,
but this belts-and-suspenders rule covers edge cases where the WP wrapper
adds the gap from outside the section element. */
.services-page-header,
.about-page-hero {
margin-bottom: 0;
}
/* The WP layout system adds margin-block-start via :where(.is-layout-constrained) > *
This override ensures the selector/anchor nav visually merges with the dark hero. */
.entry-content .services-page-header + *,
.about-page-hero + * {
margin-block-start: 0;
}
/* Tagline band: FORCE primary green regardless of has-secondary class */
.services-tagline-band,
.services-tagline-band.has-secondary-background-color {
background-color: var(--wp--preset--color--primary) !important;
border-top: 3px solid rgba(196, 234, 158, 0.35);
border-bottom: 3px solid rgba(196, 234, 158, 0.35);
}
.services-tagline-band p {
color: rgba(255, 255, 255, 0.92) !important;
letter-spacing: 0.22em !important;
font-size: var(--wp--preset--font-size--base) !important;
font-family: var(--wp--preset--font-family--body) !important;
font-weight: 500 !important;
margin: 0;
}
/* Service section anchor navigation row */
.services-section-nav {
background-color: var(--wp--preset--color--primary);
border-bottom: 2px solid rgba(196, 234, 158, 0.2);
position: sticky;
top: 0;
z-index: 90;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.services-section-nav::-webkit-scrollbar {
display: none;
}
.services-section-nav .services-nav-inner {
display: flex;
align-items: stretch;
justify-content: center;
max-width: 1200px;
margin-inline: auto;
padding-inline: var(--wp--preset--spacing--5);
flex-wrap: nowrap;
min-height: 52px;
}
.services-section-nav .services-nav-item {
display: inline-flex;
align-items: center;
padding: 0.75rem 1.1rem;
color: rgba(255, 255, 255, 0.72) !important;
font-family: var(--wp--preset--font-family--body);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
border-bottom: 3px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
/* Match lhl-service-tab:hover exactly — secondary green, no underline */
.services-section-nav .services-nav-item:hover {
color: var(--wp--preset--color--secondary) !important;
border-bottom-color: transparent;
background-color: rgba(255, 255, 255, 0.05);
}
/* Mobile: short labels visible, full labels hidden; items wrap */
.about-section-nav .nav-label-short { display: none; }
@media (max-width: 600px) {
.about-section-nav .services-nav-inner {
flex-wrap: wrap;
justify-content: center;
}
.about-section-nav .nav-label-full { display: none; }
.about-section-nav .nav-label-short { display: inline; }
}
.services-section-nav .services-nav-item + .services-nav-item {
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
/* Service section separators: stronger visual */
.services-content-area > .wp-block-separator {
border-color: var(--wp--preset--color--light-gray) !important;
margin-block: 0 !important;
opacity: 1;
}
/* Service section H3 headings: stronger */
.services-content-area .service-two-col h3.wp-block-heading {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--2xl);
font-weight: 600;
color: var(--wp--preset--color--primary);
margin-block-end: var(--wp--preset--spacing--4);
padding-bottom: var(--wp--preset--spacing--3);
border-bottom: 2px solid var(--wp--preset--color--accent);
display: inline-block;
}
/* Bullet card: more refined treatment */
.service-bullets-card {
border-left: 3px solid var(--wp--preset--color--secondary) !important;
background-color: #f7f9f8 !important;
border-radius: 3px !important;
padding: var(--wp--preset--spacing--5) !important;
box-shadow: 0 1px 6px rgba(33, 72, 69, 0.06);
}
.service-bullets-card h4.wp-block-heading {
font-family: var(--wp--preset--font-family--body);
font-size: 0.875rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--secondary);
margin-block: 0 var(--wp--preset--spacing--3);
}
.service-bullets-card .wp-block-list li {
font-size: var(--wp--preset--font-size--sm);
line-height: 1.65;
color: var(--wp--preset--color--text);
margin-block-end: 0.35rem;
}
/* Services CTA band */
.services-consult-cta h2.wp-block-heading {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--3xl) !important;
font-weight: 500;
letter-spacing: -0.01em;
}
/* Services bottom intro section: team photo cap */
.services-intro-bottom {
padding-block: var(--wp--preset--spacing--8) !important;
}
.services-intro-bottom h2.wp-block-heading {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--3xl) !important;
font-weight: 500;
letter-spacing: -0.01em;
}
.services-intro-bottom > .wp-block-group > p {
color: rgba(255, 255, 255, 0.8) !important;
max-width: 620px;
margin-inline: auto;
}
/* ─── BIO PAGE POLISH ────────────────────────────────────────────────────── */
.bio-page-header {
background-color: #f7f9f8;
border-bottom: 3px solid var(--wp--preset--color--secondary);
padding: var(--wp--preset--spacing--7) var(--wp--preset--spacing--5) !important;
}
.bio-page-header .wp-block-columns {
align-items: flex-start;
gap: var(--wp--preset--spacing--7) !important;
}
/* Dark primary-green backdrop for cut-out headshots —
creates deliberate contrast regardless of clothing colour */
.bio-headshot {
background-color: var(--wp--preset--color--primary);
border-radius: 4px;
}
.bio-headshot img {
border-radius: 4px;
display: block;
width: 100%;
max-width: 320px;
box-shadow: 0 4px 20px rgba(33, 72, 69, 0.12);
}
/* Bio name heading */
.bio-page-header .wp-block-column h2 {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--3xl);
font-weight: 600;
color: var(--wp--preset--color--primary);
margin-block: 0 0.2rem;
letter-spacing: -0.01em;
}
/* Bio title (role) — secondary green */
.bio-title,
.bio-page-header p.bio-title,
.bio-page-header .bio-title {
color: var(--wp--preset--color--secondary) !important;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--lg);
font-weight: 600;
margin-block: 0.1rem 1rem !important;
letter-spacing: 0.01em;
}
/* Bio contact links */
.bio-page-header .wp-block-column p a {
font-size: var(--wp--preset--font-size--sm);
font-weight: 600;
color: var(--wp--preset--color--primary);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.bio-page-header .wp-block-column p a:hover {
color: var(--wp--preset--color--secondary);
}
/* Bio body content: headings and spacing */
.site-main .wp-block-post-content h2 {
font-family: var(--wp--preset--font-family--heading);
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--2xl);
font-weight: 600;
margin-block: var(--wp--preset--spacing--6) var(--wp--preset--spacing--3);
padding-bottom: var(--wp--preset--spacing--2);
border-bottom: 1px solid var(--wp--preset--color--light-gray);
}
.site-main .wp-block-post-content h3 {
font-family: var(--wp--preset--font-family--body);
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--base);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--2);
}
/* ─── BIO PAGE HERO v2 (floating-photo design) ──────────────────────────── */
/*
* The hero is a full-width dark-green group containing a columns block.
* The left column holds the cut-out headshot; the right holds name/role/contact.
* The image uses margin-bottom: -110px to bleed below the green section.
* The content section immediately below gets matching padding-top to compensate.
*/
.bio-hero {
overflow: visible !important;
position: relative;
z-index: 1;
}
/* Columns: flex-end so the photo column anchors to the bottom */
.bio-hero .wp-block-columns {
align-items: flex-end !important;
min-height: 400px;
gap: 0 !important;
margin-block: 0 !important;
}
/* Photo column — flush, no padding */
.bio-hero-photo-col {
padding: 0 !important;
overflow: visible !important;
align-self: flex-end !important;
}
.bio-hero-photo-col .wp-block-image {
margin: 0 !important;
line-height: 0;
}
/* The bleed: image hangs 110px below the green section */
.bio-hero-photo-col .wp-block-image img {
display: block;
width: 100%;
max-width: 100%;
margin-bottom: -110px;
position: relative;
z-index: 5;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Info column — vertically centred in the hero, generous padding */
.bio-hero-info-col {
align-self: center !important;
padding-top: var(--wp--preset--spacing--8) !important;
padding-bottom: var(--wp--preset--spacing--8) !important;
padding-right: var(--wp--preset--spacing--7) !important;
padding-left: var(--wp--preset--spacing--5) !important;
}
/* Name — large white serif; suppress legacy h2 border-bottom */
.bio-hero-name.wp-block-heading {
color: #ffffff !important;
margin-block: 0 0.3rem !important;
line-height: 1.1 !important;
border-bottom: none !important;
padding-bottom: 0 !important;
}
/* Role — secondary green on dark background */
.bio-hero-role-text {
color: var(--wp--preset--color--secondary) !important;
margin-block: 0 1.75rem !important;
}
/* Contact link row */
.bio-hero-contact-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 2.5rem;
align-items: center;
}
.bio-hero-contact-row a {
color: rgba(255, 255, 255, 0.85) !important;
text-decoration: none !important;
font-size: var(--wp--preset--font-size--sm) !important;
font-weight: 500 !important;
display: inline-flex;
align-items: center;
gap: 0.45rem;
transition: color 0.15s;
}
.bio-hero-contact-row a:hover {
color: #ffffff !important;
}
.bio-hero-contact-row svg {
flex-shrink: 0;
opacity: 0.75;
}
/* Content area below hero: top padding clears the 110px photo bleed */
.bio-content-area {
padding-top: calc(var(--wp--preset--spacing--8) + 110px) !important;
}
/* ── Mobile: stack columns, remove bleed ── */
@media (max-width: 599px) {
.bio-hero .wp-block-columns {
flex-direction: column !important;
min-height: auto !important;
}
.bio-hero-photo-col {
width: 100% !important;
max-width: 280px;
margin-inline: auto;
}
.bio-hero-photo-col .wp-block-image img {
margin-bottom: 0 !important;
max-height: 280px;
object-fit: contain;
object-position: bottom center;
}
.bio-hero-info-col {
padding: var(--wp--preset--spacing--6) !important;
align-self: auto !important;
}
.bio-content-area {
padding-top: var(--wp--preset--spacing--7) !important;
}
}
/* ─── BIO PAGE SECTIONS (rebuilt blocks) ────────────────────────────────── */
/* Eyebrow h2 inside bio sections — suppress the legacy border-bottom rule */
.bio-section h2.wp-block-heading {
border-bottom: none !important;
padding-bottom: 0 !important;
margin-block-start: 0 !important;
}
/* Eyebrow h3 inside bio credential section — suppress legacy h3 override */
.bio-credentials h3.wp-block-heading {
margin-block-start: 0 !important;
}
/* Credential lists — tighter, no left padding on mobile */
.bio-credential-list,
.bio-publications-list,
.bio-affiliations-list {
margin-block: 0;
padding-inline-start: 1.25rem;
}
.bio-credential-list li,
.bio-publications-list li,
.bio-affiliations-list li {
margin-block-end: 0.5rem;
font-size: var(--wp--preset--font-size--sm);
line-height: 1.6;
}
/* Bio CTA footer: subtle border-top */
.bio-cta-footer {
border-top: 1px solid var(--wp--preset--color--light-gray);
}
/* ─── ABOUT US POLISH ────────────────────────────────────────────────────── */
/* ── about-page-hero overlay ───────────────────────────────────────────────
The rebuilt About hero uses class "about-page-hero"; the dimRatio:55 block
attribute controls opacity automatically via has-background-dim-55.
Explicit rule kept here so future edits are easy to find.
──────────────────────────────────────────────────────────────────────── */
.about-page-hero .wp-block-cover__background.has-background-dim {
opacity: 0.55;
}
/* About hero: crop lower-centre to keep Adirondack chairs in frame */
.about-page-hero .wp-block-cover__image-background {
object-position: center 62%;
}
/* ── section-about-intro (WHO WE ARE — 2-col) ─────────────────────────────── */
.section-about-intro .wp-block-columns {
align-items: center;
}
/* Pull quote between paragraphs */
.about-pull-quote {
margin: var(--wp--preset--spacing--5) 0;
padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
border-left: 3px solid var(--wp--preset--color--secondary);
background-color: rgba(33, 72, 69, 0.04);
border-radius: 0 4px 4px 0;
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--lg);
font-style: italic;
line-height: 1.6;
color: var(--wp--preset--color--primary);
}
/* ── section-about-team (OUR TEAM — light-bg 3-col card grid) ──────────────── */
/* Cards stretch to equal height within their column */
.section-about-team .wp-block-column {
display: flex;
flex-direction: column;
}
.section-about-team .team-card.service-preview-card {
flex: 1;
display: flex;
flex-direction: column;
}
/* Team photo: constrained, object-fit cover for portrait shots */
.section-about-team .team-card-photo {
margin-bottom: 0;
}
.section-about-team .team-card-photo img {
width: 100%;
height: 220px;
object-fit: cover;
object-position: center !important; /* center crops to face area; !important prevents WP inline override */
display: block;
border-radius: 3px 3px 0 0;
}
/* Push the "View Full Bio" link to the bottom of each card */
.section-about-team .service-card-link {
margin-top: auto !important;
}
/* Team card title label (role) */
.section-about-team .team-card-title {
text-transform: uppercase;
}
/* ── section-about-values (OUR VALUES — white 2-col) ──────────────────────── */
/* New class aliases — same rules as legacy .about-values-section */
.section-about-values ul {
padding-inline-start: 1.4rem;
margin-block: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
}
.section-about-values ul li {
font-size: var(--wp--preset--font-size--base);
line-height: 1.7;
color: var(--wp--preset--color--text);
margin-block-end: 0.5rem;
padding-inline-start: 0.25rem;
}
.section-about-values ul li strong {
color: var(--wp--preset--color--primary);
}
.section-about-values p {
font-size: var(--wp--preset--font-size--base);
line-height: 1.75;
color: var(--wp--preset--color--text);
}
/* Vertical alignment: values list column starts at top */
.section-about-values .wp-block-columns {
align-items: flex-start;
}
/* About intro: better column balance (legacy class kept) */
.about-intro-section .wp-block-columns {
align-items: flex-start !important;
}
.about-intro-section .wp-block-column p {
font-size: var(--wp--preset--font-size--lg);
line-height: 1.75;
color: var(--wp--preset--color--text);
}
/* Group photo: shadow and polish — About page and home page Why Us section */
.about-group-photo img,
.team-group-photo img {
border-radius: 6px;
box-shadow: 0 8px 32px rgba(33, 72, 69, 0.14);
display: block;
width: 100%;
}
/* ── About page: heading typography fix ───────────────────────────────────────
Root cause: WP converts slug "4xl" → CSS custom property "--wp--preset--font-size--4-xl"
(hyphenated). Block inline styles and theme.json element rules reference the
non-hyphenated form ("--wp--preset--font-size--4xl") which is undefined → UA defaults.
These page-scoped rules reference the DEFINED hyphenated form directly.
──────────────────────────────────────────────────────────────────────────── */
.about-page-header h2 {
font-family: 'Frank Ruhl Libre', serif;
font-size: var(--wp--preset--font-size--4-xl);
line-height: 1.2;
color: #ffffff !important;
}
/* Values section: style the raw HTML headings */
.about-values-section h2 {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--4-xl);
line-height: 1.2;
color: var(--wp--preset--color--primary);
margin-block: 0 var(--wp--preset--spacing--4);
padding-bottom: var(--wp--preset--spacing--3);
border-bottom: 2px solid var(--wp--preset--color--secondary);
}
.about-team-section h2,
.section-about-cta h2 {
font-size: var(--wp--preset--font-size--4-xl);
line-height: 1.2;
}
.about-values-section h3 {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--lg);
font-weight: 500;
color: var(--wp--preset--color--text-dark);
font-style: italic;
margin-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--4);
}
.about-values-section h4 {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--lg);
font-weight: 400;
color: var(--wp--preset--color--primary);
font-style: italic;
margin-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--4);
padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
border-left: 3px solid var(--wp--preset--color--secondary);
background-color: rgba(82, 187, 49, 0.05);
border-radius: 0 4px 4px 0;
}
.about-values-section ul {
padding-inline-start: 1.4rem;
margin-block: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
}
.about-values-section ul li {
font-size: var(--wp--preset--font-size--base);
line-height: 1.7;
color: var(--wp--preset--color--text);
margin-block-end: 0.5rem;
padding-inline-start: 0.25rem;
}
.about-values-section ul li strong {
color: var(--wp--preset--color--primary);
}
.about-values-section p {
font-size: var(--wp--preset--font-size--base);
line-height: 1.75;
color: var(--wp--preset--color--text);
}
/* ─── CONTACT PAGE POLISH ────────────────────────────────────────────────── */
.contact-cards-section {
padding-block: var(--wp--preset--spacing--8) !important;
}
/* Contact card: refined */
.contact-info-card {
background-color: #ffffff !important;
border: 1px solid var(--wp--preset--color--light-gray) !important;
border-top: 3px solid var(--wp--preset--color--secondary) !important;
border-radius: 4px !important;
padding: var(--wp--preset--spacing--6) !important;
box-shadow: 0 2px 12px rgba(33, 72, 69, 0.07);
transition: box-shadow 0.2s ease;
}
.contact-info-card:hover {
box-shadow: 0 4px 20px rgba(33, 72, 69, 0.12);
}
.contact-info-card h4.wp-block-heading {
font-family: var(--wp--preset--font-family--body);
font-size: 0.875rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--secondary);
margin-block: 0 0.75rem;
}
.contact-info-card p {
font-size: var(--wp--preset--font-size--base);
line-height: 1.65;
color: var(--wp--preset--color--text-dark);
margin: 0;
}
.contact-info-card a {
color: var(--wp--preset--color--primary);
font-weight: 600;
text-decoration: none;
}
.contact-info-card a:hover {
color: var(--wp--preset--color--secondary);
}
/* Contact map embed wrapper */
.contact-map-wrapper {
border-radius: 6px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(33, 72, 69, 0.1);
line-height: 0;
}
.contact-map-wrapper iframe {
display: block;
border: 0;
width: 100%;
height: 400px;
}
/* ─── CTA SECTION (global) ───────────────────────────────────────────────── */
.section-contact-cta h2.wp-block-heading {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--3xl) !important;
font-weight: 500;
letter-spacing: -0.01em;
color: #ffffff;
}
.section-contact-cta p {
color: rgba(255, 255, 255, 0.82) !important;
font-size: var(--wp--preset--font-size--lg) !important;
max-width: 560px;
margin-inline: auto;
}
/* ─── CONSULTATION / FORM PAGE ───────────────────────────────────────────── */
.fluent-form-wrapper {
background-color: #f7f9f8;
border-radius: 6px;
padding: var(--wp--preset--spacing--7);
border: 1px solid var(--wp--preset--color--light-gray);
}
.fluent-form-wrapper .ff-el-group label {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--sm);
font-weight: 600;
color: var(--wp--preset--color--primary);
}
.fluent-form-wrapper .ff-el-form-control {
border-color: var(--wp--preset--color--light-gray) !important;
border-radius: 3px !important;
}
.fluent-form-wrapper .ff-el-form-control:focus {
border-color: var(--wp--preset--color--secondary) !important;
/* outline: none removed — see accessibility remediation block */
box-shadow: 0 0 0 3px rgba(82, 187, 49, 0.25);
}
/* ─── INTERIOR POST CONTENT TYPOGRAPHY ───────────────────────────────────── */
.wp-block-post-content p {
line-height: 1.75;
color: var(--wp--preset--color--text);
font-size: var(--wp--preset--font-size--base);
}
.wp-block-post-content ul,
.wp-block-post-content ol {
padding-inline-start: 1.5rem;
margin-block: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
}
.wp-block-post-content li {
line-height: 1.7;
margin-block-end: 0.4rem;
}
/* ─── FOOTER POLISH ──────────────────────────────────────────────────────── */
/* Footer logo: larger, original brand colours (no inversion filter) */
.site-footer .wp-block-site-logo img {
max-height: 110px !important;
width: auto !important;
}
/* Footer column headings */
.footer-col-heading {
color: #ffffff !important;
font-family: var(--wp--preset--font-family--body) !important;
font-size: var(--wp--preset--font-size--sm) !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
margin-top: 0 !important;
margin-bottom: var(--wp--preset--spacing--3) !important;
}
/* Footer nav links: brighter and with accent hover */
.footer-nav-list a {
color: rgba(255, 255, 255, 0.8) !important;
}
.footer-nav-list a:hover {
color: var(--wp--preset--color--accent) !important;
}
/* Footer nav list items: cleaner spacing */
.footer-nav-list li {
line-height: 1.5;
}
/* ── Social icons ────────────────────────────────────────────── */
.footer-social-row {
display: flex;
gap: 0.625rem;
margin-top: var(--wp--preset--spacing--4);
}
.footer-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.12);
color: #ffffff;
text-decoration: none;
transition: background-color 0.18s ease, color 0.18s ease;
}
.footer-social-link:hover {
background-color: var(--wp--preset--color--accent);
color: var(--wp--preset--color--primary);
}
/* ── Contact icon-box items ──────────────────────────────────── */
.footer-contact-items {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--4);
}
.footer-contact-item {
display: flex;
gap: 0.875rem;
align-items: flex-start;
}
.footer-contact-icon-box {
flex-shrink: 0;
width: 38px;
height: 38px;
background-color: var(--wp--preset--color--accent);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--wp--preset--color--primary);
}
.footer-contact-detail {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.footer-contact-label {
font-size: var(--wp--preset--font-size--xs);
color: rgba(255, 255, 255, 0.55);
text-transform: uppercase;
letter-spacing: 0.07em;
font-weight: 600;
line-height: 1.3;
}
.footer-contact-detail a,
.footer-contact-detail address {
color: rgba(255, 255, 255, 0.85) !important;
font-style: normal;
font-size: var(--wp--preset--font-size--sm);
text-decoration: none;
line-height: 1.5;
}
.footer-contact-detail a:hover {
color: var(--wp--preset--color--accent) !important;
}
/* Footer legal links: horizontal flex with gaps + accent hover */
.footer-legal-links {
gap: 1.5rem;
}
.footer-legal-links a:hover {
color: var(--wp--preset--color--accent) !important;
}
/* ============================================================
CONTACT PAGE
============================================================ */
/* Hero */
.contact-hero .wp-block-cover__inner-container {
padding-left: var(--wp--preset--spacing--7);
padding-right: var(--wp--preset--spacing--7);
}
.contact-hero h1.wp-block-heading {
font-size: var(--wp--preset--font-size--5xl);
color: #fff;
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: var(--wp--preset--spacing--3);
}
.contact-hero .contact-hero-sub {
font-size: var(--wp--preset--font-size--lg);
color: rgba(255, 255, 255, 0.85);
max-width: 480px;
margin: 0;
}
/* Main two-column section */
.contact-main-section {
margin-top: 0 !important;
}
.contact-main-section > .wp-block-columns {
align-items: flex-start;
}
/* Left info column */
.contact-info-col .contact-eyebrow {
font-size: var(--wp--preset--font-size--xs);
font-weight: 700;
letter-spacing: 0.12em;
color: var(--wp--preset--color--secondary);
text-transform: uppercase;
margin: 0 0 var(--wp--preset--spacing--3) 0;
}
.contact-info-col h2.wp-block-heading {
font-size: var(--wp--preset--font-size--3xl);
color: var(--wp--preset--color--primary);
margin-top: 0;
margin-bottom: var(--wp--preset--spacing--4);
}
.contact-info-col .contact-intro-text {
font-size: var(--wp--preset--font-size--base);
color: #444;
line-height: 1.7;
margin: 0 0 var(--wp--preset--spacing--6) 0;
}
/* Contact icon items */
.lhl-contact-items {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--4);
margin-bottom: var(--wp--preset--spacing--6);
}
.lhl-contact-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.lhl-contact-icon-box {
width: 42px;
height: 42px;
min-width: 42px;
background: var(--wp--preset--color--primary);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.lhl-contact-detail {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.lhl-contact-label {
font-size: var(--wp--preset--font-size--xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--wp--preset--color--secondary);
}
.lhl-contact-value {
font-size: var(--wp--preset--font-size--base);
color: var(--wp--preset--color--primary);
font-weight: 500;
text-decoration: none;
font-style: normal;
line-height: 1.5;
}
.lhl-contact-value a {
color: var(--wp--preset--color--primary);
text-decoration: none;
font-weight: 500;
}
.lhl-contact-value a:hover {
color: var(--wp--preset--color--secondary);
}
/* Hours block */
.contact-hours-block {
background: var(--wp--preset--color--light-bg);
border-left: 3px solid var(--wp--preset--color--secondary);
border-radius: 0 8px 8px 0;
padding: 1.1rem 1.25rem;
}
.contact-hours-label {
font-size: var(--wp--preset--font-size--xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--wp--preset--color--secondary);
margin-bottom: 0.3rem;
}
.contact-hours-value {
font-size: var(--wp--preset--font-size--base);
font-weight: 600;
color: var(--wp--preset--color--primary);
margin-bottom: 0.15rem;
}
.contact-hours-note {
font-size: var(--wp--preset--font-size--xs);
color: #666;
}
/* Right form column */
.contact-form-col {
background: #fff;
border-radius: 12px;
padding: var(--wp--preset--spacing--7);
box-shadow: 0 4px 24px rgba(33, 72, 69, 0.08);
}
.contact-form-col .form-eyebrow {
font-size: var(--wp--preset--font-size--xs);
font-weight: 700;
letter-spacing: 0.12em;
color: var(--wp--preset--color--secondary);
text-transform: uppercase;
margin: 0 0 var(--wp--preset--spacing--3) 0;
}
.contact-form-col h2.wp-block-heading {
font-size: var(--wp--preset--font-size--2xl);
color: var(--wp--preset--color--primary);
margin-top: 0;
margin-bottom: var(--wp--preset--spacing--5);
}
/* Fluent Forms overrides inside contact form col */
.contact-form-col .ff-el-group {
margin-bottom: 1.1rem !important;
}
.contact-form-col .ff-el-form-control {
border: 1.5px solid #d6dce8 !important;
border-radius: 6px !important;
padding: 0.7rem 0.9rem !important;
font-size: var(--wp--preset--font-size--base) !important;
color: #222 !important;
background: #fafbfc !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.contact-form-col .ff-el-form-control:focus {
border-color: var(--wp--preset--color--secondary) !important;
box-shadow: 0 0 0 3px rgba(82, 187, 49, 0.25) !important;
/* outline: none removed — see accessibility remediation block */
background: #fff !important;
}
.contact-form-col .ff-el-form-control::placeholder {
color: #999 !important;
}
.contact-form-col .ff-el-input--label label {
font-weight: 600 !important;
font-size: var(--wp--preset--font-size--sm) !important;
color: var(--wp--preset--color--primary) !important;
margin-bottom: 0.35rem !important;
}
.contact-form-col .ff_submit_btn_wrapper .ff-btn {
background: var(--wp--preset--color--secondary) !important;
color: var(--wp--preset--color--primary) !important;
font-weight: 700 !important;
font-size: var(--wp--preset--font-size--base) !important;
letter-spacing: 0.03em !important;
border: none !important;
border-radius: 6px !important;
padding: 0.8rem 2rem !important;
cursor: pointer !important;
transition: background 0.2s ease, transform 0.15s ease !important;
width: 100% !important;
}
.contact-form-col .ff_submit_btn_wrapper .ff-btn:hover {
background: var(--wp--preset--color--accent) !important;
transform: translateY(-1px) !important;
}
/* What Happens Next card */
.contact-what-to-expect {
margin-top: var(--wp--preset--spacing--6);
background: var(--wp--preset--color--primary);
border-radius: 10px;
padding: 1.4rem 1.5rem 1.5rem;
color: #fff;
}
.contact-wte-heading {
font-family: var(--wp--preset--font-family--montserrat);
font-size: var(--wp--preset--font-size--base);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--wp--preset--color--accent) !important;
margin: 0 0 0.85rem 0;
}
.contact-wte-list {
margin: 0;
padding-left: 1.3rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.contact-wte-list li {
font-size: var(--wp--preset--font-size--sm);
color: rgba(255, 255, 255, 0.88);
line-height: 1.6;
}
/* Legal disclaimer */
.contact-legal-disclaimer {
font-size: var(--wp--preset--font-size--xs);
color: #888;
line-height: 1.6;
margin-top: var(--wp--preset--spacing--4);
margin-bottom: 0;
border-top: 1px solid #eaecf0;
padding-top: var(--wp--preset--spacing--4);
}
/* Map section */
.contact-map-section {
margin-top: 0 !important;
}
.contact-map-section .map-eyebrow {
font-size: var(--wp--preset--font-size--xs);
font-weight: 700;
letter-spacing: 0.12em;
color: var(--wp--preset--color--secondary);
text-transform: uppercase;
margin: 0 0 var(--wp--preset--spacing--3) 0;
}
.contact-map-section h2.wp-block-heading {
font-size: var(--wp--preset--font-size--2xl);
color: var(--wp--preset--color--primary);
margin-top: 0;
margin-bottom: var(--wp--preset--spacing--5);
}
.contact-map-wrapper {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(33, 72, 69, 0.1);
margin-bottom: var(--wp--preset--spacing--5);
}
.contact-map-wrapper iframe {
display: block;
width: 100%;
border: 0;
}
.contact-map-address {
font-size: var(--wp--preset--font-size--base);
color: var(--wp--preset--color--primary);
font-style: normal;
line-height: 1.7;
margin: 0;
}
.contact-map-address a {
color: var(--wp--preset--color--secondary);
font-weight: 600;
text-decoration: none;
}
.contact-map-address a:hover {
text-decoration: underline;
}
/* ============================================================
EYEBROW LABELS — site-wide font normalization
Forces Montserrat on all letter-spaced label elements
regardless of whether they're or
blocks.
============================================================ */
[style*="letter-spacing:0.12em"],
[style*="letter-spacing:0.14em"],
[style*="letter-spacing:0.1em"] {
font-family: var(--wp--preset--font-family--heading-display) !important;
}
/* ─── MOBILE BREAKPOINT ADDITIONS ────────────────────────────────────────── */
@media (max-width: 782px) {
/* Services anchor nav: horizontal scroll */
.services-section-nav .services-nav-inner {
justify-content: flex-start;
padding-inline: var(--wp--preset--spacing--4);
}
.services-section-nav .services-nav-item {
font-size: 0.8rem;
padding-inline: 0.85rem;
}
/* Header right: hide consultation button, show phone only */
.header-right .wp-block-buttons {
display: none;
}
.header-phone {
display: block !important;
}
/* Bio page header: stack columns */
.bio-page-header {
padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--4) !important;
}
/* Bio credentials: stack 3 columns to 1 on mobile */
.bio-credentials .wp-block-columns {
flex-direction: column;
}
.bio-credentials .wp-block-column {
flex-basis: 100% !important;
width: 100% !important;
}
/* About values (legacy + new class) */
.about-values-section,
.section-about-values {
padding-inline: var(--wp--preset--spacing--4) !important;
}
/* About intro — stack columns on mobile */
.section-about-intro .wp-block-columns {
flex-direction: column;
}
.section-about-intro .wp-block-column {
flex-basis: 100% !important;
width: 100% !important;
}
/* Team cards — stack to single column on mobile */
.section-about-team .wp-block-columns {
flex-direction: column;
}
.section-about-team .wp-block-column {
width: 100% !important;
flex: unset !important;
}
/* Team card photo height on mobile.
Using object-position: center — faces sit in the MIDDLE of these studio
shots, not at the very top. "top center" shows background headroom first.
"center" crops to the face area on both short and generous-headroom photos. */
.section-about-team .team-card-photo img {
height: 240px;
object-position: center !important;
}
/* Contact map height on mobile */
.contact-map-wrapper iframe {
height: 260px;
}
/* CTA section heading */
.section-contact-cta h2.wp-block-heading {
font-size: var(--wp--preset--font-size--2xl) !important;
}
/* Service preview cards — stack to single column on mobile */
.section-services .wp-block-columns {
flex-direction: column;
}
.section-services .wp-block-column {
width: 100% !important;
flex: unset !important;
}
/* Contact page — stack columns */
.contact-main-section .wp-block-columns {
flex-direction: column;
}
.contact-main-section .wp-block-column {
flex-basis: 100% !important;
width: 100% !important;
}
.contact-form-col {
padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--4);
}
.contact-hero h1.wp-block-heading {
font-size: var(--wp--preset--font-size--3xl);
}
.contact-hero .wp-block-cover__inner-container {
padding-left: var(--wp--preset--spacing--4);
padding-right: var(--wp--preset--spacing--4);
}
}
/* ==========================================================================
ACCESSIBILITY REMEDIATION — 2026-04-04
Fixes for A-001, A-003, A-005, A-006, A-007, A-011, A-012
========================================================================== */
/* ─── SKIP NAVIGATION LINK (A-007) ─────────────────────────────────────── */
/* Screen-reader-only utility — hides visually but keeps in a11y tree */
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-to-main {
position: absolute;
top: -100px;
left: var(--wp--preset--spacing--4, 1rem);
z-index: 9999;
padding: 0.75rem 1.25rem;
background: var(--wp--preset--color--primary);
color: #ffffff;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
text-decoration: none;
border-radius: 0 0 4px 4px;
border: 2px solid var(--wp--preset--color--accent);
transition: top 0.15s ease;
}
.skip-to-main:focus,
.skip-to-main:focus-visible {
top: 0;
outline: 3px solid var(--wp--preset--color--accent);
outline-offset: 2px;
}
/* ─── KEYBOARD FOCUS INDICATORS (A-001) ─────────────────────────────────── */
/*
* Zero `:focus-visible` rules existed before this remediation pass.
* All interactive elements now receive a visible 3px outline on keyboard focus.
* `:focus-visible` targets keyboard-initiated focus only — mouse users are
* unaffected. Two variants: dark outline (light backgrounds), mint outline
* (dark/colored backgrounds). High-contrast mode: `forced-colors` block below.
*/
/* Default: dark green outline — visible on white and light-gray backgrounds */
:focus-visible {
outline: 3px solid var(--wp--preset--color--primary);
outline-offset: 3px;
border-radius: 2px;
}
/* Dark-background focus ring: mint (#C4EA9E) visible on dark green/hero overlays */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.section-contact-cta a:focus-visible,
.section-contact-cta button:focus-visible,
.home-hero-cover a:focus-visible,
.home-hero-cover button:focus-visible,
.page-hero a:focus-visible,
.page-hero button:focus-visible,
.bio-hero a:focus-visible,
.bio-hero button:focus-visible,
.services-page-header a:focus-visible,
.services-page-header button:focus-visible {
outline: 3px solid var(--wp--preset--color--accent);
outline-offset: 3px;
border-radius: 2px;
}
/* Skip link already handled above */
/* High-contrast mode support */
@media (forced-colors: active) {
:focus-visible {
outline: 3px solid ButtonText;
outline-offset: 3px;
}
}
/* ─── FORM FOCUS — replace outline:none with accessible version ─────────── */
/*
* Previously: outline:none on .ff-el-form-control:focus
* Now: keep the green box-shadow (which IS visible) but add an outline as
* fallback for high-contrast mode, and increase shadow opacity for normal mode.
*/
.fluent-form-wrapper .ff-el-form-control:focus,
.contact-form-col .ff-el-form-control:focus {
/* Remove the suppressed outline override — :focus-visible rule above applies */
outline: 2px solid var(--wp--preset--color--secondary) !important;
outline-offset: 0 !important;
box-shadow: 0 0 0 3px rgba(82, 187, 49, 0.25) !important;
}
/* ─── CONTRAST FIXES ────────────────────────────────────────────────────── */
/* A-004: Eyebrow labels on light backgrounds — bright green (#52BB31) fails
contrast on #E5E8EF (~2.8:1). Change to dark green (#214845) = ~11.8:1.
Targets the "HOW WE HELP" / "WHY CLIENTS CHOOSE US" uppercase eyebrow h2
blocks that sit inside light-background section wrappers. */
.section-services h2,
.section-why-us h2 {
color: var(--wp--preset--color--primary) !important;
}
/* A-005 / header design: CTA button default and hover states.
Default: dark green bg (#214845) + white text = ~12:1 ✓
Hover: mint bg (#C4EA9E) + dark green text = ~8.4:1 ✓
Both states pass WCAG 2.1 AA. Transition keeps the change feeling smooth. */
.site-header-inner .header-cta .wp-block-button__link,
.header-cta .wp-block-button__link {
background-color: var(--wp--preset--color--primary) !important;
color: #ffffff !important;
transition: background-color 0.18s ease, color 0.18s ease;
}
.site-header-inner .header-cta .wp-block-button__link:hover,
.header-cta .wp-block-button__link:hover {
background-color: var(--wp--preset--color--accent) !important;
color: var(--wp--preset--color--primary) !important;
}
/* A-012: Footer bottom bar copyright — rgba(255,255,255,0.5) on dark green
fails at ~3.2:1 for 12px text (xs). Raise to 0.75 = ~5.8:1 (passes AA). */
.footer-bottom-bar > p,
.footer-bottom-bar .wp-block-paragraph {
color: rgba(255, 255, 255, 0.75) !important;
}
/* Also raise legal link opacity to match — was 0.5 */
.footer-legal-links a {
color: rgba(255, 255, 255, 0.75);
}
/* ─── BIO PAGE HEADER H1 SIZING (A-002 support) ────────────────────────── */
/*
* Bio name headings were h2 — now corrected to h1 in post content.
* These CSS rules carry over from the h2 targeting and now apply to h1.
* Explicit re-declaration ensures visual treatment is unchanged.
*/
.bio-page-header .wp-block-column h1,
.bio-hero-info-col h1.bio-hero-name {
margin-block-end: 0.25rem;
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--5xl);
line-height: 1.1;
letter-spacing: -0.01em;
}
/* ==========================================================================
MOBILE UI SWEEP — 2026-04-05
Fixes: header balance · edge-to-edge text · hero layout · footer order ·
section spacing · Why Us stacking · CTA buttons · service card padding.
========================================================================== */
/* ─── 1. HEADER: clean Logo | [space] | Hamburger layout ──────────────────
Hiding header-right on mobile removes phone + contact button.
Phone is in the footer, hero CTA, and Contact page — always reachable.
Nav block gets margin-left:auto so the hamburger lands at the far right. */
@media (max-width: 782px) {
.header-right {
display: none !important;
}
.site-header-inner .primary-navigation {
margin-left: auto !important;
flex-shrink: 0;
}
}
/* ─── 2. EDGE-TO-EDGE TEXT: add horizontal padding to content areas ────────
Root cause: FSE constrained layout has no side padding set in theme.json.
Fix 1 — full-bleed constrained sections (homepage sections, about sections,
bio sections, etc.): add padding-inline directly.
Fix 2 — cover block inner containers (hero sections on all pages).
Fix 3 — post content flow on interior pages. */
@media (max-width: 782px) {
/* Full-bleed constrained group blocks — covers every alignfull section */
.wp-block-group.alignfull.is-layout-constrained {
padding-inline: var(--wp--preset--spacing--5) !important;
}
/* Cover block inner containers (hero sections) */
.wp-block-cover__inner-container {
padding-inline: var(--wp--preset--spacing--5) !important;
}
/* Interior page post content */
.wp-block-post-content {
padding-inline: var(--wp--preset--spacing--5);
}
/* Alignfull blocks inside post content must break back out of post padding */
.wp-block-post-content > .alignfull {
margin-inline: calc(-1 * var(--wp--preset--spacing--5));
width: calc(100% + 2 * var(--wp--preset--spacing--5));
}
}
/* ─── 3. HERO SECTION: reduce wasted vertical space + equal-width buttons ──
min-height 460px + center-aligned content = too much empty space on mobile.
Buttons stack and stretch to equal width. */
@media (max-width: 782px) {
.home-hero-cover {
min-height: 340px !important;
}
.home-hero-cover .wp-block-buttons {
flex-direction: column !important;
align-items: stretch !important;
}
.home-hero-cover .wp-block-button {
width: 100%;
}
.home-hero-cover .wp-block-button__link {
width: 100% !important;
text-align: center !important;
box-sizing: border-box;
}
}
/* ─── 4. WHY US SECTION: stack columns properly ────────────────────────────
Columns have explicit flex-basis (55%/45%) that prevents WP's auto-stack. */
@media (max-width: 782px) {
.section-why-us .wp-block-columns {
flex-direction: column;
}
.section-why-us .wp-block-column {
flex-basis: 100% !important;
width: 100% !important;
}
.section-why-us .team-group-photo img {
width: 100%;
max-height: 280px;
object-fit: cover;
object-position: top center;
}
}
/* ─── 5. CONTACT CTA SECTION: stack and centre buttons ───────────────────── */
@media (max-width: 600px) {
.section-contact-cta .wp-block-buttons {
flex-direction: column !important;
align-items: center !important;
}
.section-contact-cta .wp-block-button {
width: 100%;
max-width: 300px;
}
.section-contact-cta .wp-block-button__link {
width: 100% !important;
text-align: center !important;
}
}
/* ─── 6. SECTION VERTICAL SPACING: reduce on mobile ───────────────────────
Sections have inline padding-top/bottom of spacing|7–8 (3–4rem).
Reduce to spacing|6 (2rem) to stop sections from feeling cavernous. */
@media (max-width: 782px) {
.section-services,
.section-why-us,
.section-contact-cta {
padding-block: var(--wp--preset--spacing--6) !important;
}
}
/* ─── 7. SERVICE PREVIEW CARDS: tighter inner padding on mobile ─────────── */
@media (max-width: 600px) {
.section-services .service-preview-card {
padding: var(--wp--preset--spacing--5) !important;
}
}
/* ─── 8. FOOTER COLUMN ORDER: Contact second on mobile ─────────────────────
Default DOM order: Brand → Services → Firm → Contact.
Mobile order: Brand → Contact → Services → Firm.
(Contact has the phone/email/address — most actionable info on mobile.) */
@media (max-width: 782px) {
.site-footer-inner .footer-brand-col { order: 1; }
.site-footer-inner .footer-contact-col { order: 2; }
.site-footer-inner .wp-block-columns > .wp-block-column:nth-child(2) { order: 3; }
.site-footer-inner .wp-block-columns > .wp-block-column:nth-child(3) { order: 4; }
}