diff --git a/index.html b/index.html index 88fccd5..24d6fc3 100644 --- a/index.html +++ b/index.html @@ -380,9 +380,29 @@ transform: translate3d(0, 0, 0) scale(0.98); } + .pix-instruction { + display: none; + margin-top: 15px; + text-align: center; + color: #32BCAD; + font-size: 0.95em; + font-weight: 600; + opacity: 0; + transform: translate3d(0, -5px, 0); + } + + .pix-instruction.active { + display: block; + animation: fadeInUp 0.3s ease forwards 0.2s; + } + + @keyframes fadeInUp { + to { opacity: 1; transform: translate3d(0, 0, 0); } + } + .pix-code-area { display: none; - margin-top: 20px; + margin-top: 8px; padding: 15px; background: #f5f5f5; border-radius: 10px; @@ -399,22 +419,17 @@ contain: layout style paint; } - .pix-code-area::before { - content: '👆 Clique para copiar'; + .pix-code-area::after { + content: '📋'; position: absolute; - top: -8px; + top: 10px; right: 10px; - background: #32BCAD; - color: white; - padding: 4px 10px; - border-radius: 12px; - font-size: 0.75em; - font-family: 'Segoe UI', sans-serif; - opacity: 0; - transition: opacity 0.3s ease; + font-size: 1.3em; + opacity: 0.6; + transition: opacity 0.2s ease; } - .pix-code-area.active::before { + .pix-code-area:hover::after { opacity: 1; } @@ -637,6 +652,7 @@ +