:root { /* Design system palette */ --color-soft-pink: #ffb6c1; --color-mint-green: #98fb98; --color-sky-blue: #add8e6; --color-butter-yellow: #fffdd0; /* Typography */ --font-sans: "Nunito"; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-hero: 4.5rem; --line-height-hero: 4.5rem; --font-size-h1: 3.75rem; --line-height-h1: 3.75rem; --font-size-h2: 3rem; --line-height-h2: 3rem; --font-size-h3: 2.25rem; --line-height-h3: 2.5rem; --font-size-body: 1.125rem; --line-height-body: 1.83125rem; --font-size-small: 0.875rem; --line-height-small: 1.25rem; /* Radius */ --radius-small: 1rem; --radius-medium: 2rem; --radius-large: 2.5rem; --radius-xlarge: 3rem; /* Shadows */ --shadow-none: none; --shadow-small: 0 6px 14px rgba(23, 32, 42, 0.12); --shadow-medium: 0 10px 24px rgba(23, 32, 42, 0.14); --shadow-large: 0 16px 36px rgba(23, 32, 42, 0.18); /* Spacing scale */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; /* Neutrals and semantic aliases */ --color-white: #ffffff; --color-ink: #17202a; --color-ink-muted: #5f6b7a; --color-ink-strong: #101828; --color-border: #d9dde3; --color-surface: #f7f8fa; --color-surface-strong: #ffffff; --color-surface-tint: #fff4f6; --color-cta-primary: #ffb6c1; --color-cta-link: #007893; --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); --landing-shell-max: 1296px; --landing-shell-pad: 32px; --theme-border: var(--color-border); --theme-surface: var(--color-surface); --theme-surface-strong: var(--color-surface-strong); --theme-text: var(--color-ink); --theme-text-muted: var(--color-ink-muted); --theme-accent: var(--color-sky-blue); --container-max: 1120px; --container-padding: 12px; --container-wide: min(var(--container-max), calc(100% - (var(--container-padding) * 2))); --theme-width: var(--container-wide); /* Scrollbar-aware viewport width. header.php sets --scrollbar-w via JS to (window.innerWidth - documentElement.clientWidth). Use var(--vw) instead of 100vw whenever a section needs to span the visible viewport (e.g. full-bleed sections that break out of .content-page__container). */ --scrollbar-w: 0px; --vw: calc(100vw - var(--scrollbar-w)); --bleed-margin: calc((100% - var(--vw)) / 2); /* Optional semantic accents */ --theme-accent-warm: var(--color-soft-pink); --theme-accent-growth: var(--color-mint-green); --theme-accent-calm: var(--color-sky-blue); --theme-accent-energy: var(--color-butter-yellow); } /* Prevent horizontal scrollbar at root; body already has overflow-x:clip but some browsers only respect it on the root () element. */ html { overflow-x: clip; } @media (min-width: 768px) { :root { --container-padding: 48px; } } /* ── Full-bleed section reset on mobile ───────────────────── All sections that use width:var(--vw) + bleed-margin to break out of the layout container must collapse to 100% on small screens where that math causes overflow. */ @media (max-width: 767px) { .approach-therapy, .schedule-evaluation, .welcome-process, .home-h1-section, .therapy-services-carousel, .certifications-band, .enrich-engage-empower, .therapy-location-cards, .book-a-visit, .your-first-visit, .home-ratings-section, .locations-served, .expanding-service-accordion, .areas-support-section, .home-video-feature { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } .content-page--home .our-process { padding-bottom: clamp(2.75rem, 4vw, 4rem); } .content-page--home .content-page__main { padding-top: 0; } .content-page--home .expanding-service-accordion { padding-top: clamp(1.75rem, 3vw, 2.75rem); } body { font-family: var(--font-sans); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--theme-text); background: var(--theme-surface-strong); overflow-x: clip; } button, input, select, textarea { font-family: var(--font-sans); } main { display: block; } p, ul, ol { margin: 0; } .content-page__container, .listing-page__container, .document-page__container, .single-post-page__container, .contact-page__container, .empty-state__container { width: var(--theme-width); margin: 0 auto; } .content-page__main, .document-page__article, .single-post-page__article, .contact-page__content { padding: 3rem 0 4rem; } .content-page__intro, .listing-page__header, .single-post-page__header { padding: 3rem 0 2rem; } .content-page__intro-title, .listing-page__title, .single-post-page__title, .document-page__content h1 { font-size: clamp(2.5rem, 5vw, var(--font-size-h1)); line-height: var(--line-height-h1); font-weight: var(--font-weight-bold); } .content-page__intro-copy, .document-page__content, .single-post-page__content, .post-card__excerpt { color: var(--theme-text-muted); line-height: 1.7; } .content-page-layout { padding: 2rem 0 4rem; } .content-page-layout__container { width: var(--theme-width); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 2rem; } .content-page-layout__container--no-toc { grid-template-columns: minmax(0, 1fr); } .content-page-sections { min-width: 0; } .listing-page__intro, .single-post-page__meta, .document-page__content time, .post-card__meta, .empty-state__eyebrow { color: var(--theme-text-muted); } .post-list { display: grid; gap: 1rem; padding-bottom: 3rem; } .post-card { border: 1px solid var(--theme-border); background: var(--theme-surface-strong); } .post-card__link { display: block; padding: 1.25rem; } .post-card__content { display: grid; gap: 0.75rem; } .post-card__title { font-size: clamp(1.75rem, 3vw, var(--font-size-h3)); line-height: var(--line-height-h3); font-weight: var(--font-weight-bold); } .pagination-wrap { padding-bottom: 4rem; } .contact-page__inner { display: grid; gap: 2rem; padding: 3rem 0; } .contact-page__details { display: grid; gap: 1rem; padding: 0; list-style: none; } .contact-page__detail-item { display: flex; gap: 0.75rem; align-items: flex-start; } .contact-page__card { padding: 1.5rem; border: 1px solid var(--theme-border); background: var(--theme-surface); } .wpforms-field-container, .contact-page form { display: grid; gap: 0.9rem; } .wpforms-form input, .wpforms-form textarea, .wpforms-form select, .contact-page form input, .contact-page form textarea, .contact-page form select { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--theme-border); background: #fff; } .wpforms-submit, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--theme-text); } .button-primary, .wpforms-submit { color: #fff; background: var(--theme-text); } .document-page__article { max-width: 900px; margin: 0 auto; } .document-page__content, .single-post-page__content { display: grid; gap: 1rem; } .document-page__content h2, .document-page__content h3, .document-page__content h4, .single-post-page__content h2, .single-post-page__content h3, .single-post-page__content h4 { margin-top: 1.5rem; } h1, .h1 { font-size: clamp(2.5rem, 5vw, var(--font-size-h1)); line-height: var(--line-height-h1); font-weight: var(--font-weight-bold); } h2, .h2 { font-size: clamp(2rem, 4vw, var(--font-size-h2)); line-height: var(--line-height-h2); font-weight: var(--font-weight-bold); } h3, .h3 { font-size: clamp(1.75rem, 3vw, var(--font-size-h3)); line-height: var(--line-height-h3); font-weight: var(--font-weight-semibold); } .hero-text { font-size: clamp(3rem, 8vw, var(--font-size-hero)); line-height: var(--line-height-hero); font-weight: var(--font-weight-bold); } .body-text { font-size: var(--font-size-body); line-height: var(--line-height-body); } .small-text { font-size: var(--font-size-small); line-height: var(--line-height-small); } .document-page__content ul, .document-page__content ol, .single-post-page__content ul, .single-post-page__content ol { padding-left: 1.25rem; } .empty-state { padding: 6rem 0; } .empty-state__container { max-width: 40rem; display: grid; gap: 1rem; } @media (max-width: 900px) { .content-page-layout__container { grid-template-columns: 1fr; } }