/*
* NorCal TMJ & Sleep Apnea — Design Enhancement Layer
* Phase 4 Implementation — injected after Elementor CSS
* Do not modify Elementor source files — all overrides live here.
*/
/* Webfonts — "Modern clinical" pairing: Plus Jakarta Sans (display) + Inter (text).
@import must precede every other rule in the stylesheet. */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
/* ═══════════════════════════════════════════════════════
1. DESIGN TOKENS
═══════════════════════════════════════════════════════ */
:root {
/* Brand palette — refined from original */
--nc-blue: #1a78a0; /* deeper, more authoritative blue */
--nc-blue-dark: #115a78; /* deep hover/active */
--nc-blue-mid: #1d8ab6; /* mid-range for gradients */
--nc-blue-light: #e6f3f9; /* section tint bg */
--nc-blue-xlight: #f0f8fc; /* very light bg alt */
--nc-amber: #d4780f; /* warm CTA — approachable, medical warm */
--nc-amber-dark: #b5650c; /* CTA hover */
--nc-amber-glow: rgba(212,120,15,.20);
/* Neutrals */
--nc-text: #1e2d3d; /* slightly warmer dark */
--nc-text-body: #2d3e4f; /* body text */
--nc-text-muted: #4c5f70; /* muted/meta text — darkened for AA contrast */
--nc-border: #d6e6ef; /* light border */
--nc-border-mid: #b8cfd9; /* slightly stronger border */
--nc-bg: #f8fbfd; /* page bg — very slight tint */
--nc-bg-section: #f0f7fa; /* alt section bg */
--nc-dark: #0d2535; /* footer dark bg */
--nc-dark-accent: #091c29; /* footer bottom bar */
--nc-white: #ffffff;
/* Spacing */
--nc-radius: 8px;
--nc-radius-sm: 5px;
--nc-radius-lg: 12px;
/* Shadows */
--nc-shadow-xs: 0 1px 3px rgba(10,40,60,.08);
--nc-shadow-sm: 0 2px 8px rgba(10,40,60,.10), 0 1px 3px rgba(0,0,0,.05);
--nc-shadow: 0 4px 16px rgba(26,120,160,.13), 0 2px 5px rgba(0,0,0,.06);
--nc-shadow-lg: 0 10px 32px rgba(26,120,160,.18), 0 4px 10px rgba(0,0,0,.08);
--nc-shadow-btn: 0 2px 10px rgba(212,120,15,.30);
--nc-shadow-btn-h:0 5px 18px rgba(212,120,15,.40);
/* Motion */
--nc-ease: cubic-bezier(0.4, 0, 0.2, 1);
--nc-transition: all 0.22s var(--nc-ease);
--nc-transition-slow: all 0.35s var(--nc-ease);
/* Type stacks — new pairing with archived fonts as graceful fallback */
--nc-font-display: "Plus Jakarta Sans", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--nc-font-body: "Inter", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* ═══════════════════════════════════════════════════════
2. ELEMENTOR VARIABLE OVERRIDES (kit-6 = )
═══════════════════════════════════════════════════════ */
.elementor-kit-6 {
--e-global-color-primary: var(--nc-blue) !important;
--e-global-color-accent: var(--nc-blue) !important;
--e-global-color-bce0e94: var(--nc-amber) !important;
--e-global-color-97a658b: var(--nc-amber-dark) !important;
/* Typography — Plus Jakarta Sans (display) / Inter (text).
Overriding the kit variables cascades to every Elementor widget. */
--e-global-typography-primary-font-family: var(--nc-font-display) !important;
--e-global-typography-secondary-font-family: var(--nc-font-display) !important;
--e-global-typography-accent-font-family: var(--nc-font-display) !important;
--e-global-typography-text-font-family: var(--nc-font-body) !important;
}
/* ═══════════════════════════════════════════════════════
3. BASE / GLOBAL
═══════════════════════════════════════════════════════ */
html {
scroll-behavior: smooth;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--nc-text-body);
}
/* Text links — unified blue (exclude buttons, which are also tags) */
.elementor-kit-6 a:not(.elementor-button),
.elementor-widget-text-editor a:not(.elementor-button) {
color: var(--nc-blue) !important;
transition: color 0.15s !important;
text-decoration-color: rgba(26,120,160,.3);
}
.elementor-kit-6 a:not(.elementor-button):hover,
.elementor-widget-text-editor a:not(.elementor-button):hover {
color: var(--nc-blue-dark) !important;
text-decoration-color: var(--nc-blue);
}
/* ── GLOBAL BUTTON COLOR RULE ──────────────────────────────
Elementor buttons render as elements. Set white text
here with high specificity so no link rule can override it. */
.elementor-kit-6 .elementor-button,
.elementor-widget-button .elementor-button {
color: #fff !important;
background-color: var(--nc-blue) !important;
}
/* Shape divider fills — match updated primary */
.elementor-shape-fill {
fill: var(--nc-blue) !important;
}
/* Reduce wave height site-wide (was 110px, feels dated) */
.elementor-shape-bottom svg,
.elementor-shape-top svg {
height: 50px !important;
}
/* ═══════════════════════════════════════════════════════
4. TYPOGRAPHY
═══════════════════════════════════════════════════════ */
.elementor-heading-title {
letter-spacing: -0.018em !important;
line-height: 1.2 !important;
}
/* Section headings — tighter tracking for authority */
h2.elementor-heading-title {
letter-spacing: -0.02em !important;
}
h3.elementor-heading-title {
letter-spacing: -0.01em !important;
}
/* Body text readability — line-height only; no color override (hero text is white) */
.elementor-widget-text-editor,
.elementor-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
line-height: 1.72 !important;
}
/* Fluid hero headline — force white on BOTH variants (the mobile heading
ae010cb otherwise inherits the global brand-blue heading color, which was
unreadable over the photo). */
.elementor-28 .elementor-element-734148a .elementor-heading-title,
.elementor-28 .elementor-element-ae010cb .elementor-heading-title {
color: #fff !important;
font-size: clamp(2rem, 4.2vw, 3.4rem) !important;
line-height: 1.10 !important;
letter-spacing: -0.03em !important;
text-shadow: 0 2px 14px rgba(0,0,0,.40) !important;
}
/* Hero intro paragraph — force readable near-white on BOTH variants (the
mobile text editor 75f3a15 otherwise inherits the dark global body color). */
.elementor-28 .elementor-element-8e0a25c,
.elementor-28 .elementor-element-8e0a25c p,
.elementor-28 .elementor-element-75f3a15,
.elementor-28 .elementor-element-75f3a15 p {
color: rgba(255,255,255,0.94) !important;
text-shadow: 0 1px 8px rgba(0,0,0,.40) !important;
}
/* Section title size — more restrained than current 35px inline style */
.elementor-28 .elementor-element-30666e8 .elementor-heading-title {
font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
}
/* ═══════════════════════════════════════════════════════
5. BUTTONS
═══════════════════════════════════════════════════════ */
/* Global button improvements */
.elementor-button {
border-radius: var(--nc-radius) !important;
letter-spacing: 0.01em !important;
transition: var(--nc-transition) !important;
text-transform: none !important; /* remove UPPERCASE */
font-weight: 600 !important;
}
.elementor-button:active {
transform: translateY(1px) !important;
}
/* Primary amber CTA — header "Request Appointment" */
.elementor-8 .elementor-element-cb994ef .elementor-button {
background-color: var(--nc-amber) !important;
border-color: var(--nc-amber) !important;
color: #fff !important;
box-shadow: var(--nc-shadow-btn) !important;
}
.elementor-8 .elementor-element-cb994ef .elementor-button:hover,
.elementor-8 .elementor-element-cb994ef .elementor-button:focus {
background-color: var(--nc-amber-dark) !important;
border-color: var(--nc-amber-dark) !important;
box-shadow: var(--nc-shadow-btn-h) !important;
transform: translateY(-1px) !important;
}
/* Secondary outline — header phone CTA */
.elementor-8 .elementor-element-8218bbd .elementor-button {
border-color: var(--nc-blue) !important;
color: var(--nc-blue) !important;
background-color: transparent !important;
fill: var(--nc-blue) !important;
}
.elementor-8 .elementor-element-8218bbd .elementor-button:hover,
.elementor-8 .elementor-element-8218bbd .elementor-button:focus {
background-color: var(--nc-blue) !important;
color: #fff !important;
fill: #fff !important;
transform: translateY(-1px) !important;
}
/* Primary CTAs on hero sections → amber (these are "Request an Appointment") */
.elementor-28 .elementor-element-7279dda .elementor-button,
.elementor-28 .elementor-element-ceb5cc2 .elementor-button {
background-color: var(--nc-amber) !important;
border-color: var(--nc-amber) !important;
color: #fff !important;
box-shadow: var(--nc-shadow-btn) !important;
}
.elementor-28 .elementor-element-7279dda .elementor-button:hover,
.elementor-28 .elementor-element-ceb5cc2 .elementor-button:hover {
background-color: var(--nc-amber-dark) !important;
border-color: var(--nc-amber-dark) !important;
box-shadow: var(--nc-shadow-btn-h) !important;
transform: translateY(-1px) !important;
}
/* Secondary CTAs in blue sections → deep blue fill for clear readability
(Learn More × 4, All Articles — these sit on blue bg, amber text there is poor contrast) */
.elementor-28 .elementor-element-ea3770a .elementor-button,
.elementor-28 .elementor-element-34b6a3d .elementor-button,
.elementor-28 .elementor-element-059bcab .elementor-button,
.elementor-28 .elementor-element-171532c .elementor-button,
.elementor-28 .elementor-element-fa43aab .elementor-button,
.elementor-28 .elementor-element-a279ab8 .elementor-button {
background-color: #fff !important;
border-color: #fff !important;
color: var(--nc-blue-dark) !important;
font-weight: 700 !important;
box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}
.elementor-28 .elementor-element-ea3770a .elementor-button:hover,
.elementor-28 .elementor-element-34b6a3d .elementor-button:hover,
.elementor-28 .elementor-element-059bcab .elementor-button:hover,
.elementor-28 .elementor-element-171532c .elementor-button:hover,
.elementor-28 .elementor-element-fa43aab .elementor-button:hover,
.elementor-28 .elementor-element-a279ab8 .elementor-button:hover {
background-color: var(--nc-blue-light) !important;
border-color: var(--nc-blue-light) !important;
color: var(--nc-blue-dark) !important;
box-shadow: 0 4px 14px rgba(0,0,0,.20) !important;
transform: translateY(-1px) !important;
}
/* Footer white button (post-255 copyright bar) — keep dark text on white */
.elementor-255 .elementor-element-4458671 .elementor-button {
background-color: #fff !important;
color: #252525 !important;
}
/* Header phone outline button — blue text on transparent bg */
.elementor-8 .elementor-element-8218bbd .elementor-button {
background-color: transparent !important;
color: var(--nc-blue) !important;
border-color: var(--nc-blue) !important;
fill: var(--nc-blue) !important;
}
.elementor-8 .elementor-element-8218bbd .elementor-button:hover,
.elementor-8 .elementor-element-8218bbd .elementor-button:focus {
background-color: var(--nc-blue) !important;
color: #fff !important;
fill: #fff !important;
}
/* ═══════════════════════════════════════════════════════
6. HEADER & NAVIGATION
═══════════════════════════════════════════════════════ */
/* Logo size — larger for legibility of the wordmark */
.elementor-8 .elementor-element-d2c6393 img {
width: 172px !important;
max-width: 172px !important;
}
@media (max-width: 1024px) {
.elementor-8 .elementor-element-d2c6393 img {
width: 150px !important;
max-width: 150px !important;
}
}
@media (max-width: 767px) {
.elementor-8 .elementor-element-d2c6393 img {
width: 138px !important;
max-width: 138px !important;
}
}
/* Header bar */
.elementor-8 .elementor-element-ca3212d {
background-color: var(--nc-white) !important;
box-shadow: 0 1px 0 var(--nc-border), 0 2px 14px rgba(0,0,0,.055) !important;
}
/* Contain header content on wide screens + distribute the three columns
(logo auto · nav flexible/centered · actions auto) instead of rigid thirds. */
.elementor-8 .elementor-element-ca3212d > .elementor-container {
max-width: 1260px !important;
margin-inline: auto !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 1rem;
}
.elementor-8 .elementor-element-8452622 { width: auto !important; flex: 0 0 auto !important; }
.elementor-8 .elementor-element-17ee3c8 { width: auto !important; flex: 1 1 auto !important; }
.elementor-8 .elementor-element-30c2589 { width: auto !important; flex: 0 0 auto !important; }
/* Right-side action buttons: keep on one line, never wrap the phone number */
.elementor-8 .elementor-element-30c2589 .elementor-widget-wrap {
flex-wrap: nowrap !important;
justify-content: flex-end !important;
align-items: center !important;
gap: .6rem;
}
.elementor-8 .elementor-element-30c2589 .elementor-button,
.elementor-8 .elementor-element-30c2589 .elementor-button-text { white-space: nowrap !important; }
/* Nav items */
.elementor-8 .elementor-element-e580eda .elementor-nav-menu--main .elementor-item {
color: var(--nc-text) !important;
font-size: 14.5px !important;
font-weight: 600 !important;
padding-left: 10px !important;
padding-right: 10px !important;
transition: color 0.15s !important;
}
.elementor-8 .elementor-element-e580eda .elementor-nav-menu--main .elementor-item:hover,
.elementor-8 .elementor-element-e580eda .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-8 .elementor-element-e580eda .elementor-nav-menu--main .elementor-item.highlighted {
color: var(--nc-blue) !important;
fill: var(--nc-blue) !important;
}
/* Active item — color + slight weight emphasis */
.elementor-8 .elementor-element-e580eda .elementor-nav-menu--main .elementor-item.elementor-item-active {
color: var(--nc-blue) !important;
fill: var(--nc-blue) !important;
}
/* Dropdown menu — white background (was dark #343434) */
.elementor-8 .elementor-element-e580eda .elementor-nav-menu--dropdown {
background-color: var(--nc-white) !important;
border: 1px solid var(--nc-border) !important;
border-top: 3px solid var(--nc-blue) !important;
border-radius: 0 0 var(--nc-radius) var(--nc-radius) !important;
box-shadow: 0 8px 28px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.06) !important;
overflow: visible !important; /* allow full text to show */
min-width: 260px !important; /* fits longest items like "Sleep Apnea Evaluation & Treatment" */
width: max-content !important; /* grow to text width, never clip */
}
.elementor-8 .elementor-element-e580eda .elementor-nav-menu--dropdown a,
.elementor-8 .elementor-element-e580eda .elementor-nav-menu--dropdown a:visited {
color: var(--nc-text) !important;
font-size: 14px !important;
font-weight: 500 !important;
padding: 10px 18px !important;
white-space: nowrap !important; /* keep each item on one line */
transition: background 0.14s, color 0.14s !important;
border-bottom: 1px solid var(--nc-border) !important;
display: block;
}
.elementor-8 .elementor-element-e580eda .elementor-nav-menu--dropdown a:last-child {
border-bottom: none !important;
}
/* Round hover highlight corners to match container radius */
.elementor-8 .elementor-element-e580eda .elementor-nav-menu--dropdown li:last-child a {
border-radius: 0 0 var(--nc-radius) var(--nc-radius) !important;
}
.elementor-8 .elementor-element-e580eda .elementor-nav-menu--dropdown a:hover,
.elementor-8 .elementor-element-e580eda .elementor-nav-menu--dropdown a:focus,
.elementor-8 .elementor-element-e580eda .elementor-nav-menu--dropdown a.elementor-item-active,
.elementor-8 .elementor-element-e580eda .elementor-nav-menu--dropdown a.highlighted {
color: var(--nc-blue) !important;
background-color: var(--nc-blue-xlight) !important;
}
/* Hamburger toggle */
.elementor-menu-toggle {
transition: var(--nc-transition) !important;
}
.elementor-menu-toggle:hover {
opacity: 0.85 !important;
}
/* ═══════════════════════════════════════════════════════
7. HERO SECTIONS
═══════════════════════════════════════════════════════ */
/* Stronger, more cinematic gradient overlay */
.elementor-28 .elementor-element-f884446 > .elementor-background-overlay,
.elementor-28 .elementor-element-86f0cd9 > .elementor-background-overlay {
background-image: linear-gradient(
95deg,
rgba(5,20,38,0.88) 0%,
rgba(5,20,38,0.68) 38%,
rgba(5,20,38,0.20) 68%,
transparent 88%
) !important;
opacity: 1 !important;
}
/* Wave dividers from hero — match refined blue */
.elementor-28 .elementor-element-f884446 > .elementor-shape-bottom .elementor-shape-fill,
.elementor-28 .elementor-element-86f0cd9 > .elementor-shape-bottom .elementor-shape-fill {
fill: var(--nc-blue) !important;
}
/* ═══════════════════════════════════════════════════════
8. SECTIONS — BLUE BACKGROUNDS
═══════════════════════════════════════════════════════ */
/* Icon-box cards on blue sections — better shadows */
.elementor-28 .elementor-element-c963234 > .elementor-element-populated,
.elementor-28 .elementor-element-21c40d7 > .elementor-element-populated {
box-shadow: 0 6px 24px rgba(0,0,0,.20) !important;
border-radius: 10px !important;
transition: box-shadow 0.25s var(--nc-ease), transform 0.25s var(--nc-ease) !important;
}
.elementor-28 .elementor-element-c963234:hover > .elementor-element-populated,
.elementor-28 .elementor-element-21c40d7:hover > .elementor-element-populated {
box-shadow: 0 14px 40px rgba(0,0,0,.28) !important;
transform: translateY(-5px);
}
/* Icon box content improvements */
.elementor-icon-box-wrapper {
transition: var(--nc-transition) !important;
}
/* ═══════════════════════════════════════════════════════
9. SERVICE IMAGE CARDS
═══════════════════════════════════════════════════════ */
.elementor-image-box-wrapper {
transition: var(--nc-transition) !important;
}
.elementor-widget-image-box {
transition: var(--nc-transition) !important;
}
.elementor-widget-image-box:hover .elementor-image-box-wrapper {
transform: translateY(-4px) !important;
}
.elementor-image-box-img img {
border-radius: var(--nc-radius) !important;
transition: transform 0.30s var(--nc-ease) !important;
box-shadow: var(--nc-shadow-xs) !important;
}
.elementor-widget-image-box:hover .elementor-image-box-img img {
transform: scale(1.025) !important;
box-shadow: var(--nc-shadow-sm) !important;
}
.elementor-image-box-title {
letter-spacing: -0.01em !important;
}
/* ═══════════════════════════════════════════════════════
10. TESTIMONIAL CARDS
═══════════════════════════════════════════════════════ */
.elementor-testimonial__inner {
background: var(--nc-white) !important;
border-radius: var(--nc-radius-lg) !important;
box-shadow: var(--nc-shadow) !important;
border: 1px solid var(--nc-border) !important;
transition: var(--nc-transition) !important;
padding: 24px 20px !important;
}
.elementor-testimonial__inner:hover {
box-shadow: var(--nc-shadow-lg) !important;
transform: translateY(-3px) !important;
border-color: var(--nc-border-mid) !important;
}
.elementor-testimonial__text {
font-style: italic;
color: var(--nc-text-muted) !important;
line-height: 1.7 !important;
}
.elementor-testimonial__name {
color: var(--nc-text) !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
/* ═══════════════════════════════════════════════════════
11. ARTICLE / POST CARDS — GLOBAL
═══════════════════════════════════════════════════════ */
.elementor-post__card {
border-radius: var(--nc-radius) !important;
overflow: hidden !important;
box-shadow: var(--nc-shadow-sm) !important;
border: 1px solid var(--nc-border) !important;
transition: var(--nc-transition) !important;
background: var(--nc-white) !important;
}
.elementor-post__card:hover {
box-shadow: var(--nc-shadow-lg) !important;
transform: translateY(-5px) !important;
border-color: var(--nc-border-mid) !important;
}
/* Force uniform 16:9 thumbnail so all cards align regardless of original image size.
Elementor sizes this box with the padding-bottom hack (height:0 + padding), so the
image MUST be absolutely positioned — height:100% against a zero-height box collapses
to nothing (this was leaving the thumbnails blank). Override the ratio to a clean 16:9. */
.elementor-post__thumbnail {
position: relative !important;
height: 0 !important;
padding-bottom: 56.25% !important; /* 16:9 */
overflow: hidden !important;
}
.elementor-post__thumbnail img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
transition: transform 0.35s var(--nc-ease) !important;
display: block;
}
.elementor-post__card:hover .elementor-post__thumbnail img {
transform: scale(1.06) !important;
}
.elementor-post__title a {
color: var(--nc-text) !important;
transition: color 0.15s !important;
letter-spacing: -0.01em !important;
line-height: 1.3 !important;
}
.elementor-post__card:hover .elementor-post__title a {
color: var(--nc-blue) !important;
}
.elementor-post-info,
.elementor-post__meta-data {
color: var(--nc-text-muted) !important;
font-size: 13px !important;
}
/* Category badge — brand colour instead of gray */
.elementor-post__badge {
background: var(--nc-blue) !important;
color: #fff !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
border-radius: 4px !important;
padding: 4px 10px !important;
}
/* ═══════════════════════════════════════════════════════
11b. ARTICLES LISTING PAGE (post-133) — PAGE-SPECIFIC
═══════════════════════════════════════════════════════ */
/* ── Card grid: equal-height rows ─────────────────────── */
.elementor-133 .elementor-posts-container {
align-items: stretch !important;
}
.elementor-133 .elementor-post {
display: flex !important;
flex-direction: column !important;
}
.elementor-133 .elementor-post__card {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
}
.elementor-133 .elementor-post__card .elementor-post__text {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
}
/* Push meta to bottom of each card */
.elementor-133 .elementor-post__card .elementor-post__meta-data {
margin-top: auto !important;
}
/* ── Title sizing ──────────────────────────────────────── */
.elementor-133 .elementor-post__title {
font-size: 17px !important;
line-height: 1.35 !important;
}
.elementor-133 .elementor-post__title a {
font-weight: 600 !important;
}
/* ── Page hero section background ─────────────────────── */
.elementor-133 [data-id="01f9aa2"] {
background: linear-gradient(150deg, var(--nc-blue-dark) 0%, var(--nc-blue) 100%) !important;
padding: 28px 0 32px !important;
}
.elementor-133 [data-id="01f9aa2"] .elementor-heading-title {
color: #fff !important;
font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
letter-spacing: -0.02em !important;
}
/* ── CALL US TODAY CTA banner ──────────────────────────── */
.elementor-133 [data-id="0ba0c1a"] {
background: var(--nc-blue) !important;
padding: 40px 0 !important;
margin-top: 48px !important;
}
.elementor-133 [data-id="0ba0c1a"] .elementor-heading-title {
color: #fff !important;
}
/* "CALL US TODAY" label — smaller, muted treatment */
.elementor-133 [data-id="1637023"] .elementor-heading-title {
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
opacity: 0.75 !important;
margin-bottom: 4px !important;
}
/* "Request an Appointment" heading — large, bold */
.elementor-133 [data-id="24e2586"] .elementor-heading-title {
font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
font-weight: 700 !important;
margin-bottom: 20px !important;
}
/* CTA button in banner — amber */
.elementor-133 [data-id="0da1907"] .elementor-button {
background-color: var(--nc-amber) !important;
border-color: var(--nc-amber) !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 16px !important;
padding: 14px 32px !important;
box-shadow: var(--nc-shadow-btn) !important;
}
.elementor-133 [data-id="0da1907"] .elementor-button:hover {
background-color: var(--nc-amber-dark) !important;
border-color: var(--nc-amber-dark) !important;
transform: translateY(-1px) !important;
box-shadow: var(--nc-shadow-btn-h) !important;
}
/* ── Search, Categories, Recent Articles — stacked sidebar cards ──
These inner-sections live in the narrow right sidebar column, so they
must stay full-width; forcing 33% here squeezes titles to one char/line. */
.elementor-133 [data-id="5fcc64e"],
.elementor-133 [data-id="bf5eafe"],
.elementor-133 [data-id="fe2234b"] {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 22px 20px !important;
margin: 0 0 20px !important;
background: var(--nc-white) !important;
border: 1px solid var(--nc-border) !important;
border-radius: var(--nc-radius) !important;
}
/* Section headings in sidebar panels */
.elementor-133 [data-id="5fcc64e"] .elementor-heading-title,
.elementor-133 [data-id="bf5eafe"] .elementor-heading-title,
.elementor-133 [data-id="fe2234b"] .elementor-heading-title {
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
color: var(--nc-text-muted) !important;
margin-bottom: 16px !important;
padding-bottom: 10px !important;
border-bottom: 2px solid var(--nc-blue) !important;
}
/* ── Search input ────────────────────────────────────── */
.elementor-133 .elementor-search-form__container {
border: 1.5px solid var(--nc-border) !important;
border-radius: 6px !important;
overflow: hidden !important;
display: flex !important;
transition: border-color 0.15s !important;
}
.elementor-133 .elementor-search-form__container:focus-within {
border-color: var(--nc-blue) !important;
box-shadow: 0 0 0 3px rgba(26,120,160,.12) !important;
}
.elementor-133 .elementor-search-form__input {
border: none !important;
outline: none !important;
padding: 10px 14px !important;
font-size: 14px !important;
color: var(--nc-text) !important;
flex: 1 !important;
background: transparent !important;
}
.elementor-133 .elementor-search-form__submit {
background: var(--nc-blue) !important;
color: #fff !important;
border: none !important;
padding: 0 16px !important;
cursor: pointer !important;
transition: background 0.15s !important;
}
.elementor-133 .elementor-search-form__submit:hover {
background: var(--nc-blue-dark) !important;
}
.elementor-133 .elementor-search-form__submit i {
color: #fff !important;
}
/* ── Categories list — pill tags ─────────────────────── */
.elementor-133 .elementor-sitemap-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.elementor-133 .elementor-sitemap-item {
margin: 0 !important;
}
.elementor-133 .elementor-sitemap-item a {
display: inline-block !important;
background: var(--nc-blue-light) !important;
color: var(--nc-blue-dark) !important;
font-size: 13px !important;
font-weight: 600 !important;
padding: 5px 14px !important;
border-radius: 999px !important;
text-decoration: none !important;
border: 1px solid var(--nc-border) !important;
transition: var(--nc-transition) !important;
}
.elementor-133 .elementor-sitemap-item a:hover {
background: var(--nc-blue) !important;
color: #fff !important;
border-color: var(--nc-blue) !important;
}
/* ── Recent Articles — styled link list ──────────────── */
.elementor-133 [data-id="fe2234b"] .elementor-post {
border-bottom: 1px solid var(--nc-border) !important;
padding: 10px 0 !important;
margin: 0 !important;
transition: var(--nc-transition) !important;
}
.elementor-133 [data-id="fe2234b"] .elementor-post:last-child {
border-bottom: none !important;
}
.elementor-133 [data-id="fe2234b"] .elementor-post:hover {
padding-left: 6px !important;
}
.elementor-133 [data-id="fe2234b"] .elementor-post__title {
font-size: 14px !important;
line-height: 1.4 !important;
margin: 0 !important;
}
.elementor-133 [data-id="fe2234b"] .elementor-post__title a {
color: var(--nc-text) !important;
font-weight: 500 !important;
}
.elementor-133 [data-id="fe2234b"] .elementor-post__title a:hover {
color: var(--nc-blue) !important;
}
/* ── Pagination — hidden on the static mirror ──────────
Page 1 already lists every article, and the "?e-page=2" links can't
paginate without a backend (they just reload page 1), so the broken-looking
Previous/1/2/Next control is removed rather than styled. */
.elementor-133 .elementor-pagination { display: none !important; }
/* ── Responsive: stack sidebar sections on mobile/tablet ─ */
@media (max-width: 900px) {
.elementor-133 [data-id="5fcc64e"],
.elementor-133 [data-id="bf5eafe"],
.elementor-133 [data-id="fe2234b"] {
display: block !important;
width: 100% !important;
border-left: none !important;
border-right: none !important;
padding: 24px 20px !important;
}
}
/* ═══════════════════════════════════════════════════════
12. DOCTOR / TEAM PROFILE CARDS
═══════════════════════════════════════════════════════ */
/* Profile images */
.elementor-widget-image img {
transition: transform 0.30s var(--nc-ease) !important;
}
/* Doctor page image hover */
.elementor-widget-image:hover img {
transform: scale(1.02) !important;
}
/* Credential callouts */
.elementor-widget-icon-list .elementor-icon-list-item {
transition: transform 0.15s !important;
padding: 2px 0 !important;
}
.elementor-widget-icon-list .elementor-icon-list-item:hover {
transform: translateX(3px) !important;
}
.elementor-icon-list-text {
line-height: 1.5 !important;
}
/* ═══════════════════════════════════════════════════════
13. DIVIDERS — REFINE
═══════════════════════════════════════════════════════ */
.elementor-divider-separator {
border-color: var(--nc-border-mid) !important;
opacity: 0.7;
}
/* ═══════════════════════════════════════════════════════
14. FOOTER
═══════════════════════════════════════════════════════ */
/* Custom multi-column footer — structure lives in partials/footer.html
(.nc-foot-*). Replaces the original single-column Elementor footer. */
.elementor-location-footer { background: var(--nc-dark); }
.nc-foot {
background:
radial-gradient(900px 360px at 12% -25%, rgba(26,120,160,.14), transparent 70%),
var(--nc-dark);
color: rgba(255,255,255,.88);
font-family: var(--nc-font-body);
}
.nc-foot-inner {
max-width: 1180px; margin-inline: auto;
padding: clamp(2.6rem, 5vw, 4rem) clamp(1.1rem, 4vw, 2rem) clamp(2rem, 4vw, 3rem);
display: grid; gap: clamp(1.8rem, 3vw, 2.6rem) clamp(1.5rem, 3vw, 3rem);
grid-template-columns: 1.8fr 1fr 1fr 1.5fr;
}
.nc-foot-h {
font-family: var(--nc-font-display); font-weight: 700;
font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
color: #fff; margin: 0 0 1.15rem;
}
/* Brand column */
.nc-foot-logo { display: inline-block; }
.nc-foot-logo img { width: 200px; height: auto; }
.nc-foot-tagline {
margin: 1.05rem 0 1.35rem; max-width: 34ch;
font-size: .95rem; line-height: 1.65; color: rgba(255,255,255,.88);
}
.nc-foot-rating {
display: inline-flex; align-items: center; gap: .55rem;
text-decoration: none; font-size: .9rem; color: #fff;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
border-radius: 999px; padding: .5rem .95rem;
transition: background .18s var(--nc-ease), border-color .18s var(--nc-ease);
}
.nc-foot-rating:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.34); }
.nc-foot-rating strong { color: #fff; font-weight: 800; }
.nc-foot-rating-stars { color: var(--nc-amber); letter-spacing: 1px; font-size: .95rem; }
/* Link columns */
.nc-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .72rem; }
.nc-foot-col a {
color: rgba(255,255,255,.88); text-decoration: none; font-size: .95rem;
transition: color .15s var(--nc-ease);
}
.nc-foot-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* Contact column */
.nc-foot-contact-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: .72rem; }
.nc-foot-contact-list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; line-height: 1.5; color: #fff; }
.nc-foot-contact-list svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--nc-amber); }
.nc-foot-contact-list a { color: #fff; text-decoration: none; transition: color .15s var(--nc-ease); }
.nc-foot-contact-list a:hover { color: var(--nc-amber); }
.nc-foot-cta {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--nc-font-display); font-weight: 700; font-size: .92rem;
text-decoration: none; color: #fff; background: var(--nc-amber);
border-radius: 999px; padding: .78rem 1.5rem; box-shadow: var(--nc-shadow-btn);
transition: background .18s var(--nc-ease), transform .18s var(--nc-ease), box-shadow .18s var(--nc-ease);
}
.nc-foot-cta:hover { background: var(--nc-amber-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--nc-shadow-btn-h); }
/* Bottom bar */
.nc-foot-bottom { background: var(--nc-dark-accent); border-top: 1px solid rgba(255,255,255,.09); }
.nc-foot-bottom-inner {
max-width: 1180px; margin-inline: auto;
padding: 1.1rem clamp(1.1rem, 4vw, 2rem);
display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; justify-content: space-between;
font-size: .85rem; color: rgba(255,255,255,.78);
}
.nc-foot-bottom-inner p { margin: 0; }
.nc-foot-bottom-links { display: flex; gap: .7rem; align-items: center; }
.nc-foot-bottom-links a { color: rgba(255,255,255,.88); text-decoration: none; transition: color .15s var(--nc-ease); }
.nc-foot-bottom-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* Footer links must override the site-wide brand-blue rule
(.elementor-kit-6 a:not(.elementor-button)) which uses !important. */
.nc-foot a:not(.elementor-button) { color: rgba(255,255,255,.88) !important; text-decoration: none !important; }
.nc-foot a:not(.elementor-button):hover { color: #fff !important; }
.nc-foot .nc-foot-contact-list a { color: #fff !important; }
.nc-foot .nc-foot-contact-list a:hover { color: var(--nc-amber) !important; }
.nc-foot a.nc-foot-rating,
.nc-foot a.nc-foot-cta { color: #fff !important; }
.nc-foot .nc-foot-col a:hover,
.nc-foot .nc-foot-bottom-links a:hover { text-decoration: underline !important; text-underline-offset: 3px; }
@media (max-width: 900px) {
/* Brand + Get-in-touch span full width; the two short link lists pair up. */
.nc-foot-inner { grid-template-columns: 1fr 1fr; }
.nc-foot-brand, .nc-foot-contact { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
/* The sticky mobile bar already offers "Request an Appointment" — drop the
duplicate footer button to cut clutter on phones. */
.nc-foot-cta { display: none; }
.nc-foot-contact-list { margin-bottom: 0; }
}
@media (max-width: 560px) {
/* Keep the link lists side-by-side (compact) instead of a long single stack,
trim the tagline, and tighten spacing so the footer isn't overwhelming. */
.nc-foot-inner { padding-top: 2.2rem; gap: 1.5rem 1.1rem; }
.nc-foot-tagline { display: none; }
.nc-foot-bottom-inner { justify-content: center; text-align: center; }
}
/* ═══════════════════════════════════════════════════════
15. ACCESSIBILITY & FOCUS STATES
═══════════════════════════════════════════════════════ */
/* Visible focus rings for keyboard users */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.elementor-button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid var(--nc-amber) !important;
outline-offset: 3px !important;
border-radius: 4px !important;
}
/* Skip link improvement */
.skip-link:focus {
position: fixed !important;
top: 12px !important;
left: 12px !important;
z-index: 99999 !important;
background: var(--nc-amber) !important;
color: #fff !important;
padding: 10px 16px !important;
border-radius: var(--nc-radius-sm) !important;
font-weight: 600 !important;
box-shadow: var(--nc-shadow) !important;
text-decoration: none !important;
}
/* Scroll anchor offset */
[id] {
scroll-margin-top: 80px;
}
/* ═══════════════════════════════════════════════════════
16. MOBILE — TABLET (≤1024px)
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
/* Hamburger button — visible & branded */
.elementor-menu-toggle {
background-color: var(--nc-blue) !important;
border-radius: var(--nc-radius-sm) !important;
min-width: 40px !important;
min-height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.elementor-menu-toggle i,
.elementor-menu-toggle .e-font-icon-svg {
color: var(--nc-white) !important;
fill: var(--nc-white) !important;
}
/* Mobile nav items */
.elementor-nav-menu--dropdown .elementor-item,
.elementor-nav-menu--dropdown .elementor-sub-item {
color: var(--nc-text) !important;
padding: 12px 20px !important;
font-size: 15px !important;
border-bottom: 1px solid var(--nc-border) !important;
}
}
/* ═══════════════════════════════════════════════════════
17. MOBILE — PHONE (≤767px)
═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* Touch-friendly buttons */
.elementor-button {
min-height: 44px !important;
padding-top: 11px !important;
padding-bottom: 11px !important;
font-size: 15px !important;
}
/* Smaller wave on mobile */
.elementor-shape-bottom svg,
.elementor-shape-top svg {
height: 28px !important;
}
/* Header padding on small screens */
.elementor-8 .elementor-element-ca3212d {
padding-left: 10px !important;
padding-right: 10px !important;
}
/* Article card titles */
.elementor-post__title {
font-size: 1rem !important;
}
/* Testimonial padding */
.elementor-testimonial__inner {
padding: 18px 16px !important;
}
/* Footer is now the custom .nc-foot grid — responsive rules live with it. */
}
/* ═══════════════════════════════════════════════════════
18. CONTACT PAGE ENHANCEMENTS
═══════════════════════════════════════════════════════ */
/* Form inputs */
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select {
border: 1.5px solid var(--nc-border) !important;
border-radius: var(--nc-radius-sm) !important;
transition: border-color 0.15s, box-shadow 0.15s !important;
font-size: 15px !important;
padding: 12px 14px !important;
background: var(--nc-white) !important;
color: var(--nc-text) !important;
}
.elementor-field-group input:focus,
.elementor-field-group textarea:focus,
.elementor-field-group select:focus {
border-color: var(--nc-blue) !important;
box-shadow: 0 0 0 3px rgba(26,120,160,.15) !important;
outline: none !important;
}
.elementor-field-group label {
font-weight: 600 !important;
color: var(--nc-text) !important;
font-size: 14px !important;
letter-spacing: 0.01em !important;
margin-bottom: 5px !important;
}
/* Form submit button */
.elementor-button[type="submit"],
.elementor-field-type-submit .elementor-button {
background-color: var(--nc-amber) !important;
border-color: var(--nc-amber) !important;
color: var(--nc-white) !important;
box-shadow: var(--nc-shadow-btn) !important;
}
.elementor-button[type="submit"]:hover,
.elementor-field-type-submit .elementor-button:hover {
background-color: var(--nc-amber-dark) !important;
border-color: var(--nc-amber-dark) !important;
box-shadow: var(--nc-shadow-btn-h) !important;
transform: translateY(-1px) !important;
}
/* ═══════════════════════════════════════════════════════
19. SOCIAL ICONS
═══════════════════════════════════════════════════════ */
/* Header social icons */
.elementor-8 .elementor-element-c9be081 .elementor-social-icon {
background-color: var(--nc-amber) !important;
border-color: var(--nc-border) !important;
transition: var(--nc-transition) !important;
}
.elementor-8 .elementor-element-c9be081 .elementor-social-icon:hover {
background-color: var(--nc-amber-dark) !important;
transform: translateY(-2px) !important;
}
/* Right-align the mobile/tablet action icons (logo left, actions right).
Widget only renders ≤1024px, so this never affects the desktop nav. */
.elementor-8 .elementor-element-c9be081 .elementor-grid {
justify-content: flex-end !important;
gap: 9px !important;
}
/* Mobile menu icon — ensure tappable above sticky header layers,
and visually distinct (brand blue) from the amber call/email icons. */
.elementor-8 .elementor-element-c9be081 .elementor-social-icon-align-justify {
pointer-events: auto !important;
position: relative !important;
z-index: 100 !important;
cursor: pointer !important;
-webkit-tap-highlight-color: transparent;
border: 0;
font: inherit;
appearance: none;
-webkit-appearance: none;
background-color: var(--nc-blue) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.elementor-8 .elementor-element-c9be081 .elementor-social-icon-align-justify:hover {
background-color: var(--nc-blue-dark) !important;
}
/* Inline burger glyph (replaces the missing FontAwesome icon). Drawn purely in
CSS as three white bars so it's immune to Elementor's svg/font-size:0 icon
rules that collapsed an