/* =============================================================================
H. Aldervan Daly & Associates — Custom Theme Styles
Matches: Next.js / Tailwind source design pixel-perfect
============================================================================= */
/* ─── CSS Custom Properties (mirrors theme.json palette) ─────────────────── */
:root {
--color-background: #faf8f5;
--color-foreground: #330033;
--color-primary: #336666;
--color-primary-foreground: #faf8f5;
--color-secondary: #f0d1b2;
--color-secondary-foreground: #330033;
--color-muted: #c2d1d1;
--color-muted-foreground: #5a4a5a;
--color-accent: #cc6600;
--color-accent-foreground: #faf8f5;
--color-border: #c2b2c2;
--color-card: #ffffff;
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
--radius: 0.25rem;
--container: 72rem;
--px: 1.5rem;
}
/* ─── Reset / Base ───────────────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--wp--preset--font-size--4xl: 1.85em;
}
body {
font-family: var(--font-sans);
background-color: var(--color-background);
color: var(--color-foreground);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ─── Decorative Background Patterns ─────────────────────────────────────── */
.bg-lines-subtle {
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent 59px,
var(--color-border) 59px,
var(--color-border) 60px
);
}
.bg-lines-diagonal {
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 20px,
var(--color-border) 20px,
var(--color-border) 21px
);
}
.bg-grid {
background-image:
repeating-linear-gradient(0deg, transparent, transparent 39px, var(--color-border) 39px, var(--color-border) 40px),
repeating-linear-gradient(90deg, transparent, transparent 39px, var(--color-border) 39px, var(--color-border) 40px);
}
/* ─── Site Header ─────────────────────────────────────────────────────────── */
/*
* IMPORTANT: backdrop-filter is on ::before, NOT on the element itself.
* Applying backdrop-filter directly to .site-header creates a new containing
* block for position:fixed descendants (Chrome/Safari spec quirk), which
* constrains the navigation overlay to the header's 5rem height instead of
* covering the full viewport. Moving it to a pseudo-element preserves the
* frosted-glass look without breaking child fixed/overlay positioning.
*/
.site-header {
position: sticky;
top: 0;
z-index: 50;
width: 100%;
border-bottom: 1px solid var(--color-border);
background-color: transparent;
}
.site-header::before {
content: '';
position: absolute;
inset: 0;
background-color: rgba(250, 248, 245, 0.95);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
pointer-events: none;
/* Negative z-index ensures this sits behind non-positioned descendants
(block elements like .site-header-inner) within the header's stacking context. */
z-index: -1;
}
.site-header-inner {
position: relative; /* Creates stacking context above ::before */
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--container);
margin-inline: auto;
padding: 0 var(--px);
/* padding: 0; */
/* height: 5rem; */
height: 6.5rem;
}
@media (min-width: 72rem) {
.site-header-inner {
padding-inline: 0;
}
}
main > div:not(.entry-content),
main > section:not(.entry-content) {
padding-inline: var(--px);
box-sizing: border-box;
}
main > div:not(.entry-content).has-global-padding,
main > section:not(.entry-content).has-global-padding {
--wp--style--root--padding-left: var(--px);
--wp--style--root--padding-right: var(--px);
}
@media (min-width: 72rem) {
main > div:not(.entry-content),
main > section:not(.entry-content) {
padding-inline: 0;
}
main > div:not(.entry-content).has-global-padding,
main > section:not(.entry-content).has-global-padding {
--wp--style--root--padding-left: 0px;
--wp--style--root--padding-right: 0px;
}
}
main > .entry-content > :where(div) {
padding-inline: var(--px);
box-sizing: border-box;
}
@media (min-width: 72rem) {
main > .entry-content > :where(div) {
padding-inline: 0;
}
}
/* Utility classes */
.hidden {
display: none;
}
/* Logo */
.site-header .wp-block-site-title,
.site-header .site-logo-text {
flex-shrink: 0;
}
.site-header .wp-block-site-title a {
font-family: var(--font-serif);
font-size: 1.125rem;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--color-foreground);
text-decoration: none;
line-height: 1.2;
}
/* Navigation */
.site-header .wp-block-navigation {
display: flex;
align-items: center;
gap: 2rem;
}
.site-header .wp-block-navigation a {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 500;
color: var(--color-muted-foreground);
text-decoration: none;
transition: color 0.15s ease;
white-space: nowrap;
}
.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation .current-menu-item > a,
.site-header .wp-block-navigation .current-menu-ancestor > a {
color: var(--color-foreground);
}
/* Navigation Dropdown / Submenu */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
background: var(--color-card) !important;
border: 1px solid var(--color-border);
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(51, 0, 51, 0.08);
min-width: 20rem !important;
padding: 0.5rem;
top: calc(100% + 1rem);
}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container a {
border-radius: 0.375rem;
padding: 0.75rem 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
color: var(--color-foreground);
font-size: 0.875rem;
font-weight: 500;
transition: background-color 0.15s ease;
}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover {
background-color: var(--color-secondary);
/* color: var(--color-primary); */
color: var(--color-foreground);
}
/* Header CTA Button */
.header-cta .wp-block-button__link {
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
font-weight: 500;
font-family: var(--font-sans);
border-radius: var(--radius);
border: 1px solid var(--color-primary);
background-color: var(--color-primary);
color: var(--color-primary-foreground) !important;
text-decoration: none;
transition: background-color 0.15s ease;
white-space: nowrap;
line-height: 1;
}
.header-cta .wp-block-button__link:hover {
background-color: #2a5555;
}
/* ─── Eyebrow Text ────────────────────────────────────────────────────────── */
.eyebrow-text,
p.eyebrow-text {
font-family: var(--font-sans);
font-size: 0.75rem !important;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-muted-foreground);
margin-bottom: 1.25rem;
}
/* ─── Section Layout Helpers ──────────────────────────────────────────────── */
.section-inner {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--px);
}
.section-py {
padding-top: 5rem;
padding-bottom: 5rem;
}
@media (min-width: 768px) {
.section-py {
padding-top: 7rem;
padding-bottom: 7rem;
}
}
/* ─── Hero Section ────────────────────────────────────────────────────────── */
.hero-section {
position: relative;
overflow: hidden;
}
.hero-section .wp-block-columns {
align-items: center;
}
/* .hero-portrait img,
.hero-portrait .wp-block-image img {
border-radius: var(--radius);
object-fit: cover;
object-position: top;
width: 100%;
display: block;
} */
.hero-portrait img {
aspect-ratio: 3 / 4;
border-radius: var(--radius);
object-fit: cover;
object-position: top;
width: 100%;
display: block;
}
/* Decorative right-side background */
.hero-section .hero-deco {
position: absolute;
top: 0;
right: 0;
width: 33.333%;
height: 100%;
background-color: rgba(240, 209, 178, 0.3);
pointer-events: none;
z-index: -1;
}
/* Reverse column order on mobile (image first, then text) */
@media (max-width: 781px) {
.hero-section .wp-block-columns {
flex-direction: column-reverse;
}
}
/* ─── Button Styles ───────────────────────────────────────────────────────── */
/* Primary fill button */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button:not([class*="is-style"]) .wp-block-button__link {
border-radius: var(--radius);
transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* Ghost button */
.wp-block-button.is-style-ghost .wp-block-button__link {
background: transparent !important;
border: none !important;
color: var(--color-foreground);
padding-left: 0;
padding-right: 0;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: color 0.15s ease;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
color: var(--color-muted-foreground);
}
.wp-block-button.is-style-ghost .wp-block-button__link::after {
content: '→';
}
/* ─── Services Grid Section ───────────────────────────────────────────────── */
.services-section {
background-color: rgba(240, 209, 178, 0.5);
}
.services-section .wp-block-heading,
.services-section .wp-block-group > p {
max-width: stretch;
}
/* Service Card */
.service-card,
.wp-block-group.is-style-service-card {
border: 1px solid var(--color-border) !important;
background-color: var(--color-card);
border-radius: var(--radius);
padding: 2rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
text-decoration: none;
display: block;
position: relative;
min-height: 370px;
}
.service-card:hover,
.wp-block-group.is-style-service-card:hover {
border-color: rgba(51, 102, 102, 0.25) !important;
box-shadow: 0 2px 8px rgba(51, 0, 51, 0.06);
}
.service-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
background-color: var(--color-secondary);
border-radius: var(--radius);
margin-bottom: 1.5rem;
color: var(--color-foreground);
flex-shrink: 0;
}
.service-card-link {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-foreground);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: 1.5rem;
}
/* Cover-link: makes entire card clickable */
.service-card .service-card-link::after,
.wp-block-group.is-style-service-card a.service-card-link::after {
content: '';
position: absolute;
inset: 0;
}
/* ─── Approach Section ────────────────────────────────────────────────────── */
.approach-section {
position: relative;
}
/* Approach Principle (left-border style) */
.approach-principle,
.wp-block-group.is-style-approach-principle {
border-left: 2px solid var(--color-border);
padding-left: 2rem !important;
}
.approach-number {
display: block;
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 500;
color: var(--color-muted-foreground);
margin-bottom: 0.5rem;
}
.approach-section .approach-image img {
border-radius: var(--radius);
aspect-ratio: 4 / 3;
object-fit: cover;
width: 100%;
display: block;
}
/* ─── Proof / Stats Section ───────────────────────────────────────────────── */
.proof-section {
background-color: var(--color-primary);
position: relative;
}
.proof-section .proof-eyebrow {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(250, 248, 245, 0.7);
margin-bottom: 1rem;
max-width: stretch;
}
.proof-section .wp-block-heading {
color: var(--color-primary-foreground) !important;
max-width: stretch;
}
.proof-section p {
color: rgba(250, 248, 245, 0.8);
max-width: stretch;
}
.stat-value {
font-family: var(--font-serif) !important;
font-size: 3rem !important;
font-weight: 400 !important;
color: var(--color-primary-foreground) !important;
line-height: 1.1 !important;
display: block;
margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
.stat-value {
font-size: 3.5rem !important;
}
}
.stat-label {
font-family: var(--font-sans);
font-size: 0.875rem;
color: rgba(250, 248, 245, 0.7);
line-height: 1.4;
}
.wp-block-group.is-style-stat-item {
/* Nothing extra needed; stat-value/stat-label classes do the work */
}
/* ─── Insights Section ────────────────────────────────────────────────────── */
.insights-section {
background-color: var(--color-background);
}
/* ─── Archive Back Link ───────────────────────────────────────────────────── */
.archive-back-link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-muted-foreground);
text-decoration: none;
margin-bottom: 1.5rem;
transition: color 0.15s ease;
}
.archive-back-link:hover {
color: var(--color-foreground);
}
/* ─── Insights Archive Header ─────────────────────────────────────────────── */
.insights-header-image-col {
display: none;
}
@media (min-width: 1024px) {
.insights-header-image-col {
display: block;
}
}
.insights-header-img img {
aspect-ratio: 4 / 3;
object-fit: cover;
width: 100%;
display: block;
border-radius: var(--radius);
}
/* ─── Insights Category Filter ────────────────────────────────────────────── */
.insights-category-filter {
margin-top: 3rem;
}
.insights-filter-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0;
}
.insights-filter-btn {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 9999px;
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 500;
background-color: var(--color-secondary);
color: var(--color-secondary-foreground);
text-decoration: none;
line-height: 1.4;
transition: background-color 0.15s ease;
}
.insights-filter-btn:hover {
background-color: rgba(240, 209, 178, 0.7);
color: var(--color-secondary-foreground);
text-decoration: none;
}
.insights-filter-active {
background-color: var(--color-primary) !important;
color: var(--color-primary-foreground) !important;
}
/* ─── Featured Insight Card ────────────────────────────────────────────────── */
.insight-featured-card {
cursor: pointer;
}
.insight-featured-card .wp-block-post-featured-image {
overflow: hidden;
border-radius: var(--radius);
margin-bottom: 1rem;
}
.insight-featured-card .wp-block-post-featured-image img {
aspect-ratio: 16 / 9;
object-fit: cover;
width: 100%;
display: block;
transition: transform 0.3s ease;
}
.insight-featured-card:hover .wp-block-post-featured-image img {
transform: scale(1.03);
}
.insight-featured-card .wp-block-post-terms a {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-primary) !important;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
}
.insight-featured-card .wp-block-post-title a {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 400;
color: var(--color-foreground);
text-decoration: none;
letter-spacing: -0.02em;
line-height: 1.3;
transition: color 0.15s ease;
display: block;
}
.insight-featured-card .wp-block-post-title a:hover {
color: var(--color-muted-foreground);
}
/* ─── Insight Card (Recent Articles) ─────────────────────────────────────── */
:where(.wp-block-group.has-background.insight-card) {
padding: 0;
}
.insight-card {
cursor: pointer;
border: 1px solid var(--color-border) !important;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.home .insight-card {
border: 0 !important;
}
.insight-card:hover {
border-color: rgba(51, 102, 102, 0.2) !important;
box-shadow: 0 1px 4px rgba(51, 0, 51, 0.06);
}
.home .insight-card:hover {
border: 0 !important;
box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}
.insight-card .wp-block-post-title a,
.insight-card-title a {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 500;
color: var(--color-foreground);
text-decoration: none;
letter-spacing: -0.02em;
line-height: 1.4;
transition: color 0.15s ease;
display: block;
margin-bottom: 0.75rem;
}
.insight-card .wp-block-post-title a:hover,
.insight-card-title a:hover {
color: var(--color-muted-foreground);
}
/* Category text in insight cards — normal case, foreground color */
.insight-card .wp-block-post-terms a {
color: var(--color-foreground) !important;
font-weight: 500;
text-transform: none !important;
letter-spacing: normal !important;
text-decoration: none;
}
.insight-meta {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
color: var(--color-muted-foreground);
margin-bottom: 1rem;
}
.insight-meta .wp-block-post-terms a {
font-weight: 500;
color: var(--color-foreground);
text-decoration: none;
}
.insight-dot {
display: inline-block;
width: 0.25rem;
height: 0.25rem;
border-radius: 50%;
background-color: var(--color-border);
flex-shrink: 0;
}
.insight-card .wp-block-post-excerpt p {
color: var(--color-muted-foreground);
line-height: 1.7;
margin-bottom: 1rem;
}
.insight-read-more {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-foreground);
text-decoration: none;
}
/* ─── Insight Card Meta (date · readtime row) ─────────────────────────────── */
.insight-card-meta {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.875rem;
color: var(--color-muted-foreground);
}
/* ─── Testimonial Section ─────────────────────────────────────────────────── */
.testimonial-section {
background-color: var(--color-primary);
position: relative;
}
.testimonial-section::before {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
0deg, transparent, transparent 59px,
rgba(250, 248, 245, 0.05) 59px,
rgba(250, 248, 245, 0.05) 60px
);
pointer-events: none;
}
.testimonial-section .wp-block-quote,
.testimonial-section blockquote {
font-family: var(--font-serif) !important;
font-size: 1.375rem;
line-height: 1.6;
color: var(--color-primary-foreground);
text-align: center;
border: none !important;
padding: 0 !important;
margin: 0;
font-style: normal;
}
@media (min-width: 768px) {
.testimonial-section .wp-block-quote,
.testimonial-section blockquote {
font-size: 1.625rem;
}
}
@media (min-width: 1024px) {
.testimonial-section .wp-block-quote,
.testimonial-section blockquote {
font-size: 1.875rem;
}
}
.testimonial-section .wp-block-quote p {
color: var(--color-primary-foreground) !important;
font-family: var(--font-serif) !important;
}
.testimonial-section .wp-block-quote cite,
.testimonial-section .wp-block-quote .wp-block-quote__citation {
color: rgba(250, 248, 245, 0.7);
font-style: normal;
font-family: var(--font-sans);
font-size: 0.875rem;
margin-top: 2rem;
display: block;
}
.testimonial-author-name {
display: block;
font-weight: 500;
color: var(--color-primary-foreground);
font-family: var(--font-sans);
font-size: 1.125rem;
margin-bottom: 0.25rem;
}
.testimonial-author-title {
display: block;
color: rgba(250, 248, 245, 0.7);
font-family: var(--font-sans);
font-size: 0.875rem;
}
.testimonial-quote-icon {
color: rgba(250, 248, 245, 0.3);
display: block;
margin: 0 auto 2rem;
}
/* ─── CTA Section ─────────────────────────────────────────────────────────── */
.cta-section {
background-color: rgba(240, 209, 178, 0.5);
border-top: 1px solid var(--color-border);
position: relative;
overflow: hidden;
margin-block-start: 0;
margin-block-end: 0;
}
.cta-section::before {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(250, 248, 245, 0.05) 59px, rgba(250, 248, 245, 0.05) 60px);
pointer-events: none;
}
/* ─── Site Footer ─────────────────────────────────────────────────────────── */
footer {
margin-block-start: 0;
}
.site-footer > .wp-block-group {
padding-inline: var(--px);
box-sizing: border-box;
}
@media (min-width: 72rem) {
.site-footer > .wp-block-group {
padding-inline: 0;
}
}
.site-footer {
border-top: 1px solid var(--color-border);
background-color: var(--color-background);
margin-block-start: 0;
}
.site-footer .wp-block-site-title a {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 400;
color: var(--color-foreground);
text-decoration: none;
letter-spacing: -0.02em;
}
.site-footer .wp-block-navigation a,
.footer-col a {
font-family: var(--font-sans);
font-size: 0.875rem;
color: var(--color-muted-foreground);
text-decoration: none;
transition: color 0.15s ease;
line-height: 1;
}
.site-footer .wp-block-navigation a:hover,
.footer-col a:hover {
color: var(--color-foreground);
}
.footer-link-list {
margin-top: 0;
padding-left: 0;
list-style: none;
}
.footer-col-heading {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 500;
color: var(--color-foreground);
margin-bottom: 1rem;
display: block;
}
.footer-bottom {
border-top: 1px solid var(--color-border);
margin-top: 4rem;
padding-top: 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
@media (min-width: 768px) {
.footer-bottom {
flex-direction: row;
justify-content: space-between;
}
}
.footer-copyright {
font-size: 0.875rem;
color: var(--color-muted-foreground);
}
.footer-social {
display: flex;
align-items: center;
gap: 1.5rem;
}
.footer-social a {
color: var(--color-muted-foreground);
transition: color 0.15s ease;
line-height: 0;
}
.footer-social a:hover {
color: var(--color-foreground);
}
/* ─── Page Header (Inner Pages) ───────────────────────────────────────────── */
.page-hero {
background-color: var(--color-background);
padding-top: 5rem;
padding-bottom: 5rem;
}
@media (min-width: 768px) {
.page-hero {
padding-top: 7rem;
padding-bottom: 7rem;
}
}
/* ─── Article / Blog Post Prose ───────────────────────────────────────────── */
.article-content p {
color: var(--color-muted-foreground);
line-height: 1.8;
margin-top: 0;
margin-bottom: 1.5em;
font-size: 1.0625rem;
}
.article-content h2 {
font-family: var(--font-serif);
font-size: 1.75rem;
font-weight: 600;
color: var(--color-foreground);
margin-top: 2.5em;
margin-bottom: 0.75em;
letter-spacing: -0.02em;
line-height: 1.3;
}
.article-content h3 {
font-family: var(--font-serif);
font-size: 1.375rem;
font-weight: 600;
color: var(--color-foreground);
margin-top: 2em;
margin-bottom: 0.5em;
letter-spacing: -0.01em;
line-height: 1.4;
}
.article-content h4 {
font-family: var(--font-serif);
font-size: 1.125rem;
font-weight: 600;
color: var(--color-foreground);
margin-top: 1.5em;
margin-bottom: 0.5em;
line-height: 1.4;
}
.article-content ul,
.article-content ol {
color: var(--color-muted-foreground);
margin-top: 1em;
margin-bottom: 1.5em;
padding-left: 1.75em;
}
.article-content ul { list-style-type: disc; }
.article-content ol { list-style-type: decimal; }
.article-content li {
margin-bottom: 0.625em;
line-height: 1.75;
padding-left: 0.375em;
}
.article-content li::marker {
color: var(--color-muted-foreground);
}
.article-content a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.15s ease;
}
.article-content a:hover {
color: var(--color-muted-foreground);
}
.article-content blockquote {
border-left: 4px solid var(--color-primary);
padding-left: 1.5em;
margin: 1.5em 0;
font-style: italic;
color: var(--color-muted-foreground);
}
.article-content blockquote p {
margin-bottom: 0;
}
.article-content strong {
font-weight: 600;
color: var(--color-foreground);
}
.article-content em {
font-style: italic;
}
.article-content hr {
border: none;
border-top: 1px solid var(--color-border);
margin: 2.5em 0;
}
.article-content > *:first-child { margin-top: 0; }
.article-content > *:last-child { margin-bottom: 0; }
.article-content h2 + p,
.article-content h3 + p,
.article-content h4 + p { margin-top: 0; }
/* ─── Query Loop / Archive ────────────────────────────────────────────────── */
.wp-block-query .wp-block-post-template {
list-style: none;
padding: 0;
margin: 0;
}
/* ─── Global Block Overrides ──────────────────────────────────────────────── */
/* Constrained layout max-width + horizontal padding */
.is-layout-constrained > .alignwide {
max-width: var(--container);
}
/*
* Raw HTML blocks render without a wrapper on the front end, so they do not
* inherit WordPress' constrained-layout child width rules.
*/
.wp-site-blocks .is-layout-constrained > .service-breadcrumb,
.wp-site-blocks .is-layout-constrained > .archive-back-link {
margin-left: max(var(--px), calc((100% - var(--container)) / 2)) !important;
margin-right: max(var(--px), calc((100% - var(--container)) / 2)) !important;
}
.wp-site-blocks .is-layout-constrained > .insights-category-filter {
width: min(var(--container), calc(100% - (2 * var(--px))));
margin-left: auto !important;
margin-right: auto !important;
}
/* Smooth focus ring */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Remove WP default button box-shadow */
.wp-block-button__link:focus,
.wp-block-button__link:focus-visible {
box-shadow: none;
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.stat-value {
font-size: 2.25rem !important;
}
}
/* ============================================================
About Page
============================================================ */
.founder-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
border-radius: 0.25rem;
}
.credentials-list {
list-style: none;
margin: 0;
padding: 0;
}
.credentials-list li {
display: flex;
align-items: flex-start;
gap: 0.625rem;
padding: 0.375rem 0;
font-size: var(--wp--preset--font-size--sm);
color: var(--wp--preset--color--foreground);
}
.credentials-list li::before {
content: '';
display: block;
flex-shrink: 0;
width: 1rem;
height: 1rem;
margin-top: 0.125rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23336666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
/* ============================================================
Services Detail Page
============================================================ */
/* Alternate image/text order for even services */
.wp-block-columns.wp-container-reversed {
flex-direction: row-reverse;
}
.service-ideal-note,
.service-section-border,
.post-footer-meta {
border-top: 1px solid var(--wp--preset--color--border);
}
@media (max-width: 600px) {
.wp-block-columns.wp-container-reversed {
flex-direction: column;
}
}
/* ============================================================
Contact Page
============================================================ */
.contact-office-image {
display: none;
}
.contact-office-image img {
border-radius: 0.25rem;
}
@media (min-width: 1024px) {
.contact-office-image {
display: block;
}
}
/* Contact form inputs (used when WPForms/CF7 not installed or for raw HTML form) */
.contact-form-field {
width: 100%;
border-radius: 0.25rem;
border: 1px solid var(--wp--preset--color--border);
background: var(--wp--preset--color--background);
padding: 0.75rem 1rem;
font-size: var(--wp--preset--font-size--sm);
color: var(--wp--preset--color--foreground);
font-family: var(--wp--preset--font-family--inter);
transition: border-color 0.15s, box-shadow 0.15s;
}
.contact-form-field:focus {
outline: none;
border-color: var(--wp--preset--color--primary);
box-shadow: 0 0 0 2px rgba(51, 102, 102, 0.15);
}
/* WPForms / CF7 overrides to match theme */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form select,
.wpforms-form textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea {
width: 100%;
border-radius: 0.25rem !important;
border: 1px solid var(--wp--preset--color--border) !important;
background: var(--wp--preset--color--background) !important;
padding: 0.75rem 1rem !important;
font-size: var(--wp--preset--font-size--sm) !important;
font-family: var(--wp--preset--font-family--inter) !important;
color: var(--wp--preset--color--foreground) !important;
box-shadow: none !important;
}
.wpforms-form .wpforms-submit,
.wpcf7-form input[type="submit"] {
width: 100%;
background: var(--wp--preset--color--primary) !important;
color: var(--wp--preset--color--primary-foreground) !important;
border: none !important;
border-radius: 0.25rem !important;
padding: 1rem 1.5rem !important;
font-size: var(--wp--preset--font-size--sm) !important;
font-weight: 500 !important;
font-family: var(--wp--preset--font-family--inter) !important;
cursor: pointer;
transition: opacity 0.15s;
}
.wpforms-form .wpforms-submit:hover,
.wpcf7-form input[type="submit"]:hover {
opacity: 0.9 !important;
}
/* ============================================================
Navigation — WP block class enhancements
Targets .wp-block-navigation and submenu classes rendered
by core/navigation block to match the source design.
============================================================ */
/* Active link state — WP sets aria-current="page" server-side */
.wp-block-navigation a[aria-current="page"],
.wp-block-navigation .current-menu-item > a {
color: var(--wp--preset--color--foreground) !important;
}
/* Submenu trigger button base */
.wp-block-navigation-submenu__toggle {
display: inline-flex;
align-items: center;
gap: 0.25rem;
background: none;
border: none;
padding: 0;
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
font-family: var(--wp--preset--font-family--inter);
color: var(--wp--preset--color--muted-foreground);
cursor: pointer;
transition: color 0.15s;
}
.wp-block-navigation-submenu__toggle:hover,
.wp-block-navigation-submenu__toggle[aria-expanded="true"] {
color: var(--wp--preset--color--foreground);
}
/* Chevron icon inside toggle — WP renders an SVG; rotate it when open */
.wp-block-navigation-submenu__toggle svg,
.wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon {
transition: transform 0.2s ease;
}
.wp-block-navigation-submenu__toggle[aria-expanded="true"] svg,
.wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon {
transform: rotate(180deg);
}
/* Desktop dropdown panel */
.wp-block-navigation__submenu-container {
position: absolute;
top: calc(100% + 1rem);
left: 50%;
transform: translateX(-50%) translateY(-0.5rem);
min-width: 20rem;
background: var(--wp--preset--color--card);
border: 1px solid var(--wp--preset--color--border);
border-radius: 0.5rem;
box-shadow: 0 10px 30px rgba(51,0,51,0.08);
padding: 0.5rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 100;
}
/* WP adds .is-menu-open or aria-expanded="true" on the submenu wrapper */
.wp-block-navigation-submenu.is-menu-open > .wp-block-navigation__submenu-container,
.wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container,
.wp-block-navigation-submenu[aria-expanded="true"] > .wp-block-navigation__submenu-container {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(-8%);
}
/* Dropdown links */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
display: block;
padding: 0.75rem 1rem;
border-radius: 0.375rem;
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
color: var(--wp--preset--color--foreground);
text-decoration: none;
transition: background-color 0.15s, color 0.15s;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
background-color: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--primary);
}
/* "View all services" footer row inside dropdown */
.wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
margin: 0 -0.5rem -0.5rem -0.5rem;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
margin-top: 0.25rem;
padding: 1em;
/*border-top: 1px solid var(--wp--preset--color--border);*/
/*border-radius: 0 0 0.375rem 0.375rem;*/
font-weight: 600;
color: var(--wp--preset--color--foreground);
/*background: var(--wp--preset--color--secondary);*/
/*background-color: color-mix(in oklab, #f0d1b2 50%, transparent);*/
}
/* ============================================================
Mobile Navigation — React-style slide-down panel (≤ 799px)
Completely replaces the WP core full-screen fixed overlay with a
max-height transition panel that drops below the sticky header,
matching the React SiteHeader design exactly.
Key technique: core's display:none + position:fixed + inset:0 are all
overridden with !important. The container becomes position:absolute
within .site-header (the nearest positioned ancestor, since
.wp-block-navigation is reset to position:static below), giving it
top:100% = the bottom edge of the sticky header bar.
============================================================ */
.wp-block-navigation__responsive-container-open:not(.always-shown) {
display: block;
}
@media (min-width: 800px) {
.wp-block-navigation__responsive-container-open:not(.always-shown) {
display: none;
}
}
.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
width: 100%;
}
@media (max-width: 799px) {
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
width: 100% !important;
}
/* Remove core's position:relative from the nav block so the overlay
container anchors to .site-header instead of the narrow nav element. */
.site-header .wp-block-navigation {
position: static !important;
}
/* --- Closed state: override display:none + position:fixed + inset:0 --- */
.wp-block-navigation__responsive-container {
display: block !important;
position: absolute !important;
top: 0 !important; /* bottom edge of .site-header would be 100% */
left: 0 !important;
right: 0 !important;
bottom: auto !important;
z-index: 100 !important;
max-height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
opacity: 0 !important;
transition:
max-height 0.3s ease,
opacity 0.25s ease,
visibility 0.25s !important;
background-color: var(--color-background) !important;
border-bottom: 1px solid transparent !important;
animation: none !important;
}
/* --- Open state --- */
.wp-block-navigation__responsive-container.is-menu-open {
max-height: 100dvh !important;
visibility: visible !important;
opacity: 1 !important;
overflow: auto !important;
border-bottom-color: var(--color-border) !important;
animation: none !important;
}
.has-modal-open .admin-bar .is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-dialog {
margin-top: 0 !important;
}
/* Inner content column — matches React's flex column list */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
display: flex !important;
flex-direction: column !important;
gap: 0.25rem !important;
padding: 1.5rem !important;
padding-top: 1.5rem !important; /* override core's calc(2rem + 24px) */
max-width: 72rem !important;
margin: 0 auto !important;
justify-content: flex-start !important;
align-items: stretch !important;
}
/* Close button — shown at the top-right of the slide-down panel.
WP hides the hamburger when the menu opens (expected behaviour); the
close button is the proper way to dismiss. We let WP manage both. */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
display: flex !important;
justify-content: flex-end !important;
padding: 1rem 1.5rem 0 !important;
max-width: 72rem !important;
margin: 0 auto !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: none !important;
border: none !important;
cursor: pointer !important;
color: var(--color-foreground) !important;
padding: 0.5rem !important;
border-radius: 0.25rem !important;
transition: background-color 0.15s !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close button:hover {
background-color: var(--color-secondary) !important;
}
/* --- Nav items --- */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
display: block !important;
padding: 0.75rem 1rem !important;
border-radius: 0.25rem !important;
font-size: 1rem !important;
font-weight: 500 !important;
color: var(--color-foreground) !important;
text-decoration: none !important;
transition: background-color 0.15s !important;
width: 100% !important;
box-sizing: border-box !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:hover {
background-color: var(--color-secondary) !important;
}
/* Active / current page */
.wp-block-navigation__responsive-container.is-menu-open
.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content[aria-current="page"] {
background-color: var(--color-secondary) !important;
}
/* --- Services submenu toggle button --- */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-submenu__toggle {
width: 100% !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 0.75rem 1rem !important;
border-radius: 0.25rem !important;
font-size: 1rem !important;
font-weight: 500 !important;
color: var(--color-foreground) !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
transition: background-color 0.15s !important;
text-align: left !important;
box-sizing: border-box !important;
font-family: inherit !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-submenu__toggle:hover {
background-color: var(--color-secondary) !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-submenu__toggle
.wp-block-navigation__submenu-icon {
display: block !important;
flex-shrink: 0 !important;
transition: transform 0.2s ease !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-submenu__toggle[aria-expanded="true"]
.wp-block-navigation__submenu-icon {
transform: rotate(180deg) !important;
}
/* --- Services submenu accordion: hidden by default, revealed on expand ---
Must override core's high-specificity rule that forces opacity:1/visibility:visible
inside the mobile overlay. !important wins regardless of selector length. */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container {
position: static !important;
transform: none !important;
box-shadow: none !important;
border: none !important;
background: transparent !important;
min-width: 0 !important;
padding: 0 0 0 1.25rem !important;
max-height: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
visibility: hidden !important;
transition:
max-height 0.25s ease,
opacity 0.2s ease,
visibility 0.2s !important;
}
/* Show submenu when toggle has aria-expanded="true" */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-submenu.is-menu-open
> .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-submenu__toggle[aria-expanded="true"]
~ .wp-block-navigation__submenu-container {
max-height: 24rem !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Submenu items — slightly smaller, muted */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container
.wp-block-navigation-item__content {
font-size: 0.9375rem !important;
color: var(--color-muted-foreground) !important;
padding: 0.625rem 1rem !important;
}
/* --- Mobile-only CTA link — teal button after a divider --- */
.wp-block-navigation__responsive-container.is-menu-open
.nav-mobile-cta {
display: block !important;
margin-top: 1rem !important;
padding-top: 1rem !important;
border-top: 1px solid var(--color-border) !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.nav-mobile-cta .wp-block-navigation-item__content {
background-color: var(--color-primary) !important;
color: var(--color-primary-foreground) !important;
text-align: center !important;
border: 1px solid var(--color-primary) !important;
font-weight: 500 !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.nav-mobile-cta .wp-block-navigation-item__content:hover {
opacity: 0.9 !important;
}
/* Hide desktop CTA button on mobile — it lives in the nav panel now */
.header-cta {
display: none !important;
}
}
/* nav-mobile-cta hidden everywhere EXCEPT inside the open mobile overlay.
Keeps it out of the desktop nav bar and out of the collapsed mobile drawer. */
.nav-mobile-cta {
display: none !important;
}
/* Header scroll-shrink state */
.site-header.is-scrolled {
box-shadow: 0 1px 12px rgba(51,0,51,0.06);
}
.site-header.is-scrolled .site-header-inner {
height: 3.5rem;
}
.site-header.is-scrolled .custom-logo {
width: 10rem;
}
/* ============================================================
Legal / Prose pages
============================================================ */
.legal-content h2 {
font-family: var(--wp--preset--font-family--playfair-display);
font-size: var(--wp--preset--font-size--2-xl);
font-weight: 400;
letter-spacing: -0.02em;
color: var(--wp--preset--color--foreground);
margin-top: 3rem;
margin-bottom: 1rem;
}
.legal-content h3 {
font-size: var(--wp--preset--font-size--lg);
font-weight: 500;
color: var(--wp--preset--color--foreground);
margin-top: 2rem;
margin-bottom: 0.75rem;
}
.legal-content p,
.legal-content li {
font-size: var(--wp--preset--font-size--base);
line-height: 1.75;
color: var(--wp--preset--color--muted-foreground);
}
.legal-content ul,
.legal-content ol {
padding-left: 1.5rem;
margin-bottom: 1.5rem;
}
.legal-content a {
color: var(--wp--preset--color--primary);
}
/* ============================================================
Service single page
============================================================ */
/* Numbered process steps */
.process-step-number {
font-family: var(--wp--preset--font-family--playfair-display);
font-size: var(--wp--preset--font-size--5xl);
color: var(--wp--preset--color--primary);
opacity: 0.8;
line-height: 1;
display: block;
}
/* Breadcrumb back link */
.service-breadcrumb {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: var(--wp--preset--font-size--sm);
color: var(--wp--preset--color--muted-foreground);
text-decoration: none;
margin-bottom: 1.5rem;
transition: color 0.15s;
}
.service-breadcrumb:hover {
color: var(--wp--preset--color--foreground);
}
/* Outcomes checklist */
.outcomes-list {
list-style: none;
padding: 0;
margin: 0;
}
.outcomes-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.625rem 0;
font-size: var(--wp--preset--font-size--base);
color: var(--wp--preset--color--foreground);
}
.outcomes-list li::before {
content: '';
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.1rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23336666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
/* Hide service hero image on mobile */
@media (max-width: 599px) {
.service-hero-image-col {
display: none;
}
}
/* ============================================================
GravityForms — theme overrides
Add this filter to functions.php to disable GF's own CSS:
add_filter( 'pre_option_rg_gforms_disable_css', '__return_true' );
============================================================ */
.gform_wrapper.gravity-theme {
font-family: var(--wp--preset--font-family--inter);
}
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
display: block;
margin-bottom: 0.5rem;
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
color: var(--wp--preset--color--foreground);
}
.gform_wrapper .ginput_container input,
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container textarea {
width: 100%;
border-radius: 0.25rem !important;
border: 1px solid var(--wp--preset--color--border) !important;
background: var(--wp--preset--color--background) !important;
padding: 0.75rem 1rem !important;
font-size: var(--wp--preset--font-size--sm) !important;
font-family: var(--wp--preset--font-family--inter) !important;
color: var(--wp--preset--color--foreground) !important;
box-shadow: none !important;
transition: border-color 0.15s, box-shadow 0.15s !important;
}
.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container select:focus,
.gform_wrapper .ginput_container textarea:focus {
outline: none !important;
border-color: var(--wp--preset--color--primary) !important;
box-shadow: 0 0 0 2px rgba(51,102,102,0.15) !important;
}
.gform_wrapper .gfield {
margin-bottom: 1.25rem !important;
}
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button,
.gform_wrapper input.gform_button {
width: 100%;
background: var(--wp--preset--color--primary) !important;
color: var(--wp--preset--color--primary-foreground) !important;
border: none !important;
border-radius: 0.25rem !important;
padding: 1rem 1.5rem !important;
font-size: var(--wp--preset--font-size--sm) !important;
font-weight: 500 !important;
font-family: var(--wp--preset--font-family--inter) !important;
cursor: pointer !important;
transition: opacity 0.15s !important;
letter-spacing: 0.01em !important;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper input.gform_button:hover {
opacity: 0.88 !important;
}
.gform_wrapper .validation_error,
.gform_wrapper .gfield_error .gfield_label {
color: #c0392b !important;
font-size: var(--wp--preset--font-size--sm) !important;
}
.gform_wrapper .gfield_error .ginput_container input,
.gform_wrapper .gfield_error .ginput_container select,
.gform_wrapper .gfield_error .ginput_container textarea {
border-color: #c0392b !important;
}
.gform_wrapper .gform-body .gform_fields {
grid-row-gap: 0 !important;
}
/* Confirmation message */
.gform_confirmation_wrapper .gform_confirmation_message {
font-family: var(--wp--preset--font-family--inter);
font-size: var(--wp--preset--font-size--base);
color: var(--wp--preset--color--foreground);
padding: 1.5rem;
background: rgba(51,102,102,0.06);
border-left: 3px solid var(--wp--preset--color--primary);
border-radius: 0 0.25rem 0.25rem 0;
}
/* ============================================================
Contact page — detail blocks, calendly box, form card
============================================================ */
.contact-detail-label {
font-size: var(--wp--preset--font-size--xs);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--muted-foreground);
margin: 0 0 0.375rem;
}
.contact-detail-value {
font-size: var(--wp--preset--font-size--lg);
color: var(--wp--preset--color--foreground);
text-decoration: none;
display: block;
}
a.contact-detail-value:hover {
color: var(--wp--preset--color--muted-foreground);
}
.contact-calendly-box {
padding: 1.5rem;
background: rgba(51,102,102,0.05);
border: 1px solid rgba(51,102,102,0.2);
border-radius: 0.25rem;
}
.contact-calendly-title {
font-size: var(--wp--preset--font-size--xl);
font-weight: 500;
color: var(--wp--preset--color--foreground);
margin: 0 0 0.5rem;
}
.contact-calendly-desc {
font-size: var(--wp--preset--font-size--base);
color: var(--wp--preset--color--muted-foreground);
margin: 0 0 1rem;
}
.contact-calendly-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--primary-foreground);
border-radius: 0.25rem;
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
text-decoration: none;
transition: opacity 0.15s;
}
.contact-calendly-btn:hover { opacity: 0.88; }
.contact-trust-note {
font-size: var(--wp--preset--font-size--sm);
color: var(--wp--preset--color--muted-foreground);
padding-top: var(--wp--preset--spacing--8);
border-top: 1px solid var(--wp--preset--color--border);
margin: 0;
}
/* Form card */
.contact-form-card {
background: var(--wp--preset--color--card);
border: 1px solid var(--wp--preset--color--border);
border-radius: 0.25rem;
padding: 2.5rem;
}
.contact-form-title {
font-family: var(--wp--preset--font-family--playfair-display);
font-size: var(--wp--preset--font-size--2-xl);
font-weight: 400;
letter-spacing: -0.02em;
color: var(--wp--preset--color--foreground);
margin: 0 0 0.5rem;
}
.contact-form-subtitle {
font-size: var(--wp--preset--font-size--sm);
color: var(--wp--preset--color--muted-foreground);
margin: 0 0 2rem;
}
.contact-form-alert {
border-radius: 0.25rem;
font-size: var(--wp--preset--font-size--sm);
line-height: 1.5;
margin: 0 0 1.5rem;
padding: 0.875rem 1rem;
}
.contact-form-alert span {
display: block;
margin-top: 0.25rem;
}
.contact-form-alert--success {
background: rgba(51, 102, 102, 0.1);
border: 1px solid rgba(51, 102, 102, 0.25);
color: var(--wp--preset--color--primary);
}
.contact-form-alert--error {
background: rgba(204, 102, 0, 0.1);
border: 1px solid rgba(204, 102, 0, 0.25);
color: var(--wp--preset--color--foreground);
}
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-form-row { display: flex; gap: 1rem; }
.contact-form-row--2col > * { flex: 1; }
@media (max-width: 480px) {
.contact-form-row--2col { flex-direction: column; }
.contact-form-card { padding: 1.5rem; }
}
.contact-form-field-wrap { display: flex; flex-direction: column; }
.contact-form-label {
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
color: var(--wp--preset--color--foreground);
margin-bottom: 0.5rem;
}
.contact-form-input {
width: 100%;
border: 1px solid var(--wp--preset--color--border);
border-radius: 0.25rem;
background: var(--wp--preset--color--background);
padding: 0.75rem 1rem;
font-size: var(--wp--preset--font-size--sm);
font-family: var(--wp--preset--font-family--inter);
color: var(--wp--preset--color--foreground);
transition: border-color 0.15s, box-shadow 0.15s;
appearance: none;
-webkit-appearance: none;
}
.contact-form-input::placeholder {
color: var(--wp--preset--color--muted-foreground);
}
.contact-form-input:focus {
outline: none;
border-color: var(--wp--preset--color--primary);
box-shadow: 0 0 0 2px rgba(51,102,102,0.15);
}
.contact-form-input[aria-invalid="true"] {
border-color: var(--wp--preset--color--accent);
}
.contact-form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a4a5a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
padding-right: 2.5rem;
cursor: pointer;
}
.contact-form-textarea { resize: vertical; min-height: 7rem; }
.contact-form-submit {
width: 100%;
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--primary-foreground);
border: none;
border-radius: 0.25rem;
padding: 1rem 1.5rem;
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
font-family: var(--wp--preset--font-family--inter);
cursor: pointer;
transition: opacity 0.15s;
letter-spacing: 0.01em;
}
.contact-form-submit:hover { opacity: 0.88; }
.contact-form-footnote {
text-align: center;
font-size: var(--wp--preset--font-size--sm);
color: var(--wp--preset--color--muted-foreground);
margin: 0;
}
.contact-form-error {
color: var(--wp--preset--color--accent);
font-size: var(--wp--preset--font-size--sm);
margin: 0.375rem 0 0;
}
.contact-form-honeypot {
height: 0;
left: -9999px;
overflow: hidden;
position: absolute;
width: 0;
}
/* Email opt-in consent checkbox */
.contact-form-consent {
margin-top: 0.25rem;
}
.contact-form-consent-label {
display: flex;
align-items: flex-start;
gap: 0.625rem;
cursor: pointer;
font-size: var(--wp--preset--font-size--sm);
line-height: 1.5;
color: var(--wp--preset--color--muted-foreground);
}
.contact-form-consent-input {
flex-shrink: 0;
width: 1.05rem;
height: 1.05rem;
margin: 0.125rem 0 0;
accent-color: var(--wp--preset--color--primary);
cursor: pointer;
}
/* ============================================================
BLOCK STYLES — registered via register_block_style()
Each is applied as .is-style-{name} on the block wrapper.
============================================================ */
/* ------------------------------------------------------------
core/paragraph
------------------------------------------------------------ */
/* Large / Lead */
.wp-block-paragraph.is-style-large {
font-size: var(--wp--preset--font-size--xl);
line-height: 1.75;
color: var(--wp--preset--color--muted-foreground);
font-weight: 400;
}
/* Small / Caption */
.wp-block-paragraph.is-style-small {
font-size: var(--wp--preset--font-size--sm);
line-height: 1.6;
color: var(--wp--preset--color--muted-foreground);
}
/* ------------------------------------------------------------
core/button — all variants
------------------------------------------------------------ */
/* Reset: ensure all variants start clean */
.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-button.is-style-secondary .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-ghost .wp-block-button__link,
.wp-block-button.is-style-link .wp-block-button__link,
.wp-block-button.is-style-destructive .wp-block-button__link,
.wp-block-button.is-style-with-icon .wp-block-button__link,
.wp-block-button.is-style-cta .wp-block-button__link {
font-family: var(--wp--preset--font-family--inter);
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
border-radius: 0.25rem;
padding: 0.625rem 1.25rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
transition: opacity 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
cursor: pointer;
line-height: 1;
}
/* Primary */
.wp-block-button.is-style-primary .wp-block-button__link {
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--primary-foreground);
border: 1.5px solid var(--wp--preset--color--primary);
}
.wp-block-button.is-style-primary .wp-block-button__link:hover {
opacity: 0.88;
}
/* Secondary */
.wp-block-button.is-style-secondary .wp-block-button__link {
background-color: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--foreground);
border: 1.5px solid var(--wp--preset--color--border);
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
background-color: var(--wp--preset--color--border);
}
/* Outline */
.wp-block-button.is-style-outline .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--primary);
border: 1.5px solid var(--wp--preset--color--primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--primary-foreground);
}
/* Ghost */
.wp-block-button.is-style-ghost .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--foreground);
border: 1.5px solid var(--wp--preset--color--border);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
background-color: var(--wp--preset--color--secondary);
border-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--primary);
}
/* Link Style */
.wp-block-button.is-style-link .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--primary);
border: none;
padding: 0;
text-decoration: underline;
text-underline-offset: 3px;
}
.wp-block-button.is-style-link .wp-block-button__link:hover {
color: var(--wp--preset--color--foreground);
}
/* Destructive */
.wp-block-button.is-style-destructive .wp-block-button__link {
background-color: #b91c1c;
color: #fff;
border: 1.5px solid #b91c1c;
}
.wp-block-button.is-style-destructive .wp-block-button__link:hover {
background-color: #991b1b;
border-color: #991b1b;
}
/* With Icon → (appends arrow via ::after) */
.wp-block-button.is-style-with-icon .wp-block-button__link {
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--primary-foreground);
border: 1.5px solid var(--wp--preset--color--primary);
}
.wp-block-button.is-style-with-icon .wp-block-button__link::after {
content: '';
display: inline-block;
width: 1rem;
height: 1rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf8f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
transition: transform 0.2s ease;
}
.wp-block-button.is-style-with-icon .wp-block-button__link:hover::after {
transform: translateX(3px);
}
.wp-block-button.is-style-with-icon .wp-block-button__link:hover {
opacity: 0.88;
}
/* Call to Action — larger, with arrow, full-width on mobile */
.wp-block-button.is-style-cta .wp-block-button__link {
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--primary-foreground);
border: 1.5px solid var(--wp--preset--color--primary);
padding: 0.875rem 2rem;
font-size: var(--wp--preset--font-size--base);
font-weight: 600;
letter-spacing: 0.01em;
}
.wp-block-button.is-style-cta .wp-block-button__link::after {
content: '';
display: inline-block;
width: 1.125rem;
height: 1.125rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf8f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
transition: transform 0.2s ease;
}
.wp-block-button.is-style-cta .wp-block-button__link:hover::after {
transform: translateX(4px);
}
.wp-block-button.is-style-cta .wp-block-button__link:hover {
opacity: 0.88;
}
@media (max-width: 480px) {
.wp-block-button.is-style-cta {
width: 100%;
}
.wp-block-button.is-style-cta .wp-block-button__link {
width: 100%;
justify-content: center;
}
}
/* ------------------------------------------------------------
core/list — Unordered styles
------------------------------------------------------------ */
/* ── Basic Bullet ── */
.wp-block-list.is-style-bullet {
list-style: none;
padding-left: 0;
margin: 0;
}
.wp-block-list.is-style-bullet li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.375rem 0;
color: var(--wp--preset--color--muted-foreground);
line-height: 1.75;
}
.wp-block-list.is-style-bullet li::before {
content: '';
flex-shrink: 0;
width: 0.4375rem; /* 7px */
height: 0.4375rem;
margin-top: 0.5rem; /* optical align to cap height */
border-radius: 50%;
background-color: var(--wp--preset--color--primary);
}
/* ── Checkmark / Outcomes ── */
.wp-block-list.is-style-checkmark {
list-style: none;
padding-left: 0;
margin: 0;
}
.wp-block-list.is-style-checkmark li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.5rem 0;
color: var(--wp--preset--color--foreground);
line-height: 1.75;
}
.wp-block-list.is-style-checkmark li::before {
content: '';
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.1rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23336666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
/* ── Prose (Article Content) — ul ── */
.wp-block-list.is-style-prose {
list-style-type: disc;
padding-left: 1.5rem;
margin-bottom: 1.5em;
}
.wp-block-list.is-style-prose li {
margin-bottom: 0.625em;
line-height: 1.75;
padding-left: 0.375em;
color: var(--wp--preset--color--muted-foreground);
font-size: var(--wp--preset--font-size--base);
}
.wp-block-list.is-style-prose li::marker {
color: var(--wp--preset--color--muted-foreground);
}
.wp-block-list.is-style-prose li strong {
color: var(--wp--preset--color--foreground);
font-weight: 600;
}
/* ── Icon List (Features) ── */
/* Each li is treated as a feature row with an icon-box + title + desc.
Structure: Title — Description
For full icon+layout control use the service-card group pattern instead. */
.wp-block-list.is-style-icon-list {
list-style: none;
padding-left: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.wp-block-list.is-style-icon-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 0;
color: var(--wp--preset--color--muted-foreground);
line-height: 1.75;
}
.wp-block-list.is-style-icon-list li::before {
content: '';
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.25rem;
background-color: rgba(51,102,102,0.1);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23336666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 1.25rem;
}
.wp-block-list.is-style-icon-list li strong {
display: block;
color: var(--wp--preset--color--foreground);
font-weight: 500;
margin-bottom: 0.25rem;
font-size: var(--wp--preset--font-size--base);
}
/* Icon variants — add data-icon="people|heart|lightbulb" to li for alternate icons */
.wp-block-list.is-style-icon-list li[data-icon="people"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23336666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.wp-block-list.is-style-icon-list li[data-icon="heart"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23336666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}
.wp-block-list.is-style-icon-list li[data-icon="lightbulb"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23336666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
}
.wp-block-list.is-style-icon-list li[data-icon="check"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23336666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.wp-block-list.is-style-icon-list li[data-icon="star"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23336666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}
.wp-block-list.is-style-icon-list li[data-icon="chart"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23336666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' x2='18' y1='20' y2='10'/%3E%3Cline x1='12' x2='12' y1='20' y2='4'/%3E%3Cline x1='6' x2='6' y1='20' y2='14'/%3E%3C/svg%3E");
}
/* ------------------------------------------------------------
core/list — Ordered styles
------------------------------------------------------------ */
/* ── Numbered Steps ── */
.wp-block-list.is-style-numbered-steps {
list-style: none;
padding-left: 0;
margin: 0;
counter-reset: steps;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.wp-block-list.is-style-numbered-steps li {
display: flex;
align-items: flex-start;
gap: 0.875rem;
counter-increment: steps;
color: var(--wp--preset--color--foreground);
line-height: 1.75;
}
.wp-block-list.is-style-numbered-steps li::before {
content: counter(steps, decimal-leading-zero);
flex-shrink: 0;
min-width: 1.75rem;
height: 1.75rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
background-color: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--foreground);
font-size: var(--wp--preset--font-size--xs);
font-weight: 600;
font-family: var(--wp--preset--font-family--inter);
letter-spacing: 0.02em;
margin-top: 0.125rem;
}
.wp-block-list.is-style-numbered-steps li strong {
display: block;
font-weight: 600;
color: var(--wp--preset--color--foreground);
margin-bottom: 0.125rem;
}
/* ── Timeline ── */
.wp-block-list.is-style-timeline {
list-style: none;
padding-left: 2.5rem;
margin: 0;
position: relative;
border-left: 1px solid var(--wp--preset--color--border);
counter-reset: timeline;
display: flex;
flex-direction: column;
gap: 0;
}
.wp-block-list.is-style-timeline li {
position: relative;
padding-bottom: 2rem;
counter-increment: timeline;
color: var(--wp--preset--color--muted-foreground);
line-height: 1.75;
}
.wp-block-list.is-style-timeline li:last-child {
padding-bottom: 0;
}
.wp-block-list.is-style-timeline li::before {
content: counter(timeline);
position: absolute;
left: calc(-2.5rem - 0.75rem); /* left border + half marker */
top: 0;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--primary-foreground);
font-size: 0.625rem;
font-weight: 700;
font-family: var(--wp--preset--font-family--inter);
display: flex;
align-items: center;
justify-content: center;
}
.wp-block-list.is-style-timeline li strong {
display: block;
font-weight: 500;
color: var(--wp--preset--color--foreground);
margin-bottom: 0.125rem;
font-size: var(--wp--preset--font-size--base);
}
.wp-block-list.is-style-timeline li em {
display: block;
font-style: normal;
font-size: var(--wp--preset--font-size--xs);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--wp--preset--color--muted-foreground);
margin-bottom: 0.25rem;
}
/* ── Prose Ordered (Article) ── */
.wp-block-list.is-style-prose[type] ,
ol.wp-block-list.is-style-prose {
list-style-type: decimal;
padding-left: 1.5rem;
margin-bottom: 1.5em;
}
ol.wp-block-list.is-style-prose li {
margin-bottom: 0.625em;
line-height: 1.75;
padding-left: 0.375em;
color: var(--wp--preset--color--muted-foreground);
font-size: var(--wp--preset--font-size--base);
}
ol.wp-block-list.is-style-prose li::marker {
color: var(--wp--preset--color--muted-foreground);
font-weight: 600;
}
/* Auto-apply prose styles inside post content (blog/insights post type) */
.single-post .entry-content .wp-block-list:not([class*="is-style-"]),
.post-type-post .entry-content .wp-block-list:not([class*="is-style-"]) {
padding-left: 1.5rem;
margin-bottom: 1.5em;
}
.single-post .entry-content ul.wp-block-list:not([class*="is-style-"]) {
list-style-type: disc;
}
.single-post .entry-content ol.wp-block-list:not([class*="is-style-"]) {
list-style-type: decimal;
}
.single-post .entry-content .wp-block-list:not([class*="is-style-"]) li {
margin-bottom: 0.625em;
line-height: 1.75;
padding-left: 0.375em;
color: var(--wp--preset--color--muted-foreground);
}
.single-post .entry-content .wp-block-list:not([class*="is-style-"]) li::marker {
color: var(--wp--preset--color--muted-foreground);
}
/* ------------------------------------------------------------
core/separator — all variants
------------------------------------------------------------ */
/* WP renders:
hr is a void element so we use background-image tricks. */
/* Section Divider (existing — full-width, border-color) */
.wp-block-separator.is-style-section-divider {
border: none;
height: 1px;
background-color: var(--wp--preset--color--border);
margin-top: 0;
margin-bottom: 0;
}
/* Decorative — gradient lines + diamond icon in center */
.wp-block-separator.is-style-decorative {
border: none;
height: 1.5rem;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2b2c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E") center / 1rem 1rem no-repeat,
linear-gradient(to right, transparent, var(--wp--preset--color--border) 20%, transparent 45%) 0 50% / 100% 1px no-repeat,
linear-gradient(to left, transparent, var(--wp--preset--color--border) 20%, transparent 45%) 100% 50% / 100% 1px no-repeat;
overflow: visible;
}
/* Text Divider — lines + "§" symbol via SVG data URI */
.wp-block-separator.is-style-text-divider {
border: none;
height: 1.5rem;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Ctext x='50%25' y='14' text-anchor='middle' font-family='Georgia%2C serif' font-size='12' fill='%235a4a5a' letter-spacing='2'%3E%E2%80%A2 %E2%80%A2 %E2%80%A2%3C%2Ftext%3E%3C%2Fsvg%3E") center / 60px 1.5rem no-repeat,
linear-gradient(to right, transparent, var(--wp--preset--color--border) 15%, transparent 42%) 0 50% / 100% 1px no-repeat,
linear-gradient(to left, transparent, var(--wp--preset--color--border) 15%, transparent 42%) 100% 50% / 100% 1px no-repeat;
}
/* Accent Bar — short thick teal bar, left-aligned */
.wp-block-separator.is-style-accent {
border: none;
height: 0.25rem;
width: 4rem;
background-color: var(--wp--preset--color--primary);
border-radius: 0.125rem;
margin-left: 0;
margin-right: auto;
}
/* ------------------------------------------------------------
core/table — Simple and Card styles
------------------------------------------------------------ */
/* ── Simple Table ── */
.wp-block-table.is-style-simple {
width: 100%;
overflow-x: auto;
}
.wp-block-table.is-style-simple table {
width: 100%;
border-collapse: collapse;
font-size: var(--wp--preset--font-size--sm);
font-family: var(--wp--preset--font-family--inter);
}
.wp-block-table.is-style-simple thead tr {
border-bottom: 1px solid var(--wp--preset--color--border);
}
.wp-block-table.is-style-simple thead th {
padding: 0.75rem 1rem 0.75rem 0;
text-align: left;
font-weight: 500;
font-size: var(--wp--preset--font-size--sm);
color: var(--wp--preset--color--foreground);
border: none;
}
.wp-block-table.is-style-simple tbody tr {
border-bottom: 1px solid var(--wp--preset--color--border);
}
.wp-block-table.is-style-simple tbody tr:last-child {
border-bottom: none;
}
.wp-block-table.is-style-simple tbody td {
padding: 0.75rem 1rem 0.75rem 0;
color: var(--wp--preset--color--muted-foreground);
font-size: var(--wp--preset--font-size--sm);
border: none;
vertical-align: top;
}
.wp-block-table.is-style-simple tbody tr td:first-child {
color: var(--wp--preset--color--foreground);
font-weight: 500;
}
/* ── Card Style Table ── */
.wp-block-table.is-style-card-style {
width: 100%;
overflow-x: auto;
border-radius: 0.25rem;
}
.wp-block-table.is-style-card-style table {
width: 100%;
border-collapse: collapse;
font-size: var(--wp--preset--font-size--sm);
font-family: var(--wp--preset--font-family--inter);
}
.wp-block-table.is-style-card-style thead tr {
background-color: rgba(240,209,178,0.5);
}
.wp-block-table.is-style-card-style thead th {
padding: 0.75rem 1rem;
text-align: left;
font-weight: 500;
color: var(--wp--preset--color--foreground);
border: 1px solid var(--wp--preset--color--border);
font-size: var(--wp--preset--font-size--sm);
}
.wp-block-table.is-style-card-style thead th:first-child {
border-radius: 0.25rem 0 0 0;
}
.wp-block-table.is-style-card-style thead th:last-child {
border-radius: 0 0.25rem 0 0;
}
.wp-block-table.is-style-card-style tbody tr {
background-color: var(--wp--preset--color--card);
}
.wp-block-table.is-style-card-style tbody tr:nth-child(even) {
background-color: rgba(240,209,178,0.2);
}
.wp-block-table.is-style-card-style tbody td {
padding: 0.75rem 1rem;
border: 1px solid var(--wp--preset--color--border);
color: var(--wp--preset--color--muted-foreground);
font-size: var(--wp--preset--font-size--sm);
vertical-align: top;
}
.wp-block-table.is-style-card-style tbody tr td:first-child {
color: var(--wp--preset--color--foreground);
font-weight: 500;
}
.wp-block-table.is-style-card-style tbody tr:last-child td:first-child {
border-radius: 0 0 0 0.25rem;
}
.wp-block-table.is-style-card-style tbody tr:last-child td:last-child {
border-radius: 0 0 0.25rem 0;
}
/* ============================================================
core/group — Background Pattern Styles
All four use --wp--preset--color--border for line color so
they inherit the theme palette and work in the editor.
============================================================ */
/* Horizontal Lines — evenly spaced horizontal rules */
.wp-block-group.is-style-bg-horizontal-lines {
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent 59px,
var(--wp--preset--color--border) 59px,
var(--wp--preset--color--border) 60px
);
}
/* Subtle Lines — same as horizontal but lighter opacity */
.wp-block-group.is-style-bg-subtle-lines {
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent 59px,
rgba(194, 178, 194, 0.35) 59px,
rgba(194, 178, 194, 0.35) 60px
);
}
/* Diagonal Lines — 45-degree hatching */
.wp-block-group.is-style-bg-diagonal-lines {
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 20px,
var(--wp--preset--color--border) 20px,
var(--wp--preset--color--border) 21px
);
}
/* Grid — horizontal + vertical lines forming a grid */
.wp-block-group.is-style-bg-grid {
background-image:
repeating-linear-gradient(
0deg,
transparent,
transparent 39px,
var(--wp--preset--color--border) 39px,
var(--wp--preset--color--border) 40px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 39px,
var(--wp--preset--color--border) 39px,
var(--wp--preset--color--border) 40px
);
}
/* Also update the legacy .bg-lines-* utility classes to use WP properties */
.bg-lines-subtle,
.wp-block-group.is-style-bg-lines {
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent 59px,
var(--wp--preset--color--border) 59px,
var(--wp--preset--color--border) 60px
);
}
.bg-lines-diagonal {
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 20px,
var(--wp--preset--color--border) 20px,
var(--wp--preset--color--border) 21px
);
}
.bg-grid {
background-image:
repeating-linear-gradient(
0deg,
transparent,
transparent 39px,
var(--wp--preset--color--border) 39px,
var(--wp--preset--color--border) 40px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 39px,
var(--wp--preset--color--border) 39px,
var(--wp--preset--color--border) 40px
);
}
/* ============================================================
Form submit — Loading State
Applied automatically by theme.js to any [type="submit"]
inside a