/* WordPress-specific additions on top of the preview CSS (preview.css is the preview's own build). */ /* The wrapper must not create a box: children behave exactly like direct children of . */ #cp-root { display: contents; } /* Legacy snippets still printed by plugins on the live site (floating button, "emergency" footer, mobile language switcher, Astra scroll-top) and the VER lead-gate modal: never shown here. */ .whatsapp-float, .cirandando-footer, .cirandando-footer-copy, .cirandando-mobile-language, #ast-scroll-top, #vercg-modal { display: none !important; } /* Toast — same look and position as the preview (sonner, top-center, rich success colors). */ .cp-toast { position: fixed; top: 24px; left: 50%; z-index: 999999; display: flex; align-items: center; gap: 6px; width: 356px; max-width: calc(100vw - 32px); padding: 16px; border: 1px solid hsl(145, 92%, 87%); border-radius: 8px; background: hsl(143, 85%, 96%); color: hsl(140, 100%, 27%); font: 500 13px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: 0 4px 12px rgba(0, 0, 0, .1); transform: translate(-50%, -12px); opacity: 0; transition: transform .4s ease, opacity .4s ease; } .cp-toast.is-in { transform: translate(-50%, 0); opacity: 1; } .cp-toast svg { flex: none; } @media (prefers-reduced-motion: reduce) { .cp-toast { transition: none; } } /* ---------- Motion ---------- Entrance of the page header, content that rises into view while scrolling (main.js adds .cp-reveal only to blocks still below the fold, so nothing visible ever blinks), card hover, review cross-fade, mobile menu. Everything stays still for visitors who ask the system for reduced motion. */ .cp-reveal { opacity: 0; transform: translate3d(0, 28px, 0); } .cp-reveal.is-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--cp-delay, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--cp-delay, 0ms); } header.sticky { transition: box-shadow .3s ease; } header.sticky.cp-scrolled { box-shadow: 0 10px 28px -18px rgba(43, 43, 43, .35); } @keyframes cp-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } } @keyframes cp-hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } } @keyframes cp-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes cp-swap { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } } @keyframes cp-drop { from { opacity: 0; transform: translate3d(0, -10px, 0); } to { opacity: 1; transform: none; } } @keyframes cp-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { /* Page header: photo settles, texts rise one after the other. */ main > section.relative.overflow-hidden:first-child > img { animation: cp-hero-zoom 2.2s cubic-bezier(.2, .7, .2, 1) backwards; } main > section.relative.overflow-hidden:first-child > div.relative > *, #conteudo > section:first-child > div > :is(p, h1):nth-child(-n+2), main.mx-auto > :nth-child(-n+3) { animation: cp-rise .9s cubic-bezier(.2, .7, .2, 1) backwards; } main > section.relative.overflow-hidden:first-child > div.relative > :nth-child(2), #conteudo > section:first-child > div > h1:nth-child(2), main.mx-auto > :nth-child(2) { animation-delay: .12s; } main > section.relative.overflow-hidden:first-child > div.relative > :nth-child(3), main.mx-auto > :nth-child(3) { animation-delay: .24s; } main > section.relative.overflow-hidden:first-child > div.relative > :nth-child(4) { animation-delay: .36s; } /* Cards: lift, soft shadow, warmer border; the photo zooms slowly inside its frame. */ #conteudo article.rounded-xl:not(.cp-reveal), #conteudo a.block.rounded-xl { transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s cubic-bezier(.2, .7, .2, 1), border-color .3s ease; } #conteudo article.overflow-hidden > a.block { overflow: hidden; } #conteudo article.overflow-hidden > a.block > img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); } #conteudo article.rounded-xl a.text-primary > svg:last-child { transition: transform .3s cubic-bezier(.2, .7, .2, 1); } @media (hover: hover) { #conteudo article.rounded-xl:not(.cp-reveal):hover, #conteudo a.block.rounded-xl:hover { transform: translate3d(0, -6px, 0); box-shadow: 0 22px 44px -24px rgba(43, 43, 43, .38); border-color: rgba(230, 90, 0, .35); } #conteudo article.overflow-hidden:hover > a.block > img { transform: scale(1.06); } #conteudo article.rounded-xl:hover a.text-primary > svg:last-child, #conteudo a.text-primary:hover > svg:last-child { transform: translateX(4px); } a.fixed.rounded-full[href*="wa.me"]:hover { transform: scale(1.07); } } a.fixed.rounded-full[href*="wa.me"] { transition: opacity .15s ease, transform .3s cubic-bezier(.2, .7, .2, 1); animation: cp-pop .6s cubic-bezier(.2, .9, .3, 1.3) .9s backwards; } /* Reviews change with a cross-fade; the mobile menu drops in; new language fades in. */ .cp-swap { animation: cp-swap .5s cubic-bezier(.2, .7, .2, 1); } [data-cp-menu] { animation: cp-drop .28s cubic-bezier(.2, .7, .2, 1); } [data-cp-menu] nav > a { animation: cp-rise .4s cubic-bezier(.2, .7, .2, 1) backwards; } [data-cp-menu] nav > a:nth-child(2) { animation-delay: .03s; } [data-cp-menu] nav > a:nth-child(3) { animation-delay: .06s; } [data-cp-menu] nav > a:nth-child(4) { animation-delay: .09s; } [data-cp-menu] nav > a:nth-child(5) { animation-delay: .12s; } [data-cp-menu] nav > a:nth-child(6) { animation-delay: .15s; } [data-cp-menu] nav > a:nth-child(7) { animation-delay: .18s; } [data-cp-menu] nav > a:nth-child(n+8) { animation-delay: .21s; } .cp-fade { animation: cp-fade .35s ease; } .cp-pop { animation: cp-rise .6s cubic-bezier(.2, .7, .2, 1); } } @media print { .cp-reveal { opacity: 1 !important; transform: none !important; } }