/* ------------------------------------------------------------------ Project overrides (loaded after sifoxen.css). ------------------------------------------------------------------ */ /* Prevent home-page layout shift (CLS "blink"): owl-carousel.css sets .owl-carousel{display:none} until JS runs, so the hero slider appears from zero height AFTER load and shoves everything below it down. Keep the first slide visible (reserving the correct height) until owl adds .owl-loaded. */ .owl-carousel:not(.owl-loaded) { display: block; } .owl-carousel:not(.owl-loaded) > .item:not(:first-child) { display: none; } /* WOW.js reveal fix: the theme ships NO CSS rule to pre-hide .wow elements, so they paint visible first, then WOW's JS sets visibility:hidden, then animates them back in — a visible "blink" (flash out/in). Hide them up front so they simply fade in once. (noscript fallback in keeps them visible if JS is off, so content is never permanently hidden.) */ .wow { visibility: hidden; } /* ------------------------------------------------------------------ Topbar (green/teal bar on inner pages) — force white text/icons so contact info reads clearly on the green background. ------------------------------------------------------------------ */ .topbar-one__info a, .topbar-one__info li, .topbar-one__info__icon, .topbar-one__info__icon i, .topbar-one__open__text, .topbar-one__open__icon, .topbar-one__open__icon i, .topbar-one__social a { color: #fff !important; } .topbar-one__info a:hover, .topbar-one__social a:hover { color: rgba(255, 255, 255, .78) !important; } /* ------------------------------------------------------------------ Floating WhatsApp button — fixed bottom-right, above the scroll-top. ------------------------------------------------------------------ */ .whatsapp-float { position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; z-index: var(--z-float, 900); box-shadow: 0 6px 18px rgba(37, 211, 102, .45); transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; } .whatsapp-float:hover { color: #fff; background: #1ebe5a; transform: scale(1.08); box-shadow: 0 8px 24px rgba(37, 211, 102, .6); } @media (max-width: 575px) { .whatsapp-float { right: 16px; bottom: 16px; width: 50px; height: 50px; font-size: 26px; } } /* ------------------------------------------------------------------ Testimonials — feminine (♀) symbol instead of a stock patient photo. Reuses .testimonial-card__image sizing/position; adds the icon look. ------------------------------------------------------------------ */ .testimonial-card__symbol { display: inline-flex !important; align-items: center; justify-content: center; background: linear-gradient(135deg, #096863, #0e7d78); color: #fff; border-radius: 50%; overflow: hidden; } .testimonial-card__symbol i { font-size: 30px; line-height: 1; } /* ------------------------------------------------------------------ Media page — YouTube video cards (thumbnail + play) and lightbox. Same UX as azerabdullayev.az: thumbnail opens a youtube-nocookie embed. ------------------------------------------------------------------ */ .video-card { cursor: pointer; outline: none; } .video-card__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-m); overflow: hidden; background: #e9ecef; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); } .video-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--ease-out); } .video-card:hover .video-card__thumb img, .video-card:focus .video-card__thumb img { transform: scale(1.05); } .video-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .12); transition: background-color .25s ease; } .video-card:hover .video-card__play { background: rgba(0, 0, 0, .22); } .video-card__play i { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: #bf4526; color: #fff; font-size: 20px; padding-left: 4px; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); transition: transform .25s ease; } .video-card:hover .video-card__play i { transform: scale(1.1); } .video-card__title { margin-top: 16px; font-size: 19px; line-height: 1.4; text-align: center; } .video-lightbox { position: fixed; inset: 0; z-index: var(--z-modal, 1000); display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .86); padding: 20px; } .video-lightbox.is-open { display: flex; } .video-lightbox__frame { width: 100%; max-width: 920px; aspect-ratio: 16 / 9; } .video-lightbox__frame iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius-s); background: #000; } .video-lightbox__close { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; background: transparent; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; opacity: .85; transition: opacity .2s ease; } .video-lightbox__close:hover { opacity: 1; } /* ------------------------------------------------------------------ Home FAQ — native
accordion (no JS dependency). ------------------------------------------------------------------ */ .faq-home__list { max-width: 860px; margin: 0 auto; } /* Space between the FAQ heading and the accordion rows. */ .faq-home .sec-title { margin-bottom: 45px; } .faq-item { background: #fff; border: 1px solid #eceef2; border-radius: var(--radius-m); margin-bottom: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, .04); overflow: hidden; } .faq-item__q { list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; font-size: 18px; font-weight: 600; color: #22252b; position: relative; } .faq-item__q::-webkit-details-marker { display: none; } .faq-item__q::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; line-height: 28px; text-align: center; border-radius: 50%; background: #bf4526; color: #fff; font-size: 22px; transition: transform .25s ease; } .faq-item[open] .faq-item__q::after { content: '−'; background: #096863; } .faq-item__a { padding: 0 24px 22px; color: #6b6e76; line-height: 1.7; } /* ------------------------------------------------------------------ Disease / treatment detail — semantic content sections. ------------------------------------------------------------------ */ .service-details__lead { font-size: 18px; color: #3a3d44; font-weight: 500; margin-bottom: 18px; } .content-heading { font-size: 22px; font-weight: 600; color: #1f2937; margin: 34px 0 16px; padding-left: 14px; border-left: 4px solid #096863; line-height: 1.3; } .symptom-list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 576px) { .symptom-list { grid-template-columns: 1fr 1fr; } } .symptom-list li { display: flex; align-items: flex-start; gap: 10px; color: #3a3d44; line-height: 1.55; } .symptom-list li i { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: rgba(12, 163, 159, .12); color: #096863; font-size: 11px; display: flex; align-items: center; justify-content: center; } .notice-box { display: flex; gap: var(--space-xs); align-items: flex-start; background: rgba(191, 69, 38, .06); border: 1px solid rgba(191, 69, 38, .18); border-radius: var(--radius-m); padding: var(--space-m) var(--space-m); margin: var(--space-l) 0; } .notice-box__icon { flex-shrink: 0; color: #bf4526; font-size: 22px; line-height: 1; margin-top: 2px; } .notice-box__title { font-size: 17px; font-weight: 600; color: #22252b; margin: 0 0 6px; } .notice-box p { color: #5a5d65; margin: 0; line-height: 1.6; } .related-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; } .related-chip { display: inline-block; padding: 7px 16px; border-radius: var(--radius-pill); background: rgba(12, 163, 159, .08); color: #096863; font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .2s ease, color .2s ease; } .related-chip:hover { background: #096863; color: #fff; } /* ------------------------------------------------------------------ Language switcher — premium pill style, context-aware colours. ------------------------------------------------------------------ */ .main-header__lang { display: inline-flex; align-items: center; gap: 2px; } .main-header__lang__sep { display: none; /* pills instead of pipe separators */ } .main-header__lang__item { display: inline-block; padding: 4px 11px; font-size: 13px; font-weight: 600; letter-spacing: .6px; line-height: 1.3; border-radius: 20px; text-decoration: none; transition: color .25s ease, background-color .25s ease; } /* On the green (teal) topbar of inner pages: white text, active = white pill. */ .topbar-one .main-header__lang__item { color: rgba(255, 255, 255, .78); } .topbar-one .main-header__lang__item:hover { color: #fff; } .topbar-one .main-header__lang__item.is-active { color: #096863; background: #fff; } /* On the light home header (main-header--two): teal text, active = orange pill. */ .main-header--two .main-header__lang__item { color: #096863; } .main-header--two .main-header__lang__item:hover { color: #bf4526; } .main-header--two .main-header__lang__item.is-active { color: #fff; background: var(--sifoxen-base-strong, #bf4526); } /* ================================================================== DESIGN SYSTEM TOKENS — fluid type/space (utopia.fyi), radius, z-index, colour ramp. Config: 320→1200px viewport, 16→18px base, 1.2/1.25 ratio. Single source of truth; overrides the theme's stepped px scale without touching sifoxen.css. ================================================================== */ :root { /* Fluid type scale (utopia) — base 14.5→16.5px, ratio 1.2/1.25. Single source of truth for every text size on the site. */ --step--1: clamp(0.755rem, 0.730rem + 0.13vw, 0.825rem); --step-0: clamp(0.906rem, 0.861rem + 0.23vw, 1.031rem); /* body 14.5→16.5 */ --step-1: clamp(1.088rem, 1.014rem + 0.37vw, 1.289rem); --step-2: clamp(1.305rem, 1.194rem + 0.56vw, 1.611rem); --step-3: clamp(1.566rem, 1.403rem + 0.81vw, 2.014rem); --step-4: clamp(1.879rem, 1.647rem + 1.16vw, 2.518rem); --step-5: clamp(2.255rem, 1.931rem + 1.62vw, 3.147rem); --step-6: clamp(2.706rem, 2.245rem + 2.31vw, 3.931rem); /* hero display */ /* Unified line-height standard */ --lh-tight: 1.15; /* hero / large display */ --lh-heading: 1.25; /* all headings */ --lh-body: 1.6; /* body copy */ /* Fluid space scale (utopia) */ --space-2xs: clamp(0.500rem, 0.477rem + 0.11vw, 0.5625rem); --space-xs: clamp(0.750rem, 0.716rem + 0.17vw, 0.844rem); --space-s: clamp(1.000rem, 0.955rem + 0.23vw, 1.125rem); --space-m: clamp(1.500rem, 1.432rem + 0.34vw, 1.688rem); --space-l: clamp(2.000rem, 1.909rem + 0.45vw, 2.250rem); --space-xl: clamp(3.000rem, 2.864rem + 0.68vw, 3.375rem); --space-2xl: clamp(4.000rem, 3.818rem + 0.91vw, 4.500rem); --space-3xl: clamp(6.000rem, 5.727rem + 1.36vw, 6.750rem); /* Radius scale (replaces ad-hoc 12/14/16/20px) */ --radius-s: 12px; --radius-m: 16px; --radius-l: 20px; --radius-pill: 999px; /* Standard easing — ease-out for UI (impeccable / emil) */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* Semantic z-index scale (replaces arbitrary 9999/2000) */ --z-sticky: 100; --z-float: 900; --z-modal: 1000; --z-toast: 1100; /* Text ramp — 3 tones, AA-compliant on white (replaces 5 ad-hoc greys) */ --ink: #22252b; /* headings / strong */ --ink-body: #56585f; /* body — ≈ 7:1 on #fff (was #79767C ≈ 4.4:1) */ --ink-mute: #6b6e76; /* secondary / captions — ≈ 4.7:1 */ /* Brand accents — darkened for WCAG AA (Lighthouse a11y 96→100). Overrides sifoxen.css :root (#FF6F4D / #0CA39F ≈ 2.6-2.9:1 failed). Cascades to every theme button/tab/accent that uses these vars. */ --sifoxen-base: #bf4526; /* coral — AA-safe: 4.5:1+ as text on white, 4.6:1 white-on-coral for 16px/700 buttons */ --sifoxen-base-rgb: 191, 69, 38; --sifoxen-base-strong: #bf4526; /* alias kept for existing references */ --sifoxen-primary: #096863; /* teal — text & white-on-teal ≥4.5:1 */ --sifoxen-primary-rgb: 9, 104, 99; } /* ================================================================== UNIFIED TYPE SYSTEM — every prominent text element on the site is routed through the same fluid scale + one line-height standard, so the theme's ~30 ad-hoc px sizes collapse into a single ladder. FONT-WEIGHT STANDARD (theme shipped titles at 300/400 = too thin): 700 headings — hero, section, page, article & card titles 600 small titles, kickers/taglines, nav, buttons, tabs, breadcrumb 500 leads / emphasised captions / testimonial quote 400 body copy, descriptions, list text ← weight NOT applied here Rule of thumb: weight carries hierarchy on TITLES; body text stays 400. ================================================================== */ /* All headings: one weight, one line-height, tidy wrapping. */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: var(--lh-heading); text-wrap: balance; } /* Nav links: one weight across BOTH headers (home shipped 600, inner 500). */ .main-menu__list > li > a, .mobile-nav__container .main-menu__list > li > a { font-weight: 600 !important; } /* ================================================================== HEADER RESPONSIVE — one hamburger below desktop. Desktop keeps the sidebar (off-canvas) toggler + the Əlaqə CTA; tablet/mobile show ONLY the main mobile-nav hamburger so there aren't two competing hamburgers. (Contact stays reachable via the off-canvas panel's phone/email block.) ================================================================== */ @media (max-width: 1199px) { .main-header__sidebar-btn { display: none !important; } .main-header__btn { display: none !important; } /* Language switcher moves into the off-canvas menu on mobile/tablet. */ .main-header__lang { display: none !important; } } /* Inner-page header on ALL sub-desktop widths (< 1200px, where the theme collapses the nav into the hamburger). The theme keeps a teal header bg + teal topbar here; a dark-teal hamburger on teal was invisible on tablets / landscape phones (992–1199px). Make the header a clean white bar and the hamburger a bold, high-contrast button across the whole range. */ @media (max-width: 1199px) { .main-header--one { background-color: #fff !important; } .main-header--one .main-header__bg { display: none !important; } .main-header--one .topbar-one { display: none !important; } /* ROOT-CAUSE FIX: the theme only caps the header logo width at <=385px, so on phones/tablets wider than that (390/414/430px … most modern devices) the logo rendered at its full inline 310px, pushing the hamburger off the right edge (clipped, since overflow is hidden). Cap it across the whole hamburger range so the menu button always has room. */ .main-header__logo img { width: 160px !important; max-width: 46vw !important; height: auto !important; } /* Prominent hamburger — clear 44px tap target, bold brand-teal bars on a white chip so it stays visible on BOTH the white inner header AND the home header that floats transparently over the (teal-tinted) hero. */ .main-header .mobile-nav__btn.mobile-nav__toggler { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; background: #fff; border: 1px solid rgba(12, 163, 159, .25); border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); } .main-header .mobile-nav__btn.mobile-nav__toggler span { display: block; width: 24px; height: 3px; margin: 0 !important; border-radius: 2px; background-color: #096863 !important; } } /* Home header (main-header--two): the theme's phone-number widget appears at wide viewports and, next to the Əlaqə CTA we added, overflowed the header (green box clipped on the right). It duplicates the CTA + topbar contact, so drop it. Also give the language switcher breathing room from the nav. */ .main-header--two .main-header__call { display: none !important; } .main-header--two .main-header__lang { margin-left: 22px; } .main-header--two .main-header__btn { margin-left: 6px; } /* Contact lives in the desktop nav as the Əlaqə CTA button, so hide the Contact
  • in the desktop header bar. The theme clones the menu into the mobile off-canvas (.mobile-nav__container), which is NOT inside .main-header, so the Contact item still appears in the hamburger menu. */ .main-header .main-menu__list > .menu-item-contact { display: none; } /* Footer: the big logo card (.main-footer__top) is redundant on phones — the footer widgets already carry the name and contact. Hide it on mobile. */ @media (max-width: 767px) { .main-footer__top { display: none; } } /* Off-canvas (hamburger) language switcher — white pills on the teal panel. */ .mobile-nav__lang { display: flex; gap: 8px; margin-top: 22px; } .mobile-nav__lang__item { padding: 5px 15px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; letter-spacing: .5px; color: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .35); text-decoration: none; transition: color .25s var(--ease-out), background-color .25s var(--ease-out), border-color .25s var(--ease-out); } .mobile-nav__lang__item:hover { color: #fff; border-color: #fff; } .mobile-nav__lang__item.is-active { background: var(--sifoxen-base-strong, #bf4526); border-color: var(--sifoxen-base-strong, #bf4526); color: #fff; } /* Home header floats cleanly over the hero — drop the white backing panel behind the logo (the colored logo reads fine on the light hero). */ .main-header--two .main-header__logo::after { display: none !important; } /* White brand logo on teal panels — rendered from the colour SVG via a filter (no separate white asset / no PNG needed). */ .logo--white { filter: brightness(0) invert(1); } /* Desktop sidebar off-canvas: larger brand logo on the teal panel. */ .sidebar-one__logo img { width: 185px; max-width: 70%; height: auto; } /* step-6 · hero display (theme 120px) */ .main-slider-two__title, .main-slider-two__title__overlay { font-size: var(--step-6) !important; font-weight: 700 !important; line-height: var(--lh-tight) !important; letter-spacing: -0.02em; } /* step-5 · section titles (theme 40–60px) */ .sec-title__title { font-size: var(--step-5) !important; font-weight: 700 !important; line-height: var(--lh-heading) !important; letter-spacing: -0.015em; } /* step-4 · page header (h1) */ .page-header__title { font-size: var(--step-4) !important; font-weight: 700 !important; } /* step-3 · detail article title */ .service-details__title, .therapist-details__title { font-size: var(--step-3) !important; font-weight: 700 !important; } /* ---- Home welcome heading: keep it clear of the absolutely-positioned doctor photo on wide screens (700-weight Montserrat runs wider, so the longest word ran under the image). Cap the text column + step it down. */ @media (min-width: 1200px) { .about-two__right .sec-title__title { font-size: var(--step-4) !important; } .about-two__right .sec-title, .about-two__right .about-two__text, .about-two__right .about-profile { max-width: 360px; } } /* ---- Treatment tabs: fit all four on one row, wrap gracefully on mobile. Theme padding (36px) forced a 3+1 wrap. */ .services-two__main-tab-box .tab-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .services-two__main-tab-box .tab-buttons .tab-btn { padding: 16px 22px !important; margin: 0 !important; flex: 1 1 auto; white-space: nowrap; } /* step-2 · card / block headings (theme 24–26px) */ .content-heading, .services-two__title, .why-choose-one__title, .sidebar-one__title, .solutions-two__list__title, .service-card-two__title, .progress-box__title { font-size: var(--step-2) !important; font-weight: 700 !important; } .content-heading { color: var(--ink); } /* step-1 · small titles, leads, tab labels, prominent captions (theme 18–24px) */ .service-details__lead, .video-card__title, .faq-item__q, .footer-widget__title, .testimonial-card__name, .testimonial-card__text, .therapist-details__name, .contact-page__info__title, .services-two__main-tab-box .tab-buttons .tab-btn { font-size: var(--step-1) !important; line-height: var(--lh-heading) !important; } /* Title-like items in the step-1 group are semibold; body-like ones stay lighter. */ .footer-widget__title, .testimonial-card__name, .therapist-details__name, .contact-page__info__title, .video-card__title { font-weight: 600 !important; } .services-two__main-tab-box .tab-buttons .tab-btn { font-weight: 600 !important; } .service-details__lead { color: var(--ink-body); font-weight: 500; } .faq-item__q { color: var(--ink); } /* ---- Body-text contrast + Montserrat-tuned size ---- */ body { color: var(--ink-body); font-size: var(--step-0); /* fluid 14.5→16.5px */ line-height: var(--lh-body); } .faq-item__a, .notice-box p { color: var(--ink-mute); } .symptom-list li, .service-details__content p { color: var(--ink-body); } /* Balance/pretty on long prose to reduce orphans (impeccable) */ .service-details__content p { text-wrap: pretty; } /* ---- Fluid section rhythm (theme was stepped 120/100/80px) ---- */ .section-space { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); } /* ================================================================== ACCESSIBILITY ================================================================== */ /* Contrast (WCAG AA): the teal kicker (theme #0CA39F on white ≈ 2.9:1) failed. Darkened to the brand's deep teal #096863 (≈ 5:1). */ .sec-title__tagline { color: #096863 !important; } /* The services "happy clients" caption shipped as theme grey #79767C (≈ 4.4:1 on white — just under AA). Route it through the darker ink-mute. */ .services-two .client-info__text { color: var(--ink-mute, #6b6e76); } /* Solid coral buttons carry 16px/700 white text — NOT "large text", so they need ≥4.5:1. Plain coral #bf4526 is only ≈3.2:1. Use the deeper coral for the resting fill (≈4.8:1); the coral accent (#bf4526) stays for icons/chips where 3:1 suffices. Hover state already flips to deep teal (var --sifoxen-primary). */ .sifoxen-btn { background-color: var(--sifoxen-base-strong, #bf4526); color: #fff; } /* The decorative kickers/sub-titles are now

    (were h5/h6 — fixed the heading-order audit). Keep them tight like the headings they replaced. */ .sec-title__tagline, .main-slider-two__sub-title { margin: 0; } /* Skip link — visible only on keyboard focus. */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: var(--z-toast); padding: 10px 18px; background: #096863; color: #fff; font-weight: 600; border-radius: var(--radius-s); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); transition: top .2s ease; } .skip-link:focus { top: 12px; color: #fff; outline: 3px solid #bf4526; outline-offset: 2px; } /* Respect reduced-motion: neutralise WOW.js reveals, owl autoplay, custom-cursor and all transitions/animations. (WCAG 2.3.3 / #99.) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .wow { visibility: visible !important; } } /* Visible keyboard focus rings on interactive elements (mouse users unaffected via :focus-visible). impeccable: never remove focus without an alternative. */ .video-card:focus-visible, .faq-item__q:focus-visible, .related-chip:focus-visible, .main-header__lang__item:focus-visible, .whatsapp-float:focus-visible, .video-lightbox__close:focus-visible { outline: 3px solid #096863; outline-offset: 3px; border-radius: var(--radius-s); } .whatsapp-float:focus-visible { outline-color: #25d366; }