/* ========================================================================== Fizios Plus — custom.css Hand-written fixes layered on top of the compiled style.css (Tailwind). Loaded AFTER style.css / responsive.css / animations.css. Covers: scroll-reveal, mobile navigation, scroll-cue, misc small fixes. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Scroll-reveal ("AnimatedSection" replacement) Default state = fully visible. Only when JS has run (html.js) do sections start hidden and get animated in via IntersectionObserver (animations.js). This guarantees content is always reachable if JavaScript fails. -------------------------------------------------------------------------- */ .reveal { opacity: 1; transform: none; } html.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; will-change: opacity, transform; } html.js .reveal.in-view { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .reveal { transition: none; opacity: 1; transform: none; } } /* Hero scroll-cue idle bounce (was a frozen inline transform from the export) */ .scroll-cue { animation: scrollCueBounce 2s ease-in-out infinite; } @keyframes scrollCueBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } @media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } } /* -------------------------------------------------------------------------- 2. Mobile navigation (checkbox-hack — works with JavaScript disabled) -------------------------------------------------------------------------- */ .mobile-menu-checkbox { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; } .mobile-nav-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; z-index: 59; } .mobile-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(85vw, 360px); background: hsl(var(--card)); box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18); transform: translateX(100%); transition: transform 0.35s ease; z-index: 60; overflow-y: auto; padding: 5rem 1.5rem 2rem; } .mobile-nav-close { position: absolute; top: 1.25rem; right: 1.25rem; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: hsl(var(--muted)); color: hsl(var(--foreground)); font-size: 1.5rem; line-height: 1; cursor: pointer; } .mobile-nav-links { display: flex; flex-direction: column; gap: 0.5rem; } .mobile-nav-links a { width: 100%; text-align: left; } .mobile-nav-links > div { margin: 1rem 0; padding: 0.75rem 0; border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); justify-content: flex-start !important; } .mobile-nav-links a[href*="contact"] button, .mobile-nav-links > a > button { width: 100%; } .mobile-menu-checkbox:checked ~ .mobile-nav-overlay { opacity: 1; pointer-events: auto; } .mobile-menu-checkbox:checked ~ .mobile-nav { transform: translateX(0); } /* Hide mobile nav machinery entirely at desktop widths */ @media (min-width: 1024px) { .mobile-menu-checkbox, .mobile-nav-overlay, .mobile-nav { display: none; } } /* Lock page scroll while the mobile menu is open (JS adds this to ) */ body.menu-open { overflow: hidden; } /* -------------------------------------------------------------------------- 3. Header contrast over photo heroes (home, medical-tourism) Those two pages sit directly on a dark hero photo while unscrolled, so the default (light-background) header text color is unreadable. header.js marks the scrolled state; this only applies inside

itself — top contact bar (phone/email/lang) and desktop nav. The mobile drawer lives outside

in the markup and keeps its normal (light-background) colors. -------------------------------------------------------------------------- */ header[data-hero="true"]:not(.scrolled) .text-muted-foreground, header[data-hero="true"]:not(.scrolled) a[href^="tel:"], header[data-hero="true"]:not(.scrolled) a[href^="mailto:"] { color: rgba(255, 255, 255, 0.85); } header[data-hero="true"]:not(.scrolled) .text-muted-foreground:hover, header[data-hero="true"]:not(.scrolled) a[href^="tel:"]:hover, header[data-hero="true"]:not(.scrolled) a[href^="mailto:"]:hover { color: #fff; } header[data-hero="true"]:not(.scrolled) .text-muted-foreground\/40 { color: rgba(255, 255, 255, 0.4); } /* -------------------------------------------------------------------------- 4. Widen the container cap at the 2xl breakpoint (1400px -> 1460px) -------------------------------------------------------------------------- */ @media (min-width: 1400px) { .container { max-width: 1460px; } } /* -------------------------------------------------------------------------- 5. Mobile click-to-call bar (Handoff Update 001) — bg-card/80 wasn't part of the original compiled bundle since this component is new. -------------------------------------------------------------------------- */ .bg-card\/80 { background-color: hsl(var(--card) / 0.8); }