/* Spark Ortho rebrand overrides.
Temporary until app.min.css (excluded from this SFTP sync) is reachable and
these rules can be merged into the real source. Selectors are matched to
app.min.css's actual specificity (fetched live from the server, since this
file itself can't be synced) rather than guessed. */
/* --- Header logo: remove the forced 32/9 aspect-ratio box (was squishing the taller Spark logo) --- */
#header {
--nav-logo-aspect-ratio: auto;
}
/* --- Header background + nav text (bg white, text Deep Navy) --- */
#header .utility-nav,
#header .main-nav-wrapper {
background-color: #fff;
color: #2d3663;
}
#header .utility-nav .nav-link {
color: #2d3663;
}
#header .main-nav-wrapper .nav-wrapper .main-nav .navbar-nav>.menu-item .nav-link {
color: #2d3663;
font-size: 14px;
white-space: nowrap;
}
#header .main-nav-wrapper .nav-wrapper .main-nav .navbar-nav>.menu-item {
flex-shrink: 0;
}
#header .nav-container .navbar-nav .dropdown-menu {
border-top: 1px solid #006ba6;
}
/* --- Werner rebrand: old Accent Hot Pink (#ec008c) -> Primary Blue (#006ba6), every remaining instance,
including the "Red" editor button style -- confirmed on the homepage hero ("Transform Your Smile")
that it's used as a primary-CTA-style button in practice, so it folds into Primary Blue like the rest. --- */
a:hover {
color: #006ba6;
}
.wp-block-button.is-style-btn-red .wp-element-button {
background-color: #006ba6;
border-color: #006ba6;
color: #fff;
}
.wp-block-button.is-style-btn-red .wp-element-button:hover,
.wp-block-button.is-style-btn-red .wp-element-button:focus,
.wp-block-button.is-style-btn-red .wp-element-button:active {
background-color: #0056a7;
border-color: #0056a7;
color: #fff;
}
.wp-block-button.is-style-btn-red-outline .wp-element-button {
background-color: transparent;
border-color: #006ba6;
color: #006ba6;
}
.wp-block-button.is-style-btn-red-outline .wp-element-button:active,
.wp-block-button.is-style-btn-red-outline .wp-element-button:focus,
.wp-block-button.is-style-btn-red-outline .wp-element-button:hover {
background-color: #006ba6;
border-color: #006ba6;
color: #fff;
}
#header .nav-container .gtranslate_wrapper .gt_selector:active,
#header .nav-container .gtranslate_wrapper .gt_selector:focus,
#header .nav-container .gtranslate_wrapper .gt_selector:hover {
outline: 1px solid #006ba6;
}
#header .main-nav-wrapper .nav-wrapper .main-nav .navbar-nav>.menu-item:hover>.nav-link {
text-decoration-color: #006ba6;
}
.wp-block-list.is-style-dash li::marker,
.wp-block-list.is-style-dot li::marker,
.wp-block-list.is-style-circle li::marker,
.wp-block-list.is-style-square li::marker {
color: #006ba6;
}
.wp-block-heading.has-accent.has-red-accent-color:before {
background-color: #006ba6;
}
.wp-block-table:focus-within {
outline: 2px solid #006ba6;
outline-offset: 2px;
}
.wp-block-table table:focus {
outline: 2px solid #006ba6;
outline-offset: 2px;
}
.modal-backdrop {
--bs-backdrop-bg: #006ba6;
}
#header .progress-bar-container .progress-bar {
background: #006ba6;
}
.post-type-archive-location .locations-hero .location-search-form button[type=submit] {
background-color: #006ba6;
color: #fff;
}
/* --- Werner rebrand: remaining editor button styles (Default/Primary, Primary Outline, Secondary,
Secondary Outline, Light Blue, Light Blue Outline, Link Secondary) still carry old/unrelated colors
baked into app.min.css (off-white/dark-gray "primary", unrelated light blue #4dbae6 "secondary", etc.) --- */
.wp-block-button.is-style-btn-primary .wp-element-button,
.wp-block-button:not([class*="is-style-"]) .wp-element-button {
background-color: #006ba6;
border-color: #006ba6;
color: #fff;
}
.wp-block-button.is-style-btn-primary .wp-element-button:active,
.wp-block-button.is-style-btn-primary .wp-element-button:focus,
.wp-block-button.is-style-btn-primary .wp-element-button:hover,
.wp-block-button:not([class*="is-style-"]) .wp-element-button:active,
.wp-block-button:not([class*="is-style-"]) .wp-element-button:focus,
.wp-block-button:not([class*="is-style-"]) .wp-element-button:hover {
background-color: #0056a7;
border-color: #0056a7;
color: #fff;
}
.wp-block-button.is-style-btn-primary-outline .wp-element-button {
background-color: transparent;
border-color: #006ba6;
color: #006ba6;
}
.wp-block-button.is-style-btn-primary-outline .wp-element-button:active,
.wp-block-button.is-style-btn-primary-outline .wp-element-button:focus,
.wp-block-button.is-style-btn-primary-outline .wp-element-button:hover {
background-color: #006ba6;
border-color: #006ba6;
color: #fff;
}
.wp-block-button.is-style-btn-secondary .wp-element-button {
background-color: #2d3663;
border-color: #2d3663;
color: #fff;
}
.wp-block-button.is-style-btn-secondary .wp-element-button:active,
.wp-block-button.is-style-btn-secondary .wp-element-button:focus,
.wp-block-button.is-style-btn-secondary .wp-element-button:hover {
background-color: #242b4f;
border-color: #242b4f;
color: #fff;
}
.wp-block-button.is-style-btn-secondary-outline .wp-element-button {
background-color: transparent;
border-color: #2d3663;
color: #212121;
}
.wp-block-button.is-style-btn-secondary-outline .wp-element-button:active,
.wp-block-button.is-style-btn-secondary-outline .wp-element-button:focus,
.wp-block-button.is-style-btn-secondary-outline .wp-element-button:hover {
background-color: #2d3663;
border-color: #2d3663;
color: #fff;
}
.wp-block-button.is-style-btn-light-blue .wp-element-button {
background-color: #cce1ed;
border-color: #cce1ed;
color: #212121;
}
.wp-block-button.is-style-btn-light-blue .wp-element-button:active,
.wp-block-button.is-style-btn-light-blue .wp-element-button:focus,
.wp-block-button.is-style-btn-light-blue .wp-element-button:hover {
background-color: #b8cbd5;
border-color: #b8cbd5;
color: #212121;
}
.wp-block-button.is-style-btn-light-blue-outline .wp-element-button {
background-color: transparent;
border-color: #cce1ed;
color: #212121;
}
.wp-block-button.is-style-btn-light-blue-outline .wp-element-button:active,
.wp-block-button.is-style-btn-light-blue-outline .wp-element-button:focus,
.wp-block-button.is-style-btn-light-blue-outline .wp-element-button:hover {
background-color: #cce1ed;
border-color: #cce1ed;
color: #212121;
}
.wp-block-button.is-style-btn-link-secondary .wp-element-button {
color: #2d3663;
}
/* "Link" styles should never show a button box, even if the block still carries a
leftover inline background-color attribute from before it was switched to this style
(inline styles otherwise beat any class-based rule on specificity). */
.wp-block-button.is-style-btn-link .wp-element-button,
.wp-block-button.is-style-btn-link-secondary .wp-element-button {
background-color: transparent !important;
border-color: transparent !important;
}
/* New "Link White" style, registered in lib/blocks/styles.php -- not part of the
original compiled app.min.css, so it needs its full rule set here rather than just
a color swap. */
.wp-block-button.is-style-btn-link-white .wp-element-button {
background-color: transparent !important;
border-color: transparent !important;
color: #fff;
text-decoration: underline;
padding: 0;
text-wrap: nowrap;
}
.wp-block-button.is-style-btn-link-white .wp-element-button:hover,
.wp-block-button.is-style-btn-link-white .wp-element-button:focus,
.wp-block-button.is-style-btn-link-white .wp-element-button:active {
text-decoration: none;
}
/* --- Footer social icons block (core/social-links) -- force white so the icons read
against the dark navy footer background, regardless of whatever color/preset was
set per-icon in the block's own settings. --- */
#footer .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor,
#footer .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor svg {
color: #fff !important;
fill: #fff !important;
}
/* --- New "Checkmark" list style (core/list block), registered in lib/blocks/styles.php --- */
.wp-block-list.is-style-checkmark {
list-style: none;
padding-left: 0;
}
.wp-block-list.is-style-checkmark li {
position: relative;
padding-left: 1.5em;
}
.wp-block-list.is-style-checkmark li::before {
content: "\2713";
position: absolute;
left: 0;
color: #006ba6;
}
/* --- "Book an Appointment" pill (.menu-button) -> Accent Hot Pink --- */
#header .main-nav-wrapper .nav-wrapper .main-nav .navbar-nav>.menu-item.menu-button .nav-link {
background-color: #006ba6;
border-color: #006ba6;
color: #fff;
}
#header .main-nav-wrapper .nav-wrapper .main-nav .navbar-nav>.menu-item.menu-button .nav-link:hover {
background-color: #0056a7;
border-color: #0056a7;
color: #fff;
}
/* --- "Contact" pill (.contact-button) -> Tertiary Lavender, same pill treatment as .menu-button --- */
#header .main-nav-wrapper .nav-wrapper .main-nav .navbar-nav>.menu-item.contact-button .nav-link {
background-color: #a5a3e0;
color: #fff;
border: 2px solid #a5a3e0;
border-radius: 48px;
padding: 8px 30px;
align-items: center;
justify-content: center;
gap: 20px;
}
#header .main-nav-wrapper .nav-wrapper .main-nav .navbar-nav>.menu-item.contact-button .nav-link:hover {
background-color: #9d8fb0;
border-color: #9d8fb0;
color: #fff;
text-decoration: none;
}
#header .main-nav-wrapper .nav-wrapper .main-nav .navbar-nav>.menu-item.contact-button .nav-link:after {
content: "";
inline-size: 10px;
block-size: 8px;
flex: 0 0 10px;
transform: translateX(0);
transition: transform .4s ease;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center/contain;
}
/* --- Locations page: old green/light-blue/red -> brand colors --- */
.post-type-archive-location .locations-hero {
background: #a5a3e0;
}
.post-type-archive-location .locations-hero .archive-title {
color: #2d3663;
}
.post-type-archive-location .locations-hero .location-search-form button[type=submit]:hover {
background: #0056a7;
}
.post-type-archive-location .locations-hero .btn-use-location:hover {
background-color: #2d3663;
border-color: #2d3663;
color: #fff;
}
.post-type-archive-location .locations-content-wrapper .locations-listings .location-card {
border-color: #006ba6;
}
.post-type-archive-location .locations-content-wrapper .locations-listings .location-card:nth-child(odd) {
border-color: #006ba6;
}
.post-type-archive-location .locations-content-wrapper .locations-listings .location-card:nth-child(2n) {
border-color: #a5a3e0;
}
.post-type-archive-location .locations-content-wrapper .locations-listings .location-card .location-details .location-card-header .location-distance {
color: #006ba6;
background: rgba(0, 107, 166, .1);
}
.post-type-archive-location .locations-content-wrapper .locations-listings .location-card .location-details .location-card-header .location-distance.proximity-distance {
background: #006ba6;
}
.post-type-archive-location .locations-content-wrapper .locations-listings .location-card .location-details .location-services .service-pill {
border-color: #006ba6;
}
.post-type-archive-location .filter-status .active-filters .filter-indicator {
background: rgba(0, 107, 166, .1);
border-color: rgba(0, 107, 166, .3);
}
.post-type-archive-location .filter-status .active-filters .filter-indicator.zip-filter {
background: rgba(0, 107, 166, .1);
border-color: rgba(0, 107, 166, .3);
}
.post-type-archive-location .filter-status .active-filters .filter-indicator.combined-filter {
background: rgba(0, 107, 166, .1);
border-color: rgba(0, 107, 166, .3);
}
/* --- Footer: center images + buttons on mobile only (WP core's own columns-stack breakpoint) --- */
@media (max-width: 781px) {
#footer .wp-block-image {
text-align: center;
}
#footer .wp-block-buttons {
justify-content: center;
}
}
/* --- Team cards: force equal height across a row regardless of 1 vs 2-line names.
.team-card's own height:100% fights the parent flex row's stretch behavior (cross-size
is indefinite in a wrapping flex row), so cards size to their own content instead of
matching their row. Confirmed fixed by live-testing directly in the browser. --- */
.block--team-cards .team-card {
height: auto !important;
align-self: stretch !important;
}
/* --- "has-location-icon" / "has-phone-icon" / "has-hours-icon" utilities: add one of these
classes (via a block's Advanced > Additional CSS Class(es) field) to any paragraph, heading,
list item, or other text block to prepend the matching location-card icon before its text.
Best for short single-line text like an address or phone number. Reuses the exact icon
shapes from lib/locations.php, but as a
`background: currentColor` mask instead of a hardcoded fill/PNG, so the icon always matches
the surrounding text color -- e.g. automatically white in the footer, since footer text is
already forced to off-white, no separate "white version" of the icon needed. */
.has-location-icon,
.has-phone-icon,
.has-hours-icon,
.has-email-icon {
display: flex;
align-items: center;
gap: 10px;
color: inherit !important;
}
.has-location-icon::before,
.has-phone-icon::before,
.has-hours-icon::before,
.has-email-icon::before {
content: "";
display: inline-block;
flex-shrink: 0;
background: currentColor;
}
.has-location-icon::before {
width: 16px;
height: 20px;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.has-phone-icon::before {
width: 18px;
height: 18px;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.has-hours-icon::before {
width: 20px;
height: 22px;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
#header .has-phone-icon {
gap: 4px;
padding: 0;
margin: 0;
}
/* .nav-link's own padding:1rem (needed for click-target size on regular links) pads the
INSIDE of the phone number's link on all sides, including the left -- pushing the number
away from the icon regardless of the gap set above, since gap only affects space between
flex children, not padding inside one of them. Zeroing just the left side here. */
#header .main-nav-wrapper .nav-wrapper .main-nav .navbar-nav > .menu-item.has-phone-icon .nav-link {
padding-left: 0;
}
/* The nav was originally sized for 6 links + 1 CTA button; adding the phone number as an
extra menu item pushes total content past the available width in the ~992-1200px range
(past the mobile breakpoint, but not wide enough yet for the full desktop nav to fit).
Hiding it in just that window avoids overflow without touching link/CTA spacing again. */
@media (min-width: 992px) and (max-width: 1200px) {
#header .has-phone-icon {
display: none;
}
}
/* Testimonials "Swipe" pill control (blocks/testimonials) -- old brand red/navy. */
.navigation-buttons-wrapper {
background: #006ba6;
}
.navigation-buttons-wrapper .drag-text,
.navigation-buttons-wrapper button {
color: #fff;
}
.navigation-buttons-wrapper button:active,
.navigation-buttons-wrapper button:focus {
outline-color: #fff;
}
/* Logos slider: bump logo image size up 10px per request. */
.block--logos[data-layout="slider"] .logos .logo img {
max-height: 310px;
}
/* Logos slider's own "Swipe" pill (blocks/logos) -- same class names as testimonials'
above, but logos.min.css compiles a more specific selector that otherwise wins. */
.block--logos[data-layout="slider"] .logos-navigation .navigation-buttons-wrapper {
background: #006ba6;
}
.block--logos[data-layout="slider"] .logos-navigation .navigation-buttons-wrapper button:active,
.block--logos[data-layout="slider"] .logos-navigation .navigation-buttons-wrapper button:focus {
outline-color: #fff;
}
.has-email-icon::before {
width: 20px;
height: 16px;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
/* --- Doctors archive: hide the "By specialty" filter for now (data/markup left intact,
just visually hidden -- scoped to team-cards so it doesn't affect .filter-bar in the
dentist-cards or resources blocks, which reuse the same class name). --- */
.block--team-cards .filter-bar > .filter:nth-child(1) {
display: none;
}
/* --- Hide the "Scroll to Top" button. A previous attempt commented out a display:none
declaration inside the element's inline style attribute, but a commented-out CSS
declaration is inert -- it doesn't actually hide anything. --- */
.scroll-to-top {
display: none;
}
/* --- 360/Street View embeds: each location page has its own hand-pasted Google Maps
iframe with a hard-coded width="1200" (and inconsistent height -- Bethlehem is 900,
Reading is 700). As a replaced element it ignores its flex-centered parent and
overflows instead of shrinking, so it renders left-aligned and cut off. Targeting the
existing width="1200" attribute applies this everywhere without editing every page's
content or adding a class per instance. height:auto didn't pick up the iframe's own
width/height attributes as an intrinsic ratio (rendered ~150px tall instead), so
aspect-ratio is set explicitly -- safe here since Street View is a live embed that
fills whatever box it's given rather than a static image that would distort. --- */
iframe[width="1200"] {
display: block;
width: 100%;
max-width: 1200px;
height: auto;
aspect-ratio: 4 / 3;
margin: 24px auto 0;
}
/* --- Gravity Forms: checkbox/radio checkmarks disappearing on validation-error fields.
app.min.css's error-state rule (#main .gform_wrapper .gfield_error .ginput_container
input { background: transparent }) was written for text inputs, but its bare `input`
selector also matches checkboxes/radios, and its ID-based specificity beats
.form-check-input:checked -- wiping the checkmark's background-image even though the
input is legitimately checked underneath (confirmed via checked in the DOM with an
empty computed background). Re-applying at matching specificity, reusing Bootstrap's
own --bs-form-check-bg-image variable so checkbox vs radio keep their correct icon. --- */
#main .gform_wrapper .gfield_error .ginput_container input[type="checkbox"]:checked,
#main .gform_wrapper .gfield_error .ginput_container input[type="radio"]:checked {
background-color: #006ba6;
border-color: #006ba6;
background-image: var(--bs-form-check-bg-image);
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
}