/* Clean Clinic Hours Styling */
/* ============================================
BRAND COLOR TOKEN
============================================
Single source of truth for the brand blue. Default = #2379b9 (the
long-standing brand value). On mobile, the variable is overridden
to #2878bc — the actual logo blue measured from form-logo.webp.
Every CSS rule that references this token via var(--form-blue)
automatically gets the right shade per viewport.
============================================ */
:root {
--form-blue: #2379b9;
--form-blue-rgb: 35, 121, 185;
}
@media (max-width: 767px) {
:root {
--form-blue: #2878bc;
--form-blue-rgb: 40, 120, 188;
}
}
/* ============================================
LINK DISABLE SWITCH
============================================
To DISABLE all links on homepage: Keep this section uncommented (as is)
To ENABLE all links on homepage: Comment out or delete the section below
============================================ */
/* Links enabled */
/* ============================================
END LINK DISABLE SWITCH
============================================ */
/* Prevent horizontal overflow from shifting the page.
IMPORTANT: must live on body, NOT html — setting overflow on
creates a new scroll container that breaks position:sticky on the nav. */
body {
overflow-x: clip;
}
/* Pin header dimensions so late-arriving fonts / scripts can't resize them
and cause a visible reflow on first paint. */
.header-main {
min-height: 128px;
}
.middle-header {
min-height: 109px;
}
.ow-navigation {
min-height: 66px;
}
/* Hero Section - Clean Modern Style (fluid typography) */
.banner-section .banner-left {
text-align: center !important;
padding: clamp(30px, 4vw, 60px) 0 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
transform: none !important;
width: 100% !important;
}
/* Fine-tune hero vertical + horizontal position per viewport */
@media (min-width: 1300px) and (max-width: 1600px) {
.banner-section .banner-left {
padding-top: 75px !important;
transform: translateX(-1vw) !important;
}
}
@media (min-width: 1601px) {
.banner-section .banner-left {
padding-top: 50px !important;
}
}
.banner-section .banner-left::before {
display: none !important;
}
.banner-left h1,
.banner-left h3 {
display: flex !important;
justify-content: center !important;
font-size: clamp(40px, 6vw, 86px) !important;
line-height: 0.95 !important;
margin: 0 !important;
letter-spacing: 2px !important;
font-weight: 800 !important;
color: #333 !important;
text-transform: uppercase !important;
font-family: 'Montserrat', sans-serif !important;
width: 100% !important;
max-width: none !important;
transform: none !important;
padding-bottom: 0 !important;
position: relative !important;
}
.banner-left h1::after,
.banner-left h3::after {
display: none !important;
}
.hero-title-text {
display: inline-block !important;
width: auto !important;
white-space: nowrap !important;
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
font-family: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
line-height: inherit !important;
}
.hero-title-text::after {
display: block !important;
content: "" !important;
width: 100% !important;
height: 4px !important;
background: var(--form-blue, #2379b9) !important;
margin-top: 10px !important;
}
.banner-section .banner-left p {
display: block !important;
font-size: clamp(23px, 2.4vw, 34px) !important;
line-height: 1.3 !important;
color: #555 !important;
font-weight: 300 !important;
font-family: 'PT Sans', sans-serif !important;
margin: 20px auto 8px !important;
padding: 0 !important;
max-width: none !important;
width: 100% !important;
text-align: center !important;
transform: none !important;
letter-spacing: 0px !important;
}
.banner-section .banner-left a {
display: inline-block !important;
font-size: 15px !important;
font-weight: 800 !important;
color: #fff !important;
background-color: var(--form-blue, #2379b9) !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
padding: 18px 36px !important;
border-radius: 999px !important;
border: 1px solid #fff !important;
margin: 20px auto 0 !important;
min-width: 278px !important;
max-width: 278px !important;
text-align: center !important;
text-decoration: none !important;
transform: none !important;
transition: background-color 0.2s, color 0.2s, border-color 0.2s !important;
}
/* Inverted hover state — applies ONLY while the cursor is over the button.
We deliberately do NOT use :focus or :focus-visible here. Both stick after
click + tab navigation: when the user clicks Book Appointment, opens Jane
in a new tab, then returns via Cmd+Tab, Chrome flips input modality back
to "keyboard" and :focus-visible re-matches — leaving the button stuck
white. :hover only matches when the cursor is physically over the element,
which is the desired behavior. */
.banner-section .banner-left a:hover {
background-color: #fff !important;
color: var(--form-blue, #2379b9) !important;
border-color: var(--form-blue, #2379b9) !important;
}
/* Keyboard accessibility — a separate outline ring instead of the inverted
color swap. Doesn't trigger on mouse focus + survives tab return. */
.banner-section .banner-left a:focus-visible {
outline: 3px solid #fff !important;
outline-offset: 3px !important;
}
/* ============================================================
MOBILE LOCKED — final mobile version, signed off 2026-05-05.
Tag: mobile-final-v1 (commit on blog-editorial-redesign).
Tablet (768-991) lives in its own block further down — Tyler
wanted tablet to stay close to desktop except for the header,
which mimics mobile. Don't extend this mobile block above
767px without explicit ask; tablet handles itself separately.
DO NOT modify, simplify, or "clean up" any rule inside this
@media (max-width: 767px) block without explicit Tyler/Kasen
sign-off. Every rule below is the result of an iteration the
client asked for; "obvious" tweaks (bumping a font size,
adjusting padding by a few px, switching a color, etc.) WILL
regress the approved mobile design.
Rules of engagement for future tablet / desktop work:
- Tablet/desktop changes must use their own breakpoints
(@media (min-width: 768px), etc.). Never overlap into
<=767px.
- When adding new mobile rules to this block, append at the
bottom. Don't reorder or refactor existing selectors —
specificity + cascade order have been deliberately tuned
against legacy shortcodes.css/style.css.
- If you must change something here, keep the edit minimal,
bump the cache buster (?v=mobileXX in index.html), and
verify on the actual /v0-form-chiropractic-react preview.
The reference contract for "what mobile looks like" is the
commit at tag mobile-final-v1.
============================================================ */
/* Hide decorative hero wave shapes on mobile — per-request cleaner hero */
@media (max-width: 767px) {
.banner-section .banner-shape,
.banner-section .shape-left,
.banner-section .shape-right,
.banner-section .left-shape,
.banner-section .left-shape-blue,
.banner-section .right-shape,
.banner-section .right-shape-blue {
display: none !important;
}
/* Mobile section reorder. Hero -> We are Form (+ stats) -> Clinic
hours / Insurance -> What patients are saying -> Ready to find
your form? -> Meet our team -> Why Choose Form Chiro -> blog
-> walk-ins/book online (mobile-bottom-cta). The two halves of
.department-section get hoisted into the home-stack flex via
display:contents so .departments and .we-are-best can take
different positions in the page. Desktop is unaffected because
this all lives inside the mobile @media. */
.home-stack {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: clip !important;
/* Paint the gaps between sections (especially the band above
.mobile-bottom-cta after the .we-are-best block ends) with
the dark footer color so the negative space reads as part
of the footer instead of a stranded white wall. Sections
inside .home-stack already paint their own backgrounds, so
this only shows in the "between" zones. */
background-color: #15191c !important;
}
/* Paint dark ONLY on the homepage — body bg shows in every
gap (below footer if page is short, between sections, etc.). On
other pages the homepage's .home-stack isn't in the DOM, so the
:has() selector doesn't match and body stays default white.
Header (.header-main) is white, Nav (.ow-navigation) is blue,
Footer (.footer-main) is dark, and .home-stack is dark — all
cover their own areas, so the dark body only ever shows in the
leftover negative space. */
body:has(.home-stack) {
background-color: #15191c !important;
}
/* Bootstrap's .row uses -15px negative margins that work fine in
block flow but inflate flex item intrinsic width (min-width: auto
default), making the home-stack overflow horizontally and the
backgrounds of full-width sections fail to fill the viewport.
Force flex items to ignore intrinsic min width and cap at 100%. */
.home-stack > * {
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
.home-stack > #home-banner { order: 1; }
.home-stack > #counter-section { order: 2; }
.home-stack > #message-borad { order: 3; }
.home-stack > .department-section { display: contents !important; }
.home-stack > .department-section > .departments { order: 4; min-width: 0 !important; max-width: 100% !important; width: 100% !important; }
.home-stack > #call-out { order: 5; }
.home-stack > #team-section { order: 6; }
.home-stack > .department-section > .we-are-best { order: 7; min-width: 0 !important; max-width: 100% !important; width: 100% !important; }
.home-stack > #what-we-do-best { order: 8; }
.home-stack > .latest-news { order: 9; }
.home-stack > .mobile-bottom-cta { order: 10; }
/* Center the wrapped hero title lines on mobile only. The h1 is already
flex-centered, but with two
-separated lines of different widths,
the narrower line was left-aligning within the span's natural width. */
.hero-title-text {
text-align: center !important;
}
/* Mobile middle-header: white box wrapping the logo. Show the full
logo, no clipping. Render image small enough to fit within the
box with a few px of breathing room top + bottom. */
.middle-header {
min-height: 0 !important;
height: 108px !important;
overflow: visible !important;
transform: none !important;
padding: 0 !important;
}
/* Match the outer .header-main height so there's no extra white
sliver below the logo before the blue navigation. The base rule
(line 45) sets min-height: 128px which leaves dead space on
mobile where only the .middle-header renders. */
.header-main {
min-height: 108px !important;
}
.middle-header .container,
.middle-header .container > .row {
height: 108px !important;
}
.middle-header .container > .row > :not(.logo-block) {
display: none !important;
}
.middle-header .logo-block {
float: none !important;
width: 100% !important;
height: 108px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
.middle-header .logo-block a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 108px !important;
line-height: 0 !important;
}
.middle-header .logo-block img {
display: block !important;
margin: 0 !important;
width: 288px !important;
height: 96px !important;
max-width: none !important;
max-height: none !important;
transform: translateY(-4px) !important;
}
/* Nav strip: single flat darker blue (no two-tone split). Layout:
social icons + hamburger CENTERED as one balanced group. */
.ow-navigation::before {
display: none !important;
content: none !important;
}
/* Sticky blue bar. main.jsx renders and
as siblings inside .main-container, so .ow-navigation is NOT a
child of .header-main — it can stick on its own with the body
as its scroll context. -webkit-sticky kept for older Safari. */
.ow-navigation {
background-color: var(--form-blue, #2379b9) !important;
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
z-index: 50 !important;
}
.ow-navigation .container,
.ow-navigation .row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 0 !important;
padding: 6px 12px !important;
min-height: 50px !important;
position: relative !important;
}
/* Home button anchored to the LEFT — mirrors the hamburger's
right-anchored placement so the bar reads symmetrically. */
.nav-mobile-home {
position: absolute !important;
left: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 44px !important;
height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #fff !important;
font-size: 26px !important;
line-height: 1 !important;
text-decoration: none !important;
border-radius: 8px !important;
background-color: rgba(255, 255, 255, 0.14) !important;
transition: background-color 150ms ease !important;
}
.nav-mobile-home > i {
font-size: 26px !important;
line-height: 1 !important;
display: inline-block !important;
}
.nav-mobile-home:hover,
.nav-mobile-home:focus {
background-color: rgba(255, 255, 255, 0.24) !important;
color: #fff !important;
}
.nav-mobile-socials {
display: flex !important;
align-items: center !important;
flex-shrink: 0 !important;
}
/* Social-icon pill — mirrors the desktop "social pill" pattern:
a translucent rounded background containing the icons as a row.
Centered horizontally in the bar; hamburger is anchored separately
on the right. */
.nav-mobile-socials > div {
gap: 2px !important;
background-color: rgba(255, 255, 255, 0.14) !important;
border-radius: 999px !important;
padding: 4px 6px !important;
}
.nav-mobile-socials > div > a {
width: 36px !important;
height: 36px !important;
font-size: 16px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.nav-mobile-socials > div > a:hover,
.nav-mobile-socials > div > a:focus {
background-color: rgba(255, 255, 255, 0.22) !important;
}
.nav-mobile-socials > div > a > svg {
width: 16px !important;
height: 16px !important;
}
/* Hamburger anchored to the right of the bar (not in the centered
group with the social icons). */
.ow-navigation .navbar-header {
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
float: none !important;
width: auto !important;
margin: 0 !important;
}
.ow-navigation .navbar-toggle {
float: none !important;
width: 44px !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-radius: 8px !important;
background-color: rgba(255, 255, 255, 0.14) !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
}
.ow-navigation .navbar-toggle:hover,
.ow-navigation .navbar-toggle:focus,
.ow-navigation .navbar-toggle[aria-expanded="true"] {
background-color: rgba(255, 255, 255, 0.24) !important;
}
.ow-navigation .navbar-toggle .icon-bar {
background-color: #fff !important;
width: 22px !important;
height: 2px !important;
margin: 0 !important;
border-radius: 1px !important;
display: block !important;
}
.ow-navigation .navbar-toggle .icon-bar + .icon-bar {
margin-top: 0 !important;
}
/* === Mobile polish, professional pass === */
/* 1. Hamburger dropdown menu: positioned absolutely below the nav
bar so the bar's flex row stays a single line. The .navbar-collapse
positions itself relative to .ow-navigation (which is sticky and
therefore establishes its own positioning context — no need for
an explicit position: relative override here, and adding one
would override the position: sticky defined earlier and break
the sticky behavior). */
.ow-navigation .navbar-collapse {
position: absolute !important;
/* Anchor the dropdown beneath .ow-navigation. The nav has
position: sticky which establishes a positioning context;
top: 100% targets the bottom edge. Add a small margin-top
so the dropdown clearly appears AFTER the bottom of the
blue header instead of bleeding into it. */
top: 100% !important;
margin-top: 6px !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
background-color: var(--form-blue, #1e669e) !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
z-index: 100 !important;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
/* Force single-column layout in every state — display: block on
the flex container AND flex-direction: column belt-and-braces
so the .navbar-left-group / .navbar-right-group ULs never
briefly render side-by-side during the open transition. */
flex-direction: column !important;
}
.ow-navigation .navbar-collapse.collapse:not(.in):not(.collapsing) {
display: none !important;
}
.ow-navigation .navbar-collapse.collapse.in,
.ow-navigation .navbar-collapse.collapsing {
display: block !important;
}
.ow-navigation .navbar-collapse > .nav.navbar-nav,
.ow-navigation .navbar-collapse > .navbar-left-group,
.ow-navigation .navbar-collapse > .navbar-right-group {
display: block !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
gap: 0 !important;
float: none !important;
}
.ow-navigation .navbar-collapse > .nav.navbar-nav > li {
display: block !important;
width: 100% !important;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ow-navigation .navbar-collapse > .nav.navbar-nav > li > a {
display: block !important;
padding: 16px 20px !important;
font-size: 14px !important;
color: #fff !important;
text-align: left !important;
}
.ow-navigation .navbar-collapse > .nav.navbar-nav > li > a:hover,
.ow-navigation .navbar-collapse > .nav.navbar-nav > li > a:focus {
background-color: rgba(255, 255, 255, 0.08) !important;
}
.ow-navigation .navbar-collapse > .nav.navbar-nav > li.active > a:before,
.ow-navigation .navbar-collapse > .nav.navbar-nav > li:hover > a:before {
display: none !important;
}
/* 3. Hero: tighten the wasted vertical space. The h1 was floating
at y=466 on a 704px-tall hero. Bring the content up. */
/* Hero: lock height to a real pixel value computed from
window.innerHeight at load time (set as --app-vh by main.jsx).
This is immune to the iOS URL-bar collapse-on-scroll because
the JS listener intentionally ONLY fires on orientationchange,
not on scroll/resize. svh fallback for the brief moment before
JS sets --app-vh, and for non-JS environments.
Asymmetric padding (more on the bottom) biases the
flex-centered content visually upward — content sits in the
upper-middle of the hero rather than dead-center. */
.home-banner,
.banner-section {
min-height: calc(var(--app-vh, 100svh) - 164px) !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
padding: 0 0 10vh !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
.home-banner .container,
.banner-section .container {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
.home-banner .container > .row,
.banner-section .container > .row {
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.banner-section .banner-left {
width: 100% !important;
max-width: 100% !important;
padding: 56px 20px 16px !important;
margin: 0 !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.banner-left h1 {
font-size: clamp(50px, 12.5vw, 60px) !important;
line-height: 0.95 !important;
margin: 0 0 20px !important;
width: 100% !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.hero-title-text {
text-align: center !important;
display: inline-block !important;
}
.banner-section .banner-left p {
font-size: 25px !important;
line-height: 1.35 !important;
margin: 0 auto 26px !important;
max-width: 28ch !important;
text-align: center !important;
width: 100% !important;
}
.banner-section .banner-left a {
margin: 0 auto !important;
}
/* Hide decorative wave shapes already handled above; also drop the
hero bg image underlay since the right-column headshot is hidden
on mobile and the underlay leaves an awkward gray block. */
.banner-section .banner-bg {
display: none !important;
}
/* 4. Hide the entire homepage "Our Services" section on mobile.
It pushed the rest of the content way down the page and the
services grid is redundant with the dedicated /services page
linked from the nav. */
#what-we-do-best,
.what-we-do-best {
display: none !important;
}
/* 5. Service blocks: 2-column grid instead of 1-column stack.
Compresses 9 blocks from ~2,250px to ~750px of scroll. */
.what-we-do-right .what-we-do-block {
min-height: 0 !important;
}
.what-we-do-right > .col-md-4 {
float: left !important;
width: 50% !important;
}
.what-we-do-right > .col-md-4 .what-we-do-block {
padding: 18px 12px !important;
}
.what-we-do-right .what-we-do-block-content h5 {
font-size: 15px !important;
margin: 8px 0 4px !important;
}
.what-we-do-right .what-we-do-block-content p {
font-size: 13px !important;
line-height: 1.4 !important;
}
/* 6. Hide the "+ + +" decorative subtitle on section headers. Looks
like an afterthought artifact on mobile — was meant for a wider
layout. */
.section-header > .section-header-sub,
.section-header h3 + p:has(+ *) {
/* placeholder; real selector below */
}
.section-header h3 ~ .plus-divider,
.section-header > p:first-of-type span {
display: none !important;
}
/* The actual decorative + symbols come from .section-header h3:after
or a sibling — neutralize at this breakpoint. */
.section-header h3:after,
.section-header h3:before {
display: none !important;
}
/* 7. Footer service-link tap targets */
.footer-services .footer-service {
padding: 10px 12px !important;
font-size: 14px !important;
line-height: 1.3 !important;
}
.footer-services-cta {
padding: 12px 0 !important;
font-size: 14px !important;
display: inline-block !important;
}
.bottom-footer p,
.bottom-footer a {
font-size: 13px !important;
padding: 6px 0 !important;
}
/* Add a clear bottom gap below "View All Staff" so the team section
doesn't run flush into "Why Choose Form Chiropractic". */
.team-section {
padding-top: 24px !important;
padding-bottom: 56px !important;
}
/* Team display order on mobile: Tyler (Chiropractor) first, then
Jenn (Acupuncturist), then Misty (Office Manager). The DOM order
in App.jsx is Jenn / Tyler / Misty, so use flex `order` to
rearrange visually without changing markup. */
.team-carousel {
display: flex !important;
flex-direction: column !important;
}
.team-carousel > .team-type:nth-child(1) { order: 2 !important; } /* Jenn */
.team-carousel > .team-type:nth-child(2) { order: 1 !important; } /* Tyler */
.team-carousel > .team-type:nth-child(3) { order: 3 !important; } /* Misty */
/* Team cards: image and caption share a fixed-height container so
their bottoms align perfectly. Image is absolutely positioned to
fill the container; caption is absolutely positioned at bottom. */
.team-section .team-type,
.team-carousel .team-type {
position: relative !important;
width: 320px !important;
max-width: 90% !important;
height: 400px !important;
margin: 0 auto 14px !important;
overflow: hidden !important;
text-align: center !important;
}
.team-section .team-type img,
.team-carousel .team-type img {
display: block !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: cover !important;
object-position: center top !important;
margin: 0 !important;
}
/* Blue caption box pinned to bottom edge of the same container so
its bottom is flush with the image's bottom. */
.team-section .team-type .member-content,
.team-carousel .team-type .member-content {
display: block !important;
position: absolute !important;
opacity: 1 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 14px 18px 16px !important;
box-sizing: border-box !important;
text-align: center !important;
}
/* Stack name + title vertically without the desktop's "icons floated
to the right" layout. */
.team-section .team-type .member-name,
.team-carousel .team-type .member-name {
float: none !important;
clear: none !important;
width: 100% !important;
padding-right: 0 !important;
text-align: center !important;
margin-bottom: 10px !important;
}
.team-section .team-type .member-name h6,
.team-carousel .team-type .member-name h6 {
margin-bottom: 4px !important;
}
.team-section .team-type .member-name p,
.team-carousel .team-type .member-name p {
display: block !important;
margin: 0 !important;
font-size: 13px !important;
opacity: 0.9 !important;
}
.team-section .team-type .member-contact,
.team-carousel .team-type .member-contact {
position: relative !important;
right: auto !important;
bottom: auto !important;
text-align: center !important;
display: block !important;
}
/* === Mobile-only color overrides ===
The codebase brand color is var(--form-blue, #2379b9) globally, but the actual logo
blue measured from form-logo.webp pixels is #2878bc. On mobile we
want every blue surface to match the logo exactly. Desktop is
intentionally left at var(--form-blue, #2379b9) so this doesn't ripple beyond mobile. */
.ow-navigation {
background-color: #2878bc !important;
}
.banner-section .banner-left a {
background-color: #2878bc !important;
}
/* On touch devices, :focus sticks after tap and the inverted hover
state stays applied. Force the same look as default for hover/
focus/active states so navigating away and back doesn't strand
the button in the white-on-blue inverted state. */
.banner-section .banner-left a:hover,
.banner-section .banner-left a:focus,
.banner-section .banner-left a:focus-visible,
.banner-section .banner-left a:active {
background-color: #2878bc !important;
color: #fff !important;
border-color: #fff !important;
}
.hero-title-text::after {
background: #2878bc !important;
height: 2px !important;
width: 100% !important;
margin: 12px auto 0 !important;
}
/* Hero CTA — proportional pill that doesn't dominate but reads
confidently on the hero. */
.banner-section .banner-left a,
.call-out .call-out-content a {
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 1.3px !important;
padding: 13px 32px !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
border: 1px solid #fff !important;
background-color: #2878bc !important;
border-radius: 999px !important;
margin-top: 22px !important;
}
/* Ready to Find Your Form? Book Now -> white pill, brand-blue
text. Same dimensions as the hero CTA, only the colors flip. */
.call-out .call-out-content a {
background-color: #fff !important;
color: #2878bc !important;
border-color: #fff !important;
}
/* APPENDED 2026-05-05 (post-lockdown bugfix): on touch devices,
:focus sticks after returning from an external tab (e.g. Jane
app) and the prior inverted :hover/:focus rule was stranding
the hero CTA in the white-on-blue state. Pin :hover/:focus/
:focus-visible to the DEFAULT look so return navigation never
leaves the button looking pressed. Tap feedback now fires only
during :active (the brief moment of touch contact). */
.banner-section .banner-left a:hover,
.banner-section .banner-left a:focus,
.banner-section .banner-left a:focus-visible {
background-color: #2878bc !important;
color: #fff !important;
border-color: #2878bc !important;
}
.banner-section .banner-left a:active {
background-color: #fff !important;
color: #2878bc !important;
border-color: #2878bc !important;
}
/* Match "Your Form / Our Focus" hero title to the grey used in the
"Chiropractic" word of the Form Chiropractic logo (#606060). */
.banner-left h1,
.banner-left h1 .hero-title-text {
color: #606060 !important;
}
/* Blue-side (.emargency-case = "We Accept Walk-ins" + "Book Online")
cleanup. Desktop CSS uses asymmetric paddings/margins meant for a
2-column layout that doesn't make sense when stacked on mobile.
NOTE: do NOT touch .opening-hours / .clinic-hours-clean — those
are the white-side blocks the user wants left alone. */
/* Kill the desktop "left half blue" pseudo-element — on mobile the
sections stack vertically, so a 50%-wide left-anchored blue rectangle
leaves the Walk-ins / Book Online content half-on-blue, half-on-white. */
.message-borad::before {
display: none !important;
}
/* Beautiful card layout for Clinic Hours + Insurance Accepted on
mobile. Canvas gets a subtle blue tint so the two white cards
float with soft shadow + brand-blue accent stripe. */
.message-borad {
background-color: #f4f9fd !important;
padding-top: 26px !important;
padding-bottom: 26px !important;
}
.opening-hours {
padding: 0 16px !important;
margin: 0 !important;
}
.opening-hours > .message-block {
background-color: #fff !important;
border-radius: 14px !important;
padding: 22px 22px 20px !important;
margin: 0 0 16px !important;
box-shadow: 0 4px 18px rgba(35, 121, 185, 0.10),
0 1px 3px rgba(0, 0, 0, 0.04) !important;
border-top: 3px solid var(--form-blue, #2379b9) !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
}
.opening-hours > .message-block:last-child {
margin-bottom: 0 !important;
}
/* Heading: icon + label, brand-blue, soft divider below. */
.opening-hours .message-block h3 {
font-size: 19px !important;
font-weight: 700 !important;
color: var(--form-blue, #2379b9) !important;
margin: 0 0 14px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid rgba(35, 121, 185, 0.15) !important;
letter-spacing: 0.3px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.opening-hours .message-block h3::after {
display: none !important;
}
.opening-hours .clinic-hours-clean h3::before {
content: "\f017" !important;
font-family: 'FontAwesome' !important;
font-size: 20px !important;
font-weight: normal !important;
color: var(--form-blue, #2379b9) !important;
}
.opening-hours .message-block:not(.clinic-hours-clean) h3::before {
content: "\f0fa" !important;
font-family: 'FontAwesome' !important;
font-size: 20px !important;
font-weight: normal !important;
color: var(--form-blue, #2379b9) !important;
}
/* Hours rows: refined dividers, balanced day/time. */
.opening-hours .clinic-hours-clean .hours-grid {
margin-top: 2px !important;
}
.opening-hours .clinic-hours-clean .hours-row {
padding: 11px 0 !important;
border-bottom: 1px solid rgba(35, 121, 185, 0.12) !important;
}
.opening-hours .clinic-hours-clean .hours-row:first-child {
padding-top: 4px !important;
}
.opening-hours .clinic-hours-clean .hours-row:last-child {
border-bottom: none !important;
padding-bottom: 2px !important;
}
.opening-hours .clinic-hours-clean .day {
font-size: 14.5px !important;
font-weight: 600 !important;
color: #2879bc !important;
letter-spacing: 0.3px !important;
}
.opening-hours .clinic-hours-clean .time {
font-size: 14.5px !important;
font-weight: 500 !important;
color: #4a4a4a !important;
text-align: right !important;
}
/* Insurance copy: comfortable read, neutral grey. */
.opening-hours .message-block p,
.opening-hours .message-block li {
font-size: 14.5px !important;
line-height: 1.65 !important;
color: #4a4a4a !important;
margin: 0 !important;
}
/* Hide the original Walk-ins / Book Online block on mobile — its
content now lives in .mobile-bottom-cta just above the footer. */
#message-borad > .container > .row > .emargency-case {
display: none !important;
}
/* Show the mobile-only duplicate above the footer and apply the
same blue treatment. */
.mobile-bottom-cta {
display: block !important;
background-color: var(--form-blue, #2379b9) !important;
}
/* Trim the wide white gap between the Walk-ins/Book-Online block
and the footer on mobile. The desktop rules in clinic-hours.css
(1263 + 1334) set margin-top to 120px / 40px on .footer-main —
cap it to nothing on mobile so the Walk-ins block runs directly
into the dark footer. */
.footer-main {
margin-top: 0 !important;
}
/* Paint blue directly on the .emargency-case wrapper so the entire
Walk-ins + Book Online stack sits on a uniform blue background. */
.emargency-case {
background-color: var(--form-blue, #2379b9) !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
.emargency-case > .message-block {
margin: 0 auto !important;
padding: 18px 24px !important;
text-align: center !important;
width: 100% !important;
max-width: none !important;
float: none !important;
display: block !important;
}
/* Tighten gap between Walk-ins and Book Online — drop the second
block's top padding (the first's bottom is enough). */
.mobile-bottom-cta .emargency-case > .message-block + .message-block {
padding-top: 0 !important;
}
/* A little blue breathing room below the Book-Now button before
the dark footer — small but more than zero. */
.mobile-bottom-cta .emargency-case > .message-block:last-child {
padding-bottom: 28px !important;
}
.mobile-bottom-cta,
.mobile-bottom-cta .emargency-case {
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.emargency-case > .message-block + .message-block {
border-top: 0 !important;
}
.emargency-case > .message-block h3 {
margin: 0 0 14px !important;
font-size: 16px !important;
letter-spacing: 1.5px !important;
}
.emargency-case > .message-block h3::after {
left: 50% !important;
transform: translateX(-50%) !important;
}
.emargency-case > .message-block p {
font-size: 15px !important;
line-height: 1.5 !important;
margin: 0 auto 22px !important;
max-width: 32ch !important;
display: block !important;
}
.emargency-case > .message-block a {
font-size: 13px !important;
padding: 12px 26px !important;
letter-spacing: 1.5px !important;
display: inline-block !important;
background-color: #fff !important;
color: var(--form-blue, #2879bc) !important;
border: 2px solid #fff !important;
border-radius: 4px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
transition: background-color 200ms ease, color 200ms ease !important;
}
.emargency-case > .message-block a:hover,
.emargency-case > .message-block a:focus {
background-color: rgba(255, 255, 255, 0.85) !important;
color: var(--form-blue, #2879bc) !important;
}
.emargency-case > .message-block a > i {
font-size: 14px !important;
top: 1px !important;
color: var(--form-blue, #2879bc) !important;
}
/* Book Online has TWO CTAs (phone + Book Now). Render them side-
by-side, centered, with horizontal breathing room between. */
.emargency-case > .message-block a {
margin: 0 6px !important;
display: inline-block !important;
}
.emargency-case > .message-block a + a {
margin-top: 0 !important;
}
/* Insurance footer logos: 2 per row on mobile via grid so the
break between Aetna (row 1) and Humana (row 2) is deterministic
regardless of individual logo widths. Logos keep their natural
desktop sizes (set in the base .insurance-logo rules). */
.insurance-logo-container {
display: grid !important;
grid-template-columns: auto auto !important;
column-gap: 28px !important;
row-gap: 14px !important;
justify-content: center !important;
justify-items: center !important;
align-items: center !important;
}
/* Kill the desktop's monstrous vertical padding on the
Why-Choose / What-Patients sections. Desktop has 120px top +
120-146px bottom which leaves a wall of dead space when these
sections stack on mobile. */
.we-are-best {
padding: 28px 22px !important;
display: block !important;
}
.departments {
padding: 28px 14px !important;
}
.departments .section-header,
.we-are-best .section-header {
padding-left: 0 !important;
padding-right: 0 !important;
}
.departments .panel-body {
padding-left: 14px !important;
padding-right: 14px !important;
}
.departments .panel-heading {
padding-left: 14px !important;
padding-right: 14px !important;
}
/* Center the section headers on mobile so What Patients Are Saying,
Why Choose Form Chiropractic and Form Chiropractic Blog all match
the centered Meet Our Team header. Also center the View All Posts
link inside the Blog section header. */
.departments .section-header,
.we-are-best .section-header,
.latest-news .section-header {
text-align: center !important;
}
/* The h3 has a background-image (.../images/section-seprator.webp)
used as the "plus" decorator below the title. Default position
is `center bottom`, but for .department-section, .latest-news
(and .service-section) it gets overridden to `left bottom` in
shortcodes.css line 368-372. Force center on mobile so the
decorator sits centered under the title. Use a more specific
selector + background shorthand to win the cascade. */
.home-stack .departments .section-header h3,
.home-stack .we-are-best .section-header h3,
.home-stack .latest-news .section-header h3,
.department-section .departments .section-header h3,
.department-section .we-are-best .section-header h3,
.latest-news > .container > .section-header h3 {
background-image: url("../images/section-seprator.webp") !important;
background-repeat: no-repeat !important;
background-position: center bottom !important;
}
.latest-news .section-header > a,
.latest-news .section-header > .Link,
.latest-news .section-header a[href="/blog"] {
display: block !important;
text-align: center !important;
margin-top: 8px !important;
float: none !important;
}
/* Tighten the counter-section ("We are Form / 2,500 patients") so
the gap above it (after the reviews accordion) isn't huge. */
.counter-section {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
/* Center the "View Our Services" CTA inside the .happy-customer
block on mobile. Match the size/font of the hero Book
Appointment CTA (font 14px / weight 700 / 1.3 letter-spacing /
13px 32px padding / 4px radius) — keep the original white bg
and dark text per .happy-customer a styling. */
.happy-customer {
text-align: center !important;
}
.happy-customer a {
display: inline-block !important;
margin: 0 auto !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 1.3px !important;
padding: 13px 32px !important;
border-radius: 4px !important;
}
/* Force the 4 stat boxes into a clean 2x2 flex grid. The original
Bootstrap-3 float layout doesn't equalize box heights — when one
label wraps to 2 lines and an adjacent one is 1 line, the next
row's boxes float up next to the shorter sibling instead of
starting a clean new row. */
.counter-section .counter-app {
display: flex !important;
flex-wrap: wrap !important;
}
.counter-section .counter-app > .col-xs-6 {
width: 50% !important;
float: none !important;
display: flex !important;
}
.counter-section .counter-app .statistics-box {
width: 100% !important;
min-height: 110px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 16px 8px !important;
position: relative !important;
}
/* The legacy desktop CSS positions the icon absolutely with width:
100% which makes it stretch and overlap with the number/label on
a half-width mobile column. Reset to a clean centered icon over
text stack. */
.counter-section .counter-app .statistics-box .statistics-icon {
position: static !important;
display: block !important;
width: auto !important;
margin: 0 0 6px 0 !important;
text-align: center !important;
}
.counter-section .counter-app .statistics-box .statistics-icon img {
width: 44px !important;
height: 44px !important;
object-fit: contain !important;
display: inline-block !important;
}
.counter-section .counter-app .statistics-box .statistics-content {
display: block !important;
padding-left: 0 !important;
text-align: center !important;
}
.counter-section .counter-app .statistics-box .statistics-content > span {
text-align: center !important;
}
/* Unify section title sizing. Default is 22px, but
.departments overrides to 17px and other places vary. Force
all inside .section-header to render at the same size as
"Why Choose Form Chiropractic" (the user-preferred size). */
.section-header h3,
.departments .section-header h3,
.we-are-best .section-header h3,
.latest-news .section-header h3,
.team-section .section-header h3,
.testimonial-section .section-header h3 {
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
}
/* Big Form Chiropractic logo at the bottom of the footer. Uses the
colored transparent form-logo-footer.webp; social row is centered
beneath it. */
.footer-mobile-logo {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 0 18px !important;
background-color: transparent !important;
}
/* Tighten the gap above the logo by killing the bottom margin on
the trailing "And many more including Medicare..." paragraph. */
.footer-main .widget-newsletter > aside > p:last-of-type,
.footer-main .widget-newsletter > p:last-of-type {
margin-bottom: 0 !important;
}
.footer-main .widget-newsletter {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Match the copyright bar background to the rest of the footer
(#15191c) instead of the slightly-darker #111416 default — no
separate black band on mobile. */
.bottom-footer {
padding: 12px 0 16px !important;
margin-top: 0 !important;
background-color: #15191c !important;
}
.footer-mobile-logo img {
display: block !important;
width: 340px !important;
height: auto !important;
max-width: 92% !important;
}
.footer-mobile-socials {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
/* Give the social icons under the footer logo permanent circle
backgrounds so they read as buttons. (Inline styles set
background-color: transparent on the anchors, so we need
!important to override.) */
.footer-mobile-socials > div {
gap: 8px !important;
}
.footer-mobile-socials a {
background-color: rgba(255, 255, 255, 0.14) !important;
}
.footer-mobile-socials a:hover {
background-color: rgba(255, 255, 255, 0.26) !important;
}
/* Hide the duplicate "Stay Connected" social row in the desktop
widget-newsletter on mobile since the new row sits under the logo. */
.footer-main .widget-newsletter .social {
display: none !important;
}
/* Drop the legacy 100px bottom margin on .departments at <767px
(set in shortcodes.css line 2636) — it created a wide white gap
between the reviews accordion and the next mobile section. */
.departments {
margin-bottom: 0 !important;
}
/* Breathing room between "Insurance Accepted" heading and the
logos beneath it in the footer. The base rule in this same
file (line ~1281) sets margin-bottom: 12px !important with
equal specificity but appears AFTER this @media block — losing
the cascade. Bump specificity by tagging .widget-newsletter as
an aside and .widget-title as h3 so this rule wins. */
.footer-main aside.widget-newsletter h3.widget-title {
margin-bottom: 28px !important;
padding-bottom: 10px !important;
}
/* Trim dead space between latest-news (last blog post) and footer. */
.latest-news {
padding-bottom: 24px !important;
}
/* Footer copyright: Privacy Policy on its own line, centered. */
.bottom-footer p > span[aria-hidden="true"] {
display: none !important;
}
.bottom-footer p > a {
display: block !important;
margin: 6px auto 0 !important;
text-align: center !important;
}
}
/* Mobile-bottom-cta (Walk-ins/Book Online above footer) and the
footer mobile logo are mobile-only UI patterns — hide them at
tablet+ so the desktop versions (the .emargency-case inside
#message-borad and the desktop footer .widget-newsletter social
row) take over. */
@media (min-width: 768px) {
.footer-mobile-logo,
.mobile-bottom-cta { display: none !important; }
}
/* The mobile-style nav strip (home button + socials pill) stays
visible at tablet because the tablet header is intentionally
mobile-mirrored. Hide only at >=992 (true desktop). */
@media (min-width: 992px) {
.nav-mobile-socials,
.nav-mobile-home { display: none !important; }
}
/* ============================================================
TABLET (768 - 991) — header only mimics mobile.
Tyler wanted the tablet body to stay close to desktop (Tyler's
headshot still visible in hero, etc.) but the header to look
like the mobile version because the desktop header
(logo + social pill + Book Appointment button) doesn't fit at
tablet width and clips the logo.
============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
/* Hide the desktop top utility strip (social/contact bar). */
.top-header {
display: none !important;
}
/* Force the middle-header to a fixed 108px white box and hide
the right-side desktop content (social pill + Book Appointment
CTA), leaving the centered logo only. */
.header-main {
min-height: 108px !important;
}
.middle-header {
min-height: 0 !important;
height: 108px !important;
padding: 0 !important;
background-color: #fff !important;
}
.middle-header .container,
.middle-header .container > .row {
height: 108px !important;
}
.middle-header .container > .row > :not(.logo-block) {
display: none !important;
}
.middle-header .logo-block {
float: none !important;
width: 100% !important;
height: 108px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.middle-header .logo-block a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 108px !important;
line-height: 0 !important;
}
.middle-header .logo-block img {
display: block !important;
margin: 0 !important;
width: 288px !important;
height: 96px !important;
max-width: none !important;
max-height: none !important;
transform: translateY(-4px) !important;
}
/* Blue nav strip — sticky, single flat blue, with home + socials +
hamburger like the mobile bar. */
.ow-navigation::before {
display: none !important;
content: none !important;
}
.ow-navigation {
background-color: var(--form-blue, #2379b9) !important;
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
z-index: 50 !important;
}
.ow-navigation .container,
.ow-navigation .row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 0 !important;
padding: 6px 12px !important;
min-height: 50px !important;
position: relative !important;
}
.nav-mobile-home {
position: absolute !important;
left: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 44px !important;
height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #fff !important;
font-size: 26px !important;
line-height: 1 !important;
text-decoration: none !important;
border-radius: 8px !important;
background-color: rgba(255, 255, 255, 0.14) !important;
transition: background-color 150ms ease !important;
}
.nav-mobile-home:hover,
.nav-mobile-home:focus {
background-color: rgba(255, 255, 255, 0.22) !important;
}
.nav-mobile-socials {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background-color: rgba(255, 255, 255, 0.14) !important;
border-radius: 999px !important;
padding: 4px 10px !important;
margin: 0 !important;
}
.nav-mobile-socials > div {
gap: 0 !important;
}
.nav-mobile-socials > div > a {
color: #fff !important;
background-color: transparent !important;
}
.nav-mobile-socials > div > a:hover,
.nav-mobile-socials > div > a:focus {
background-color: rgba(255, 255, 255, 0.18) !important;
}
/* Hamburger toggle: white bars, anchored right, vertically
centered via flex so the bars sit dead-center in the button. */
.ow-navigation .navbar-toggle {
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
padding: 0 !important;
width: 44px !important;
height: 40px !important;
border: none !important;
border-radius: 8px !important;
background-color: rgba(255, 255, 255, 0.14) !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
}
.ow-navigation .navbar-toggle .icon-bar {
background-color: #fff !important;
width: 24px !important;
height: 3px !important;
border-radius: 2px !important;
margin: 0 !important;
}
.ow-navigation .navbar-toggle:hover,
.ow-navigation .navbar-toggle:focus {
background-color: rgba(255, 255, 255, 0.22) !important;
}
/* Hide the legacy desktop nav links inside the collapse so when
collapsed the bar is just home + socials + hamburger. */
.ow-navigation #navbar.collapse:not(.in) {
display: none !important;
}
/* Hamburger dropdown panel sits cleanly below the blue strip. */
.ow-navigation .navbar-collapse {
position: absolute !important;
top: 100% !important;
margin-top: 6px !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
background-color: var(--form-blue, #1e669e) !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
z-index: 100 !important;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
flex-direction: column !important;
}
.ow-navigation .navbar-collapse.collapse:not(.in):not(.collapsing) {
display: none !important;
}
.ow-navigation .navbar-collapse.collapse.in,
.ow-navigation .navbar-collapse.collapsing {
display: block !important;
}
/* Force the two ULs (left-group + right-group) to render as block
so their
s stack vertically. Without this override the base
navigation-menu.css sets the ULs to display:flex which crams
items into a single row and clips text. */
.ow-navigation .navbar-collapse > .nav.navbar-nav,
.ow-navigation .navbar-collapse > .navbar-left-group,
.ow-navigation .navbar-collapse > .navbar-right-group {
display: block !important;
flex: 0 0 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
width: 100% !important;
gap: 0 !important;
justify-content: flex-start !important;
}
.ow-navigation .navbar-collapse .nav.navbar-nav > li {
float: none !important;
display: block !important;
width: 100% !important;
flex: none !important;
}
.ow-navigation .navbar-collapse .nav.navbar-nav > li > a {
display: block !important;
color: #fff !important;
padding: 16px 24px !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
font-size: 14px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
white-space: normal !important;
}
.ow-navigation .navbar-collapse .nav.navbar-nav:last-child > li:last-child > a {
border-bottom: none !important;
}
/* === Hero adjustments === */
/* Bring the hero text + button block up — kill the legacy
translate(0, 88px) and trim the .home-banner padding-top so
the title sits visually higher on tablet. */
.home-banner {
padding-top: 36px !important;
min-height: 0 !important;
}
.banner-section .banner-left {
transform: translate(28px, 0) !important;
padding: 70px 20px 60px !important;
}
/* Push Tyler's headshot down a touch so the wave clips a sliver
of his torso silhouette at the bottom (per Tyler's note). */
.banner-section .banner-right img {
transform: translate(40px, 24px) scale(1.05) !important;
}
/* Hide the entire bottom shape band on tablet — no wave, no flat
strip. Hero ends cleanly and We Accept Walk-ins / Clinic Hours
starts right below. */
.banner-section .banner-shape {
display: none !important;
}
/* === Team section: 3-up grid on tablet === */
/* The legacy template renders each .team-type as col-md-12 with
no col-sm-* fallback, so at tablet (768-991) cards stretch
full-width and render as massive headshots. Force a 3-column
grid sized for iPad portrait. */
.team-carousel {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 18px !important;
align-items: stretch !important;
}
.team-section .team-type,
.team-carousel .team-type {
position: relative !important;
width: 100% !important;
max-width: 100% !important;
height: 360px !important;
margin: 0 !important;
overflow: hidden !important;
text-align: center !important;
float: none !important;
}
.team-section .team-type img,
.team-carousel .team-type img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: cover !important;
}
.team-section .team-type .member-content,
.team-carousel .team-type .member-content {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(40, 120, 188, 0.92) !important;
padding: 12px 14px !important;
text-align: left !important;
}
.team-section .team-type .member-name h6,
.team-carousel .team-type .member-name h6 {
font-size: 14px !important;
margin: 0 !important;
color: #fff !important;
}
.team-section .team-type .member-name p,
.team-carousel .team-type .member-name p {
font-size: 12px !important;
margin: 2px 0 0 !important;
color: rgba(255, 255, 255, 0.85) !important;
}
/* Hide the phone-number link in the Book Online block on tablet —
Book Now button is the only CTA needed there. Multiple
selectors for cascade safety. */
body #message-borad .emargency-case a[href^="tel:"],
body .message-borad .emargency-case a[href^="tel:"],
body .emargency-case .message-block a[href^="tel:"] {
display: none !important;
visibility: hidden !important;
}
/* Insurance logos: 2-up grid on tablet so BCBS+Aetna sit on top
row and Humana+Cigna on bottom (same break point as mobile). */
.insurance-logo-container {
display: grid !important;
grid-template-columns: auto auto !important;
column-gap: 36px !important;
row-gap: 18px !important;
justify-content: center !important;
justify-items: center !important;
align-items: center !important;
margin-top: 24px !important;
}
/* === Kill dead space between sections on tablet ===
Desktop CSS uses 120px+ vertical padding on these blocks which
leaves huge empty bands at tablet width. Tighten to ~48px each
side; matches the proportion mobile already uses. */
.we-are-best {
padding: 48px 36px !important;
}
.departments {
padding: 48px 36px !important;
}
.team-section {
padding: 48px 0 !important;
}
.counter-section {
padding: 48px 0 !important;
}
.latest-news {
padding: 48px 0 !important;
}
#message-borad,
.message-borad {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.call-out {
padding: 40px 20px !important;
}
/* === Counter section ("We are Form" + 4 stats) ===
Desktop layout uses absolute-positioned icons + floats that
collapse weirdly at tablet width. Force a clean 2x2 flex grid
with centered icon-over-text stack — same pattern as mobile. */
.counter-section .container {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 24px !important;
}
.counter-section .container > .col-md-6 {
width: 50% !important;
float: none !important;
}
.happy-customer {
text-align: left !important;
padding: 0 12px !important;
}
.happy-customer h3 {
font-size: 26px !important;
line-height: 1.2 !important;
letter-spacing: 1px !important;
margin-bottom: 16px !important;
}
.happy-customer p {
font-size: 17px !important;
line-height: 1.55 !important;
letter-spacing: 0.4px !important;
padding-right: 0 !important;
margin-top: 12px !important;
margin-bottom: 24px !important;
display: block !important;
}
.counter-section .counter-app {
display: flex !important;
flex-wrap: wrap !important;
}
.counter-section .counter-app > .col-xs-6,
.counter-section .counter-app > .col-sm-6 {
width: 50% !important;
float: none !important;
display: flex !important;
padding: 0 !important;
}
.counter-section .counter-app .statistics-box {
width: 100% !important;
min-height: 130px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 18px 8px !important;
position: relative !important;
}
.counter-section .counter-app .statistics-box .statistics-icon {
position: static !important;
display: block !important;
width: auto !important;
margin: 0 0 8px 0 !important;
text-align: center !important;
}
.counter-section .counter-app .statistics-box .statistics-icon img {
width: 48px !important;
height: 48px !important;
object-fit: contain !important;
display: inline-block !important;
}
.counter-section .counter-app .statistics-box .statistics-content {
display: block !important;
padding-left: 0 !important;
text-align: center !important;
}
.counter-section .counter-app .statistics-box .statistics-content > span {
text-align: center !important;
}
/* === Align row-2 titles (Book Online / Insurance Accepted) ===
Walk-ins (h3+p+a) is shorter than Clinic Hours (h3 + 4 hours-rows)
so Book Online ends up higher than Insurance Accepted. Equalize
the first message-block in each column with min-height. */
.emargency-case > .message-block:first-child,
.opening-hours > .message-block:first-child {
min-height: 230px !important;
}
/* What-We-Do-Best left image: legacy template only has col-md-4
(no col-sm-* fallback), so on tablet the image stacks full-width
and renders at its full natural height (~1000px). Cap rendered
height and crop with object-fit so resolution is preserved. */
.what-we-do-best .what-we-do-left {
max-height: 320px !important;
overflow: hidden !important;
}
.what-we-do-best .what-we-do-left img {
width: 100% !important;
height: 320px !important;
object-fit: cover !important;
object-position: center 35% !important;
}
}
.clinic-hours-clean .hours-grid {
margin-top: 0;
}
.clinic-hours-clean .hours-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.clinic-hours-clean .hours-row:first-child {
padding-top: 0;
}
.clinic-hours-clean .hours-row:last-child {
border-bottom: none;
}
.opening-hours .clinic-hours-clean .day {
font-size: 15px;
font-weight: 600;
color: var(--form-blue, #2379b9) !important;
letter-spacing: 0.5px;
}
.opening-hours .clinic-hours-clean .time {
font-size: 14px;
font-weight: 400;
color: var(--form-blue, #2379b9) !important;
text-align: right;
line-height: 1.4;
}
/* Hide the old ul style if it exists */
.clinic-hours-clean ul {
display: none;
}
/* Footer Hours Styling */
.footer-hours-clean .hours-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-hours-clean .hours-row:last-child {
border-bottom: none;
}
.footer-hours-clean .day {
font-size: 13px;
font-weight: 600;
color: #fff;
letter-spacing: 0.3px;
}
.footer-hours-clean .time {
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
text-align: right;
line-height: 1.4;
}
/* Footer Services Grid Styling */
.services-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 20px;
margin-top: 20px;
}
.services-grid .service-item {
font-size: 13px;
color: rgba(255, 255, 255, 0.8);
padding: 8px 0;
position: relative;
padding-left: 12px;
line-height: 1.4;
}
.services-grid .service-item:before {
content: "›";
position: absolute;
left: 0;
color: var(--form-blue, #2379b9);
font-size: 16px;
font-weight: bold;
}
/* ============================================================
Homepage "Recent Tips & News" — card redesign (2026-04-21)
Clean vertical stack: image on top, content below.
Kills the legacy "staircase" layout from shortcodes.css.
Cards are forced to identical dimensions regardless of content.
============================================================ */
.latest-news .row {
display: flex !important;
flex-wrap: wrap;
align-items: stretch;
}
.latest-news article {
min-height: 0 !important;
padding: 0 15px !important;
margin-top: 45px !important;
margin-bottom: 30px !important;
display: flex !important;
flex-direction: column;
float: none !important;
position: relative;
}
/* Stretched link — clicking anywhere on the card navigates to the post.
The cover's element's ::after is absolute-positioned to cover the
entire article, on top of everything else clickable within it. */
.latest-news article .entry-cover > a::after {
content: "";
position: absolute;
top: 0;
left: -15px;
right: -15px;
bottom: -30px;
z-index: 2;
}
.latest-news article .entry-title a,
.latest-news article .post-meta a {
position: relative;
z-index: 3;
}
.latest-news .entry-header {
padding: 0 !important;
position: relative;
}
.latest-news .entry-header::before {
display: none !important;
content: none !important;
}
.latest-news .entry-cover {
position: relative !important;
overflow: hidden !important;
padding-top: 56.25% !important; /* 16:9 */
margin-right: 0 !important;
border-radius: 8px 8px 0 0;
}
.latest-news .entry-cover img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
box-shadow: none !important;
}
/* Content block — white card, fills remaining flex space equally */
.latest-news .entry-content {
background-color: #fff !important;
background: #fff !important;
color: #2d3748 !important;
padding: 24px 28px 28px !important;
margin-left: 0 !important;
min-height: 0 !important;
border-radius: 0 0 8px 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
gap: 12px;
flex: 1 1 auto;
}
/* Title — reserves 3 lines always so short titles don't collapse the card */
.latest-news .entry-title,
.latest-news .entry-title a {
font-family: 'Montserrat', sans-serif !important;
font-size: clamp(20px, 2vw, 26px) !important;
font-weight: 700 !important;
color: var(--form-blue, #2379b9) !important;
text-transform: none !important;
letter-spacing: -0.005em !important;
line-height: 1.25 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
top: 0 !important;
position: static !important;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: calc(1.25em * 3);
min-height: calc(1.25em * 3) !important;
}
.latest-news .entry-title a:hover {
color: var(--form-blue, #1e669e) !important;
text-decoration: none;
}
/* Meta line — small uppercase, fixed single-line height */
.latest-news .entry-content .post-meta,
.latest-news .post-meta,
.latest-news .post-meta .post-date,
.latest-news .post-meta .post-admin {
color: #5a6478 !important;
opacity: 1 !important;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
margin: 0 !important;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Excerpt — reserves 3 lines always; ellipsis appears when text overflows */
.latest-news .entry-content p {
color: #4a5568 !important;
font-family: 'PT Sans', sans-serif !important;
font-size: 15px !important;
line-height: 1.6 !important;
margin: 0 !important;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: calc(1.6em * 3);
}
/* Hide old ul list styling */
.widget-links ul {
display: none;
}
/* Footer Insurance Logo Styling */
.footer-main .widget-newsletter .widget-title {
margin-bottom: 12px !important;
padding-bottom: 10px !important;
}
.insurance-logo-container {
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.insurance-logo {
width: 110px;
height: auto;
opacity: 0.9;
}
.insurance-logo[src*="bcbs"] { width: 100px; }
.insurance-logo[src*="humana"] { width: 125px; }
.insurance-logo[src*="cigna"] { width: 140px; }
/* Footer contact icons — unified styling */
.contact-details .detail-box {
background-color: var(--form-blue, #2379b9) !important;
}
.contact-details .detail-box i {
background-color: var(--form-blue, #2379b9) !important;
border-bottom: none !important;
}
/* Gap between last content section and footer */
.footer-main {
margin-top: 120px !important;
}
/* Underline decorators — match width to text above them */
.message-block h3,
.service-block h3,
.we-are-best-block .we-are-best-content h3,
.happy-customer h3 {
display: inline-block !important;
width: auto !important;
}
.message-block h3::after,
.service-block h3::after,
.we-are-best-block .we-are-best-content h3::after,
.happy-customer h3::after {
width: 100% !important;
min-width: unset !important;
}
.footer-main .widget-title {
display: inline-block !important;
width: auto !important;
}
.footer-main .widget-title:before {
width: 100% !important;
}
.section-header h3 {
display: inline-block !important;
width: auto !important;
background-size: auto !important;
}
.page-banner h3 {
display: inline-block !important;
width: auto !important;
}
.page-banner h3:before {
width: 100% !important;
max-width: 100% !important;
}
/* Banner wave shapes — override the CSS polygon fallback with SVG curves
defined inline in App.jsx. CSS-only; the !important wins over any
stale inline style from legacy template JS. */
.left-shape {
-webkit-clip-path: url("#clipPolygon1") !important;
clip-path: url("#clipPolygon1") !important;
}
.left-shape-blue {
-webkit-clip-path: url("#clipPolygon2") !important;
clip-path: url("#clipPolygon2") !important;
}
.right-shape-blue {
-webkit-clip-path: url("#clipPolygon3") !important;
clip-path: url("#clipPolygon3") !important;
}
.right-shape {
-webkit-clip-path: url("#clipPolygon4") !important;
clip-path: url("#clipPolygon4") !important;
}
/* ============================================
FOOTER CONTACT STRIP
Replaces the legacy .contact-details trapezoidal/floating bar with a
clean 3-column grid of click targets (Maps · tel · mailto). The rest
of the footer (services, insurance, social, hours) is untouched.
============================================ */
.footer-main {
margin-top: 40px !important;
}
.footer-main > .container {
max-width: 1170px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
float: none !important;
}
.footer-contact-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
padding: 44px 0 36px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 36px;
width: 100%;
box-sizing: border-box;
}
.footer-contact-block {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
transition: color 180ms ease, transform 180ms ease;
}
.footer-contact-block:hover {
color: #fff;
text-decoration: none;
}
.footer-contact-block:hover .fcb-icon {
background: #4d9ed3;
transform: translateY(-2px);
}
.fcb-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--form-blue, #2379b9);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
transition: background-color 180ms ease, transform 180ms ease;
}
.fcb-icon i { font-size: 20px; color: #fff; }
.fcb-text { display: inline-flex; flex-direction: column; min-width: 0; }
.fcb-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 4px;
}
.fcb-value {
font-size: 13px;
line-height: 1.5;
color: inherit;
word-break: break-word;
}
@media (max-width: 767px) {
.footer-contact-row {
grid-template-columns: 1fr;
gap: 20px;
padding: 12px 0 24px;
}
}
/* === Footer "Our Services" — redo of the legacy services-grid ===
3-column compact link grid for the now-wider middle widget (col-md-6
instead of col-md-4 since we removed the about column). Each item is
a Link to /services for SEO equity + clean hover state. */
.footer-services {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px 18px;
margin-top: 4px;
}
.footer-service {
display: inline-block;
color: rgba(255, 255, 255, 0.78);
font-size: 13px;
line-height: 1.4;
padding: 4px 0;
text-decoration: none;
transition: color 150ms ease, transform 150ms ease;
position: relative;
padding-left: 14px;
}
.footer-service:before {
content: "›";
position: absolute;
left: 0;
top: 4px;
color: var(--form-blue, #2379b9);
font-size: 16px;
font-weight: 700;
transition: transform 150ms ease;
}
.footer-service:hover {
color: #fff;
text-decoration: none;
}
.footer-service:hover:before {
color: #4d9ed3;
transform: translateX(2px);
}
.footer-services-cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 18px;
color: #4d9ed3;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: color 150ms ease;
}
.footer-services-cta:hover { color: #fff; text-decoration: none; }
@media (max-width: 767px) {
.footer-services { grid-template-columns: 1fr 1fr; gap: 4px 14px; }
}
/* ============================================
HERO Z-INDEX ISOLATION
Layering rules, low → high:
1. Doctor image (banner-right) — must sit BEHIND the wave
5. Wave decorations — solid above the image
10. Hero text (banner-left) — always above the wave so the headline
and CTA stay readable at any zoom
The .container is intentionally NOT given a z-index, otherwise it would
create its own stacking context and pin everything inside it as a unit
relative to the wave (defeating the per-column ordering above).
============================================ */
.banner-section {
position: relative !important;
}
.banner-section .banner-left {
position: relative !important;
z-index: 10 !important;
}
.banner-section .banner-right {
position: relative !important;
z-index: 1 !important;
}
/* Make Tyler's hero headshot visually larger WITHOUT changing layout.
Transforms don't trigger reflow — image overflows but .banner-right
has overflow: visible, so no clipping. Translate preserved from template. */
.banner-section .banner-right img {
transform: translate(103px, 20px) scale(1.08) !important;
transform-origin: center center !important;
}
.banner-section .banner-shape {
position: absolute !important;
z-index: 5 !important;
pointer-events: none !important;
}
.banner-section .banner-shape *,
.banner-section .left-shape,
.banner-section .left-shape-blue,
.banner-section .right-shape,
.banner-section .right-shape-blue {
z-index: 5 !important;
pointer-events: none !important;
}
/* Reset the left padding on departments (reviews) panel body now that we don't
render the panel-img — otherwise text is indented 165px into a phantom image slot. */
.departments .panel-body {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Reviews column bg — solid light-blue fill, no image */
.departments {
position: relative;
}
.departments-bg {
left: 0 !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
}
.departments > :not(.departments-bg) {
position: relative;
z-index: 1;
}
/* Google-reviews CTA block below the accordion — inherits the same
horizontal padding as the panel-group so it lines up with review rows.
Uses its own top margin + border so it stays clearly separated from the
bottom review whether collapsed or expanded. */
.departments .reviews-cta {
position: relative;
z-index: 1;
text-align: center;
margin: 40px 20px 0 120px;
padding-top: 24px;
}
.departments .reviews-cta-stars {
font-size: 24px;
letter-spacing: 3px;
color: #f5a623 !important;
line-height: 1;
}
.departments .reviews-cta-meta {
color: #555;
margin-top: 10px;
font-size: 14px;
}
.departments .reviews-cta-meta a {
color: #1e669e;
font-weight: 600;
}
/* Middle-header logo: clickable to home, but not selectable/draggable.
pointer-events:none on the IMG keeps drag/right-click off the image
while letting the parent receive the click. */
.middle-header .logo-block,
.middle-header .logo-block a,
.middle-header .logo-block img {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none;
}
.middle-header .logo-block img {
pointer-events: none;
}
@media (max-width: 1199px) {
.departments .reviews-cta { margin-left: 100px; }
}
@media (max-width: 991px) {
.departments .reviews-cta { margin-left: 50px; margin-right: 50px; }
}
@media (max-width: 767px) {
.departments .reviews-cta { margin-left: 30px; margin-right: 30px; }
}
@media (max-width: 479px) {
.departments .reviews-cta { margin-left: 20px; margin-right: 20px; }
}
/* Page-level CTA buttons — matches the header's Book Appointment pill style.
.cta-button-primary = filled brand blue (Book Appointment)
.cta-button-secondary = outlined brand blue (Call phone) */
.cta-button-primary,
.cta-button-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 220px;
height: 48px;
padding: 0 22px;
box-sizing: border-box;
border-radius: 999px;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none !important;
white-space: nowrap;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
margin-right: 10px;
margin-bottom: 10px;
}
.cta-button-primary {
background: var(--form-blue, #2379b9);
color: #fff !important;
border: 2px solid var(--form-blue, #2379b9);
box-shadow: 0 6px 16px -6px var(--form-blue, #1e669e);
}
.cta-button-primary:hover,
.cta-button-primary:focus {
background: var(--form-blue, #1e669e);
border-color: var(--form-blue, #1e669e);
color: #fff !important;
}
.cta-button-secondary {
background: transparent;
color: var(--form-blue, #2379b9) !important;
border: 2px solid var(--form-blue, #2379b9);
}
.cta-button-secondary:hover,
.cta-button-secondary:focus {
background: var(--form-blue, #2379b9);
color: #fff !important;
}
/* Service detail page title — matches .section-header h3 aesthetic (uppercase, bold, letter-spacing) but bigger and WITHOUT the "+++" separator background image. */
.page-main-title {
font-size: clamp(26px, 3.5vw, 36px);
font-weight: 700;
color: #333;
margin: 0 0 18px;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 1.2;
padding-bottom: 0;
background-image: none;
}
/* ============================================================
WCAG AA color-contrast fixes (Lighthouse audit 2026-04-18)
13 elements identified with < 4.5:1 contrast. Each override
pushes the color to meet AA without breaking visual design.
============================================================ */
/* Service tile + "Why Choose Us" descriptions: #999 → #555 (was 2.76, now ~7.5:1) */
.what-we-do-block-content p,
.we-are-best-content p {
color: #555 !important;
}
/* Restore white subtitle on hover (image overlay background) */
.what-we-do-block:hover .what-we-do-block-content p,
.what-we-do-block:hover p {
color: #fff !important;
}
/* Disable the slide-up animation on icons in the services section.
Keep the rest of the hover state (background image fade, text color). */
.what-we-do-block:hover .what-we-do-block-content i img {
top: 0 !important;
}
/* Blog hero-image backdrop rectangle — template used var(--form-blue, #3a93c8) (off-brand).
Use var(--form-blue, #2098df) so it matches the left side of the nav strip. */
.entry-header:before {
background-color: var(--form-blue, #2098df) !important;
}
/* Team member name/title overlay — always visible, not just on hover. */
.team-section .team-type .member-content,
.team-carousel .team-type .member-content {
opacity: 1 !important;
bottom: 0 !important;
}
/* Stack the 3 staff cards vertically on tablet/mobile (no carousel handles this anymore). */
@media (max-width: 991px) {
.team-carousel {
flex-direction: column !important;
gap: 20px !important;
}
.team-carousel > div {
flex: none !important;
}
.team-carousel .team-type .member-content {
max-width: 100% !important;
}
}
.team-section .team-type .member-name,
.team-carousel .team-type .member-name {
opacity: 1 !important;
padding-right: 0 !important;
}
/* Hide the phone/email icons inside the team cards */
.team-section .team-type .member-contact,
.team-carousel .team-type .member-contact {
display: none !important;
}
/* Homepage "Recent Tips & News" post-meta (light blue on brand blue):
#91bcdc → #fff (was 2.31, now 5.18:1) */
.latest-news .post-meta,
.latest-news .post-meta .post-date,
.latest-news .post-meta .post-admin,
.latest-news .post-date,
.latest-news .post-admin {
color: #5a6478 !important;
opacity: 0.9;
}
/* Review accordion expanded panel title: darker brand blue so white text
passes WCAG AA 4.5:1 (was var(--form-blue, #3a93c8) → 3.39 fail). */
.departments .panel-group .panel .panel-heading[role="tab"] a[aria-expanded="true"],
.departments .panel-group .panel-default > .panel-heading > .panel-title > a:not(.collapsed) {
background-color: var(--form-blue, #1e669e) !important;
}
/* Review panel body text: #777 → #555 (was 4.18 on #f1f8ff, now 6.9:1) */
.departments .panel-body,
.departments .panel-body p {
color: #555 !important;
}
/* FAQ / ServiceDetail / Acupuncture accordion: collapsed (un-clicked)
question rows were inheriting the pale-blue 1px bottom border from
the expanded-state default rule in shortcodes.css line 1023. Strip
it on .collapsed so closed questions read as plain rows; the border
reappears only when the panel opens (a:not(.collapsed)). The
.departments reviews accordion is excluded so its inter-review
separators stay intact. */
.panel-default > .panel-heading .panel-title > a.collapsed {
border-bottom: none !important;
}
.departments .panel-default > .panel-heading .panel-title > a.collapsed {
border-bottom: 1px solid #dee8f3 !important;
}
/* Footer copyright + Privacy link on dark footer:
#555 → #bdbdbd on #111416 (was 2.48, now ~7.5:1)
Privacy link gets an underline to also signal linkness */
.bottom-footer p,
.bottom-footer p a {
color: #bdbdbd !important;
}
.bottom-footer p a {
text-decoration: underline;
}
.bottom-footer p a:hover,
.bottom-footer p a:focus {
color: #fff !important;
}
/* Desktop-only centered social row above the privacy bar. Hidden on
mobile (which uses .footer-mobile-socials under the centered logo)
and tablet (matches mobile pattern via .footer-mobile-logo). */
.footer-desktop-social {
display: none;
}
@media (min-width: 992px) {
.footer-desktop-social {
display: flex !important;
justify-content: center !important;
padding: 18px 0 22px !important;
}
/* Drop the in-widget "Stay Connected" social row on desktop —
social presence is now the centered bar above privacy. */
.footer-main .widget-newsletter .social {
display: none !important;
}
}
/* ============================================================
Blog — editorial redesign (2026-04-19)
Scopes:
- .single-post → individual article page (/blog/:slug)
- .blog-post-list:not(.single-post) → listing page (/blog)
- .latest-news → homepage preview (UNCHANGED, preserved above)
============================================================ */
/* -- Single post: break out of the blue preview card --------- */
.single-post.blog-post-list {
margin-bottom: 40px;
display: block;
}
.single-post .entry-header {
margin-bottom: 28px;
}
.single-post .entry-cover {
margin: 0 !important;
padding-top: 0 !important;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
position: relative;
}
.single-post .entry-cover img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
position: static;
box-shadow: none;
}
.single-post .entry-cover:hover::before,
.single-post .entry-cover:hover::after {
display: none;
content: none;
}
.single-post .entry-content {
background-color: transparent !important;
background: none !important;
color: #2d3748 !important;
padding: 0 !important;
margin-left: 0 !important;
margin-top: 0 !important;
min-height: 0 !important;
max-width: 760px;
}
/* Post title */
.single-post .entry-title {
position: static !important;
top: auto !important;
background: none !important;
font-family: 'Montserrat', sans-serif !important;
font-size: clamp(28px, 4vw, 42px) !important;
font-weight: 700 !important;
color: var(--form-blue, #2379b9) !important;
line-height: 1.2 !important;
margin: 0 0 14px 0 !important;
padding: 0 !important;
text-transform: none !important;
letter-spacing: -0.01em !important;
}
/* Post meta strip */
.single-post .post-meta {
font-family: 'Montserrat', sans-serif;
font-size: 13px;
color: #5a6478 !important;
opacity: 1 !important;
margin-bottom: 32px;
padding-bottom: 20px;
border-bottom: 1px solid #e2e8f0;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.single-post .post-meta a {
color: var(--form-blue, #2379b9);
}
/* Article body */
.single-post .post-body {
font-family: 'PT Sans', sans-serif;
font-size: 18px;
line-height: 1.75;
color: #2d3748;
}
.single-post .post-body p {
color: #2d3748 !important;
margin: 0 0 24px 0;
line-height: 1.75;
font-size: 18px;
display: block;
padding-right: 0;
}
.single-post .post-body > p:first-of-type {
font-size: 20px;
line-height: 1.7;
color: #1a365d;
}
/* Headings — match site's Montserrat header font */
.single-post .post-body h1,
.single-post .post-body h2,
.single-post .post-body h3,
.single-post .post-body h4,
.single-post .post-body h5,
.single-post .post-body h6 {
font-family: 'Montserrat', sans-serif !important;
color: var(--form-blue, #2379b9) !important;
font-weight: 700 !important;
line-height: 1.3 !important;
margin-top: 44px !important;
margin-bottom: 14px !important;
letter-spacing: -0.005em;
background: none !important;
}
.single-post .post-body h2 { font-size: 30px !important; }
.single-post .post-body h3 { font-size: 24px !important; }
.single-post .post-body h4 { font-size: 20px !important; }
/* Lists */
.single-post .post-body ul,
.single-post .post-body ol {
margin: 0 0 24px 0;
padding-left: 26px;
color: #2d3748;
}
.single-post .post-body li {
margin-bottom: 10px;
line-height: 1.75;
color: #2d3748;
}
.single-post .post-body ul li::marker { color: var(--form-blue, #2379b9); }
/* Blockquote callout */
.single-post .post-body blockquote {
border-left: 4px solid var(--form-blue, #2379b9);
padding: 18px 26px;
margin: 32px 0;
background: #f1f8ff;
font-style: italic;
font-size: 19px;
line-height: 1.6;
color: var(--form-blue, #1e669e);
border-radius: 0 6px 6px 0;
}
.single-post .post-body blockquote p {
margin: 0 !important;
color: var(--form-blue, #1e669e) !important;
font-size: 19px !important;
}
/* Embedded images */
.single-post .post-body img {
max-width: 100%;
height: auto;
display: block;
margin: 32px auto;
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
/* Links in body */
.single-post .post-body a {
color: var(--form-blue, #2379b9);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.single-post .post-body a:hover {
color: var(--form-blue, #1e669e);
text-decoration-thickness: 2px;
}
.single-post .post-body strong { font-weight: 700; color: #333; }
.single-post .post-body em { font-style: italic; }
.single-post .post-body hr {
border: none;
border-top: 2px solid #e2e8f0;
margin: 40px 0;
}
/* Code / inline code */
.single-post .post-body code {
background: #f1f5f9;
color: #1a365d;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.92em;
font-family: 'SF Mono', Consolas, monospace;
}
/* -- About-author card (below article) ---------------------- */
.blog-area .about-author {
background: #f1f8ff;
border: 1px solid #cfe4f5;
border-radius: 10px;
padding: 24px;
margin-top: 48px;
display: flex;
align-items: flex-start;
gap: 20px;
box-shadow: 0 2px 8px rgba(var(--form-blue-rgb), 0.06);
}
.blog-area .about-author .author-img {
flex-shrink: 0;
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
margin: 0;
align-self: center;
}
.blog-area .about-author .author-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.blog-area .about-author .author-content {
flex: 1;
min-width: 0;
}
.blog-area .about-author .author-name {
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 700;
color: #1a365d;
margin-bottom: 8px;
}
.blog-area .about-author .author-content p {
color: #4a5568;
line-height: 1.65;
margin: 0 0 14px 0;
font-size: 15px;
}
.blog-area .about-author .author-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin-right: 8px;
border-radius: 50%;
background: #fff;
color: var(--form-blue, #2379b9);
border: 1px solid #cfe4f5;
font-size: 15px;
transition: all 0.15s ease;
text-decoration: none;
}
.blog-area .about-author .author-socials a:hover {
background: var(--form-blue, #2379b9);
color: #fff;
border-color: var(--form-blue, #2379b9);
}
/* -- Blog listing page (/blog) — modern card list ------------ */
.blog-area .blog-post-list:not(.single-post) {
margin-bottom: 40px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.2s ease;
position: relative;
}
/* Stretched link — whole card clickable */
.blog-area .blog-post-list:not(.single-post) .entry-cover > a::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
.blog-area .blog-post-list:not(.single-post) .entry-title a,
.blog-area .blog-post-list:not(.single-post) .post-meta a {
position: relative;
z-index: 3;
}
.blog-area .blog-post-list:not(.single-post):hover {
box-shadow: 0 12px 28px rgba(var(--form-blue-rgb), 0.10);
transform: translateY(-2px);
}
.blog-area .blog-post-list:not(.single-post) .entry-cover {
margin: 0 !important;
padding-top: 0 !important;
border-radius: 0;
}
.blog-area .blog-post-list:not(.single-post) .entry-cover img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
position: static;
box-shadow: none;
}
.blog-area .blog-post-list:not(.single-post) .entry-content {
background: #fff !important;
color: #2d3748 !important;
padding: 24px 28px 28px !important;
margin: 0 !important;
min-height: 0 !important;
max-width: none;
}
.blog-area .blog-post-list:not(.single-post) .entry-title,
.blog-area .blog-post-list:not(.single-post) .entry-title a {
position: static !important;
top: auto !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 24px !important;
font-weight: 700 !important;
color: #1a365d !important;
line-height: 1.3 !important;
margin: 0 0 12px 0 !important;
padding: 0 !important;
text-transform: none !important;
text-decoration: none !important;
background: none !important;
}
.blog-area .blog-post-list:not(.single-post) .entry-title a:hover {
color: var(--form-blue, #2379b9) !important;
}
.blog-area .blog-post-list:not(.single-post) .post-meta {
color: #5a6478 !important;
opacity: 1 !important;
font-size: 12px;
margin-bottom: 14px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
letter-spacing: 0.06em;
font-weight: 600;
}
.blog-area .blog-post-list:not(.single-post) .entry-content p {
color: #4a5568 !important;
font-size: 15.5px;
line-height: 1.65;
padding-right: 0;
display: block;
margin: 0;
}
/* -- Sidebar widgets (shared listing + single post) ---------- */
.widget-area .widget {
margin-bottom: 28px;
padding: 22px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.widget-area .widget-title {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 700;
color: #1a365d;
margin: 0 0 18px 0;
padding-bottom: 10px;
border-bottom: 2px solid var(--form-blue, #2379b9);
text-transform: none;
letter-spacing: 0;
}
.widget-area .widget-search .input-group {
width: 100%;
}
.widget-area .widget-search input.form-control {
border-radius: 6px 0 0 6px;
border: 1px solid #cbd5e0;
height: 40px;
box-shadow: none;
}
.widget-area .widget-search .btn {
border-radius: 0 6px 6px 0;
background: var(--form-blue, #2379b9);
color: #fff;
border: 1px solid var(--form-blue, #2379b9);
height: 40px;
padding: 0 14px;
}
.widget-area .widget-search .btn:hover { background: var(--form-blue, #1e669e); }
/* -- Sidebar author card (vertical "About the Author") -------- */
.widget-area .widget-author-card {
text-align: center;
padding: 28px 22px;
}
.widget-area .widget-author-card .author-card-img {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 16px;
background: #f1f8ff;
border: 3px solid #f1f8ff;
box-shadow: 0 2px 8px rgba(var(--form-blue-rgb), 0.12);
}
.widget-area .widget-author-card .author-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.widget-area .widget-author-card .author-card-name {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 700;
color: #1a365d;
margin: 0 0 10px 0;
}
.widget-area .widget-author-card .author-card-bio {
font-size: 13.5px;
line-height: 1.55;
color: #4a5568;
margin: 0 0 16px 0;
}
.widget-area .widget-author-card .author-card-socials {
display: flex;
justify-content: center;
gap: 10px;
}
.widget-area .widget-author-card .author-card-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: #f1f8ff;
color: var(--form-blue, #2379b9);
font-size: 14px;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.widget-area .widget-author-card .author-card-socials a:hover {
background: var(--form-blue, #2379b9);
color: #fff;
}
.widget-area .recent-post-box {
display: flex;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #e2e8f0;
}
.widget-area .recent-post-box:last-child { border-bottom: none; padding-bottom: 0; }
.widget-area .recent-post-box:first-of-type { padding-top: 0; }
.widget-area .recent-img {
flex-shrink: 0;
width: 72px;
height: 72px;
border-radius: 6px;
overflow: hidden;
margin: 0;
}
.widget-area .recent-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.widget-area .recent-title {
flex: 1;
min-width: 0;
font-size: 14px;
}
.widget-area .recent-title a {
color: #1a365d;
font-weight: 600;
text-decoration: none;
line-height: 1.4;
display: block;
margin-bottom: 6px;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
}
.widget-area .recent-title a:hover { color: var(--form-blue, #2379b9); }
.widget-area .recent-title span {
display: block;
font-size: 11px;
color: #5a6478;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.widget-area .recent-title span i { margin-right: 5px; }
/* Social icons widget */
.widget-area .widget-social-media ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.widget-area .widget-social-media li a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #f1f8ff;
color: var(--form-blue, #2379b9);
border: 1px solid #cfe4f5;
font-size: 16px;
transition: all 0.15s ease;
text-decoration: none;
}
.widget-area .widget-social-media li a:hover {
background: var(--form-blue, #2379b9);
color: #fff;
border-color: var(--form-blue, #2379b9);
}
/* -- Responsive tweaks -------------------------------------- */
@media (max-width: 767px) {
.single-post .entry-title { font-size: 26px !important; }
.single-post .post-body { font-size: 16.5px; }
.single-post .post-body p { font-size: 16.5px; }
.single-post .post-body h2 { font-size: 24px !important; }
.single-post .post-body h3 { font-size: 20px !important; }
.blog-area .about-author {
flex-direction: column;
text-align: center;
}
.blog-area .about-author .author-img {
margin: 0 auto;
}
.blog-area .blog-post-list:not(.single-post) .entry-title,
.blog-area .blog-post-list:not(.single-post) .entry-title a {
font-size: 20px !important;
}
}
/* ============================================================
RELATED POSTS BLOCK
Used by BlogPost (bottom of post) and ServiceDetail (related
articles). New UI — no overlap with locked rules above.
============================================================ */
.related-posts-block {
margin: 60px 0 30px;
padding-top: 40px;
border-top: 2px solid #e5eef5;
}
.related-posts-heading {
font-family: 'Philosopher', serif;
font-size: 26px;
font-weight: 700;
color: #1c2733;
margin: 0 0 28px;
text-transform: capitalize;
letter-spacing: 0.3px;
}
.related-posts-grid {
display: flex;
flex-wrap: wrap;
margin: 0 -12px;
}
.related-post-col {
padding: 0 12px;
margin-bottom: 24px;
}
.related-post-card {
display: block;
height: 100%;
background: #fff;
border: 1px solid #e5eef5;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.related-post-card:hover,
.related-post-card:focus {
box-shadow: 0 8px 22px rgba(35, 121, 185, 0.12);
transform: translateY(-2px);
text-decoration: none;
color: inherit;
}
.related-post-cover {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #f2faff;
}
.related-post-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.related-post-meta {
padding: 18px 18px 22px;
}
.related-post-category {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--form-blue, #2379b9);
margin-bottom: 10px;
}
.related-post-title {
font-family: 'Philosopher', serif;
font-size: 18px;
font-weight: 700;
line-height: 1.35;
color: #1c2733;
margin: 0 0 10px;
}
.related-post-excerpt {
font-family: 'PT Sans', sans-serif;
font-size: 14px;
line-height: 1.55;
color: #4a5a6a;
margin: 0 0 14px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-post-readmore {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.6px;
color: var(--form-blue, #2379b9);
text-transform: uppercase;
}
@media (max-width: 767px) {
.related-posts-block { margin: 40px 0 20px; padding-top: 28px; }
.related-posts-heading { font-size: 22px; margin-bottom: 20px; }
.related-post-col { margin-bottom: 18px; }
}
/* ============================================================
BLOG CATEGORY FILTER (chips + links)
New UI for /blog category filter strip and clickable category
pills inside post-meta. Outside the locked mobile @media block.
============================================================ */
.blog-category-filter {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin: 0 0 32px;
padding-bottom: 24px;
border-bottom: 1px solid #e5eef5;
}
.blog-category-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: #f2faff;
color: #1c2733;
border: 1px solid #d6e7f3;
border-radius: 999px;
padding: 7px 14px;
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.blog-category-chip:hover,
.blog-category-chip:focus {
background: #e0f0fb;
border-color: var(--form-blue, #2379b9);
outline: none;
}
.blog-category-chip.is-active {
background: var(--form-blue, #2379b9);
color: #fff;
border-color: var(--form-blue, #2379b9);
}
.blog-category-chip.is-active .blog-category-count {
color: rgba(255, 255, 255, 0.8);
}
.blog-category-count {
font-size: 11px;
font-weight: 500;
color: #6c8198;
}
.blog-category-heading {
font-family: 'Philosopher', serif;
font-size: 28px;
font-weight: 700;
color: #1c2733;
margin: 0 0 24px;
}
.post-category-link {
color: var(--form-blue, #2379b9);
text-decoration: none;
font-weight: 600;
border-bottom: 1px dotted transparent;
transition: border-color 0.15s ease;
}
.post-category-link:hover,
.post-category-link:focus {
border-bottom-color: var(--form-blue, #2379b9);
text-decoration: none;
color: var(--form-blue, #2379b9);
}
@media (max-width: 767px) {
.blog-category-filter { gap: 6px 8px; margin-bottom: 22px; padding-bottom: 18px; }
.blog-category-chip { font-size: 12px; padding: 6px 11px; }
.blog-category-heading { font-size: 23px; margin-bottom: 18px; }
}
/* ============================================================
FIX: about-author photo overlapping bio on mobile
Legacy shortcodes.css uses position:absolute for .author-img
and padding-left:175px on .author-content. Our flex layout in
the rules above never overrode position, so the photo floated
on top of the bio on narrow screens. Override here.
============================================================ */
.blog-area .about-author,
.blog-area .about-author .author-img,
.blog-area .about-author .author-img img {
position: static !important;
}
.blog-area .about-author .author-content {
padding-left: 0 !important;
}
/* ============================================================
PAGE BANNER hero (BLOG / BLOG POST / SERVICES / GALLERY / etc.)
Default is 350px tall on every viewport. On mobile that
dominates the entire above-the-fold. Shrink to a tight strip
so users see the actual content sooner.
============================================================ */
@media (max-width: 767px) {
.page-banner,
.page-banner.blog-banner,
.page-banner.blog-post-banner,
.page-banner.gallery-banner,
.page-banner.error-banner,
.page-banner.contact-banner,
.page-banner.about-banner,
.page-banner.services-banner,
.page-banner.team-banner,
.page-banner.departments-banner {
height: 180px !important;
max-height: 180px !important;
min-height: 180px !important;
padding: 50px 0 70px !important;
}
.page-banner h1,
.page-banner h3 {
font-size: 26px !important;
padding-bottom: 10px !important;
margin-bottom: 10px !important;
letter-spacing: 1.5px !important;
}
.page-banner p {
font-size: 12px !important;
}
.page-banner .breadcrumb {
margin-top: 8px !important;
margin-bottom: 0 !important;
}
.page-banner .breadcrumb li,
.page-banner .breadcrumb li a {
font-size: 11px !important;
letter-spacing: 0.6px !important;
}
.page-banner .banner-shape {
max-height: 80px !important;
height: 80px !important;
}
}
/* ============================================================
HEADER "Book Appointment" CTA — slide-gradient hover via CSS only
The previous JS approach (onMouseEnter mutating
e.currentTarget.style.backgroundPosition directly) left the
gradient stranded at the hover position after target="_blank"
navigation — React doesn't reconcile direct DOM mutations and
the cursor wasn't on the element when the user returned.
CSS :hover handles return navigation cleanly: the rule simply
doesn't match when the cursor isn't over the button.
============================================================ */
/* :hover is the ONLY trigger for the slide-gradient. :focus-visible is
intentionally absent — it re-matches when the user returns from another
tab via Cmd+Tab (Chrome flips modality back to keyboard) and would leave
the gradient stranded at 100% 0%. :hover only matches with cursor over. */
.header-book-cta:hover {
background-position: 100% 0% !important;
}
.header-book-cta:focus-visible {
outline: 3px solid #fff !important;
outline-offset: 3px !important;
}
/* ============================================================
PAGE BANNER mobile crop — pin to TOP of image
On mobile the 180px-tall banner crops center-of-image by default
(background-position fallback). For /blog the top of the image
has the clean notebook+glasses portion; the center/bottom has
the dark storytelling workbook with heart that washes out the
"BLOG" / breadcrumb text. Pin background-position to top so the
readable portion is what shows on every banner page.
============================================================ */
@media (max-width: 767px) {
.page-banner,
.page-banner.blog-banner,
.page-banner.blog-post-banner,
.page-banner.gallery-banner,
.page-banner.error-banner,
.page-banner.contact-banner,
.page-banner.about-banner,
.page-banner.services-banner,
.page-banner.team-banner,
.page-banner.departments-banner {
background-position: center top !important;
background-size: cover !important;
}
}
/* ============================================================
PAGE BANNER mobile — tighten further (140px instead of 180px)
180px still shows the dark storytelling workbook portion at
the bottom, with HOME > BLOG breadcrumb sitting on top of it
and looking muddled. Shrink to 140px so only the clean
notebook+glasses top portion of the image is visible.
============================================================ */
@media (max-width: 767px) {
.page-banner,
.page-banner.blog-banner,
.page-banner.blog-post-banner,
.page-banner.gallery-banner,
.page-banner.error-banner,
.page-banner.contact-banner,
.page-banner.about-banner,
.page-banner.services-banner,
.page-banner.team-banner,
.page-banner.departments-banner {
height: 140px !important;
max-height: 140px !important;
min-height: 140px !important;
padding: 30px 0 40px !important;
}
.page-banner h1,
.page-banner h3 {
font-size: 22px !important;
padding-bottom: 6px !important;
margin-bottom: 6px !important;
letter-spacing: 1.5px !important;
}
.page-banner p {
font-size: 11px !important;
margin-bottom: 0 !important;
}
.page-banner .breadcrumb {
margin-top: 4px !important;
margin-bottom: 0 !important;
}
.page-banner .breadcrumb li,
.page-banner .breadcrumb li a {
font-size: 10px !important;
letter-spacing: 0.5px !important;
}
.page-banner .banner-shape {
max-height: 50px !important;
height: 50px !important;
}
}
/* ============================================================
PAGE BANNER — shrink on EVERY viewport, not just mobile
The blog page-banner isn't a real hero — there's no
call-to-action there, just a title + breadcrumb. Default
350px on tablet/desktop dominates the page and shows the
dark "Storytelling Workbook" portion of the image behind
the breadcrumb. Trim to 180px globally so only the clean
notebook+glasses top of the image is visible.
Mobile keeps its tighter 140px override from the @media
block above; this is the rule for tablet/desktop.
============================================================ */
.page-banner,
.page-banner.blog-banner,
.page-banner.blog-post-banner,
.page-banner.gallery-banner,
.page-banner.error-banner,
.page-banner.contact-banner,
.page-banner.about-banner,
.page-banner.services-banner,
.page-banner.team-banner,
.page-banner.departments-banner {
height: 180px !important;
max-height: 180px !important;
min-height: 180px !important;
background-position: center top !important;
background-size: cover !important;
padding: 45px 0 55px !important;
}
.page-banner h1,
.page-banner h3 {
font-size: 30px !important;
padding-bottom: 10px !important;
margin-bottom: 12px !important;
}
.page-banner p {
font-size: 14px !important;
margin-bottom: 4px !important;
}
.page-banner .breadcrumb {
margin-top: 6px !important;
margin-bottom: 0 !important;
}
.page-banner .banner-shape {
max-height: 60px !important;
height: 60px !important;
}
/* ============================================================
FIX: blue frame around blog-list cover images on tablet
Legacy shortcodes.css adds .entry-header::before with a blue
background-color positioned absolute (left:186px, right:0,
top:0, bottom:0) — the original template's decorative offset
accent. Plus .entry-header has padding 50/0/60.
In our card layout the image fills the cover area but the
padded strips above/below show the blue ::before, creating
blue frames around the cover image on tablet/desktop.
Kill the ::before on blog list cards + zero the padding.
============================================================ */
.blog-area .blog-post-list:not(.single-post) .entry-header::before,
.blog-area .blog-post-list:not(.single-post) .entry-header:before {
display: none !important;
content: none !important;
background: transparent !important;
}
.blog-area .blog-post-list:not(.single-post) .entry-header {
padding: 0 !important;
margin: 0 !important;
}
/* ============================================================
Mobile page-banner — ZOOM IN on the image so the
"Storytelling Workbook" book title in the lower portion is
cropped out entirely. background-size: 250% auto scales the
image to 2x container width with auto height; combined with
background-position: center top, only the very top of the
image (notebook + glasses + wood) is visible. Banner height
stays at the global 180px — desktop unchanged.
============================================================ */
@media (max-width: 767px) {
.page-banner,
.page-banner.blog-banner,
.page-banner.blog-post-banner,
.page-banner.gallery-banner,
.page-banner.error-banner,
.page-banner.contact-banner,
.page-banner.about-banner,
.page-banner.services-banner,
.page-banner.team-banner,
.page-banner.departments-banner {
background-size: 250% auto !important;
background-position: center top !important;
}
}
/* ============================================================
Blog category filter — collapsed-by-default Categories toggle
"All | [active filter ×] | Categories ▾" by default.
When Categories is clicked, the rest of the chips expand inline.
============================================================ */
.blog-category-toggle {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
.blog-category-toggle .blog-category-toggle-arrow {
transition: transform 0.2s ease;
font-size: 11px;
line-height: 1;
}
.blog-category-toggle.is-open .blog-category-toggle-arrow {
transform: rotate(180deg);
}
.blog-category-list {
display: inline-flex;
flex-wrap: wrap;
gap: 8px 10px;
width: 100%;
margin-top: 8px;
padding-top: 12px;
border-top: 1px dashed #d6e7f3;
}
@media (max-width: 767px) {
.blog-category-list { gap: 6px 8px; margin-top: 6px; padding-top: 10px; }
}
/* A11y: team card name/title overlay was rgba(35,121,185,0.92) which
composites to ~#3584bf on white and fails WCAG AA contrast (4.03:1).
Use the brand blue #2379b9 at full opacity — passes 4.65:1 AND
matches the rest of the site's brand color. */
.team-section .team-type .member-content,
.team-carousel .team-type .member-content {
background-color: #2379b9 !important;
}
/* Mobile-only hero background swap. Mobile gets a different KC image
(street-level w/ tall buildings) because Tyler's headshot is hidden
on mobile and the desktop background reads too small/cropped at
<768px viewports. Per Kasen 2026-05-06. */
@media (max-width: 767px) {
.home-banner {
background-image: url("/images/hero-bg-mobile.webp") !important;
background-position: center center !important;
}
}
/* Tap target: "View All Posts" link was ~20px tall — too small for
WCAG 2.5.5 (24px min) and Google's tap-target check. Make the
44px tall via padding without changing the visual position
(negative margin offsets the padding's outward shift). */
.latest-news .section-header a {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
padding: 12px 8px !important;
margin: -12px -8px !important;
}
/* Bump "We are Form" title on desktop (Kasen 2026-05-07).
Default was 15px — too small for the section's importance.
Mobile/tablet keep their existing 26px from earlier rules. */
@media (min-width: 992px) {
.happy-customer h3.block-title {
font-size: 22px !important;
letter-spacing: 1.5px !important;
padding-bottom: 22px !important;
}
/* Round (pill) Book Appointment button on desktop hero — matches
the Book Appointment CTA in the header for consistent brand feel. */
.banner-section .banner-left a {
border-radius: 999px !important;
}
}
/* Tablet: shrink Book Appointment button slightly. Default rule
(line ~146) is 278px wide + 15px font — looks oversized on tablet
where the hero section is more compact. Drop modestly. */
@media (min-width: 768px) and (max-width: 991px) {
.banner-section .banner-left a {
font-size: 13px !important;
padding: 14px 28px !important;
min-width: 240px !important;
max-width: 240px !important;
letter-spacing: 1.3px !important;
border-radius: 999px !important;
}
/* Center title + button in EACH message-borad block on tablet.
Both .emargency-case (blue) and .opening-hours (white) sides.
Zero out the asymmetric padding (padding-right:50 on 1st child,
padding-left:50 on 2nd) so content centers in the actual block,
not in the padded box. */
.message-borad .emargency-case .message-block,
.message-borad .opening-hours .message-block {
text-align: center !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.message-borad .emargency-case .message-block h3,
.message-borad .opening-hours .message-block h3 {
text-align: center !important;
}
.message-borad .emargency-case .message-block h3::after,
.message-borad .opening-hours .message-block h3::after {
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
}
.message-borad .emargency-case .message-block a {
display: inline-block !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Center the in-widget "Stay Connected" h6 + icons on tablet
(in-place — does NOT move the social block elsewhere). */
.footer-main .widget-newsletter .social {
text-align: center !important;
}
.footer-main .widget-newsletter .social > div {
justify-content: center !important;
}
/* Bottom-footer copy: force single line at tablet so © + Privacy
Policy don't wrap to 2 lines. */
.bottom-footer p {
white-space: nowrap !important;
font-size: 12px !important;
}
}
/* Mobile-only hero scroll indicator: clickable chevron-down at bottom
of viewport under the Book Appointment button. Hidden by default;
shown on mobile only via the @media block below. Reset native
button styling. */
.hero-scroll-indicator {
display: none;
background: transparent;
border: none;
padding: 12px;
cursor: pointer;
color: inherit;
-webkit-tap-highlight-color: transparent;
}
.hero-scroll-indicator:hover { opacity: 1 !important; }
.hero-scroll-indicator:active { transform: translateX(-50%) scale(0.92); }
/* Mobile: bump hero overlay opacity higher so the bg image reads
softer on small screens (Tyler's photo is hidden on mobile and the
bg has to carry the whole hero, but at lower opacity it competes
with the headline for attention). */
@media (max-width: 767px) {
.home-banner::before {
opacity: 0.75 !important;
}
/* Scroll indicator: chevron-down centered at bottom of hero */
.hero-scroll-indicator {
display: block !important;
position: absolute !important;
bottom: 18px !important;
left: 50% !important;
transform: translateX(-50%) !important;
color: #fff !important;
font-size: 22px !important;
z-index: 5 !important;
opacity: 0.85 !important;
animation: hero-scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(6px); }
}
/* "We Are Form" copy on mobile: legacy default has line-height 45px
and font-size 35px (overridden to 22px by legacy mobile rule but
45px line-height inherited). Result: huge gaps between lines, hard
to read as a paragraph. Tighten to 17px / 1.55 line-height /
0.4px tracking. */
.happy-customer p {
font-size: 17px !important;
line-height: 1.55 !important;
letter-spacing: 0.4px !important;
margin-top: 12px !important;
margin-bottom: 24px !important;
padding-right: 0 !important;
}
}
/* Reviews accordion icon: chevron-right when collapsed, rotates 90°
to point down when expanded. Clearer affordance than the original
plus icon. Bootstrap toggles .collapsed class on the when
panel collapses; not having .collapsed = expanded. */
.departments .panel-heading a .fa-chevron-right {
transition: transform 250ms ease;
}
.departments .panel-heading a:not(.collapsed) .fa-chevron-right {
transform: rotate(90deg);
}
/* === Desktop: bump + refine the .message-borad section text
(Kasen 2026-05-07). Whole row was ~14px and felt cramped. Make
titles, body, hours grid, and buttons bigger with cleaner spacing.
Keeps the existing layout/placement. */
@media (min-width: 992px) {
.message-borad .message-block h3 {
font-size: 17px !important;
letter-spacing: 1.5px !important;
padding-bottom: 16px !important;
margin-bottom: 24px !important;
}
.message-borad .message-block h3::after {
height: 2px !important;
min-width: 56px !important;
}
.message-borad .message-block p,
.message-borad .message-block li {
font-size: 16px !important;
line-height: 1.65 !important;
}
.message-borad .message-block a {
font-size: 12px !important;
letter-spacing: 1.5px !important;
padding: 13px 22px !important;
border-width: 2px !important;
}
/* Clinic hours grid: bump to 16px, prevent the "Mon, Tue, Thu"
wrap by letting .day take its content width and pushing .time
right via flex. */
.opening-hours .clinic-hours-clean .hours-row {
display: flex !important;
align-items: baseline !important;
gap: 16px !important;
}
.opening-hours .clinic-hours-clean .day {
font-size: 16px !important;
white-space: nowrap !important;
flex: 0 0 auto !important;
}
.opening-hours .clinic-hours-clean .time {
font-size: 16px !important;
margin-left: auto !important;
white-space: nowrap !important;
}
}