diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..576c508 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html index 0248648..b58ea21 100644 --- a/index.html +++ b/index.html @@ -36,6 +36,7 @@ background-size: 400% 400%; animation: gradientAnimation 15s ease infinite; z-index: -2; + will-change: background-position; } @keyframes gradientAnimation { @@ -62,14 +63,10 @@ width: 100px; height: 100px; margin: 0 auto 15px; - background-image: url('fotos/logo.png'); - background-size: 80%; - background-position: center; - background-repeat: no-repeat; + background: url('fotos/logo.png') center/80% no-repeat rgba(255, 255, 255, 0.95); border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); - background-color: rgba(255, 255, 255, 0.95); } .header { @@ -92,19 +89,25 @@ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } - /* Botão Salvar na Agenda */ - .save-contact { + /* Botões principais */ + .save-contact, + .pix-button { display: inline-block; padding: 12px 30px; - background: linear-gradient(135deg, #20337b, #2d4a9e); color: white; text-decoration: none; border-radius: 50px; font-size: 0.95em; font-weight: bold; - margin-bottom: 25px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); + cursor: pointer; + border: none; + } + + .save-contact { + background: linear-gradient(135deg, #20337b, #2d4a9e); + margin-bottom: 25px; } .save-contact:hover { @@ -113,7 +116,6 @@ background: linear-gradient(135deg, #2d4a9e, #20337b); } - /* Container de ícones */ .icons-row { display: flex; justify-content: center; @@ -128,7 +130,7 @@ align-items: center; text-decoration: none; color: white; - transition: all 0.3s ease; + transition: transform 0.3s ease; } .icon-item:hover { @@ -214,7 +216,6 @@ transform: translateY(-1px) scale(0.98); } - /* Modal PIX */ .modal { display: none; position: fixed; @@ -252,6 +253,7 @@ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); transform: translateY(30px) scale(0.9); opacity: 0; + will-change: transform, opacity; } .modal.active .modal-content { @@ -385,6 +387,7 @@ transition: all 0.2s ease; border: 2px solid transparent; position: relative; + will-change: transform, opacity; } .pix-code-area::before { @@ -453,7 +456,6 @@ } } - /* Ícones pequenos */ .small-icons { display: flex; justify-content: center; @@ -488,7 +490,6 @@ fill: white; } - /* Responsividade */ @media (max-width: 600px) { .header h1 { font-size: 1.5em; @@ -631,129 +632,89 @@