/* ============================================================================= LA FORTUNA — lafortuna.css Estilos inline extraídos do do index.html Organizado por componente ============================================================================= */ /* ============================================================================= MODAL — Lightbox de imagem (ex: Dia dos Namorados) ============================================================================= */ .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.9); } .modal-content { margin: auto; display: block; width: 80%; max-width: 1080px; max-height: 80%; } .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } @media screen and (max-width: 760px) { .modal-content { max-width: 600px; } } /* ============================================================================= WHATSAPP FLOAT — Botão flutuante de WhatsApp (canto inferior direito) ============================================================================= */ .lf-wa-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; align-items: center; flex-direction: row-reverse; } .lf-wa-float { position: relative; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #2edb6e 0%, #25D366 45%, #1aad55 100%); border: none; display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; flex-shrink: 0; box-shadow: 0 4px 18px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2); animation: lf-breathe 3.5s ease-in-out infinite; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease; } .lf-wa-float:hover { transform: scale(1.12) rotate(-6deg); box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55), 0 3px 10px rgba(0, 0, 0, 0.22); } .lf-wa-float:active { transform: scale(0.93); } .lf-wa-float svg { width: 36px; height: 36px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); animation: lf-float 3.5s ease-in-out infinite; } /* Ripple — ondas animadas ao redor do botão */ .lf-wa-float::before, .lf-wa-float::after { content: ''; position: absolute; border-radius: 50%; border: 1.5px solid #25D366; opacity: 0; animation: lf-ripple 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; } .lf-wa-float::after { animation-delay: 0.9s; } /* Tooltip — aparece ao passar o mouse */ .lf-wa-tooltip { margin-right: 12px; background: #111; color: #fff; font-size: 12px; font-family: sans-serif; letter-spacing: 0.04em; padding: 8px 14px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(6px); transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; } .lf-wa-tooltip::after { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: #111; } .lf-wa-wrap:hover .lf-wa-tooltip { opacity: 1; transform: translateX(0); } /* Animações do botão WhatsApp */ @keyframes lf-ripple { 0% { width: 62px; height: 62px; opacity: 0.7; } 100% { width: 130px; height: 130px; opacity: 0; } } @keyframes lf-breathe { 0%, 100% { box-shadow: 0 4px 18px rgba(37, 211, 102, .35), 0 2px 6px rgba(0, 0, 0, .18); } 50% { box-shadow: 0 4px 28px rgba(37, 211, 102, .6), 0 2px 8px rgba(0, 0, 0, .2); } } @keyframes lf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }