/* ============================================================ Westside Dental Center — theme system Color variables consumed by style.css / itero.css (var() refs). Switch palettes by setting data-theme on ; persisted in localStorage by js/theme.js via the footer theme dots. ============================================================ */ :root { --wdc-accent: #ad7d4b; --wdc-tint: #ffe8ce; --wdc-gold-soft: #d3a56c; --wdc-deep: #8b5617; --wdc-banner: #5C3105; --wdc-banner-strong: rgba(92, 49, 5, 1); --wdc-banner-mid: rgba(104, 58, 11, 0.72); --wdc-banner-clear: rgba(104, 58, 11, 0); } html[data-theme="teal"] { --wdc-gold: #2a9d8f; --wdc-gold-dark: #21867a; --wdc-accent: #1f7a6f; --wdc-tint: #d9f0ed; --wdc-gold-soft: #6fc4ba; --wdc-deep: #135e55; --wdc-warm: #f4faf9; --wdc-banner: #0b3d37; --wdc-banner-strong: rgba(11, 61, 55, 1); --wdc-banner-mid: rgba(18, 84, 76, 0.72); --wdc-banner-clear: rgba(18, 84, 76, 0); } html[data-theme="navy"] { --wdc-gold: #3a7ca5; --wdc-gold-dark: #2f6588; --wdc-accent: #2c5f80; --wdc-tint: #dcebf5; --wdc-gold-soft: #7fb3d1; --wdc-deep: #1d4560; --wdc-warm: #f3f8fb; --wdc-banner: #0f2a3a; --wdc-banner-strong: rgba(15, 42, 58, 1); --wdc-banner-mid: rgba(24, 62, 84, 0.72); --wdc-banner-clear: rgba(24, 62, 84, 0); } html[data-theme="sage"] { --wdc-gold: #6b8f5e; --wdc-gold-dark: #57764c; --wdc-accent: #52734a; --wdc-tint: #e4eede; --wdc-gold-soft: #a3c295; --wdc-deep: #3c5735; --wdc-warm: #f5f9f3; --wdc-banner: #1c2a18; --wdc-banner-strong: rgba(28, 42, 24, 1); --wdc-banner-mid: rgba(48, 68, 42, 0.72); --wdc-banner-clear: rgba(48, 68, 42, 0); } html[data-theme="plum"] { --wdc-gold: #8e7cc3; --wdc-gold-dark: #7263a3; --wdc-accent: #6f5fa3; --wdc-tint: #e9e4f5; --wdc-gold-soft: #b3a6d9; --wdc-deep: #4f4375; --wdc-warm: #f7f5fb; --wdc-banner: #221c33; --wdc-banner-strong: rgba(34, 28, 51, 1); --wdc-banner-mid: rgba(52, 44, 77, 0.72); --wdc-banner-clear: rgba(52, 44, 77, 0); } html[data-theme="rose"] { --wdc-gold: #c47b7b; --wdc-gold-dark: #a56060; --wdc-accent: #a35d5d; --wdc-tint: #f7e3e3; --wdc-gold-soft: #d9a3a3; --wdc-deep: #7a4040; --wdc-warm: #fbf5f5; --wdc-banner: #3a1a1a; --wdc-banner-strong: rgba(58, 26, 26, 1); --wdc-banner-mid: rgba(84, 40, 40, 0.72); --wdc-banner-clear: rgba(84, 40, 40, 0); } html[data-theme="slate"] { --wdc-gold: #7c8794; --wdc-gold-dark: #64707e; --wdc-accent: #5f6a77; --wdc-tint: #e6eaee; --wdc-gold-soft: #a5aeb8; --wdc-deep: #434c56; --wdc-warm: #f5f7f9; --wdc-banner: #191d22; --wdc-banner-strong: rgba(25, 29, 34, 1); --wdc-banner-mid: rgba(42, 48, 56, 0.72); --wdc-banner-clear: rgba(42, 48, 56, 0); } /* Fixed-header button used a hardcoded brown; keep it on-theme */ html[data-theme] header.fixed-header .btn-gold { background: var(--wdc-deep) !important; } /* ---------- Footer theme dots ---------- */ .theme-dots { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 8px 0 4px 0; margin-right: 24px; } .theme-dots .theme-dots-label { font-size: 13px; color: #666; margin-right: 6px; } .theme-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.15); background: var(--dot, #c99554); cursor: pointer; padding: 0; transition: transform .15s ease, box-shadow .15s ease; } .theme-dot:hover { transform: scale(1.2); } .theme-dot.is-active { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--dot, #c99554); transform: scale(1.1); } /* ---------- Nav: founder highlight ---------- */ .dropdown-item.founder-link { font-weight: 700; color: var(--wdc-gold-dark, #a77437); } .founder-badge { display: inline-block; margin-left: 8px; padding: 1px 8px 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--wdc-gold, #c99554); border-radius: 999px; vertical-align: middle; } .dropdown-item.founder-link:hover .founder-badge { background: #fff; color: var(--wdc-gold-dark, #a77437); } /* ---------- Nav: "All Services" hub link ---------- */ .dropdown-item.view-all-link { font-weight: 700; color: var(--wdc-gold-dark, #a77437); border-bottom: 1px solid rgba(0, 0, 0, 0.08); margin-bottom: 4px; } /* ---------- Nav: active states ---------- */ .navbar-nav .nav-link.active { color: var(--wdc-gold, #c99554) !important; } .dropdown-menu.services-dropdown .dropdown-item.active, .dropdown-menu.services-dropdown .dropdown-item:active { background: var(--wdc-gold, #c99554); color: #fff; } /* Keep the header CTA on one line now that the nav has 7 items */ @media (min-width: 1200px) and (max-width: 1480px) { header .btn-gold { font-size: 13px; padding: 0.65rem 1rem; white-space: nowrap; } .navbar-nav .nav-link { font-size: 14px; } } /* ---------- Header phone number ---------- */ .header-phone-number { color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; } .header-phone-number:hover { color: var(--wdc-gold-soft, #d3a56c); } /* ============ 10 additional generated palettes ============ */ html[data-theme="honey"] { --wdc-gold: #c9a02f; --wdc-gold-dark: #a48226; --wdc-accent: #937522; --wdc-tint: #f2eee3; --wdc-gold-soft: #e3ca86; --wdc-deep: #6e581a; --wdc-warm: #faf8f5; --wdc-banner: #3a2e0e; --wdc-banner-strong: rgba(58, 46, 14, 1); --wdc-banner-mid: rgba(91, 72, 21, 0.72); --wdc-banner-clear: rgba(91, 72, 21, 0); } html[data-theme="terracotta"] { --wdc-gold: #c1663f; --wdc-gold-dark: #9f5433; --wdc-accent: #8f4b2e; --wdc-tint: #f1e8e4; --wdc-gold-soft: #dcaa94; --wdc-deep: #6d3923; --wdc-warm: #f9f7f5; --wdc-banner: #361c11; --wdc-banner-strong: rgba(54, 28, 17, 1); --wdc-banner-mid: rgba(85, 45, 27, 0.72); --wdc-banner-clear: rgba(85, 45, 27, 0); } html[data-theme="coral"] { --wdc-gold: #d96e5f; --wdc-gold-dark: #d04c3a; --wdc-accent: #c7422f; --wdc-tint: #f2e5e3; --wdc-gold-soft: #e9ada4; --wdc-deep: #a13526; --wdc-warm: #faf6f5; --wdc-banner: #3a130e; --wdc-banner-strong: rgba(58, 19, 14, 1); --wdc-banner-mid: rgba(91, 30, 22, 0.72); --wdc-banner-clear: rgba(91, 30, 22, 0); } html[data-theme="ruby"] { --wdc-gold: #b04a5a; --wdc-gold-dark: #903c49; --wdc-accent: #813642; --wdc-tint: #f0e6e7; --wdc-gold-soft: #d397a0; --wdc-deep: #612932; --wdc-warm: #f9f6f6; --wdc-banner: #32151a; --wdc-banner-strong: rgba(50, 21, 26, 1); --wdc-banner-mid: rgba(79, 33, 40, 0.72); --wdc-banner-clear: rgba(79, 33, 40, 0); } html[data-theme="emerald"] { --wdc-gold: #2e8b57; --wdc-gold-dark: #236941; --wdc-accent: #1e5938; --wdc-tint: #e4f1ea; --wdc-gold-soft: #5fca8e; --wdc-deep: #123722; --wdc-warm: #f5f9f7; --wdc-banner: #123622; --wdc-banner-strong: rgba(18, 54, 34, 1); --wdc-banner-mid: rgba(28, 84, 53, 0.72); --wdc-banner-clear: rgba(28, 84, 53, 0); } html[data-theme="forest"] { --wdc-gold: #3e6b4f; --wdc-gold-dark: #2d4e3a; --wdc-accent: #264130; --wdc-tint: #e7eeea; --wdc-gold-soft: #6eab85; --wdc-deep: #1a2d21; --wdc-warm: #f6f8f7; --wdc-banner: #1a2d21; --wdc-banner-strong: rgba(26, 45, 33, 1); --wdc-banner-mid: rgba(41, 71, 52, 0.72); --wdc-banner-clear: rgba(41, 71, 52, 0); } html[data-theme="ocean"] { --wdc-gold: #1f7a8c; --wdc-gold-dark: #175966; --wdc-accent: #134b56; --wdc-tint: #e3f0f2; --wdc-gold-soft: #45bed6; --wdc-deep: #0d333a; --wdc-warm: #f5f9fa; --wdc-banner: #0d333a; --wdc-banner-strong: rgba(13, 51, 58, 1); --wdc-banner-mid: rgba(20, 80, 92, 0.72); --wdc-banner-clear: rgba(20, 80, 92, 0); } html[data-theme="indigo"] { --wdc-gold: #4a5aa8; --wdc-gold-dark: #3c4988; --wdc-accent: #36417a; --wdc-tint: #e6e7ef; --wdc-gold-soft: #939dcf; --wdc-deep: #28305a; --wdc-warm: #f6f6f9; --wdc-banner: #161b32; --wdc-banner-strong: rgba(22, 27, 50, 1); --wdc-banner-mid: rgba(34, 42, 78, 0.72); --wdc-banner-clear: rgba(34, 42, 78, 0); } html[data-theme="royal"] { --wdc-gold: #6a4fb3; --wdc-gold-dark: #574094; --wdc-accent: #4e3a86; --wdc-tint: #e8e6ef; --wdc-gold-soft: #ac9dd5; --wdc-deep: #3c2c66; --wdc-warm: #f7f6f9; --wdc-banner: #1d1632; --wdc-banner-strong: rgba(29, 22, 50, 1); --wdc-banner-mid: rgba(46, 34, 78, 0.72); --wdc-banner-clear: rgba(46, 34, 78, 0); } html[data-theme="onyx"] { --wdc-gold: #4b5563; --wdc-gold-dark: #373f49; --wdc-accent: #2e353d; --wdc-tint: #e9eaec; --wdc-gold-soft: #808d9f; --wdc-deep: #1f2329; --wdc-warm: #f7f7f8; --wdc-banner: #1f2329; --wdc-banner-strong: rgba(31, 35, 41, 1); --wdc-banner-mid: rgba(48, 55, 64, 0.72); --wdc-banner-clear: rgba(48, 55, 64, 0); } /* ============ Fix: dropdown items overflowing the box ============ */ .dropdown-menu.services-dropdown { width: auto !important; min-width: 230px; } .dropdown-menu.services-dropdown .dropdown-item { white-space: nowrap; } /* ============ Footer palette picker (17 swatches) ============ */ .theme-picker { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0 10px 0; } .theme-picker .theme-dots-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a8a8a; } .theme-dot-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 560px; } /* ============ Hover effects (site-wide) ============ */ a, .btn { transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .btn-gold:hover, .btn-gold:focus { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22); } .btn-gold:active { transform: translateY(0); } /* nav underline grow */ .navbar-nav > .nav-item > .nav-link { position: relative; } .navbar-nav > .nav-item > .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--wdc-gold, #c99554); transform: scaleX(0); transform-origin: left center; transition: transform .25s ease; } .navbar-nav > .nav-item > .nav-link:hover::after, .navbar-nav > .nav-item > .nav-link.active::after { transform: scaleX(1); } /* dropdown items: accent bar + slide */ .services-dropdown .dropdown-item { border-left: 3px solid transparent; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .services-dropdown .dropdown-item:hover { border-left-color: var(--wdc-gold, #c99554); transform: translateX(3px); } /* cards & tiles lift on hover */ .service-box-items, .team-box-items-inner, .transformation-card, .why-choose-item, .choose-content-items, .work-process-box-items, .project-thumb-box-items, .icon-items, .faq-left-items-inner, .crafted-content-items-3, .card, .wdc-card { transition: transform .3s ease, box-shadow .3s ease; } /* Westside info cards only — do not force card chrome onto crafted/project/icon layouts */ .wdc-card { background: #fff; border: 1px solid color-mix(in srgb, var(--wdc-gold, #c99554) 25%, transparent); border-radius: 14px; padding: 32px 28px; height: 100%; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(33, 33, 33, .06); } .wdc-card-price { display: inline-block; align-self: flex-start; margin-bottom: 10px; color: var(--wdc-gold-dark, #8C6329); font-size: 1.15rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .wdc-card > i { color: var(--wdc-gold, #c99554); font-size: 28px; margin-bottom: 14px; display: inline-block; } .wdc-card-logo { display: flex; align-items: center; justify-content: flex-start; min-height: 72px; margin-bottom: 16px; } .wdc-card-logo img { display: block; max-width: 100%; width: auto; max-height: 64px; height: auto; object-fit: contain; } .wdc-card h4 { font-size: 1.15rem; color: #212121; } .wdc-card p { color: #797979; font-size: 15px; line-height: 1.6; } .wdc-card ul { color: #797979; font-size: 15px; line-height: 1.7; } .wdc-card .btn { width: fit-content; } @media (max-width: 575px) { .wdc-card .btn { width: 100%; text-align: center; justify-content: center; } } .service-box-items:hover, .team-box-items-inner:hover, .transformation-card:hover, .why-choose-item:hover, .choose-content-items:hover, .work-process-box-items:hover, .project-thumb-box-items:hover, .icon-items:hover, .faq-left-items-inner:hover, .crafted-content-items-3:hover, .card:hover, .wdc-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.13); } /* image zoom inside known thumbnails */ .team-thumb-items, .card-img-wrapper, .choose-thumb-items, .craftedImgArea, .about-image, .project-wrapper .thumb, .gallerySection a, .faq-section-2 .faq-thumb-items { overflow: hidden; } .team-thumb-items img, .card-img-wrapper img, .choose-thumb-items img, .craftedImgArea img, .about-image img, .gallerySection a img, .faq-section-2 .faq-thumb-items img { transition: transform .5s ease; } .team-thumb-items:hover img, .card-img-wrapper:hover img, .choose-thumb-items:hover img, .craftedImgArea:hover img, .about-image:hover img, .gallerySection a:hover img, .faq-section-2 .faq-thumb-items:hover img { transform: scale(1.05); } /* social icons */ .social-icons a { display: inline-block; transition: transform .25s ease, color .25s ease; } .social-icons a:hover { transform: translateY(-3px) scale(1.12); color: var(--wdc-gold, #c99554); } /* footer link slide */ footer.footer-section ul.list-unstyled li a { transition: color .2s ease, padding-left .2s ease; } footer.footer-section ul.list-unstyled li a:hover { padding-left: 5px; } /* ============ Visual polish ============ */ html { scroll-behavior: smooth; } ::selection { background: var(--wdc-gold, #c99554); color: #fff; } :focus-visible { outline: 2px solid var(--wdc-gold, #c99554); outline-offset: 2px; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f1ede7; } ::-webkit-scrollbar-thumb { background: var(--wdc-gold-dark, #a77437); border-radius: 6px; } /* reveal-on-scroll (activated by js/theme.js) */ .wdc-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; } .wdc-reveal-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .wdc-reveal { opacity: 1; transform: none; transition: none; } } /* ============ Theme contrast: keep text readable on every palette ============ */ /* Active/hover nav labels were washing out against themed headers — mix the accent with white so they always pop on the dark header. */ html[data-theme] .navbar-nav .nav-link.active, html[data-theme] .navbar-nav > .nav-item > .nav-link:hover { color: color-mix(in srgb, var(--wdc-gold) 40%, #fff) !important; } html[data-theme] .navbar-nav > .nav-item > .nav-link::after { background: color-mix(in srgb, var(--wdc-gold) 40%, #fff); } html[data-theme] .innerBannerSection h2 span, html[data-theme] .innerBannerSection h2 strong { color: color-mix(in srgb, var(--wdc-gold) 55%, #fff) !important; } html[data-theme] .header-phone-number:hover { color: color-mix(in srgb, var(--wdc-gold) 45%, #fff); } /* Scrolled (fixed) header: use the darkest theme shade so white text keeps full contrast — the old mid-tone swallowed the active link. */ html[data-theme] header.fixed-header { background: var(--wdc-deep) !important; } /* ============ Hover effect on ALL content images ============ */ section img { transition: transform .45s ease, filter .45s ease; } section img:hover { transform: scale(1.035); filter: brightness(1.05); } /* keep banner/hero backdrops still */ .innerBannerSection img:hover, .hero img:hover { transform: none; filter: none; } /* ============ Floating 5-star rating (homepage) ============ */ .wdc-rating-float { position: fixed; right: 22px; bottom: 95px; /* clears the back-to-top button */ z-index: 1050; display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: #fff; color: #333; border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25); cursor: pointer; opacity: 0; transform: translateY(30px); transition: opacity .4s ease, transform .4s ease; font-size: 14px; } .wdc-rating-float.in { opacity: 1; transform: none; } .wdc-rating-float .wdc-float-stars { color: #f5b301; font-size: 16px; letter-spacing: 2px; animation: wdcStarPulse 2.4s ease-in-out infinite; } @keyframes wdcStarPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .wdc-rating-float strong { display: block; line-height: 1.2; } .wdc-rating-float .wdc-float-close { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--wdc-gold, #c99554); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); } @media (max-width: 575px) { .wdc-rating-float { right: 12px; bottom: 12px; padding: 10px 14px; } } /* ============ De-brown pass: replace the landscaping template's dirt-brown surfaces (bg50.jpg texture) with the site's cream + gold language ============ */ /* survey / callback band (implants, invisalign, etc.) */ .wdc-service-survey.contact-section-3, .wdc-service-survey { background-color: #f3f1ed !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23c9c4bc' stroke-width='1' opacity='0.55'%3E%3Crect x='24' y='24' width='40' height='40' transform='rotate(45 44 44)'/%3E%3Crect x='31' y='31' width='26' height='26' transform='rotate(45 44 44)'/%3E%3Crect x='37' y='37' width='14' height='14' transform='rotate(45 44 44)'/%3E%3C/g%3E%3C/svg%3E") !important; background-size: 88px 88px !important; background-repeat: repeat !important; } .wdc-service-survey__title, .wdc-service-survey .wdc-service-survey__title { color: #1f1d1a !important; } .wdc-service-survey__eyebrow, .wdc-service-survey .wdc-service-survey__eyebrow { color: var(--wdc-gold-dark, #a77437) !important; } .wdc-service-survey__form-title, .wdc-service-survey .wdc-service-survey__form-title { color: #1f1d1a !important; } .wdc-service-survey__description, .wdc-service-survey p:not(.wdc-service-survey__eyebrow):not(.wdc-service-survey__highlight-text), .wdc-service-survey li { color: #55504a !important; } .wdc-service-survey__highlight-text, .wdc-service-survey .wdc-service-survey__highlight-text { color: #1f1d1a !important; } .wdc-service-survey__contact-item a { color: #1f1d1a !important; } /* same-day crown timeline cards: dirt-brown texture -> clean white cards */ .timeLineArea .card { background: #fff !important; border: 1px solid var(--wdc-line, #ece5dd) !important; box-shadow: 0 10px 26px rgba(33, 33, 33, 0.07); } .timeLineArea .card h2 { color: #1f1d1a !important; } .timeLineArea .card p { color: #55504a !important; } .timeLineArea .card .badge { background: var(--wdc-tint, #ffe8ce) !important; color: var(--wdc-gold-dark, #a77437) !important; } /* homepage "Certified Dentist" chip: muddy brown -> elegant ink glass + gold */ .about-image .about-inner-box { background: rgba(31, 29, 26, 0.85) !important; border: 1px solid var(--wdc-gold, #c99554); backdrop-filter: blur(4px); } .about-image .about-inner-box h3 { color: var(--wdc-gold-soft, #d3a56c); } /* homepage value tiles: slimmer padding, consistent rhythm */ .about-area .aboutListBox { padding: 18px 20px; } .about-area .aboutListBox ul li { margin-bottom: 10px; } /* ============ Banner fixes: no black band, no stretched photo, softer dark ============ */ .innerBannerSection { background: var(--wdc-banner, #5C3105); } .innerBannerSection img { height: 100% !important; object-fit: cover !important; } .innerBannerSection:after { background: linear-gradient(-190deg, var(--wdc-banner-strong, rgba(92, 49, 5, 1)) 0%, var(--wdc-banner-mid, rgba(104, 58, 11, 0.72)) 45%, var(--wdc-banner-clear, rgba(104, 58, 11, 0)) 92%) !important; } /* ============ Draggable before/after wipe slider ============ */ .ba-enhanced { display: block !important; padding: 0 !important; } .ba-wipe { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px 12px 0 0; cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y; outline-offset: -2px; } .ba-wipe .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none !important; filter: none !important; pointer-events: none; } .ba-wipe .ba-img-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); will-change: clip-path; } .ba-wipe .ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); pointer-events: none; } .ba-wipe .ba-grip { position: absolute; top: 50%; left: var(--pos, 50%); transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: var(--wdc-gold, #c99554); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); border: 2px solid #fff; pointer-events: none; transition: transform .15s ease; } .ba-wipe:hover .ba-grip { transform: translate(-50%, -50%) scale(1.08); } .ba-wipe .ba-label { position: absolute; top: 10px; padding: 3px 11px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; pointer-events: none; } .ba-label-before { left: 10px; } .ba-label-after { right: 10px; } /* pin wipe labels against the template's generic .before-after span rules */ .ba-wipe .ba-label { top: 10px !important; bottom: auto !important; width: auto !important; font-size: 12px !important; background: rgba(0, 0, 0, 0.55) !important; border-radius: 999px !important; padding: 3px 11px !important; } .ba-wipe .ba-label-before { left: 10px !important; right: auto !important; } .ba-wipe .ba-label-after { right: 10px !important; left: auto !important; } /* ============ Gallery cleanup: uniform, tidy grids ============ */ /* photo gallery grid cards */ .ghallerySection .galleryBox { padding: 12px !important; border-radius: 16px; } .ghallerySection .galleryBox .thumb { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; } .ghallerySection .galleryBox .thumb img { width: 100%; height: 100%; object-fit: cover; } /* video gallery cards */ .ghallerySection .video-thumb .thumb-image { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; } .ghallerySection .video-thumb .thumb-image > img { width: 100%; height: 100%; object-fit: cover; } /* patient testimonial cards: consistent portrait crop */ .patientSpeaksSlider .thumb-image { aspect-ratio: 2 / 3; overflow: hidden; border-radius: 12px; } .patientSpeaksSlider .thumb-image > img { width: 100%; height: 100%; object-fit: cover; } /* Correct the "LRVING" typo baked into the remote testimonial thumbnail */ .irving-fix { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 10px 18px 10px; text-align: center; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.92) 38%, #000 100%); pointer-events: none; } .irving-fix strong { display: block; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .06em; } .irving-fix span { display: block; color: var(--wdc-gold-soft, #d3a56c); font-size: 11px; font-weight: 700; letter-spacing: .18em; } /* Gallery cards now hold a single image — neutralize the template's two-image hover-swap that kept img:first-child invisible */ .ghallerySection .galleryBox .thumb img:first-child { position: relative !important; inset: auto !important; transform: none !important; opacity: 1 !important; filter: none !important; } .ghallerySection .galleryBox:hover .thumb img:first-child { transform: scale(1.05) !important; opacity: 1 !important; filter: none !important; } /* ============ Brighter homepage hero ============ */ /* Was a flat rgba(0,0,0,.55) blanket. Now: stronger only behind the headline (left), fading out so the video shows through, plus a soft bottom vignette to keep the rating/CTA legible. */ .hero-overlay { background: linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 28%), linear-gradient(90deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.34) 38%, rgba(0, 0, 0, 0.10) 72%, rgba(0, 0, 0, 0.05) 100%) !important; } /* on phones the text spans the full width — keep an even, lighter veil */ @media (max-width: 767px) { .hero-overlay { background: rgba(0, 0, 0, 0.42) !important; } } /* ============ Footer brightness slider ============ */ /* Drives --wdc-hero-bright (default 1) — applied to the homepage hero video and every inner-page banner image. Persisted by js/theme.js. */ .hero-video, .hero video { filter: brightness(var(--wdc-hero-bright, 1)); } .innerBannerSection img, .innerBannerSection img:hover { filter: brightness(var(--wdc-hero-bright, 1)) !important; } .brightness-control { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 0 8px 0; } .brightness-control i { color: #9a9a9a; font-size: 13px; } .wdc-bright-slider { -webkit-appearance: none; appearance: none; width: 170px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #444, #f5d9a8); outline: none; cursor: pointer; } .wdc-bright-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--wdc-gold, #c99554); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .wdc-bright-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--wdc-gold, #c99554); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } /* brightness must apply instantly (no transition inherited from the global image-hover rule) so stored values don't flash on page load */ .hero-video, .hero video, .innerBannerSection img { transition: none !important; } /* ============ WCAG 2.1 AA remediation ============ */ /* Skip-to-content link: hidden until keyboard focus */ .skip-link { position: absolute; top: -60px; left: 12px; z-index: 2000; padding: 10px 18px; background: #1f1d1a; color: #fff; font-weight: 700; border-radius: 0 0 8px 8px; text-decoration: none; transition: top .2s ease; } .skip-link:focus { top: 0; color: #fff; } /* Gold CTA buttons failed 4.5:1 with white text — use the deep shade (already the scrolled-header tone, so still on-brand) */ .btn-gold, .btn-gold:focus { background: var(--wdc-deep, #8b5617) !important; } .btn-gold:hover { background: color-mix(in srgb, var(--wdc-deep, #8b5617) 80%, #000) !important; } /* footer control labels were #8a8a8a (3.2:1) */ .theme-picker .theme-dots-label, .brightness-control .theme-dots-label { color: #5c5c5c; } .brightness-control i { color: #5c5c5c; } /* rating float restructured as link + close button (no nested controls) */ .wdc-rating-float .wdc-float-link { display: flex; align-items: center; gap: 12px; color: #333; text-decoration: none; } /* outline-gold buttons failed contrast on light backgrounds */ .btn-outline-gold { color: var(--wdc-deep, #8b5617) !important; border-color: var(--wdc-deep, #8b5617) !important; } /* active tab pills also needed 4.5:1 */ .tabArea ul.nav li.nav-item button.active, .tabArea ul.nav li.nav-item button:hover { background: var(--wdc-deep, #8b5617) !important; border-color: var(--wdc-deep, #8b5617) !important; } /* placeholder text was too light (fails 4.5:1 on the survey/callback forms) */ input::placeholder, textarea::placeholder { color: #595959 !important; opacity: 1; } /* survey form: dark readable text on light fields */ .wdc-service-survey input:not(.survey-condition-input), .wdc-service-survey textarea, .wdc-service-survey select, .wdc-service-survey .form-clt input, .wdc-service-survey .form-clt textarea { color: #1f1d1a !important; caret-color: #1f1d1a !important; background: #fff !important; pointer-events: auto !important; user-select: text !important; -webkit-user-select: text !important; } .wdc-service-survey .survey-condition-option { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px; } .wdc-service-survey .survey-condition-label { display: block !important; width: auto !important; flex: 1 1 auto; padding: 0 !important; color: #1f1d1a !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .wdc-service-survey .survey-condition-input:checked + .survey-condition-label { color: #1f1d1a !important; background: transparent !important; } /* visible circular radios for the survey card */ .wdc-service-survey input.survey-condition-input { appearance: none !important; -webkit-appearance: none !important; box-sizing: border-box !important; position: static !important; flex: 0 0 20px !important; opacity: 1 !important; width: 20px !important; height: 20px !important; margin: 0 !important; padding: 0 !important; background: #fff !important; border: 2px solid #8a8580 !important; border-radius: 50% !important; box-shadow: none !important; pointer-events: auto !important; clip: auto !important; } .wdc-service-survey input.survey-condition-input:checked { border-color: var(--wdc-gold-dark, #a77437) !important; background-color: #fff !important; background-image: radial-gradient(circle, var(--wdc-gold-dark, #a77437) 0 4.5px, #fff 5px) !important; box-shadow: none !important; } .wdc-service-survey__footer { background: var(--wdc-gold-dark, #a77437) !important; } .wdc-service-survey__prev { background: transparent !important; color: #fff !important; } .wdc-service-survey__prev:hover, .wdc-service-survey__prev:focus-visible { background: color-mix(in srgb, var(--wdc-gold-dark, #a77437) 82%, #000) !important; color: #fff !important; } .wdc-service-survey .wdc-service-survey__submit.theme-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: auto !important; min-height: 56px; line-height: 1.2 !important; padding: 16px 28px !important; border-radius: 0 !important; background: var(--wdc-deep, #8b5617) !important; color: #fff !important; } .wdc-service-survey .wdc-service-survey__submit.theme-btn:hover, .wdc-service-survey .wdc-service-survey__submit.theme-btn:focus-visible { background: color-mix(in srgb, var(--wdc-deep, #8b5617) 80%, #000) !important; color: #fff !important; } /* survey submit button: white on mid-gold was 4.04:1 */ .theme-btn { background: var(--wdc-deep, #8b5617) !important; } .theme-btn:hover { background: color-mix(in srgb, var(--wdc-deep, #8b5617) 80%, #000) !important; } /* contact form inputs also inherited light text */ .contactSection input, .contactSection textarea, .contact-form-box input, .contact-form-box textarea, .contact-form-box-2 input, .contact-form-box-2 textarea { color: #1f1d1a !important; } /* captioned video modal (fancybox inline content) */ .wdc-video-modal { width: min(900px, 92vw); padding: 0; background: #000; } video::cue { background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 1rem; }