/* Afiacity Healthcare Hub - Custom Styles */ /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Fade-in animation for scroll reveals (progressive enhancement) */ /* Elements are fully visible by default. Animations only activate when JS adds .js to */ .js .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .js .fade-in.visible { opacity: 1; transform: translateY(0); } /* Slide-in from left */ .js .slide-in-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .js .slide-in-left.visible { opacity: 1; transform: translateX(0); } /* Slide-in from right */ .js .slide-in-right { opacity: 0; transform: translateX(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .js .slide-in-right.visible { opacity: 1; transform: translateX(0); } /* Respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { .js .fade-in, .js .slide-in-left, .js .slide-in-right, .js .scale-in, .global-panel, .global-panel-overlay { opacity: 1; transform: none; transition: none; } } /* Form focus styles */ input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15); border-color: #0d9488; } /* FAQ accordion */ .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .faq-answer.open { max-height: 2000px; } /* Active nav link */ .nav-active { color: #0d9488; font-weight: 600; } /* ── Mobile Menu ───────────────────────────────────────────────────────────── */ .mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .mobile-menu.open { max-height: 2000px; } .mobile-menu-overlay { transition: opacity 0.3s ease-out; } /* ── Mobile-specific touch targets ─────────────────────────────────────────── */ @media (max-width: 1023px) { /* Ensure minimum 44px tap targets on mobile nav */ nav a, nav button { min-height: 44px; display: inline-flex; align-items: center; } /* Footer links - adequate tap targets but inline-friendly */ footer a { min-height: 36px; display: inline-flex; align-items: center; } /* Better text readability on small screens */ .hero-text { font-size: clamp(1.75rem, 6vw, 3.5rem); line-height: 1.15; } } /* ── Small phone adjustments ───────────────────────────────────────────────── */ @media (max-width: 374px) { body { font-size: 14px; } } /* ── Touch-friendly form inputs ────────────────────────────────────────────── */ @media (max-width: 767px) { input, textarea, select { font-size: 16px; /* Prevents iOS zoom on focus */ } } /* ── Card hover lift ─────────────────────────────────────────────────────── */ .card-float { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-float:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.12); } /* ── Staggered animation delays ──────────────────────────────────────────── */ .stagger-1 { transition-delay: 0.1s; } .stagger-2 { transition-delay: 0.2s; } .stagger-3 { transition-delay: 0.3s; } .stagger-4 { transition-delay: 0.4s; } .stagger-5 { transition-delay: 0.5s; } /* ── Pulse dot (for availability indicators) ─────────────────────────────── */ .pulse-dot { position: relative; } .pulse-dot::after { content: ''; position: absolute; top: 0; right: 0; width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: pulse-ring 2s ease infinite; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); } 70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } /* ── Glass card ──────────────────────────────────────────────────────────── */ .glass-card { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); } /* ── Gradient text ───────────────────────────────────────────────────────── */ .gradient-text { background: linear-gradient(135deg, #0d9488, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Timeline connector ──────────────────────────────────────────────────── */ .timeline-line { position: relative; } .timeline-line::before { content: ''; position: absolute; left: 1.5rem; top: 3rem; bottom: 0; width: 2px; background: linear-gradient(to bottom, #0d9488, transparent); } /* ── Decorative quote mark ───────────────────────────────────────────────── */ .quote-mark::before { content: '\201C'; font-family: Georgia, serif; font-size: 4rem; line-height: 1; position: absolute; top: -0.25rem; left: 0; color: rgba(13, 148, 136, 0.15); } /* ── Hero mesh gradient ──────────────────────────────────────────────────── */ .hero-mesh { background-image: radial-gradient(at 20% 30%, rgba(245, 158, 11, 0.08) 0, transparent 50%), radial-gradient(at 80% 70%, rgba(13, 148, 136, 0.1) 0, transparent 50%), radial-gradient(at 50% 50%, rgba(249, 115, 22, 0.06) 0, transparent 50%); } /* ── WhatsApp pulse animation ────────────────────────────────────────────── */ .whatsapp-pulse { animation: wa-pulse 2s infinite; } @keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); } 70% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } /* ── Scale-in animation ──────────────────────────────────────────────────── */ .js .scale-in { opacity: 0; transform: scale(0.95); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .js .scale-in.visible { opacity: 1; transform: scale(1); } /* ── Booking widget styles ───────────────────────────────────────────────── */ .booking-widget .bw-calendar-day { transition: background-color 0.15s ease, color 0.15s ease; } .booking-widget .bw-calendar-day:hover:not(:disabled) { background-color: #f0fdfa; } /* Calculator button states */ .calc-type-btn, .calc-size-btn { border-color: #e2e8f0; color: #64748b; } .calc-type-btn.active, .calc-size-btn.active { border-color: #0d9488; background-color: #f0fdfa; color: #0f766e; } .calc-type-btn:hover, .calc-size-btn:hover { border-color: #99f6e4; } /* ── Breadcrumb ───────────────────────────────────────────────────────────── */ .breadcrumb a:hover { color: #0d9488; } /* ── Focus-visible for keyboard navigation ────────────────────────────────── */ :focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; } /* ── Global Utility Panel ────────────────────────────────────────────────── */ .global-panel { transform: translateX(100%); transition: transform 0.3s ease-out; } .global-panel.open { transform: translateX(0); } .global-panel-overlay { transition: opacity 0.3s ease-out; } /* ── Sidebar ToC active link ─────────────────────────────────────────────── */ .toc-link.active { color: #0d9488; border-left-color: #0d9488; } /* ── Package navigator active card ───────────────────────────────────────── */ .pkg-nav-card.active { border-color: #0d9488; background-color: #f0fdfa; } /* ── Print Styles ─────────────────────────────────────────────────────────── */ @media print { /* Hide non-essential elements */ nav, footer, #back-to-top, #cookie-banner, #toast-container, #mobile-menu-overlay, .mobile-menu, .global-panel, .global-panel-overlay, .no-print { display: none !important; } /* Reset body */ body { color: #000; background: #fff; font-size: 12pt; line-height: 1.5; } main { padding-top: 0 !important; } /* Show link URLs */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; } /* Avoid page breaks in cards */ .card, article, section { break-inside: avoid; } /* Ensure images are not too wide */ img { max-width: 100% !important; height: auto !important; } }