/* Habari overrides — injected into every page after Framer's own CSS. Edit here, then run: bun tools/replace.js */ [data-framer-name="Template Buy Button"]{display:none!important} /* Hero lockup: BIG icon stacked above the wordmark (icon centred over the word by the block's align-items:center). Block scales with the viewport (Framer capped it at 550px); icon sits in the block's flex flow so the gap is 16px everywhere. */ .framer-7yj4as{width:clamp(550px,40vw,100%)!important;max-width:none!important;overflow:visible!important;padding-bottom:9%!important} .framer-94s39g .framer-an17dl{background:url(./typeface-white.svg) left center/contain no-repeat;aspect-ratio:1980/152!important;height:auto!important} .framer-94s39g .framer-an17dl *{visibility:hidden} .framer-94s39g>*:not(.framer-an17dl){display:none!important} .framer-15fhema{background:url(./icon-dark.svg) center/contain no-repeat;position:relative!important;order:-1;width:41%!important;aspect-ratio:547/329;height:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important} .framer-15fhema *{visibility:hidden} /* 810–1199: text container spans only 2 grid columns and clips — widen the block and un-clip */ @media (max-width:1199.98px){.framer-7yj4as{width:50vw!important}.framer-aizpav{overflow:visible!important}} @media (max-width:809.98px){.framer-7yj4as{width:100%!important;padding-bottom:12%!important}} /* ≥810: logo stays at the links' height (224x26); page links start from the right with a modest gap instead of filling the row */ @media (min-width:810px){.framer-fjOy7 .framer-7h3po8{width:224px!important}.framer-Z2aNj.framer-fvp1dl{justify-content:flex-end!important;gap:clamp(28px,4vw,56px)!important}} /* True centring of the hero lockup (+ its subtitle) on every width ≥810: drop the template's empty Filler column, let the text container span the whole 4-col grid and centre its children. Phones already centre. */ @media (min-width:810px){.framer-1en2rdx{display:none!important}.framer-aizpav{grid-column:1/-1!important;align-items:center!important;overflow:visible!important}.framer-7yj4as{margin:0 auto!important}} /* Media overlays (dim layers over photos/video, nav backdrop) stay deep black — the grey sweep must not touch them. Classes = every *Overlay* element across all 22 pages (pristine bg #0d0d0d / #1f1f1f). Gradients are reverted in replacements.json. */ .framer-ul47s4,.framer-1auuop6,.framer-1q48sik,.framer-2rkagx,.framer-r4h57g,.framer-1c31hon,.framer-1fqcxrj,.framer-1f8xv28,.framer-1akmct7{background-color:#000!important} /* Overlays built from the dark token via color-mix (hero media fades): resolve the token to black on those elements only */ [style*="color-mix(in srgb, var(--token-d33926f3"]{--token-d33926f3-e1ef-47a7-a2fc-872ea608e7c8:#000!important} /* Desktop/tablet side rail: darker shade of the brand grey (mobile top bar untouched) */ @media (min-width:810px){[data-framer-name="Side Nav"].framer-3der5{background-color:#2b2b2b!important}} /* About card signature: the template's handwritten "Jin Yuen" is an SVG mask; show Dr. Akeza Teame as a smaller continuous signature. */ .framer-1wg7p81{-webkit-mask:none!important;mask:none!important;background:none!important;width:auto!important;height:auto!important;aspect-ratio:auto!important;opacity:1!important;z-index:3!important;pointer-events:none!important} .framer-1wg7p81::after{content:"Dr. Akeza Teame";display:block;font-family:"Snell Roundhand","Brush Script MT","Segoe Script",cursive;font-weight:400;font-size:clamp(30px,4.1vw,46px);line-height:1;color:#bf0a15;white-space:nowrap;letter-spacing:-.04em;transform:rotate(-5deg);transform-origin:left center} /* Our Clients: template logo masks -> Habari partner logos (old site), full colour, fitted to the 294x120 tile */ .framer-gaSjD.framer-o7c73w{-webkit-mask:none!important;mask:none!important;background:url(./partner-1.png) center/contain no-repeat!important;mix-blend-mode:multiply;width:auto!important;height:72px!important;aspect-ratio:1.6140!important} .framer-wSHP9.framer-o7c73w{-webkit-mask:none!important;mask:none!important;background:url(./partner-2.png) center/contain no-repeat!important;mix-blend-mode:multiply;width:auto!important;height:72px!important;aspect-ratio:2.7776!important} .framer-yh1m0.framer-o7c73w{-webkit-mask:none!important;mask:none!important;background:url(./partner-3.png) center/contain no-repeat!important;mix-blend-mode:multiply;width:auto!important;height:72px!important;aspect-ratio:1.9798!important} .framer-9SpMv.framer-o7c73w{-webkit-mask:none!important;mask:none!important;background:url(./partner-4.png) center/contain no-repeat!important;mix-blend-mode:multiply;width:auto!important;height:72px!important;aspect-ratio:2.6244!important} .framer-CxFEq.framer-o7c73w{-webkit-mask:none!important;mask:none!important;background:url(./partner-5.png) center/contain no-repeat!important;mix-blend-mode:multiply;width:auto!important;height:72px!important;aspect-ratio:1.3775!important} .framer-azjUT.framer-o7c73w{-webkit-mask:none!important;mask:none!important;background:url(./partner-6.png) center/contain no-repeat!important;mix-blend-mode:multiply;width:auto!important;height:24px!important;aspect-ratio:8.1122!important} /* Footer lockup (light bg): icon in brand colours stacked above the grey wordmark, same as the hero */ .framer-ab2qu1{display:flex!important;flex-direction:column!important;gap:16px!important;align-items:flex-start!important;width:100%!important;overflow:visible!important;padding-bottom:6%!important} .framer-g8f7gt .framer-ibnepj{background:url(./typeface.svg) left center/contain no-repeat;aspect-ratio:1980/152!important;height:auto!important} .framer-g8f7gt .framer-ibnepj *{visibility:hidden} .framer-g8f7gt>*:not(.framer-ibnepj){display:none!important} .framer-1xn72o7{background:url(./icon.svg) left center/contain no-repeat;position:relative!important;order:-1;width:58%!important;aspect-ratio:547/329;height:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important} .framer-1xn72o7 *{visibility:hidden} /* Why-us bar graph legend: Mira "m" mark (Black Mark vector) -> Habari icon, this instance only */ .framer-1l4zi18 .framer-uWlWh{-webkit-mask:none!important;mask:none!important;background:url(./icon.svg) center/contain no-repeat!important;width:25px!important;height:15px!important;aspect-ratio:auto!important} /* Services cards: title wrapper was a fixed 300px with word-break -> long words (CARDIOLOGY.) split mid-word. Size to content, never break inside a word. */ .framer-1pnc4jy{width:auto!important;max-width:100%!important} .framer-1hi8a5m{width:max-content!important;max-width:100%!important} .framer-1hi8a5m .framer-text{word-break:normal!important;overflow-wrap:normal!important} /* Side rail: top-left square of the menu button in brand red; Globe -> Habari icon (inline bg colour needs !important) */ .framer-ij8d5t[data-framer-name="1"]{background-color:#bf0a15!important} [data-framer-name="Globe"] .framer-186e1em{width:26px!important;height:16px!important;aspect-ratio:auto!important;background:url(./icon-dark.svg) center/contain no-repeat} [data-framer-name="Globe"] .framer-186e1em .svgContainer{visibility:hidden} /* Work grid: the small brand mark beside the reveal headline duplicates the nav logo; keep its box so the row layout (headline centred, See-all button right) is unchanged */ .framer-1eglvw5 .framer-12rs6gn{visibility:hidden!important} /* "+30" Stacked Avatars: template shows client/patient faces; show 3 distinct Habari doctors instead. Scoped to the three per-slot wrappers so the contact "Avatars" doctor stack and the testimonial author photos (which share the same CMS image ids) stay untouched. */ .framer-zsjmne-container .framer-17aumxd img, .framer-1ywp80p-container .framer-17aumxd img, .framer-r3qz5f-container .framer-17aumxd img{opacity:0!important} .framer-zsjmne-container .framer-17aumxd{background:url(./avatar-1.jpg) center/cover no-repeat!important} .framer-1ywp80p-container .framer-17aumxd{background:url(./avatar-2.jpg) center/cover no-repeat!important} .framer-r3qz5f-container .framer-17aumxd{background:url(./avatar-3.jpg) center/cover no-repeat!important} /* Specialist-team badge: drop the fake "4.9/5" star rating, keep faces + caption */ [data-framer-name="Rating"] [data-framer-name="Rating / Stars"]{display:none!important} /* Book-a-visit CTAs: use the clean calendar glyph everywhere, keep the arrow visible, and leave breathing room on the right. */ .framer-U9l7N [data-framer-name="Picture"] img{opacity:0!important} .framer-U9l7N [data-framer-name="Picture"]{background:url(./book-visit-icon.svg) center/70% 70% no-repeat!important;border-radius:50%!important} .framer-U9l7N [data-framer-name="Button"]{position:relative!important;padding-right:50px!important} /* Framer's hydrated sprite can lose its arrow reference. Draw the same arrow on the button itself. */ .framer-U9l7N [data-framer-name="Button"]::before{content:"";position:absolute!important;top:50%!important;width:14px!important;height:2px!important;background:#fff!important;right:18px!important;transform:translateY(-50%)!important;pointer-events:none!important;z-index:3!important} .framer-U9l7N [data-framer-name="Button"]::after{content:"";position:absolute!important;top:50%!important;width:8px!important;height:8px!important;border-top:2px solid #fff!important;border-right:2px solid #fff!important;right:16px!important;transform:translateY(-50%) rotate(45deg)!important;transform-origin:center!important;pointer-events:none!important;z-index:3!important} .hb-why-us-day-scale [data-framer-name="Top Bar"]{width:100%!important} .hb-why-us-day-scale [data-framer-name="Top Bar"] > div{opacity:1!important;transform:none!important} .hb-why-us-day-scale [data-framer-name="Top Bar"] .framer-text{color:#fff!important;--framer-text-color:#fff!important} .hb-why-us-day-scale [data-framer-name="Bottom Bar"]{width:60%!important} .framer-U9l7N .framer-SYorz{display:none!important} /* Red CTA bars: keep brand grey for the grey parts (contrast on red), only the red cross -> white */ .framer-1mi7dag{background-image:url(./logo-onred.svg)!important;filter:none!important} .framer-1ixs85r .framer-186e1em{background-image:url(./icon-onred.svg)!important;filter:none!important} /* Footer socials -> Facebook / TikTok / Telegram (Behance hidden; we have 3) */ a[aria-label="Behance Link"]{display:none!important} .framer-LAEqS{-webkit-mask-image:url(./social-facebook.svg)!important;mask-image:url(./social-facebook.svg)!important;-webkit-mask-size:contain!important;mask-size:contain!important;-webkit-mask-position:center!important;mask-position:center!important;-webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important} .framer-uZnUQ{-webkit-mask-image:url(./social-tiktok.svg)!important;mask-image:url(./social-tiktok.svg)!important;-webkit-mask-size:contain!important;mask-size:contain!important;-webkit-mask-position:center!important;mask-position:center!important;-webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important} .framer-K6Gdb{-webkit-mask-image:url(./social-telegram.svg)!important;mask-image:url(./social-telegram.svg)!important;-webkit-mask-size:contain!important;mask-size:contain!important;-webkit-mask-position:center!important;mask-position:center!important;-webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important} /* doctors.html (copy of About): keep nav/hero, the team grid and footer. The unwanted About sections are collapsed to zero height but kept IN FLOW (not display:none): the hero's onScrollTarget zoom/fade scrubs against a ref inside them — removing them from layout parks the hero at 0.6 opacity / 92.5% scale. */ .hb-doctors .framer-epz8fu,.hb-doctors .framer-1v9qbyv, .hb-doctors section.framer-HIOH4,.hb-doctors section.framer-azsrl,.hb-doctors section.framer-DEz1j{ height:0!important;min-height:0!important;max-height:0!important;overflow:hidden!important; padding:0!important;margin:0!important;visibility:hidden!important} /* the team block is pulled up over the invisible runway so it slides over the fading hero immediately — the same motion About gets from its own next section (no blank screenful in between) */ .hb-doctors .framer-zzq0ma-container{margin-top:-100vh!important;position:relative!important} /* first hidden section (Culture) keeps ~1 viewport of INVISIBLE height: the hero's onScrollTarget scrub needs its ref element to travel through the viewport — zero height made it fire instantly at load, full removal froze it. This gives the fade/shrink the same runway it has on About. */ .hb-doctors .framer-1nyqe0x{ height:100vh!important;min-height:100vh!important;max-height:100vh!important;overflow:hidden!important; padding:0!important;margin:0!important;visibility:hidden!important} /* home: cloned "view all doctors" link sits under the (30) Specialists label */ .hb-viewall{margin-top:14px;display:inline-flex!important} /* Pricing was template filler and is the only content section intentionally removed. */ .hb-hidden-section, section[data-framer-name="Pricing"], section[data-framer-name="Pricing FAQ"], section[name="Pricing"], section[name="Pricing FAQ"]{display:none!important} /* Service detail: retain the template's client-mark slot and use a verified doctor preview. */ .hb-doctor-preview{ width:52px!important; height:52px!important; aspect-ratio:1/1!important; flex:0 0 52px!important; -webkit-mask:none!important; mask:none!important; background:var(--hb-doctor-preview) center top/cover no-repeat!important; border-radius:8px!important; } .hb-doctor-preview > *{visibility:hidden!important} .hb-service-detail-title{width:100%!important;max-width:100%!important} .hb-service-detail-title h1{ width:100%!important; word-break:normal!important; overflow-wrap:normal!important; white-space:normal!important; } /* Contact: runtime-added fields reuse the exported Framer input surface. */ [data-habari-field]{width:100%!important;min-width:0!important} [data-habari-field] input,[data-habari-field] textarea{ width:100%!important; min-width:0!important; color:var(--framer-input-text-color,#fff)!important; background:transparent!important; } [data-habari-field] input::placeholder,[data-habari-field] textarea::placeholder{ color:var(--framer-input-placeholder-color,rgba(255,255,255,.58))!important; font-weight:300!important; opacity:1!important; } [data-habari-field="message"]{min-height:90px!important;height:90px!important} [data-habari-field="message"] textarea{height:100%!important;resize:none!important;padding-top:10px!important} /* Home Services: native template card linking the four featured services to the full carousel. */ .hb-services-viewall { display: block !important; margin-top: 28px; max-width: 220px; width: 220px !important; } .hb-services-viewall > a { width: 100% !important; } @media (max-width: 809.98px) { .hb-services-viewall { margin-top: 22px; max-width: 220px; width: min(100%, 220px) !important; } } /* End Home Services. */ /* Shared section rhythm: a clear buffer before the first content block and after the last one. */ section[data-framer-name]:not([data-framer-name="Hero"]):not([data-framer-name="Desktop"]):not([data-framer-name="Pricing"]):not([data-framer-name="Pricing FAQ"]) > [data-framer-name]:first-child{ margin-top:clamp(40px,5vw,80px)!important; } section[data-framer-name]:not([data-framer-name="Hero"]):not([data-framer-name="Desktop"]):not([data-framer-name="Pricing"]):not([data-framer-name="Pricing FAQ"]) > [data-framer-name]:last-child{ margin-bottom:clamp(40px,5vw,80px)!important; } /* Site credit added by the shared runtime so it survives Framer hydration and soft navigation. */ .hb-wubsites-credit{ flex:none; width:100%; margin:0; color:#686868; font-family:Inter,Arial,sans-serif; font-size:14px; font-weight:400; line-height:1.5; text-align:center; } .hb-wubsites-credit a{color:#3e3e3e;font-weight:600;text-decoration:none} .hb-wubsites-credit a:hover,.hb-wubsites-credit a:focus-visible{text-decoration:underline} /* Phone footer: keep the 224px shared logo inside its grid column and give the footer a calm edge. */ @media (max-width:809.98px){ .framer-1e616zs-container{min-width:0!important;width:100%!important} .framer-1e616zs-container .framer-fjOy7, .framer-1e616zs-container .framer-fjOy7 .framer-7h3po8{width:min(38vw,148px)!important;max-width:100%!important} section[data-framer-name="Footer"]{padding-block:48px!important} } /* Keep the Home hero visually stable while Framer replaces its SSR slider during hydration. */ html.hb-home-hero [data-framer-name="Slider Container"] { isolation: isolate; } html.hb-home-hero [data-framer-name="Slider Container"]::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #3e3e3e url("../runtime/images/svc-internal-medicine-natural.webp") center / cover no-repeat; opacity: 1; visibility: visible; transition: opacity 220ms ease, visibility 0s linear 0s; } html.hb-home-hero.hb-hero-media-ready [data-framer-name="Slider Container"]::before { opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 0s linear 220ms; } html.hb-home-hero:not(.hb-hero-media-ready) [data-framer-name="Hero / About"]:not(:has([data-framer-name="Hero"]))::before { content: ""; display: block; flex: none; width: 100%; height: 100vh; background: #3e3e3e url("../runtime/images/svc-internal-medicine-natural.webp") center / cover no-repeat; } @media (max-width: 809.98px) { html.hb-home-hero .hb-mobile-visit-scroll { height: calc(450px + 300svh) !important; justify-content: flex-start !important; overflow: visible !important; } html.hb-home-hero .hb-mobile-visit-scroll > [data-framer-name="Proccess Container"] { position: sticky !important; top: max(20px, calc((100svh - 450px) / 2)) !important; height: 450px !important; } html.hb-home-hero .hb-mobile-visit-scroll [data-framer-name="Process Accordian"] > [data-framer-name="Phone"] { overflow-x: hidden !important; touch-action: pan-y !important; } html.hb-home-hero [data-framer-name="Hero"] { height: 92vh !important; min-height: 92vh !important; } html.hb-home-hero:not(.hb-hero-media-ready) [data-framer-name="Hero / About"]:not(:has([data-framer-name="Hero"]))::before { height: 92vh; } } /* Doctors grid: keep long names wrapping at word boundaries instead of being crushed by wide specialty labels (Dr. Samson Niguse letter-wrapped at 52px). */ .framer-Me6vv .framer-3ohe8n { flex-wrap: wrap; row-gap: 2px; } .framer-Me6vv .framer-1dxru2s { flex: 1 0 55%; } .framer-Me6vv .framer-3ohe8n > *:last-child { margin-left: auto; } /* Portrait placeholder: contain instead of cover so the Habari mark renders at the same size in every card, independent of row height differences. */ img[src*="doc-placeholder.svg"] { object-fit: contain !important; background: #3e3e3e; } /* Home team teaser: "View all doctors" was a bare 12px text label with no affordance — give it the same white-pill CTA treatment as the established View-all-services button, with hover invert and a visible focus ring. */ .hb-viewall { display: inline-flex !important; align-items: center; gap: 8px; width: fit-content; background: #fff !important; color: #0a0a0a !important; padding: 14px 22px !important; border-radius: 10px; margin-top: 12px; transition: background .25s, color .25s; } .hb-viewall .framer-text { color: inherit !important; } .hb-viewall::after { content: '\2192'; font-size: 14px; line-height: 1; } .hb-viewall:hover { background: #0a0a0a !important; color: #fff !important; } .hb-viewall:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }