/* * Caliora Dental Studio - Custom Overrides * Fixes Webflow IX2 animation visibility and adds interactivity styles */ /* ============================================ CRITICAL: Override Webflow IX2 visibility locks The w-mod-ix3 class on handles most cases, but these are backup overrides for edge cases ============================================ */ .parallax-image, .hero-reveal-large-text, .marquee-images, .hero-stack-background, .contact-link-text, .contact-bg, .brand-name-text, .brand-slogan, .accordion-dropdown, .mega-menu-actions, .mega-menu-link, .heading.is-hero-slider-title, .hero-thumbnails, .slider-image.is-2nd, .hero-thumbnail.is-1st, .slider-image.is-3rd, .slider-image.is-4th, .button-text, .button-background-animation, .button-icon, .lightbox-icon, [data-element-scroll-in-out="true"], .burger-menu-line, .menu-visual-image, .slider-icon-background, .nav-link-icon, .features-accordion-item, .features-media, .heading, .paragraph, .stat-large-overlay, .stat-background-image, .gallery-col.align-center, .gallery-col.is-2nd, .stat-line-animation, .location-icon, [animation-reveal="true"], .mega-menu-link-about, .link-icon-small, .label-text, .treatment-card-overlay, .treatment-background-animation, .treatment-card-action, .equipment-item, .equipment-image, .equipment-details, .equipment-content, .condition-item-2, .about-card-circle-image, .about-card-cover-image, .link-icon-large, .blog-card-media-medium, .content-background, .blog-card-small-background, .large-link-line, .large-link-icon, .approach-label, .condition-item, .stats-cms-item, .radial-text, .treatment-grid-item, .team-card-name, .team-card-about, .hero-stat-item, .hero-stats-image, .map-action, .map-images, .map-background { visibility: visible !important; opacity: 1 !important; } /* Generic visibility fix */ h1, h2, h3, h4, h5, h6, p, span, div, a, li, label, input, textarea, select, button, img, svg { visibility: visible !important; } /* ============================================ NAVIGATION - Mega Menu Dropdowns NO FLICKERING: Use opacity/visibility/pointer-events instead of display:none/block transitions ============================================ */ /* Nav bar must be positioned for dropdown context */ .nav { position: relative; z-index: 9999; } /* Hide duplicate hover-state text element in mega menu links */ .nav-text.is-2nd { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* Each mega-menu is a positioning context */ .mega-menu { position: relative; } /* Dropdown panel: always in the DOM, hidden via opacity */ .mega-menu-trigger { position: absolute; top: 100%; left: 0; z-index: 9998; width: max-content; min-width: 300px; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.2s ease, visibility 0.2s ease; } /* Conditions mega menu dropdown: 2 columns to reduce vertical height */ .mega-menu-actions.is-2nd { display: grid !important; grid-template-columns: repeat(2, minmax(300px, 1fr)) !important; grid-gap: 12px 16px !important; width: 660px !important; max-width: 90vw !important; } .mega-menu-actions.is-2nd .mega-menu-item { width: 100% !important; } /* Show dropdown on hover OR js-added .is-open class */ .mega-menu:hover > .mega-menu-trigger, .mega-menu.is-open > .mega-menu-trigger { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Background overlay behind mega menu */ .nav-background-mega-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.08); z-index: 9990; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease; } .mega-menu:hover ~ .nav-background-mega-menu { opacity: 1; visibility: visible; pointer-events: auto; } /* Mega menu background element inside each link */ .mega-menu-background { visibility: visible !important; opacity: 1 !important; } /* ============================================ NAVIGATION - Full Screen Menu (Burger) ============================================ */ .menu { display: none !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 10000 !important; background: #141517 !important; color: #ffffff !important; overflow-y: auto !important; padding: 60px 8% 40px 8% !important; } .menu.is-open { display: flex !important; flex-direction: column !important; } .menu.is-open, .menu.is-open .menu-layout, .menu.is-open .menu-wrap, .menu.is-open .menu-main, .menu.is-open .menu-links-wrap, .menu.is-open .menu-1st-links, .menu.is-open .menu-2nd-links, .menu.is-open .menu-3rd-links, .menu.is-open .menu-background, .menu.is-open .menu-full-background { visibility: visible !important; opacity: 1 !important; transform: none !important; } .menu-full-background { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9998; display: none; cursor: pointer; } .menu.is-open ~ .menu-full-background { display: block !important; background: rgba(0,0,0,0.5); } .menu-background { visibility: visible !important; opacity: 1 !important; } .burger-menu { cursor: pointer !important; z-index: 10001 !important; position: relative; display: flex !important; align-items: center; gap: 8px; } position: relative; } /* ============================================ HERO ANIMATIONS - Make visible immediately ============================================ */ [data-element-scroll-in-out="true"], [animation-reveal="true"] { transform: none !important; opacity: 1 !important; } /* ============================================ FOOTER ============================================ */ .footer { overflow: visible !important; width: 100% !important; max-width: 100% !important; } .subfooter { overflow: visible !important; width: 100% !important; } .footer-layout, .footer-links, .footer-bottom { overflow: visible !important; max-width: 100% !important; } /* ============================================ WEBFLOW BADGE - Hide ============================================ */ .w-webflow-badge { display: none !important; } /* ============================================ BOOKING MODAL ============================================ */ .booking-modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: center; justify-content: center; } .booking-modal-overlay.is-active { display: flex !important; } .booking-modal-card { background: #fff; border-radius: 20px; padding: 36px 32px; max-width: 440px; width: 92%; position: relative; box-shadow: 0 24px 64px rgba(0,0,0,0.18); } .modal-close-btn { position: absolute; top: 14px; right: 18px; background: none; border: none; font-size: 28px; cursor: pointer; color: #666; line-height: 1; } .modal-close-btn:hover { color: #141517; } .indian-badge { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #c49a6c; } /* ============================================ TOAST NOTIFICATION ============================================ */ .toast-notification { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: #141517; color: #fff; padding: 16px 28px; border-radius: 14px; font-size: 14px; z-index: 999999; opacity: 0; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease; max-width: 90vw; text-align: center; } .toast-notification.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 991px) { .nav-links-wrap { display: none !important; } .burger-menu { display: flex !important; } }