/* ================================================================ Brand substitution. reference.css is used untouched. Everything in it resolves colour through the swatch variables and type through the font-family variables, so redefining those here re-skins the whole sheet without editing a single rule. ================================================================ */ /* ------------------------------------------------------------- LOGO FIT The reference's marquee marks were square-ish SVGs drawn to fill a 240x140 slot, so it sets object-fit: cover on them. Ours are wide wordmarks — cherry.svg is 437x122, an aspect of 3.58 against the slot's 1.71 — so cover scales them to the slot HEIGHT and crops roughly half the width away, which is why CareCredit and Cherry rendered as giant fragments. contain fits the whole mark; the padding keeps it off the divider rules either side. */ .n4-marquee_logo { object-fit: contain !important; padding: 1.1rem 1.9rem; } /* ------------------------------------------------ THE PAGE YOU ARE ON, IN THE BAR Webflow marks the link to the current page with .w--current and paints it its own blue (#0082f3), which read as a stray teal word in a purple bar. The reference's own treatment — the nav's dark ink with a purple rule under it — is restated here so it holds on every page, including the ones whose stylesheet lacks the rule. */ .nav__link-item.cc-nav.w--current, .nav__link-item.cc-nav.w--current:hover { color: #35303b; } .nav__link-item.w--current { position: relative; } .nav__link-item.w--current:before { content: " "; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #7f61a0; } /* ----------------------------------------- IVORY GROUND, PURPLE AS THE ACCENT The reference builds its long middle stretch out of near-black slabs. In violet that read as a wall of dark purple, so the slabs take the ground the rest of the page already uses — the reference's own cream — and the purple does the work it is better at: the cards, the marks, the buttons and the rules against it. Type follows the ground, with one exception. A card's title sits ON a photograph, not on the slab, so it keeps its white; only text on the cream itself becomes ink. That is what :not([class*=card]) is guarding. */ main .n4-g_background, section.n4-stories_wrap.n4-u-theme-dark { background-color: #ede9e3 !important; } /* The hero's film keeps its dark scrim — white type over a dim room needs it — but the frame around that film is part of the page, not part of the video, so it takes the cream. */ .n4-hero_main_wrap .n4-g_background { background-color: #ede9e3 !important; } main section:not(.n4-hero_main_wrap) :is(h1, h2, h3, h4, p, span, div, li):not([class*=card] *):not([class*=card]):not([class*=tabs] *) { color: #2f213e !important; } /* ------------------------------------------------ THE GROUND: A MESH, NOT A FLAT Four soft purple lights bleeding into the cream from the corners, with a fine grain over them. The grain is the part that matters: a gradient this wide bands into visible stripes on an ordinary screen without it. The dark bands keep their own colour — this paints the cream ones only. */ main .n4-g_background:not(.n4-hero_main_wrap *), main section.n4-features_wrap, main section.n4-stats_wrap, section.fl-why, .n4-hero_main_wrap .n4-g_background { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"), radial-gradient(52% 44% at 12% 8%, rgba(201, 168, 224, .55) 0%, rgba(201, 168, 224, 0) 70%), radial-gradient(46% 40% at 88% 18%, rgba(169, 139, 208, .40) 0%, rgba(169, 139, 208, 0) 72%), radial-gradient(60% 50% at 70% 92%, rgba(231, 220, 243, .85) 0%, rgba(231, 220, 243, 0) 70%), radial-gradient(40% 36% at 30% 78%, rgba(135, 102, 170, .20) 0%, rgba(135, 102, 170, 0) 70%) !important; background-color: #ede9e3 !important; background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-size: 200px 200px, auto, auto, auto, auto; } /* the text cards float on the mesh as frosted glass; the ones with a photograph behind them stay solid, because glass over a picture is just a haze */ .fl-why .c-photo, .fl-why .c-rev { background: rgba(255, 255, 255, .55) !important; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, .65); box-shadow: 0 12px 40px rgba(74, 47, 99, .08); } /* Safari before 15.4 has no backdrop-filter: those viewers get the solid card */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .fl-why .c-photo, .fl-why .c-rev { background: #f7f4ef !important; } } /* The three quotes, their portraits and the switcher now live in scripts/stories_section.py, which carries its own scoped stylesheet. The reference's tab strip is gone from the markup, so its rules went with it. */ /* ----------------------------------------------- THE BANDS DOWN THE HOMEPAGE Cream is the ground. Four bands stay dark purple so the page has a rhythm rather than one long scroll: the listening section, the affiliations marquee (its wordmarks are white and need the dark), the stories band and the closing call to action. The ball behind that call ran lavender to cyan — the reference's colour, not the practice's — and the stories card washed its photograph in purple, which left its heading dark on dark. */ /* Dark bands: the listening section, the affiliations marquee, the stories band and the closing call to action. Everything between them is cream. */ main section.n4-section_wrap:has(.n4-industries_contain) .n4-g_background, main section.n4-section_wrap:has(.n4-cta_main_bg_wrap) .n4-g_background, main section.n4-trusted_wrap .n4-g_background, main .n4-section_padded_wrap:has(.n4-stories_wrap), main .n4-section_padded_wrap:has(.n4-stories_wrap) .n4-g_background { background-color: #2f213e !important; /* flat. The mesh paints the cream bands; on these it showed through as blotches */ background-image: none !important; } body main section.n4-section_wrap:has(.n4-industries_contain) :is(h1, h2, h3, h4, p, span, div, li, a):not([class*=card] *):not([class*=card]), body main section.n4-section_wrap:has(.n4-cta_main_bg_wrap) :is(h1, h2, h3, h4, p, span, div, li, a):not([class*=card] *):not([class*=card]), body main section.n4-trusted_wrap :is(h1, h2, h3, h4, p, span, div, li, a):not([class*=card] *):not([class*=card]) { color: #ffffff !important; } /* The ball behind the closing call to action ran lavender to cyan. Cyan is the reference's colour, not the practice's: it runs lavender to cream instead. */ .n4-cta_main_bg_circle { background-image: linear-gradient(#e7dcf3, #ede9e3) !important; } /* The stories card washed its photograph in purple, which left the heading dark on dark. The wash is cream, so the type on it reads as it does everywhere else. */ .n4-stories_bg_radial { background-image: radial-gradient(circle at 50% 90%, rgba(255, 255, 255, .72), #ede9e3 42%, #e2dcd2) !important; } /* The affiliations label went dark on dark, leaving its bullet alone on the band. */ #main section.n4-trusted_wrap .n4-g_subtitle_text, #main section.n4-section_wrap:has(.n4-industries_contain) .n4-g_subtitle_text, #main section.n4-section_wrap:has(.n4-cta_main_bg_wrap) .n4-g_subtitle_text { color: #ffffff !important; } /* ------------------------------- THE FEATURE CARDS THE REFERENCE LEFT EMPTY Three of its cards are Rive canvases; without that runtime they were blank space. These are the SVGs that replaced them, moved with CSS: the clock runs, the treatment chips settle in under the roof, and the line between the three towns draws itself. Motion stops entirely for anyone who asks it to. */ .fl-viz { display: block; width: 100%; height: 100%; } .fl-roof { max-width: 15rem; margin-inline: auto; } .fl-clock-min { transform-origin: 100px 100px; animation: fl-sweep 6s linear infinite; } .fl-clock-hour { transform-origin: 100px 100px; animation: fl-sweep 72s linear infinite; } @keyframes fl-sweep { to { transform: rotate(360deg); } } .fl-roof-line { stroke-dasharray: 220; stroke-dashoffset: 220; animation: fl-draw 1.6s ease-out forwards; } .fl-roof-dots rect { opacity: 0; animation: fl-pop .5s ease-out forwards; } .fl-roof-dots rect:nth-child(1) { animation-delay: .5s } .fl-roof-dots rect:nth-child(2) { animation-delay: .62s } .fl-roof-dots rect:nth-child(3) { animation-delay: .74s } .fl-roof-dots rect:nth-child(4) { animation-delay: .86s } .fl-roof-dots rect:nth-child(5) { animation-delay: .98s } .fl-roof-dots rect:nth-child(6) { animation-delay: 1.1s } .fl-roof-dots rect:nth-child(7) { animation-delay: 1.22s } .fl-roof-dots rect:nth-child(8) { animation-delay: 1.34s } @keyframes fl-draw { to { stroke-dashoffset: 0; } } @keyframes fl-pop { from { opacity: 0; transform: translateY(6px) } to { opacity: .85; transform: none } } .fl-towns-arc { stroke-dasharray: 7 9; animation: fl-travel 2.4s linear infinite; } @keyframes fl-travel { to { stroke-dashoffset: -32; } } .fl-towns-dot { transform-box: fill-box; transform-origin: center; animation: fl-pulse 3.2s ease-in-out infinite; } .fl-towns-dot.fl-is-2 { animation-delay: .4s } .fl-towns-dot.fl-is-3 { animation-delay: .8s } @keyframes fl-pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.09) } } /* the marker that replaced the reference's icon on each chip */ .fl-chip-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; opacity: .55; flex: 0 0 auto; } @media (prefers-reduced-motion: reduce) { .fl-clock-min, .fl-clock-hour, .fl-roof-line, .fl-roof-dots rect, .fl-towns-arc, .fl-towns-dot { animation: none; } .fl-roof-line { stroke-dashoffset: 0; } .fl-roof-dots rect { opacity: .85; } } /* -------------------------- THE REVIEW BAND ON THE SERVICE PAGES, MADE READABLE .hrmreview_wrap is a dark violet band carrying a heading, a line of review counts and a row of cream review cards. The page's blanket rule paints every heading and paragraph in a section #2f213e with !important, so the heading and the count line were near-black on dark violet — a contrast of 1.63 where 4.5 is the floor. On 39 service pages. Only the type sitting directly on the violet turns white. Anything inside a review card keeps its ink: those cards are cream, and painting them white too would hide the reviews instead of the heading — the same mistake, one band further down. The ID carries the weight, because the rule being corrected is worth (0,4,3). */ #main section.hrmreview_wrap :is(h1, h2, h3, h4, h5, p, span, div, li, em, strong) { color: #ffffff !important; } /* and the cards take their ink back. Excluding them from the rule above is not enough: their text would then inherit the white from the band around them, which is how the review quotes turned white on cream the first time this was fixed. */ #main section.hrmreview_wrap .hrm4_card_wrap, #main section.hrmreview_wrap .hrm4_card_wrap :is(h1, h2, h3, h4, h5, p, span, div, li, em, strong) { color: #2f213e !important; } /* ============================ NO INVISIBLE TEXT: THE SITE-WIDE SWEEP (2026-09-18) Every page was loaded and every element that owns text measured against the colour it actually sits on (WCAG contrast), then every photo-backed block checked by geometry for text overlapping the photograph. What follows is everything that came back under 3:1, grouped by cause. The root cause of most of it is one rule above: the blanket ink rule paints every heading, paragraph and div inside a section #2f213e with !important. That is right on ivory and wrong on every dark surface — and it also overrode each button's own colour system, resting and hover alike. Order matters below. Section rules come first; button rules come last and carry an extra `html body` so a whitened section can never repaint a button's label. */ /* --- dark surfaces: type turns white ------------------------------------------------ */ /* the dark title bar on the financing plan cards (39 service pages; was 1.63) */ html body #main .plan_title_wrap, html body #main .plan_title_wrap * { color: #ffffff !important; } /* …except Cherry's, which is gold (.is-light): white on it read at 1.60 */ html body #main .plan_title_wrap.is-light, html body #main .plan_title_wrap.is-light * { color: #2f213e !important; } /* the reviews section on the city pages: heading, eyebrow, quotes, names — every line of it was #2f213e on #2f213e, contrast 1.00 (4 pages). Its cards are transparent over the violet, so there is no cream card to protect here. */ #main section.n4-experience2_wrap :is(h1, h2, h3, h4, h5, p, span, div, li, em, strong, a) { color: #ffffff !important; } /* …except the card the carousel is showing. The 21 cards are glass on violet, but the active slide flips to an ivory fill (--_theme---background--bg-primary) to stand out, so its type has to flip back to ink. Keyed on .is-active, so it follows the carousel as it turns. */ #main .n4-swiper_experience2_swiper_slide.swiper-slide.is-active .n4-experience2_card_wrap, #main .n4-swiper_experience2_swiper_slide.swiper-slide.is-active .n4-experience2_card_wrap :is(h1, h2, h3, h4, h5, p, span, div, li, em, strong, a) { color: #2f213e !important; } /* NOT the closing banner on the service pages (.cta1_wrap). It has a photograph behind it, and a geometry check found its heading overlapping that photo — but the heading sits on a cream card laid over the photo, not on the photo itself. Its dark type was right; whitening it made it white on cream on 33 pages until it was caught by eye. Overlap with a photo is not the same as sitting on it: check for an opaque layer in between. */ /* the city-page hero sits on a photograph of the team (Baltimore, Towson, Timonium) */ #main section.n4-header1_wrap :is(h1, h2, h3, h4, h5, p, span, div, li, em, strong) { color: #ffffff !important; } /* the treatment cards on the city pages are 5%-white glass with white type, built for a violet ground; the band's own heading and intro were built for a light one. Giving the band its violet back (the first attempt) made the heading dark on dark (1.00). The cards take dark type instead, so the whole band reads on ivory. */ #main section.n4-programs_wrap :is(.n4-programs_card_heading, .n4-programs_card_text) { color: #2f213e !important; } /* the "Your smile isn't in pieces" band on /our-services/ sits on a photograph under a dark overlay that fades to black; every line of it was #2f213e (1.41). Its only light child is the ground layer behind the photo, so there is no card to protect. */ #main section:has(.n4-cta3_para) :is(h1, h2, h3, h4, h5, p, span, div, li, em, strong) { color: #ffffff !important; } /* --- light surfaces: type turns dark ------------------------------------------------ */ /* one of the six accordion-card colours is a pale blue-grey; cream type on it read at 1.96. The other five are dark enough and keep their cream. */ #main .hcp1_card.w-variant-a55e5bb6-dc2f-c3ce-88b1-855d5b06883e, #main .hcp1_card.w-variant-a55e5bb6-dc2f-c3ce-88b1-855d5b06883e * { color: #2f213e !important; } /* --- buttons: their own colour system, resting and hover ---------------------------- */ /* Each button variant sets --_button-style---text / -text-hover (and the text-link buttons --_button-text-style---*). The wrapper uses them; the label inherits. The blanket rule matched the wrapper div and the label and painted both #2f213e, which is how "Book a visit" became #2f213e on a #2f213e button (1.00, 39 pages) — and why hovering could not fix it: the hover colour lost to the same !important. */ html body #main :is(.btn_main_wrap, .n4-btn_main_wrap) { color: var(--_button-style---text) !important; } html body #main :is(.btn_main_wrap, .n4-btn_main_wrap) :is(div, span, p) { color: inherit !important; } html body #main :is(.btn_text_wrap, .n4-btn_text_wrap) { color: var(--_button-text-style---text) !important; } html body #main :is(.btn_text_wrap, .n4-btn_text_wrap) :is(div, span, p) { color: inherit !important; } /* the treatment cards' "Learn more" is a text button, so the rule above hands it the colour its section was built for — white, for a violet ground this band no longer has. It takes the same ink as the card text around it, resting and hovered (more specific than both rules). */ html body #main section.n4-programs_wrap .n4-btn_text_wrap, html body #main section.n4-programs_wrap .n4-btn_text_wrap:hover { color: #2f213e !important; } @media (hover: hover) { html body #main :is(.btn_main_wrap, .n4-btn_main_wrap):hover { color: var(--_button-style---text-hover) !important; } html body #main :is(.btn_text_wrap, .n4-btn_text_wrap):hover { color: var(--_button-text-style---text-hover) !important; } } /* --------------------------------- THE IVORY BAND ABOVE THE HERO ON A PHONE The hero's gradient is a rounded card inset inside its section: 12px at the sides and bottom, 54px at the top. On a wide screen that top inset is the room the floating, transparent header sits in. On a phone the header is a solid bar with its own height, so the inset has nothing to do and 56px of the ivory ground shows as a line between the header and the gradient. The reference sets padding:0 here below 767px for exactly this reason, and its rule does not take: at 375px the media query matches, both copies of the rule are parsed and match the element, and the later one still loses to the base declaration. Nothing else on the page sets padding on it — not an inline style, not one of the in-body