diff --git a/index.html b/index.html index b58ea21..f52a5c8 100644 --- a/index.html +++ b/index.html @@ -40,9 +40,8 @@ } @keyframes gradientAnimation { - 0% { background-position: 0% 50%; } + 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } - 100% { background-position: 0% 50%; } } .container { @@ -157,33 +156,30 @@ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } - .icon-box svg { - width: 32px; - height: 32px; + .icon-box svg, + .small-icon svg { fill: white; } + .icon-box svg { + width: 32px; + height: 32px; + } + + .small-icon svg { + width: 20px; + height: 20px; + } + .icon-label { - font-size: 0.75em; + font-size: 0.7em; font-weight: 500; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } - /* Botão PIX */ .pix-button { - display: inline-block; - padding: 12px 30px; background: linear-gradient(135deg, #32BCAD, #00A86B); - color: white; - text-decoration: none; - border-radius: 50px; - font-size: 0.95em; - font-weight: bold; margin-bottom: 20px; - transition: all 0.3s ease; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); - cursor: pointer; - border: none; position: relative; overflow: hidden; } @@ -236,12 +232,8 @@ } @keyframes fadeIn { - from { - background: rgba(0, 0, 0, 0); - } - to { - background: rgba(0, 0, 0, 0.8); - } + 0% { background: rgba(0, 0, 0, 0); } + 100% { background: rgba(0, 0, 0, 0.8); } } .modal-content { @@ -261,34 +253,18 @@ } @keyframes slideUpScale { - 0% { - transform: translateY(30px) scale(0.9); - opacity: 0; - } - 100% { - transform: translateY(0) scale(1); - opacity: 1; - } + 0% { transform: translateY(30px) scale(0.9); opacity: 0; } + 100% { transform: translateY(0) scale(1); opacity: 1; } } @keyframes fadeOut { - from { - background: rgba(0, 0, 0, 0.8); - } - to { - background: rgba(0, 0, 0, 0); - } + 0% { background: rgba(0, 0, 0, 0.8); } + 100% { background: rgba(0, 0, 0, 0); } } @keyframes slideDownScale { - 0% { - transform: translateY(0) scale(1); - opacity: 1; - } - 100% { - transform: translateY(30px) scale(0.9); - opacity: 0; - } + 0% { transform: translateY(0) scale(1); opacity: 1; } + 100% { transform: translateY(30px) scale(0.9); opacity: 0; } } .modal-header { @@ -421,14 +397,8 @@ } @keyframes slideInFade { - from { - transform: translateY(-10px); - opacity: 0; - } - to { - transform: translateY(0); - opacity: 1; - } + 0% { transform: translateY(-10px); opacity: 0; } + 100% { transform: translateY(0); opacity: 1; } } .copy-notification { @@ -446,14 +416,8 @@ } @keyframes popIn { - from { - transform: scale(0.8); - opacity: 0; - } - to { - transform: scale(1); - opacity: 1; - } + 0% { transform: scale(0.8); opacity: 0; } + 100% { transform: scale(1); opacity: 1; } } .small-icons { @@ -484,34 +448,12 @@ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } - .small-icon svg { - width: 20px; - height: 20px; - fill: white; - } - @media (max-width: 600px) { - .header h1 { - font-size: 1.5em; - } - - .header p { - font-size: 0.8em; - } - - .icon-box { - width: 60px; - height: 60px; - } - - .icon-box svg { - width: 28px; - height: 28px; - } - - .icon-label { - font-size: 0.7em; - } + .header h1 { font-size: 1.5em; } + .header p { font-size: 0.8em; } + .icon-box { width: 60px; height: 60px; } + .icon-box svg { width: 28px; height: 28px; } + .icon-label { font-size: 0.65em; } } @@ -526,7 +468,6 @@ 📇 Salvar na Agenda -