/* ============================================================ Dr. Carlos Nassif — landing page Complementa o Tailwind CDN (estilos que dependem de seletores específicos, animações iniciais e detalhes não cobertos via utility classes). ============================================================ */ :root { --navy-deep: #1d2431; --sand-accent: #d0bcac; --shadow-clinical: 0 24px 70px rgba(29, 36, 49, 0.08); } html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overflow-x: clip; } /* Ícones Material Symbols base */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } /* Glass card (navbar e quote em fundo navy) */ .glass-card { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); } /* Sombra clínica padronizada */ .shadow-clinical { box-shadow: var(--shadow-clinical); } /* CTAs */ .cta-pill { transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease; } .cta-pill:active { transform: scale(0.97); } .cta-glow { box-shadow: 0 12px 30px rgba(208, 188, 172, 0.4); } /* Padding bottom no main para o conteúdo não ficar coberto pela sticky bar */ @media (max-width: 767px) { main { padding-bottom: 84px; } footer { padding-bottom: 100px; } } /* ============================================================ Estados iniciais para os elementos animados via GSAP. Aplicados via CSS para evitar flash of unstyled content (FOUC). Quando GSAP não estiver disponível ou prefers-reduced-motion estiver ativo, removemos via classe .reveal-immediate no . ============================================================ */ [data-anim] { opacity: 0; will-change: transform, opacity; } [data-anim="hero-eyebrow"], [data-anim="hero-title"], [data-anim="hero-sub"], [data-anim="hero-cta"] { transform: translateY(28px); } [data-anim="cred-item"] { transform: translateY(20px); } [data-anim="about-image"] { transform: translateX(-40px); } [data-anim="about-text"] { transform: translateX(40px); } [data-anim="section-title"] { transform: translateY(24px); } [data-anim="service-card"] { transform: translateY(30px); } [data-anim="diff-list"] { transform: translateX(-40px); } [data-anim="diff-quote"] { transform: scale(0.96); } [data-anim="loc-info"] { transform: translateX(-30px); } [data-anim="loc-gallery"] { transform: translateX(30px); } [data-anim="loc-map"] { transform: translateY(30px); } [data-anim="faq-item"] { transform: translateY(16px); } [data-anim="final-cta"] { transform: translateY(30px); } /* Imagens da galeria precisam estar visíveis antes mesmo do GSAP rodar */ .clinic-gallery img { opacity: 1 !important; } /* Hover responsivo nas thumbs do desktop. O wrapper tem overflow:hidden, entao o scale na img dah efeito de zoom dentro do crop. */ .clinic-gallery img, .clinic-gallery-mobile img { cursor: zoom-in; } @media (hover: hover) and (min-width: 768px) { .clinic-gallery img { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease; } .clinic-gallery img:hover { transform: scale(1.04); filter: brightness(1.05); } .clinic-gallery > div > div { transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .clinic-gallery > div > div:hover { box-shadow: 0 32px 80px rgba(29, 36, 49, 0.22); } } /* Lightbox: overlay full-screen pra exibir imagem em tamanho completo */ .lightbox { position: fixed; inset: 0; z-index: 100; background-color: rgba(7, 15, 27, 0.92); display: none; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 0.3s ease; } .lightbox.is-open { display: flex; opacity: 1; } .lightbox__image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); transform: scale(0.96); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .lightbox.is-open .lightbox__image { transform: scale(1); } .lightbox__close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.1); border: none; border-radius: 9999px; color: #ffffff; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .lightbox__close:hover { background-color: rgba(255, 255, 255, 0.22); transform: scale(1.08); } .lightbox__close .material-symbols-outlined { font-size: 24px; } body.lightbox-open { overflow: hidden; } /* Text Trace: cascata caractere-por-caractere via [data-anim="text-trace"]. Default termina em SOLID. Variante data-trace-end="outline" termina em wireframe. */ [data-anim="text-trace"] { opacity: 1; will-change: auto; transform: none; } .trace-word { display: inline-block; white-space: nowrap; } .trace-char { display: inline-block; white-space: pre; opacity: 0; } .trace-char.is-animating { animation: traceFadeIn var(--trace-duration, 600ms) var(--trace-delay, 0ms) forwards ease-out; } [data-trace-end="outline"] .trace-char.is-animating { animation: traceSolidToOutline var(--trace-duration, 600ms) var(--trace-delay, 0ms) forwards ease-out; } @keyframes traceFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes traceSolidToOutline { 0% { opacity: 0; color: var(--trace-color, currentColor); -webkit-text-stroke: 0 transparent; } 50% { opacity: 1; color: var(--trace-color, currentColor); -webkit-text-stroke: 0 transparent; } 100% { opacity: 1; color: transparent; -webkit-text-stroke: 0.04em var(--trace-color, currentColor); } } @media (prefers-reduced-motion: reduce) { .trace-char { opacity: 1; animation: none; } [data-trace-end="outline"] .trace-char { color: transparent; -webkit-text-stroke: 0.04em var(--trace-color, currentColor); } } /* Fallback: se JS estiver off ou prefers-reduced-motion ativo */ html.reveal-immediate [data-anim] { opacity: 1 !important; transform: none !important; } /* ============================================================ FAQ (details/summary) — chevron rotation ============================================================ */ .faq-item summary { list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item[open] .faq-chevron { transform: rotate(180deg); } /* Animação suave de expand para o details */ .faq-item p { animation: faqExpand 0.3s ease-out; } @keyframes faqExpand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ Mobile nav overlay — splash entry + premium design ============================================================ */ body.menu-open { overflow: hidden; } /* Estado base: clip-path circle zerado no canto onde o hambúrguer fica */ #mobileMenu { clip-path: circle(0% at calc(100% - 36px) 40px); -webkit-clip-path: circle(0% at calc(100% - 36px) 40px); opacity: 0; visibility: hidden; transition: clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0s 0.55s; } #mobileMenu.is-open { pointer-events: auto; opacity: 1; visibility: visible; clip-path: circle(150% at calc(100% - 36px) 40px); -webkit-clip-path: circle(150% at calc(100% - 36px) 40px); transition: clip-path 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0s; } /* Enquanto menu aberto: navbar fica transparente, hambúrguer fica branco */ body.menu-open #topNav { background-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: translateY(0) !important; } body.menu-open #topNav > div > a { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } body.menu-open #menuToggle { color: #ffffff; } /* Links do menu — Playfair em sand-accent (#D0BCAC), underline branco no hover */ .menu-link { position: relative; display: inline-block; font-family: 'Playfair Display', serif; font-weight: 600; font-size: clamp(26px, 7vw, 36px); line-height: 1.1; color: #d0bcac; padding: 4px 4px; transition: color 0.25s ease, transform 0.15s ease; } .menu-link::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 0; height: 2px; background-color: #ffffff; transition: width 0.3s ease, left 0.3s ease; } .menu-link:hover, .menu-link:focus-visible { color: #ffffff; } .menu-link:hover::after, .menu-link:focus-visible::after { width: 100%; left: 0; } .menu-link:active { transform: scale(0.96); } /* ============================================================ Mobile sticky bar: estado inicial fora da tela (entra via GSAP quando passamos do hero) ============================================================ */ @media (max-width: 767px) { #mobileStickyBar { transform: translateY(120%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } #mobileStickyBar.is-visible { transform: translateY(0); } #whatsappFab { transform: translateY(120%) scale(0.6); opacity: 0; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; } #whatsappFab.is-visible { transform: translateY(0) scale(1); opacity: 1; } /* Quando o menu mobile está aberto: esconde temporariamente FAB e sticky bar. A specificity de `body.menu-open ... .is-visible` (0,2,1,0) vence a regra base `.is-visible` (0,2,0,0), reaproveitando as mesmas transições já definidas — não precisa !important. */ body.menu-open #mobileStickyBar.is-visible { transform: translateY(120%); } body.menu-open #whatsappFab.is-visible { transform: translateY(120%) scale(0.6); opacity: 0; } } /* Galeria mobile: sem scrollbar; o feedback de posição vem dos dots abaixo */ .clinic-gallery-mobile { scrollbar-width: none; -ms-overflow-style: none; } .clinic-gallery-mobile::-webkit-scrollbar { display: none; height: 0; } /* Indicadores de página da galeria — mostram posição no loop */ .clinic-gallery-dots .clinic-dot { width: 6px; height: 6px; border-radius: 999px; background-color: rgba(29, 36, 49, 0.2); border: none; padding: 0; cursor: pointer; transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease; } .clinic-gallery-dots .clinic-dot.is-active { width: 22px; background-color: var(--navy-deep); } .clinic-gallery-dots .clinic-dot:focus-visible { outline: 2px solid var(--sand-accent); outline-offset: 3px; } /* ============================================================ Nav: hide on scroll-down past hero, reveal on scroll-up. Translate-Y suaviza a entrada/saída sem causar reflow. ============================================================ */ #topNav { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; will-change: transform; } #topNav.is-hidden { transform: translateY(-100%); } #topNav.is-elevated { box-shadow: 0 6px 18px rgba(29, 36, 49, 0.08); } /* ============================================================ Hero CTA "Agendar via WhatsApp" — pill normal; no hover o canto inferior-esquerdo vira reto. No mobile o estado "quadrado em baixo-esquerda" é permanente (replica o Stitch). Transition isola border-bottom-left-radius para evitar flickers. ============================================================ */ .hero-whatsapp-cta { border-radius: 9999px; transition: border-bottom-left-radius 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .hero-whatsapp-cta .material-symbols-outlined { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } @media (hover: hover) and (min-width: 768px) { .hero-whatsapp-cta:hover { border-bottom-left-radius: 0; transform: translateY(-2px); box-shadow: 0 20px 44px rgba(7, 15, 27, 0.38); } .hero-whatsapp-cta:hover .material-symbols-outlined { transform: translateX(2px) rotate(-6deg); } } @media (max-width: 767px) { .hero-whatsapp-cta { border-bottom-left-radius: 0; } } /* ============================================================ Footer logo cru sobre o navy ============================================================ */ .footer-logo { display: block; /* preserva proporção sem deformar */ object-fit: contain; max-width: 100%; /* leve realce para o cromado destacar sobre o navy */ filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18)); } /* ============================================================ Ícones sociais do footer — apenas o ícone responde ao hover. Usamos CSS mask sobre o PNG para que background-color defina a cor do ícone; assim trocamos a cor com 1 propriedade só. ============================================================ */ .social-link { /* sem bloco/borda/background: o link é apenas o tamanho do ícone */ background: transparent; border: none; padding: 0; line-height: 0; } .social-mask { display: inline-block; width: 28px; height: 28px; background-color: #7386a8; /* blue-muted, estado padrão */ -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: background-color 0.25s ease; } .social-mask--whatsapp { -webkit-mask-image: url('../images/whatsapp-icon.png'); mask-image: url('../images/whatsapp-icon.png'); } .social-mask--instagram { -webkit-mask-image: url('../images/instagram-icon.png'); mask-image: url('../images/instagram-icon.png'); } .social-mask--medicosbrasil { -webkit-mask-image: url('../images/medicosbrasil-icon.png'); mask-image: url('../images/medicosbrasil-icon.png'); } .social-link--whatsapp:hover .social-mask { background-color: #25D366; } .social-link--instagram:hover .social-mask { background-color: #E1306C; } .social-link--medicosbrasil:hover .social-mask { background-color: #1E3A8A; /* azul marinho escuro — cor da marca Médicos Brasil */ } .footer-whatsapp-btn { transition: background-color 0.25s ease, color 0.25s ease; } .footer-whatsapp-btn:hover { background-color: #25D366; color: #ffffff; } /* WhatsApp icon dentro do FAB mobile — branco sobre verde */ .fab-mask { display: inline-block; width: 30px; height: 30px; background-color: #ffffff; -webkit-mask: url('../images/whatsapp-icon.png') center / contain no-repeat; mask: url('../images/whatsapp-icon.png') center / contain no-repeat; } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-anim] { opacity: 1 !important; transform: none !important; } }