/**
* 3MW Core Child Theme - Frontend Styles
*
* Client-specific customizations and style overrides
* This file loads after the parent theme's frontend.min.css
*
* @package 3MW_Core_Child
* @since 1.0.0
*/
/* ==========================================
TABLE OF CONTENTS
========================================== */
/*
* 1. VARIABLES
* 2. MEGA MENUS
* 3. TYPOGRAPHY OVERRIDES
* 4. COMPONENT OVERRIDES
* 5. STATISTICS ROW BLOCK CUSTOMIZATIONS
* 6. PLATFORM BLOCK CUSTOMIZATIONS
* 7. VIDEO SHOWCASE CUSTOMIZATIONS
* 8. HORIZONTAL ACCORDION SLIDE CUSTOMIZATIONS
* 9. DROPDOWN ACCORDION CUSTOMIZATIONS
* 10. KEY METRICS CUSTOMIZATIONS
* 11. TEAM MEMBER GRID CUSTOMIZATIONS
* 12. TEMPLATE-SPECIFIC OVERRIDES
* 13. CLIENT-SPECIFIC FEATURES
* 14. RESPONSIVE OVERRIDES
* 15. UTILITY CLASSES
* 16. TABBED CONTENT BLOCK
* 17. CALL-TO-ACTION BANNER BLOCK
* 18. PRINT STYLES
*
* BLOCK STYLES MOVED TO INDIVIDUAL BLOCK DIRECTORIES:
* - Multi-Column Boxed Content → blocks/multi-column-boxed-content/style.css
* - Featured/Recent Posts → blocks/featured-recent-posts/style.css
* - Testimonial → blocks/testimonial/style.css
* - Prefooter CTA → blocks/prefooter-cta/style.css
* - Hero (boxed container) → blocks/hero/style.css
* - Icon & Text Grid → blocks/icon-text-box-grid/style.css
* - Dropdown Accordion Rows → blocks/dropdown-accordion-rows/style.css
* - Vertical Scrolling Cards → blocks/vertical-scrolling-cards/style.css
*
* NOTE: HubSpot form styles moved to frontend-hubspot.css
*/
/* ==========================================
VARIABLES
========================================== */
:root {
/* CLS fix: provide an initial --header-height so the hero
min-height calc doesn't jump when JS sets the real value.
86px matches the rendered header on mobile (375px viewport).
JS in frontend.js will overwrite with the exact measured value. */
--header-height: 86px;
/* Grid System Override */
--row-gap: 30px;
/* Button Text Transform */
--btn-text-transform: uppercase;
/* Button Font Size - Bridge slug mismatch (theme.json uses "button", parent expects "custom-1") */
--font-size-button: var(--wp--preset--font-size--button);
/* Colors & Gradients - Managed via Full Site Editor (FSE) */
/* Use FSE > Site Editor > Colors/Gradients to add custom colors and gradients */
/* No need to define color/gradient variables here - FSE handles all color management */
/* WordPress FSE Color Mapping - Simple names → WordPress preset format */
--color-primary: var(--wp--preset--color--innovasea-blue);
--color-secondary: var(--wp--preset--color--sea-green);
--color-accent: var(--wp--preset--color--coral);
--color-text-primary: var(--wp--preset--color--black);
--color-text-secondary: var(--wp--preset--color--sea-green);
--color-text-light: var(--color-white);
--color-border: var(--wp--preset--color--teal);
--color-border-light: var(--wp--preset--color--teal-10);
--input-placeholder: var(--wp--preset--color--gray-dark);
--color-heading: var(--wp--preset--color--blue);
/* Dark Background Colors
* Used when section has data-section-dark-bg="true"
* For primary text: use --color-text-light directly
* For borders: use --color-border-light directly */
--color-dark-bg-text-secondary: rgb(255 255 255 / 80%); /* Secondary/muted text on dark bg */
--color-dark-bg-surface: rgb(255 255 255 / 10%); /* Subtle surfaces on dark bg */
--dark-bg-heading: var(--wp--preset--color--teal-10);
/* Brand Color Variables */
--sea-foam-20: #E0F3EB;
--teal-10: var(--wp--preset--color--teal-10);
/* Brand Gradients */
--gradient-subtle-teal: linear-gradient(180deg, #FFFFFF 0%, #F7FDFD 54.81%, rgb(233 248 250 / 64%) 100%);
/* H1 Typography Variables */
--h1-line-height: 1.2; /* 120% */
--h1-letter-spacing: 1.2px;
/* Text Link with Arrow Variables */
--link-arrow-color: #00393F; /* Sea Blue */
--link-arrow-font-size: 18px;
--link-arrow-font-weight: 700;
--link-arrow-line-height: 1.3; /* 130% */
}
/* Dark Background Overrides
* Override parent theme dark-bg variables for client brand colors */
.has-dark-bg,
[data-section-dark-bg="true"] {
--dark-bg-heading: var(--wp--preset--color--teal-10);
--dark-bg-link-hover: var(--wp--preset--color--teal-10);
}
body {
color: var(--color-text-primary);
}
:focus-visible {
outline: 1px dashed var(--color-accent);
outline-offset: 2px;
}
/* ==========================================
BUTTON CUSTOMIZATIONS
========================================== */
.announcement-bar .announcement-bar-cta:hover::before {
background: var(--wp--preset--gradient--ocean-blue);
}
.breadcrumbs-list,
.breadcrumbs-list a {
color: var(--color-heading);
}
.breadcrumbs-list .current {
max-width: 650px;
}
.wp-block-separator {
background-color: var(--color-border) !important;
}
.section-subtitle,
.section-subtitle p {
color: inherit;
}
.btn {
font-weight: 300;
}
/* Secondary buttons on blue backgrounds - white background with coral text, no border */
.has-blue-background-color .btn.btn-secondary {
background-color: var(--color-white) !important;
color: var(--wp--preset--color--coral) !important;
border-color: var(--color-white) !important;
}
/* Maintain default hover state */
.has-blue-background-color .btn.btn-secondary:hover,
.has-blue-background-color .btn.btn-secondary:focus {
background-color: var(--btn-secondary-hover-bg) !important;
color: var(--btn-secondary-hover-text-color) !important;
border-color: var(--btn-secondary-hover-border-color) !important;
}
/* ==========================================================================
Divider Styles - Teal Squiggly Border
========================================================================== */
.divider {
position: relative;
}
.divider::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat-x;
background-position: bottom left;
background-size: auto 100%;
pointer-events: none;
}
/* Mobile: Scale divider border down slightly */
@media (width <= 768px) {
.divider::after {
height: 3px;
}
}
/* ==========================================
STYLE GUIDE OVERRIDE
Add bottom margin to accommodate footer wave
========================================== */
.style-guide-section--bottom {
padding-bottom: 200px;
}
/* ==========================================
FOOTER STYLING & WAVE CLEARANCE SYSTEM
========================================== */
/*
* Footer Wave Clearance System
*
* The footer has a decorative wave (::before) that extends above it.
* This system ensures content (like pagination) stays visible above the wave.
*
* Wave math:
* - Wave height: 246px
* - Wave top offset: 65px
* - Wave extends above footer: 246px - 65px = 181px
* - Footer margin-top: 75px
* - Wave intrudes into content area: 181px - 75px = 106px
*
* Solution: Add padding-bottom to last blocks to clear the wave area.
* For pages where background should extend under wave, add a background
* to the last block via FSE or block settings.
*/
.footer {
background-color: var(--wp--preset--color--teal);
position: relative;
z-index: 10;
margin-top: 75px;
color: var(--wp--preset--color--sea-blue);
}
/*
* Last block padding to clear footer wave
* Adds enough bottom padding so content stays above the wave decoration.
*
* Wave intrusion: 106px (181px wave - 75px footer margin)
* Target clearance: ~130px total (comfortable visual gap)
* Using !important to override inline styles from FSE block editor
*/
main > .entry-content > section:last-child,
main > .entry-content > div:last-child,
main > section:last-child,
main > div:last-child:not(.entry-content) {
padding-bottom: 130px !important;
}
/* For blocks with section-padding-* classes, add extra for wave */
main > .entry-content > .section-padding-xl:last-child,
main > .entry-content > .section-padding-2xl:last-child,
main > .entry-content > .section-padding-3xl:last-child {
padding-bottom: 150px !important;
}
/* Grid container needs padding for footer wave clearance when it's the last block.
* Multiple selectors to handle different FSE template structures.
* This applies to grids with pagination, no pagination, or navigation_style: none */
main > .entry-content > .dynamic-archive-grid-wrapper:last-child .grid-container,
main > section.dynamic-archive-grid-wrapper:last-child .grid-container,
.wp-site-blocks > .dynamic-archive-grid-wrapper:last-of-type .grid-container,
.dynamic-archive-grid-wrapper:last-child .grid-container {
padding-bottom: 130px !important;
}
/* Load More button wrapper needs bottom spacing for footer wave clearance
* The load-more-wrapper is rendered OUTSIDE the grid-container,
* so it needs its own clearance rule when pagination is replaced by Load More.
* Multiple selectors to handle different FSE template structures. */
main > .entry-content > .dynamic-archive-grid-wrapper:last-child .load-more-wrapper,
main > section.dynamic-archive-grid-wrapper:last-child .load-more-wrapper,
.wp-site-blocks > .dynamic-archive-grid-wrapper:last-of-type .load-more-wrapper,
.dynamic-archive-grid-wrapper:last-child .load-more-wrapper {
margin-bottom: 130px;
}
.footer-bottom,
.footer-bottom div {
gap: var(--space-sm);
align-items: center;
}
/* Wave decoration at top of footer */
.footer::before {
content: '';
position: absolute;
top: 65px;
z-index: 1;
left: 0;
width: 100%;
height: 246px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
pointer-events: none;
transform: translateY(-100%);
}
/* Adjust footer wave position at larger viewports
* Progressive wave positioning to prevent gaps at large screens.
* The wave SVG (1440px native) stretches with background-size: cover,
* causing gaps at wider viewports. These breakpoints compensate by
* moving the wave origin point upward as viewport width increases.
*
* Breakpoint progression:
* - Default: top: 65px (standard desktop up to 1599px)
* - 1600px+: top: 55px (large desktop)
* - 1800px+: top: 45px (wide desktop)
* - 2000px+: top: 30px (ultrawide)
* - 2200px+: top: 15px (4K transition)
* - 2400px+: top: 0 (4K/ultrawide monitors)
*/
@media (width >= 1600px) {
.footer::before {
top: 55px;
}
}
@media (width >= 1800px) {
.footer::before {
top: 45px;
}
main > .entry-content > .section-padding-xl:last-child,
main > .entry-content > .section-padding-2xl:last-child,
main > .entry-content > .section-padding-3xl:last-child {
padding-bottom: 250px !important;
}
}
@media (width >= 2000px) {
.footer::before {
top: 30px;
}
}
@media (width >= 2200px) {
.footer::before {
top: 15px;
}
}
@media (width >= 2400px) {
.footer::before {
top: 0;
}
}
/* Remove footer container top padding */
.footer .container {
padding-top: 0;
}
@media (width <= 768px) {
.footer .container {
padding-left: 0;
padding-right: 0;
}
}
/* Footer paragraph text - tighter line height */
.footer p {
line-height: var(--line-height-normal);
}
/* Social link styling */
.footer .wp-block-social-links .wp-block-social-link.wp-social-link {
padding: 11px !important;
background-color: var(--wp--preset--color--blue) !important;
border-radius: 100px !important;
}
.footer .copyright {
gap: var(--space-sm);
align-items: center;
}
/* 3MW Footer Logo - Child theme override with SVG
* Uses !important to override gradient link reset rules
*/
.footer .web_logo {
background: url('/wp-content/themes/3mw-core-child/assets/images/3MW-logo-mark.svg') no-repeat center !important;
background-size: 100% !important;
opacity: 1;
margin-right: 0;
}
/* Footer navigation column titles */
.footer .classic-menu-navigation .column-title,
.footer-main .column-title a {
color: var(--wp--preset--color--sea-blue);
font-family: 'mozaic-geo-variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif;
font-size: var(--wp--preset--font-size--h-6);
font-style: normal;
font-weight: var(--font-weight-light);
line-height: 1.2;
overflow-wrap: normal;
word-break: keep-all;
hyphens: none;
}
.footer-main .column-title {
margin-bottom: var(--wp--preset--spacing--md);
}
/* Footer column-title links - hover, active, focus states */
.footer-column .column-title a:hover,
.footer-column .column-title a:active,
.footer-column .column-title a:focus {
text-decoration: underline;
}
/* Footer flexbox layout - column 1 left, columns 2-4 grouped right */
.footer-main.wp-block-columns {
position: relative;
z-index: 9;
gap: var(--space-2xl) !important; /* Gap between columns 2-4 */
align-items: start;
}
/* First column (logo/info) stays on left and takes full available space */
.footer-main.wp-block-columns > .wp-block-column:first-child {
flex: 1 1 auto !important;
padding-right: var(--space-2xl);
}
/* Columns 2-4: equal width, right-aligned, content-based sizing */
.footer-main.wp-block-columns > .wp-block-column:nth-child(2),
.footer-main.wp-block-columns > .wp-block-column:nth-child(3),
.footer-main.wp-block-columns > .wp-block-column:nth-child(4) {
flex: 0 1 auto !important; /* Don't grow, can shrink, auto width */
min-width: 150px; /* Minimum width for menu columns */
}
/* Second column - push to right, grouping columns 2-4 together */
.footer-main.wp-block-columns > .wp-block-column:nth-child(2) {
margin-left: auto !important; /* Push columns 2-4 to the right */
}
@media (width >= 768px) and (width <= 1100px) {
.footer {
padding: var(--space-sm) var(--space-lg);
}
/* Enable wrapping so columns can stack, center columns */
.footer-main.wp-block-columns {
flex-wrap: wrap !important;
justify-content: center !important;
margin-bottom: var(--space-lg);
}
/* First column takes full width, forcing other columns to wrap to next row */
.footer-main.wp-block-columns > .wp-block-column:first-child {
flex-basis: 100% !important;
max-width: 100%;
margin-bottom: var(--space-lg);
}
/* Second column no longer needs margin-left auto on tablet */
.footer-main.wp-block-columns > .wp-block-column:nth-child(2) {
margin-left: 0 !important;
}
}
/* Move first column up on desktop only (not tablet) */
@media (width > 1100px) {
.footer-main > :first-child {
position: relative;
top: -100px;
}
}
/* Menu columns - equal width and align content left */
.footer-main > :nth-child(2),
.footer-main > :nth-child(3),
.footer-main > :nth-child(4),
.footer-main > :nth-child(5) {
flex: 1 1 0;
min-width: 0;
justify-self: start;
}
/* Copyright mark styling */
.copyright-mark {
font-size: var(--font-size-small);
}
/* Legal links styling */
.legal-links nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
align-items: center;
}
.legal-links a {
font-size: var(--font-size-small);
}
/* Override column-title styles in footer-bottom legal links */
.footer-bottom .legal-links .column-title {
margin-bottom: 0;
font-size: inherit;
display: inline;
line-height: var(--line-height-normal);
}
/* Privacy/Cookie policy links - white on hover for readability on dark footer */
.footer-bottom .classic-menu-navigation .column-title a:hover,
.footer-bottom .classic-menu-navigation .column-title a:focus {
color: var(--color-white);
}
/* Ensure legal-links container aligns with other flex items */
.footer-bottom .legal-links {
display: flex;
align-items: center;
}
/* ==========================================
HEADER LAYOUT
========================================== */
/* Header container - flex row layout */
.site-header > .header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
}
/* Logo and navigation left-aligned */
.custom-site-logo-wrapper,
.wp-block-site-logo {
flex-shrink: 0;
}
/* Navigation fills remaining space */
.site-navigation {
flex: 1;
display: flex;
justify-content: center;
}
/* Header buttons container - reorder search icon */
.header-buttons {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-md);
margin-block-start: 0 !important;
margin-block-end: 0 !important;
margin-left: calc(-1 * var(--space-sm));
padding-left: var(--space-sm);
}
/* Move search icon to left of button and style */
.header-buttons .search-toggle-block {
order: -1;
display: flex;
align-items: center;
position: relative;
}
.header-buttons .search-toggle-block button {
all: unset;
display: inline-flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--wp--preset--color--sea-green);
transition: color var(--transition-base);
}
.header-buttons .search-toggle-block button svg {
width: 24px !important;
height: 24px !important;
display: block !important;
fill: currentcolor !important;
opacity: 1 !important;
visibility: visible !important;
}
.header-buttons .search-toggle-block button:hover {
color: var(--color-border);
}
/* ==========================================
LOGIN DROPDOWN MENU
========================================== */
/* Contact box and login dropdown layout */
header .contact-box {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-sm);
overflow: visible;
}
/* Login dropdown wrapper */
.login-dropdown-wrapper {
position: relative;
}
/* Login toggle button */
.login-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
background: transparent;
border: none;
line-height: 1em !important;
color: var(--wp--preset--color--sea-green);
font-family: 'mozaic-geo-variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 20px;
font-style: normal;
font-weight: var(--font-weight-light);
padding: var(--space-sm) 0;
cursor: pointer;
transition: color var(--transition-base);
white-space: nowrap;
}
.login-toggle:hover,
.login-toggle:focus {
color: var(--color-link);
}
/* Reduce login toggle font size at narrower desktop widths */
@media (width <= 1400px) {
.login-toggle {
font-size: 1.0625rem;
}
}
/* Match navigation link responsive sizing */
@media (width <= 1100px) {
.login-toggle {
font-size: 0.9375rem;
}
}
/* Dropdown caret SVG */
.login-toggle .dropdown-caret {
transition: transform var(--transition-base);
flex-shrink: 0;
}
/* Rotate caret when dropdown is open */
.login-toggle[aria-expanded="true"] .dropdown-caret {
transform: rotate(180deg);
}
/* Login dropdown menu - hidden by default */
.login-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background: var(--color-white);
border: 4px solid transparent;
border-image: var(--wp--preset--gradient--ocean-blue);
border-left: 0;
border-right: 0;
border-bottom: 0;
border-image-slice: 1;
border-image-source: var(--wp--preset--gradient--ocean-blue);
box-shadow: var(--shadow-lg);
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
z-index: 1000;
border-radius: 0 0 var(--radius-card) var(--radius-card);
overflow: hidden;
}
/* Show dropdown when toggle is active (click) or wrapper is hovered */
.login-toggle[aria-expanded="true"] + .login-dropdown-menu,
.login-dropdown-wrapper:hover .login-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Rotate caret on hover to match expanded state */
.login-dropdown-wrapper:hover .login-toggle .dropdown-caret {
transform: rotate(180deg);
}
/* Hide column title wrapper in login menu */
.login-dropdown-menu .column-title {
display: none;
}
/* Login menu links - match regular submenu styling */
.login-dropdown-menu .footer-links a {
display: block;
padding: var(--space-xs) var(--space-sm);
color: var(--color-heading);
text-decoration: none;
transition: background-color var(--transition-fast), color var(--transition-fast);
font-size: 20px;
font-weight: var(--font-weight-light);
border-radius: var(--radius-button);
}
.login-dropdown-menu .footer-links a:hover,
.login-dropdown-menu .footer-links a:focus {
background-color: var(--wp--preset--color--teal-10);
color: var(--color-link);
}
/* Add padding to submenu list - match regular submenu container padding */
.login-dropdown-menu .footer-links ul {
padding: var(--space-md) var(--space-sm);
margin: 0;
list-style: none;
}
/* Remove bottom margin on list items */
.login-dropdown-menu .footer-links li {
margin-bottom: 0;
}
/* Divider to the right of login dropdown */
.contact-box .login-dropdown-wrapper::after {
content: '';
position: absolute;
right: calc(-1 * var(--space-sm));
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 21px;
background-color: var(--wp--preset--color--sea-green);
opacity: 0.4;
}
/* Divider between Login and Search icon */
.header-buttons .search-toggle-block::before {
content: '';
position: absolute;
left: calc(-1 * var(--space-sm) - 3.5px);
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 25px;
background-color: var(--wp--preset--color--sea-green);
opacity: 0.3;
}
/* ==========================================
MEGA MENUS & NAVIGATION
========================================== */
/* Navigation menu typography and spacing */
.nav-menu {
font-size: 20px;
}
.nav-menu--desktop {
gap: var(--space-lg);
}
.nav-menu__item {
padding-left: 0;
padding-right: 0;
padding-top: var(--space-sm) !important;
padding-bottom: var(--space-sm) !important;
margin-bottom: 0 !important;
}
a.nav-menu__link {
color: var(--color-heading);
font-weight: var(--font-weight-light);
line-height: 1em;
}
a.nav-menu__link:hover,
a.nav-menu__link:focus {
color: var(--color-link);
}
/* Submenu link hover states - highlight background */
.submenu__link {
transition: background-color var(--transition-fast);
}
.submenu__link:hover {
background-color: var(--wp--preset--color--teal-10);
}
/* ==========================================
STANDARDIZE NAVIGATION UNDERLINE POSITIONS
All navigation elements use consistent vertical alignment
========================================== */
.nav-menu__item::before {
background: none;
}
/* Header CTA buttons - match nav item vertical alignment */
.header-cta-buttons a.header-link {
padding-top: var(--space-sm) !important;
padding-bottom: var(--space-sm) !important;
}
/* Search toggle button styling */
.header-buttons .search-toggle-block .wp-block-search__button {
color: var(--wp--preset--color--sea-green);
}
.header-buttons .search-toggle-block .wp-block-search__button:hover,
.header-buttons .search-toggle-block .wp-block-search__button:focus,
.header-buttons .search-toggle-block .wp-block-search__button:active,
.header-buttons .search-toggle-block .search-icon:hover,
.header-buttons .search-toggle-block .search-icon:focus,
.header-buttons .search-toggle-block .search-icon:active {
fill: var(--color-accent);
}
/* ==========================================
SEARCH ACTIVE BLUR OVERLAY
When the search bar is open, blur all header
children except the search slide itself.
========================================== */
.header.search-active > *:not(.header-buttons) {
filter: blur(3px);
opacity: 0.4;
pointer-events: none;
transition: filter 0.3s ease, opacity 0.3s ease;
}
.header.search-active > .header-buttons > *:not(.search-toggle-block) {
filter: blur(3px);
opacity: 0.4;
pointer-events: none;
transition: filter 0.3s ease, opacity 0.3s ease;
}
/* Ensure smooth transition back when search closes */
.header > *,
.header > .header-buttons > * {
transition: filter 0.3s ease, opacity 0.3s ease;
}
.submenu,
.login-dropdown-menu,
.mega-menu__content {
border-width: 4px;
border-style: solid;
border-image: var(--wp--preset--gradient--ocean-blue);
border-image-slice: 1;
border-left: 0;
border-right: 0;
border-bottom: 0;
overflow: hidden;
padding: var(--space-md) var(--space-sm);
}
.mega-section-title,
.mega-menu__link,
.mega-menu__highlight-title,
.submenu__link .mega-menu__link-title {
color: var(--color-heading);
}
/* ==========================================
TYPOGRAPHY OVERRIDES
========================================== */
/* Bold body text - ensure strong/b tags are visibly distinct from normal weight */
strong,
b {
font-weight: var(--font-weight-semibold);
}
/* Balance H2 text wrapping for more even line lengths */
h2 {
text-wrap: balance;
}
/* Pretty text wrapping for section descriptions - better line breaks */
.section-description p {
text-wrap: pretty;
}
/* Pretty text wrapping for section subtitles - better line breaks */
.section-header-content .section-subtitle p {
text-wrap: pretty;
font-size: var(--font-size-body);
}
/* Default heading colors */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-heading);
}
/* Headings inherit text color in dark background sections */
[class*="bg-dark"] :is(h1, h2, h3, h4, h5, h6),
.dark-bg :is(h1, h2, h3, h4, h5, h6),
.has-text-color :is(h1, h2, h3, h4, h5, h6) {
color: inherit;
}
/* List Styles - Unordered list bullet colors */
ul li::marker {
color: var(--color-accent);
}
ul.wp-block-list li {
margin-bottom: 8px;
}
/* Blockquote - styled like H4 with primary blue color */
blockquote {
font-size: var(--font-size-h4);
line-height: var(--line-height-heading);
font-weight: 300;
color: var(--color-primary);
font-style: normal;
margin: var(--space-lg) 0;
padding-left: var(--space-xl);
max-width: 100%;
border-left: 4px solid;
border-image-slice: 1;
border-image-source: var(--gradient-blue-teal);
}
/* ==========================================
COMPONENT OVERRIDES
========================================== */
/* Button Padding and Font Weight Override
* Uses asymmetric vertical padding to visually center text
* Font metrics (Poppins has taller ascenders than descenders) cause
* mathematically-centered text to appear slightly high
*/
.btn,
.hs_submit .hs-button,
input[type="submit"],
button[type="submit"],
.wp-element-button,
.wp-block-button__link {
padding: 12px 20px 10px;
font-weight: var(--font-weight-light);
line-height: 1em;
}
/* Select Dropdown Vertical Text Centering
* Compensates for font metrics after weight remapping (2026-03-09).
* Text appears too high - uses more top padding to push text down.
*/
body:not(.wp-admin) select,
.hs-form select {
padding-top: 14px;
padding-bottom: 10px;
}
/* Primary Button on Dark Backgrounds
* Override primary button styling when placed on dark backgrounds
* Uses coral/orange text with white background for contrast, no border
* On hover, border matches the hover background color */
.has-dark-bg,
[data-section-dark-bg="true"],
[class*="bg-dark"],
.dark-bg {
--btn-primary-bg: var(--color-white);
--btn-primary-text-color: var(--color-accent);
--btn-primary-border-color: var(--color-white);
--btn-primary-hover-border-color: var(--btn-primary-hover-bg);
}
/* Badge Vertical Text Centering
* Ensure text is visually centered within badges in archive grids
* Uses asymmetric padding to compensate for font metrics (descenders/ascenders)
* Similar approach to button padding adjustment
*/
.badge,
.badge-pill {
padding: 8px 18px 6px;
}
/* Secondary badge - plain text, not pill
* Primary badge already has pill styling; secondary should be text-only.
*/
.card-badge-secondary,
.badge.card-badge-secondary {
border: none;
border-radius: 0;
background-color: transparent;
padding: 0;
color: var(--color-text-primary);
}
/* ==========================================================================
Card Image Consistent Heights
Override parent theme's dynamic-grid.css media query that sets height: 100%
This ensures all card images maintain the same fixed height for visual consistency
========================================================================== */
.dynamic-archive-grid-wrapper .card-media {
height: 270px;
}
/* Maintain aspect ratio on smaller screens where fixed height might clip too much */
@media (width <= 480px) {
.dynamic-archive-grid-wrapper .card-media {
height: auto;
aspect-ratio: 16 / 9;
}
}
/* ==========================================================================
404 Page Search - Styling and Mobile Fix
========================================================================== */
/* Global search input styling */
.wp-block-search__input {
border-radius: var(--radius-card);
flex: 1;
padding: var(--space-sm) var(--space-md);
font-size: var(--font-size-body);
background: var(--color-white);
line-height: var(--line-height-normal);
box-shadow: var(--shadow-sm);
outline: none;
border: 1px solid var(--color-border);
transition: box-shadow var(--transition-base);
}
/* 404 Page Search Form - Centered and Mobile responsive fix */
.error-404-page .search-hero__form {
max-width: var(--max-width-content-md);
width: 100%;
margin-inline: auto;
}
.error-404-page .wp-block-search__inside-wrapper {
display: flex;
gap: var(--space-xs);
align-items: stretch;
width: 100%;
justify-content: center;
}
/* Mobile: Stack search input and button vertically */
@media (width <= 768px) {
.error-404-page .search-hero__form {
max-width: calc(100% - var(--space-lg) * 2);
}
.error-404-page .wp-block-search__inside-wrapper {
flex-direction: column;
gap: var(--space-sm);
}
.error-404-page .wp-block-search__input {
width: 100%;
min-width: 0;
}
.error-404-page .wp-block-search__button {
width: 100%;
justify-content: center;
}
}
/* Taxonomy tags (archive-meta-tags) styled as primary badges */
.archive-meta-tags .badge.badge-pill {
background: var(--wp--preset--gradient--ocean-blue);
}
.archive-meta-tags .badge.badge-pill:hover,
.archive-meta-tags .badge.badge-pill:focus {
background: var(--color-primary);
}
sup {
line-height: var(--line-height-tight);
}
/* NOTE: Multi-column boxed content styles moved to blocks/multi-column-boxed-content/style.css */
/* ==========================================
STATISTICS ROW BLOCK CUSTOMIZATIONS
========================================== */
/* 1. Header title - black color and left aligned */
.statistics-row-header h2 {
color: var(--wp--preset--color--black);
text-align: left;
}
/* 2 & 5. Statistic item - teal 10 background, remove border, and set flex basis */
.statistics-grid .statistic-item {
background-color: var(--wp--preset--color--teal-10);
border: none !important;
flex: 0 0 calc(33.33% - var(--space-lg));
max-width: calc(33.33% - var(--space-lg));
}
/* 3. Statistic metric - 88px font size, center align, no min-height (stacked layout only) */
.statistics-row-block:not(.statistics-row-block--side-by-side) .statistics-grid .statistic-metric {
font-size: 88px;
text-align: center;
min-height: 0;
color: var(--color-heading);
}
.statistics-row-container .statistic-item .statistic-metric {
color: var(--color-heading);
}
/* 4. Statistic text - h3 styling with light font weight and left aligned */
.statistics-grid span.statistic-text {
font-size: var(--wp--preset--font-size--h-3);
font-weight: var(--font-weight-light);
line-height: var(--line-height-heading);
text-align: left;
}
/* 5. Override plugin min-height - only apply when content exists, but maintain equal card heights */
.statistics-row-block:not(.statistics-row-block--side-by-side) .statistics-grid .statistic-item {
display: flex;
flex-direction: column;
}
.statistics-row-block:not(.statistics-row-block--side-by-side) .statistics-grid .statistic-text {
flex: 1;
min-height: 0;
}
.statistics-row-block:not(.statistics-row-block--side-by-side) .statistics-grid .statistic-text:not(:empty) {
min-height: 4.5em;
}
/* Statistics grid - space items evenly and stretch to equal height */
.statistics-grid {
align-items: stretch;
justify-content: space-between;
}
/* ==========================================
PLATFORM BLOCK CUSTOMIZATIONS
========================================== */
section:not(.has-text-color) .platform-description {
color: var(--color-text-secondary);
}
/* NOTE: Featured/Recent Posts styles moved to blocks/featured-recent-posts/style.css */
/* ==========================================
VIDEO SHOWCASE CUSTOMIZATIONS
========================================== */
/* Constrain video width for "Below Content" placement */
.video-placement-vidbelow .video-wrapper {
max-width: 1062px !important;
}
.video-placement-vidleft .video-showcase-description,
.video-placement-vidright .video-showcase-description {
text-wrap: balance;
}
/* ==========================================
HORIZONTAL ACCORDION SLIDE CUSTOMIZATIONS
========================================== */
.horizontal-accordion-container {
border: var(--border-width-thin) solid var(--color-border);
}
.accordion-panel:not(:last-child) {
border-right: var(--border-width-thin) solid var(--color-border);
}
.panel-title-vertical {
color: var(--color-heading);
}
@media (width <=1024px) {
.accordion-panel:not(:last-child) {
border-right: none;
border-bottom: var(--border-width-thin) solid var(--color-border);
}
}
@media (width <=991px) {
.panel-content-right,
.panel-slide-image {
display: none;
}
}
/* ==========================================
DROPDOWN ACCORDION CUSTOMIZATIONS
Block-specific styles moved to: blocks/dropdown-accordion-rows/style.css
========================================== */
/* Global accordion title override (applies to any accordion component) */
.accordion-title {
font-size: var(--font-size-h6);
}
/* ==========================================
MOBILE NAVIGATION ALIGNMENT (≤1024px)
========================================== */
@media (width <= 1024px) {
.site-navigation {
margin-right: 0;
}
.mobile-menu-toggle,
.menu-toggle,
.wp-block-navigation__responsive-container-open {
margin-left: auto;
margin-right: 0;
}
.wp-block-navigation__responsive-container {
justify-content: flex-end;
}
/* Mobile menu items - consistent font weight
* Ensures all menu items (top-level and submenu) have the same weight */
.mobile-menu__link,
.mobile-menu__toggle,
.mobile-submenu__link {
font-weight: var(--font-weight-light);
}
/* Mobile menu items - consistent spacing
* Normalizes padding between top-level items and expanded submenus */
.mobile-menu__link,
.mobile-menu__toggle {
padding: var(--space-md) 0;
}
.mobile-submenu {
padding-bottom: 0;
}
.mobile-submenu__link {
padding: var(--space-sm) 0;
}
/* Remove border-top from mobile menu search */
.mobile-menu-search {
border-top: none;
}
}
/* ==========================================
VERTICAL SCROLLING CARDS CUSTOMIZATIONS
========================================== */
/* ==========================================
KEY METRICS CUSTOMIZATIONS
========================================== */
.key-metrics-container .metrics-grid,
.key-metrics-container .metrics-grid .metric-item {
border-color: var(--color-border) !important;
}
.key-metrics-container .metrics-grid {
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.key-metrics-container .metrics-grid .metric-item {
border-left: 1px solid var(--color-primary);
}
.key-metrics-container .metrics-grid .metric-item:first-child {
border-left: 0;
}
@media (width <=991px) {
.key-metrics-container .metrics-grid,
.key-metrics-container .metrics-grid .metric-item {
border: 0 !important;
}
}
/* NOTE: Testimonial styles moved to blocks/testimonial/style.css */
/* ==========================================
TEAM MEMBER GRID CUSTOMIZATIONS
========================================== */
/* 1. Section header - remove max-width */
.team-member-grid-wrapper .section-header {
max-width: none;
}
/* 3, 4, 5. Team member card - remove border, add padding, set background */
.team-member-card {
box-shadow: none;
border: none;
background-color: var(--wp--preset--color--sea-foam-10);
padding: var(--wp--preset--spacing--md);
}
/* 6. Team member name - h4 styling */
.team-member-name,
.team-member-card .team-member-name.h5,
.team-member-name.h5 {
font-size: var(--wp--preset--font-size--h-4);
line-height: var(--line-height-heading);
color: var(--color-heading);
}
/* 7. Team member title - standard text size and sea blue color */
.team-member-title {
font-size: var(--wp--preset--font-size--body);
color: var(--wp--preset--color--sea-blue);
}
/* 8. Team member content - remove min-height and side/bottom padding */
.team-member-content {
min-height: 0; /* Override plugin's min-height: 200px */
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.grid-cols-4 .team-member-card .btn-arrow {
font-size: 98%;
}
/* Card Customizations */
/* Uncomment to apply custom card styling that integrates with theme customization system */
/* .card {
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
} */
/* Navigation Customizations */
header {
background-color: var(--color-white);
border-bottom: 2px solid var(--wp--preset--color--teal-20);
}
/* ==========================================
TEMPLATE-SPECIFIC OVERRIDES
========================================== */
.card-action,
.card-date {
color: var(--color-text-primary);
}
.card-date-banner {
color: var(--color-heading);
}
.card-date-banner .date-icon {
display: block;
}
.card-action.btn-arrow svg { display: none; }
.card-date-banner::before,
.card-date-banner::after {
display: none;
}
.dynamic-archive-filters { padding-top: 0; }
.dynamic-archive-filters .filter-buttons {
justify-content: center;
}
.dynamic-archive-grid-wrapper article.card,
.dynamic-archive-grid-wrapper article .card-body {
background: var(--wp--preset--color--teal-10);
border: 1px solid var(--color-border-light);
}
.dynamic-archive-grid-wrapper article .card-image,
.dynamic-archive-grid-wrapper article .card-media img {
border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.card--events .card-date-banner .date-icon {
margin-top: -4px;
}
.card--events .card-date-banner .date-full,
.dynamic-archive-grid-wrapper .card__date {
color: var(--color-text-tertiary);
font-size: var(--font-size-small);
}
.dynamic-archive-filters .filter-buttons button.filter-button {
border: 2px solid var(--color-border);
color: var(--color-heading);
background: var(--color-white);
}
/* Active/Pressed state */
.dynamic-archive-filters .filter-button:hover,
.dynamic-archive-filters .filter-button:focus,
.dynamic-archive-filters .filter-button:hover:not([aria-pressed="true"], .active),
.dynamic-archive-filters .filter-buttons .filter-button[aria-pressed="true"],
.dynamic-archive-filters .filter-buttons .filter-button.active {
background-color: var(--color-heading);
color: var(--color-white);
border-color: var(--color-heading);
}
/* NOTE: Prefooter CTA styles moved to blocks/prefooter-cta/style.css */
/* ==========================================
CLIENT-SPECIFIC FEATURES
========================================== */
/* Custom components unique to this client */
/* .client-custom-banner {
// Client-specific banner styles
} */
/* ==========================================
RESPONSIVE OVERRIDES
========================================== */
/* Mobile Customizations */
@media (width <= 768px) {
/* 1. Center hero title on mobile */
.hero .hero-content h1,
.hero .hero-content .hero-title {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* 2. Add spacing between stacked hero images */
.hero .hero-images {
gap: var(--space-lg);
}
/* 3. Stack image content bands - image always on bottom */
.two-column-content,
.two-column-alternating,
.image-content-layout {
display: flex !important;
flex-direction: column !important;
}
.two-column-content .content-column,
.two-column-content .image-column,
.two-column-alternating .content-column,
.two-column-alternating .image-column,
.image-content-layout .layout-content-column,
.image-content-layout .layout-image-column {
width: 100% !important;
order: unset !important;
}
.two-column-content .image-column,
.two-column-alternating .image-column,
.image-content-layout .layout-image-column {
order: 2 !important;
}
.two-column-content .content-column,
.two-column-alternating .content-column,
.image-content-layout .layout-content-column {
order: 1 !important;
}
/* Remove footer wave pseudo element and margin on mobile */
.footer::before {
display: none;
}
.footer {
/* Use negative margin to fix subpixel rendering gap between last block and footer */
margin-top: -2px;
}
/* Remove extra wave-clearance padding on mobile (wave is hidden)
* Also remove margin-bottom to prevent white gap between last block and footer */
main > .entry-content > section:last-child,
main > .entry-content > div:last-child,
main > section:last-child,
main > div:last-child:not(.entry-content) {
padding-bottom: var(--space-2xl) !important;
margin-bottom: 0 !important;
}
main > .entry-content > .section-padding-xl:last-child,
main > .entry-content > .section-padding-2xl:last-child,
main > .entry-content > .section-padding-3xl:last-child {
padding-bottom: var(--space-3xl) !important;
margin-bottom: 0 !important;
}
.dynamic-archive-grid-wrapper:last-child .grid-container {
padding-bottom: var(--space-3xl) !important;
}
/* Remove footer column custom sizing on mobile */
.footer-main .wp-block-column.footer-column:first-child {
flex-basis: auto;
margin-right: 0;
}
/* Hide dividers on mobile */
.legal-links .divider,
.footer-bottom .divider {
display: none;
}
/* Footer main - stack columns on mobile */
.footer-main.wp-block-columns {
display: flex !important;
flex-flow: column !important;
gap: var(--space-lg) !important;
}
/* Remove auto margin on second column for mobile */
.footer-main.wp-block-columns > .wp-block-column:nth-child(2) {
margin-left: 0 !important;
}
/* Footer columns - consistent spacing */
.footer-main .footer-column {
margin-bottom: 0;
}
/* Footer bottom - stack and center on mobile */
.footer-bottom {
flex-direction: column;
align-items: center;
gap: var(--space-md);
}
.footer-bottom > .wp-block-group {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0;
}
/* Copyright section - center on mobile */
.footer .copyright {
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
/* Legal links - center on mobile */
.legal-links nav {
justify-content: center;
}
/* Social icons - horizontal row centered */
.footer .footer-social {
justify-content: center !important;
}
/* Stack and left-align section headers */
.section-header.section-header--left,
.featured-posts-carousel .section-header--left {
flex-direction: column !important;
align-items: flex-start !important;
text-align: left;
}
.section-header.section-header--left .section-header__title,
.featured-posts-carousel .section-header__title {
width: 100%;
}
.section-header.section-header--left .section-header__cta,
.featured-posts-carousel .section-header__cta {
width: 100%;
}
/* Add side margins to recent posts block on mobile */
.featured-recent-posts-wrapper {
margin-left: var(--space-xl) !important;
margin-right: var(--space-xl) !important;
}
}
/* Featured recent posts - remove card background, border, and border radius */
.featured-recent-posts-wrapper .card {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
}
/* Featured recent posts - add border radius to card images */
.featured-recent-posts-wrapper .card-media {
border-radius: var(--radius-card);
}
/* Featured recent posts - section header inline layout */
.featured-recent-posts-wrapper .section-header,
.featured-recent-posts-wrapper .section-header--left {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-md);
padding-bottom: 0;
margin-bottom: var(--space-lg);
}
.featured-recent-posts-wrapper .section-header__title {
flex: 1 1 auto;
margin: 0;
}
.featured-recent-posts-wrapper .section-header__cta {
flex: 0 0 auto;
}
/* Featured recent posts - CTA text link styling */
.featured-recent-posts-wrapper .section-header__cta .text-link-arrow {
color: var(--link-arrow-color);
}
/* Featured recent posts - hide category badge */
.featured-recent-posts-wrapper .badge.badge-pill {
display: none;
}
/* Featured recent posts - card title styling */
.featured-recent-posts-wrapper .post-title,
.featured-recent-posts-wrapper .card-title {
font-size: var(--font-size-h4);
font-weight: 300;
}
/* Featured recent posts - hide card CTA */
.featured-recent-posts-wrapper .card-action,
.featured-recent-posts-wrapper .card-link {
display: none;
}
/* Featured recent posts - remove hover animations */
.featured-recent-posts-wrapper .card,
.featured-recent-posts-wrapper .post-card {
transform: none !important;
transition: none !important;
text-decoration: none;
}
.featured-recent-posts-wrapper .card:hover,
.featured-recent-posts-wrapper .post-card:hover {
transform: none !important;
}
/* Featured recent posts - remove left/right padding on card body */
.featured-recent-posts-wrapper .card-body {
padding-left: 0;
padding-right: 0;
}
@media (width <= 768px) {
/* Change all margins to padding on mobile */
.featured-recent-posts-wrapper {
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-top: var(--space-3xl);
padding-bottom: var(--space-3xl);
padding-left: var(--space-xl);
padding-right: var(--space-xl);
}
/* Remove container padding on mobile */
.featured-recent-posts-wrapper .container {
padding: 0;
}
/* Stack section header on mobile */
.featured-recent-posts-wrapper .section-header--left {
flex-direction: column;
align-items: flex-start;
}
/* Reduce hero H1 size on mobile */
.hero-content h1 {
font-size: var(--font-size-h2);
}
}
/* ==========================================
GRID SYSTEM OVERRIDES
========================================== */
/**
* Two Column Content Grid - Gap Override
*
* Override the large row-gap-2xl utility class gap for two-column content grids.
* Use the CSS variable --row-gap instead for consistent spacing.
*/
.row.two-column-content__grid.row-gap-2xl {
gap: var(--row-gap) !important;
}
/**
* Two Column Content - Layout Fix
*
* section-padding-3xl adds padding-left/right to the section AND the inner
* .container also has padding-left/right — resulting in 96px double-padding
* on each side. Strip horizontal padding from the section so only the
* .container's own padding and max-width control the inset.
*/
.two-column-content {
padding-left: 0;
padding-right: 0;
}
/**
* Two Column Content Grid - Overflow & Containment Fix
*
* Prevents WYSIWYG content (tables, images, embeds) inside columns from
* escaping the grid bounds, which causes horizontal scrollbars and makes
* the block appear off-center / wider than its container.
*/
.two-column-content .row.two-column-content__grid {
overflow: clip;
}
.two-column-content .row.two-column-content__grid > * {
min-width: 0;
}
/* ==========================================
UTILITY CLASSES
========================================== */
/* Client-specific utility classes */
/* Text Link with Arrow - Reusable Component */
.text-link-arrow {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
color: var(--link-arrow-color);
font-family: "Mozaic GEO Variable", var(--font-family-body);
font-size: var(--link-arrow-font-size);
font-style: normal;
font-weight: 300;
line-height: var(--link-arrow-line-height);
text-decoration: none;
transition: opacity var(--transition-base);
}
.text-link-arrow::after {
content: "";
display: inline-block;
width: 23px;
height: 19px;
background-image: url("../../svg/arrow-right.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: transform var(--transition-base);
}
.text-link-arrow:hover,
.text-link-arrow:focus {
opacity: 0.8;
}
.text-link-arrow:hover::after,
.text-link-arrow:focus::after {
transform: translateX(4px);
}
/* Link Box Utility - Bold Primary Links with No Underline */
.link-box a {
color: var(--color-primary);
font-weight: var(--font-weight-bold);
text-decoration: none;
}
/* ==========================================
ENTRANCE ANIMATIONS
========================================== */
/**
* Simple Slide-Up Animation Utility
*
* Applies a fade-in with upward slide animation to any element.
* Respects user motion preferences for accessibility.
*
* Usage: Add .animate-slide-up class to any block or element
* Example: Content
*
* Animation properties:
* - Duration: 0.5s (standard for entrance animations)
* - Easing: ease-out (natural deceleration)
* - Distance: 20px upward movement
* - Opacity: 0 to 1
*
* @since 1.0.8
*/
@keyframes slide-up-fade {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-slide-up {
animation: slide-up-fade 0.5s ease-out;
}
/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.animate-slide-up {
animation: none;
opacity: 1;
transform: none;
}
}
/**
* Preserve Block Padding Override
*
* Prevents flexible content area from removing padding on first/last child blocks.
* Add this class via "Additional CSS class" in block settings when a block needs
* to maintain its padding inside a flexible content area.
*
* Usage: Add class "preserve-block-padding" to any block
*/
.flexible-content-area-block .flexible-content-wrapper > .acf-block.preserve-block-padding:first-child,
.flexible-content-area-block .flexible-content-wrapper > :first-child .acf-block.preserve-block-padding {
padding-top: var(--space-xl) !important;
}
.flexible-content-area-block .flexible-content-wrapper > .acf-block.preserve-block-padding:last-child,
.flexible-content-area-block .flexible-content-wrapper > :last-child .acf-block.preserve-block-padding {
padding-bottom: var(--space-xl) !important;
}
/* Override plugin default gap (--space-xl) to reduce spacing between nested blocks */
.flexible-content-wrapper {
gap: var(--space-lg);
}
/**
* Flexible Content Area - Text Block Spacing Override
*
* The plugin's TEXT BLOCK SPACING rules use calc(-1 * var(--space-xl)) for negative margins,
* but this child theme overrides the gap to var(--space-lg). Since --space-xl > --space-lg,
* the plugin's negative margins are too aggressive and cause paragraphs to overlap.
*
* These rules recalculate the negative margins to use --space-lg instead of --space-xl,
* ensuring proper spacing between consecutive text blocks.
*/
/* TIER 1: No gap - consecutive same-type elements use their natural margins */
.flexible-content-wrapper > :is(p, .wp-block-paragraph) + :is(p, .wp-block-paragraph),
.flexible-content-wrapper > :is(ul, ol, .wp-block-list) + :is(ul, ol, .wp-block-list),
.flexible-content-wrapper > :is(p, .wp-block-paragraph) + :is(ul, ol, .wp-block-list) {
margin-top: calc(-1 * var(--space-lg));
}
/* TIER 2: Minimal gap (--space-xs) - tightly connected content */
.flexible-content-wrapper > :is(h1, h2, h3, h4, h5, h6, .wp-block-heading) + :is(
p, .wp-block-paragraph,
ul, ol, .wp-block-list,
blockquote, .wp-block-quote, .wp-block-pullquote,
.wp-block-post-content
),
.flexible-content-wrapper > :is(ul, ol, .wp-block-list) + :is(p, .wp-block-paragraph),
.flexible-content-wrapper > .wp-block-details + .wp-block-details {
margin-top: calc(-1 * var(--space-lg) + var(--space-xs));
}
/* TIER 3: Small gap (--space-sm) - related content with slight separation */
.flexible-content-wrapper > :is(p, .wp-block-paragraph) + :is(
blockquote, .wp-block-quote, .wp-block-pullquote,
.wp-block-button, .wp-block-buttons,
.wp-block-details,
pre, .wp-block-code, .wp-block-preformatted,
.wp-block-table
),
.flexible-content-wrapper > :is(blockquote, .wp-block-quote, .wp-block-pullquote) + :is(
p, .wp-block-paragraph,
ul, ol, .wp-block-list,
.wp-block-button, .wp-block-buttons
),
.flexible-content-wrapper > :is(pre, .wp-block-code, .wp-block-preformatted) + :is(p, .wp-block-paragraph),
.flexible-content-wrapper > :is(ul, ol, .wp-block-list) + :is(blockquote, .wp-block-quote, .wp-block-pullquote, .wp-block-button, .wp-block-buttons) {
margin-top: calc(-1 * var(--space-lg) + var(--space-sm));
}
/* TIER 4: Medium gap (--space-md) - section transitions */
.flexible-content-wrapper > :is(blockquote, .wp-block-quote, .wp-block-pullquote) + :is(h1, h2, h3, h4, h5, h6, .wp-block-heading),
.flexible-content-wrapper > :is(.wp-block-button, .wp-block-buttons) + :is(p, .wp-block-paragraph, ul, ol, .wp-block-list, h1, h2, h3, h4, h5, h6, .wp-block-heading),
.flexible-content-wrapper > :is(p, .wp-block-paragraph, ul, ol, .wp-block-list, blockquote, .wp-block-quote, .wp-block-pullquote, h1, h2, h3, h4, h5, h6, .wp-block-heading) + .wp-block-separator,
.flexible-content-wrapper > .wp-block-separator + :is(p, .wp-block-paragraph, ul, ol, .wp-block-list, h1, h2, h3, h4, h5, h6, .wp-block-heading),
.flexible-content-wrapper > .wp-block-table + :is(p, .wp-block-paragraph) {
margin-top: calc(-1 * var(--space-lg) + var(--space-md));
}
/**
* Flexible Content Area - Paragraph Balance
*
* Apply text-wrap: balance to paragraphs inside flexible content areas
* for more visually even line lengths, especially on centered text.
*/
.flexible-content-wrapper > p {
text-wrap: balance;
}
/**
* Flexible Content Area - Columns Padding Override (Tablet/Mobile)
*
* Ensures consistent left/right padding on columns blocks within flexible
* content areas on smaller screens. Overrides default WordPress block styling.
*/
@media (width <= 1024px) {
.flexible-content-area-block .wp-block-columns {
padding-left: var(--space-lg) !important;
padding-right: var(--space-lg) !important;
}
}
@media (width <= 768px) {
.flexible-content-area-block .wp-block-columns {
gap: 0 !important;
}
}
/* NOTE: Hero block boxed container styles moved to blocks/hero/style.css */
/* NOTE: Icon & Text Grid styles moved to blocks/icon-text-box-grid/style.css */
/* ==========================================
TABBED CONTENT BLOCK
========================================== */
/* 2. Separate tab navigation from tab panels + 3. Remove white background */
.tabbed-content .tab-navigation {
margin-bottom: var(--wp--preset--spacing--lg);
background: transparent;
border: none; /* 8. Remove borders */
}
/* Dark Background Support
* Tab buttons need light text when section has dark background
* Tab navigation and panels have their own backgrounds, so only the
* tab button text needs adaptation for the transparent navigation bar */
[data-section-dark-bg="true"] .tabbed-content .tab-button {
color: var(--color-text-light);
}
[data-section-dark-bg="true"] .tabbed-content .tab-button:hover,
[data-section-dark-bg="true"] .tabbed-content .tab-button.active {
color: var(--wp--preset--color--sea-foam-20);
}
[data-section-dark-bg="true"] .tabbed-content .tab-button:hover::after,
[data-section-dark-bg="true"] .tabbed-content .tab-button.active::after {
background: var(--wp--preset--color--sea-foam-20);
}
/* Section header on dark backgrounds */
[data-section-dark-bg="true"] .tabbed-content .section-header .section-title,
[data-section-dark-bg="true"] .tabbed-content .section-header .section-subtitle {
color: var(--color-text-light);
}
/* 4. Tab button styling - h5 with sea blue text + 5. Remove backgrounds */
.tabbed-content .tab-button {
font-size: var(--wp--preset--font-size--h-5);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-heading);
color: var(--wp--preset--color--sea-blue);
position: relative;
padding-bottom: calc(var(--wp--preset--spacing--lg) + 0.5rem); /* Extra space for underline */
background: transparent; /* Remove all background colors */
border: none; /* 8. Remove borders */
border-right: none;
border-bottom: none;
}
/* 4a. Animated underline on hover/active - fills from left */
.tabbed-content .tab-button::after {
content: '';
position: absolute;
bottom: calc(var(--wp--preset--spacing--md) - 2px); /* Space from bottom of text */
left: var(--wp--preset--spacing--xl);
right: var(--wp--preset--spacing--xl);
height: 2px;
background-color: var(--wp--preset--color--sea-blue);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.tabbed-content .tab-button:hover::after,
.tabbed-content .tab-button.active::after {
transform: scaleX(1);
}
.tabbed-content .tab-button:hover,
.tabbed-content .tab-button.active {
background: transparent; /* Remove background on hover/active */
}
/* 7. Make image smaller - doesn't need to fill column */
.tabbed-content .tab-image {
position: relative; /* Keep existing positioning for gradient */
max-width: 400px;
margin: 0 auto;
height: auto; /* Remove height: 100% */
}
/* 6. Remove tab-image::before element */
.tabbed-content .tab-image::before {
display: none; /* Remove gradient overlay */
}
.tabbed-content .tab-image-img {
position: relative;
z-index: 0;
}
/* 8. Remove borders from panels */
.tabbed-content .tab-panels,
.tabbed-content .tab-panel-content {
border: none;
border-radius: 14px;
}
/* ==========================================
CALL-TO-ACTION BANNER BLOCK
========================================== */
/* ==========================================
TIMELINE / OUR HISTORY BLOCK
========================================== */
.timeline-card {
border-color: var(--color-border);
}
.timeline-description p strong {
color: var(--color-primary);
}
/* ==========================================
TWO-COLUMN CONTENT BLOCK
========================================== */
.two-column-content__content a {
font-weight: 700;
text-decoration: none;
}
/* ==========================================
GUTENBERG OUTLINE BUTTON - GRADIENT BORDER
========================================== */
/*
* Apply gradient border effect to Gutenberg Outline style buttons
* Matches the secondary button gradient border implementation
* Uses mask compositing technique for gradient borders
*
* Note: This overrides parent theme's outline button hover behavior
* to properly work with gradient borders
*/
/* Button group gap */
.wp-block-buttons {
gap: var(--space-sm);
}
/* Outline button style - Simple solid border matching theme btn-outline-dark */
.wp-block-button.is-style-outline .wp-element-button,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-buttons .wp-block-button.is-style-outline .wp-element-button,
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
background-color: transparent !important;
color: var(--color-text-primary) !important;
border: 2px solid var(--btn-secondary-border-color) !important;
transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
/* Hover, focus, and active states - Fill background with dark border color */
.wp-block-button.is-style-outline .wp-element-button:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-element-button:focus,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-element-button:active,
.wp-block-button.is-style-outline .wp-block-button__link:active,
.wp-block-buttons .wp-block-button.is-style-outline .wp-element-button:hover,
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-buttons .wp-block-button.is-style-outline .wp-element-button:focus,
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-buttons .wp-block-button.is-style-outline .wp-element-button:active,
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:active {
background-color: var(--btn-secondary-border-color) !important;
border-color: var(--btn-secondary-border-color) !important;
color: var(--color-white) !important;
}
/* ==========================================
PAGINATION CUSTOMIZATIONS
========================================== */
/* Override parent theme pagination colors with gradient styling */
/* Pagination spacing inside grid-container - add margin for footer wave clearance */
.grid-container .pagination.archive-pagination {
margin-bottom: var(--space-3xl);
}
/* All page number links - apply gradient */
.pagination a.page-numbers {
border: none;
background: var(--color-white);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.pagination a.page-numbers:not(.next, .prev) {
background-image: var(--wp--preset--gradient--ocean-blue);
}
.pagination a.page-numbers,
.pagination span.page-numbers {
border-radius: 6px;
}
/* Gradient border using pseudo-element mask technique (preserves border-radius) */
.pagination a.page-numbers::before {
background: var(--wp--preset--gradient--ocean-blue);
-webkit-mask:
linear-gradient(#ffffff 0 0) content-box,
linear-gradient(#ffffff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
border-radius: 6px;
}
/* Hover state for ALL links - gradient background with white text */
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus {
background: var(--wp--preset--gradient--ocean-blue);
color: var(--color-white);
border-color: transparent;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
/* Current page - gradient background with white text */
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus,
.pagination .page-numbers.current {
background: var(--wp--preset--gradient--ocean-blue);
color: var(--color-white);
border: 2px solid var(--color-white);
border-color: var(--color-white);
}
.pagination .page-numbers.current {
border-radius: 6px;
}
/* Disabled prev/next arrows - border color override */
.pagination .page-numbers.prev.disabled,
.pagination .page-numbers.next.disabled {
border-color: var(--color-primary);
}
/* ==========================================
LAST BLOCK BEFORE FOOTER
========================================== */
.post-meta__metadata {
border-top: 1px solid #9386bf47;
border-bottom: 1px solid #9386bf47;
max-width: fit-content;
padding: var(--space-sm) 0;
}
.archive-meta__date, .post-meta__author, .archive-meta__read-time, .post-meta__date, .post-meta__read-time {
color: var(--color-text-tertiary);
}
.post-meta__metadata svg {
color: var(--color-heading);
}
/* ==========================================
SINGLE POST TEMPLATE - CONSTRAINED WIDTH
========================================== */
/* Single Post Content Bottom Spacing
* Ensures flexible content area has consistent bottom margin on all single templates
* Accounts for optional blocks (author, CTA) that may or may not be present
* Provides predictable spacing from content to following sections */
.single .flexible-content-area-block {
margin-bottom: var(--wp--preset--spacing--xl);
}
/* Allow blocks to break out to full/wide widths when explicitly set */
.single .wp-block-post-content .alignwide {
max-width: var(--container-lg);
}
.single .wp-block-post-content .alignfull {
max-width: 100%;
}
.wp-block-post-content img {
border-radius: var(--radius-card);
}
/* In-content text links - use heading color for better visibility */
.wp-block-post-content p a,
.wp-block-post-content li a,
.entry-content p a,
.entry-content li a {
color: var(--color-heading);
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--transition-normal);
}
.wp-block-post-content p a:hover,
.wp-block-post-content p a:focus,
.wp-block-post-content li a:hover,
.wp-block-post-content li a:focus,
.entry-content p a:hover,
.entry-content p a:focus,
.entry-content li a:hover,
.entry-content li a:focus {
color: var(--color-primary);
}
/* Standalone arrow links in WYSIWYG blocks — reuses icb__link-list-link
and icb__link-list-arrow classes from image-content-block.
Overrides global in-content link styles (underline, hover color). */
.wp-block-post-content .wysiwyg-standalone-link a,
.wp-block-post-content .wysiwyg-standalone-link a:hover,
.wp-block-post-content .wysiwyg-standalone-link a:focus,
.entry-content .wysiwyg-standalone-link a,
.entry-content .wysiwyg-standalone-link a:hover,
.entry-content .wysiwyg-standalone-link a:focus {
color: var(--link-arrow-color);
text-decoration: none;
}
.single .post-meta {
max-width: 1064px;
margin-left: auto;
margin-right: auto;
overflow: visible;
}
.single h1.post-meta__title {
font-size: var(--font-size-h2);
}
.single .entry-content h2 {
font-size: var(--font-size-h3);
}
.single .entry-content h3 {
font-size: var(--font-size-h4);
}
.single .entry-content h4 {
font-size: var(--font-size-h5);
}
.single .entry-content h5 {
font-size: var(--font-size-h6);
}
.single .post-meta__excerpt {
font-weight: var(--font-weight-bold);
line-height: 1.4em;
}
/* Featured image within constrained container - break out to regular container width */
.single .post-meta__featured-image {
/* Calculate the negative margin needed to expand from container-content (1064px) to container (1280px) Difference is 216px total, so 108px on each side */
margin-left: -108px;
margin-right: -108px;
width: calc(100% + 216px);
max-width: var(--max-width-content-2xl);
}
/* At tablet and smaller, account for container-content padding */
@media (width <=1280px) {
.single .post-meta {
padding-left: var(--space-xl);
padding-right: var(--space-xl);
}
.single .post-meta__featured-image {
/* Expand to full width minus container-content padding (--space-xl) */
margin-left: calc(-1 * var(--space-xl));
margin-right: calc(-1 * var(--space-xl));
width: calc(100% + (2 * var(--space-xl)));
}
}
@media (width <=768px) {
.single .post-meta {
padding-left: var(--space-lg);
padding-right: var(--space-lg);
}
.single .post-meta__featured-image {
/* Expand to full width minus container-content padding (--space-lg) */
margin-left: calc(-1 * var(--space-lg));
margin-right: calc(-1 * var(--space-lg));
width: calc(100% + (2 * var(--space-lg)));
}
}
@media (width <=480px) {
.single .post-meta {
padding-left: var(--space-md);
padding-right: var(--space-md);
}
.single .post-meta__featured-image {
/* Expand to full width minus container-content padding (--space-md) */
margin-left: calc(-1 * var(--space-md));
margin-right: calc(-1 * var(--space-md));
width: calc(100% + (2 * var(--space-md)));
}
}
/* ==========================================================================
Mobile Spacing Reset - Prevents Oversized Block Spacing
========================================================================== */
/*
* Automatically reduces block padding/margin on mobile viewports to prevent
* horizontal overflow and cramped layouts. Uses !important to override
* WordPress block editor inline styles.
*
* To disable for specific blocks, add class: no-mobile-spacing-reset
*/
@media (width <= 768px) {
/* Target all block wrappers (excluding header and footer) */
main .wp-block:not(.no-mobile-spacing-reset),
main .wp-block-group:not(.no-mobile-spacing-reset),
main .wp-block-cover:not(.no-mobile-spacing-reset),
main .wp-block-columns:not(.no-mobile-spacing-reset),
main .wp-block-column:not(.no-mobile-spacing-reset),
main .acf-block-component:not(.no-mobile-spacing-reset),
main [class*="wp-block-acf"]:not(.no-mobile-spacing-reset) {
/* Vertical padding at xl spacing */
padding-top: var(--space-xl) !important;
padding-bottom: var(--space-xl) !important;
/* Cap horizontal padding at 1rem (16px) */
padding-left: min(var(--space-md), 1rem) !important;
padding-right: min(var(--space-md), 1rem) !important;
/* Cap vertical margins at 2rem (32px) */
margin-top: min(var(--space-lg), 2rem) !important;
margin-bottom: min(var(--space-lg), 2rem) !important;
}
/* Exceptions: Blocks that should maintain custom spacing on mobile */
.hero-block,
.full-width-banner,
.no-mobile-spacing-reset {
padding: unset !important;
margin: unset !important;
}
/* Remove top margin on hero blocks specifically */
main .wp-block-acf-hero,
main [class*="wp-block-acf"].hero {
margin-top: 0 !important;
}
}
/* Very small phones (480px and below) - More aggressive reduction */
@media (width <= 480px) {
main .wp-block:not(.no-mobile-spacing-reset),
main .acf-block-component:not(.no-mobile-spacing-reset) {
padding-top: min(var(--space-md), 1rem) !important;
padding-bottom: min(var(--space-md), 1rem) !important;
padding-left: min(var(--space-sm), 0.5rem) !important;
padding-right: min(var(--space-sm), 0.5rem) !important;
}
}
/* ==========================================================================
Three Column Text - Mobile Spacing
========================================================================== */
/* Remove top/bottom margin and padding on mobile for three-column-text columns */
@media (width <= 768px) {
.three-column-text .wp-block-columns .wp-block-column {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
/* ==========================================================================
Video Showcase Block
========================================================================== */
/* Set video description text to standard text color when section has no text color set */
section:not(.has-text-color) .video-description {
color: var(--color-text-primary);
}
/*
* Fixes container overflow caused by excessive gap spacing on desktop.
* Plugin uses gap: var(--space-3xl) (101-144px) which causes the
* .row.video-showcase-content to overflow the 1280px container.
* This override reduces the gap to var(--space-xl) (43-72px).
*/
/* Desktop: Reduce gap to prevent overflow */
@media (width > 1024px) {
.video-placement-vidleft .video-showcase-content,
.video-placement-vidright .video-showcase-content {
column-gap: var(--space-lg); /* 43-72px instead of 101-144px */
align-items: center; /* Vertically center content */
}
/* Set video column to 7 columns */
.video-placement-vidleft .video-column,
.video-placement-vidright .video-column {
grid-column: span 6;
align-self: center; /* Vertically center video with text column */
}
/* Set text content to 5 columns and vertically center */
.video-placement-vidleft .video-text-content,
.video-placement-vidright .video-text-content {
grid-column: span 6;
align-self: center;
}
/* Remove bottom margin from section header */
.video-showcase-content .section-header {
margin-bottom: 0;
}
}
/* Custom play button overlay - use theme SVG asset */
.video-wrapper::before {
background-image: url('/wp-content/themes/3mw-core-child/assets/svg/play-button.svg');
}
/* Tablet: Keep existing reduced gap (already correct in plugin) */
@media (width <= 1024px) {
.video-placement-vidleft .video-showcase-content,
.video-placement-vidright .video-showcase-content {
gap: var(--space-lg); /* 16-32px - plugin already uses this */
}
}
/**
* Fix Video Showcase block positioning conflicts
* The image-content-block sets .video-embed-container and .video-preview-image
* to position: absolute, which breaks the Video Showcase block display.
*/
/* Fix iframe container positioning */
.video-showcase .video-embed-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius-card);
box-shadow: var(--shadow-lg);
}
.video-showcase .video-embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: var(--radius-card);
}
.video-placement-vidbelow .video-embed-container {
max-height: 600px;
}
/* Fix preview image positioning */
.video-showcase .video-preview-image {
position: relative;
}
/* Video note styling for below content placement */
.video-placement-vidbelow .video-note {
color: var(--wp--preset--color--sea-blue);
font-size: var(--font-size-h5);
}
/* Hero Subtitle Balance */
.hero-subtitle {
text-wrap: balance;
}
/* ==========================================================================
LOGO VISIBILITY CONTROL - Vertical Logo Swap System
========================================================================== */
/**
* Logo swap system based on actual scrolling (not just sticky state).
* - Desktop initially: Show vertical logo (even if header is sticky)
* - Desktop after scroll: Show standard horizontal logo
* - Mobile: Always show standard logo
*
* JavaScript (frontend-child.js) adds .has-scrolled class to body after user
* scrolls >50px, which triggers the logo swap via CSS opacity crossfade.
*
* Both logos are stacked (position absolute) so the swap is a smooth
* opacity crossfade with no layout shift.
*
* Parent theme's sticky header animation is disabled to prevent menu flicker.
*/
/* Disable sticky header animation on page load to prevent flicker */
header.wp-block-template-part.is-stuck {
animation: none !important;
}
/* Desktop: Stack logos and crossfade */
@media (width > 768px) {
/* Wrapper becomes positioning context sized by vertical logo */
.custom-site-logo-wrapper {
position: relative;
overflow: hidden;
max-height: 100px;
transition: max-height 0.3s ease;
}
/* Both logos get transition */
.custom-site-logo-wrapper img.custom-site-logo.logo-standard,
.custom-site-logo-wrapper img.custom-site-logo.logo-vertical {
transition: opacity 0.3s ease;
}
/* Standard logo: stacked on top, hidden by default */
.custom-site-logo-wrapper img.custom-site-logo.logo-standard {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 52.5px;
max-width: 225px;
width: auto;
opacity: 0;
pointer-events: none;
}
/* Vertical logo: in-flow (sets wrapper size), visible by default */
.custom-site-logo-wrapper img.custom-site-logo.logo-vertical {
position: relative;
height: auto !important; /* Override parent theme */
max-height: 100px;
width: auto;
opacity: 1;
}
/* After scroll: crossfade to standard logo */
body.has-scrolled .custom-site-logo-wrapper img.custom-site-logo.logo-standard {
opacity: 1;
pointer-events: auto;
}
body.has-scrolled .custom-site-logo-wrapper img.custom-site-logo.logo-vertical {
opacity: 0;
pointer-events: none;
}
/* Collapse wrapper height to match smaller standard logo after scroll */
body.has-scrolled .custom-site-logo-wrapper {
max-height: 52.5px;
width: 100%;
max-width: 225px;
}
/* Shrink header padding to match smaller logo after scroll */
body.has-scrolled header .site-header .header {
padding-top: var(--space-lg);
padding-bottom: var(--space-lg);
transition: padding 0.3s ease;
}
}
/* Medium desktop: 1200px–1500px */
@media (1200px < width <= 1500px) {
header .site-header .header {
gap: var(--space-md);
}
.nav-menu--desktop {
gap: var(--space-md);
}
header.wp-block-template-part.is-stuck .header-buttons {
gap: var(--space-sm);
}
.custom-site-logo-wrapper img.custom-site-logo.logo-standard,
body.has-scrolled .custom-site-logo-wrapper {
max-width: 200px;
}
}
/* Narrow desktop: 1024px–1200px */
@media (1024px < width <= 1200px) {
header .site-header .header {
gap: var(--space-sm);
}
.nav-menu--desktop {
gap: var(--space-md);
}
header.wp-block-template-part.is-stuck .header-buttons {
gap: var(--space-sm);
}
.custom-site-logo-wrapper img.custom-site-logo.logo-standard,
body.has-scrolled .custom-site-logo-wrapper {
max-width: 185px;
}
}
/* Mobile (768px and below): Always show standard logo, hide vertical logo */
@media (width <= 768px) {
.custom-site-logo-wrapper img.custom-site-logo.logo-standard {
display: inline-block;
}
.custom-site-logo-wrapper img.custom-site-logo.logo-vertical {
display: none;
}
}
/* Mobile Heading Fix - Ensure H4, H5, H6 never appear smaller than body text
* On iPhone landscape and narrow viewports, fluid typography can make
* smaller headings appear too small. This sets minimum sizes and adjusts weight. */
@media (width <= 896px) {
h4, .h4 {
font-size: max(1.25rem, var(--font-size-h4)) !important;
font-weight: 400 !important;
}
h5, .h5 {
font-size: max(1.125rem, var(--font-size-h5)) !important;
font-weight: 400 !important;
}
h6, .h6 {
font-size: max(1rem, var(--font-size-h6)) !important;
font-weight: 400 !important;
}
}
/* Case Study Sidebar CTA - Dark gradient overlay for text legibility
* Improves contrast for white text over background images */
.case-sidebar-cta-block {
position: relative;
}
.case-sidebar-cta-block::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
180deg,
rgb(0 0 0 / 60%) 0%,
rgb(0 0 0 / 40%) 50%,
rgb(0 0 0 / 70%) 100%
);
z-index: 1;
pointer-events: none;
}
.case-sidebar-cta-block > * {
position: relative;
z-index: 2;
}
/* ==========================================
UTILITY CLASSES
========================================== */
/* Remove gap between children on mobile only */
@media (width <= 768px) {
.no-mobile-gap {
gap: 0 !important;
}
}