ajustes de performance (LCP) e nos menus
Signed-off-by: Rodrigo Bertoldo de Sousa Martins <rodrigo.sousa.577@gmail.com>
This commit is contained in:
1 parent
6058620486
commit
21191aa9cf
1 file changed
+37
-9
+37
-9
@@ -3,7 +3,21 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="theme-color" content="#20337b">
|
||||
<title>Martins & Vieira - Advocacia Especializada</title>
|
||||
|
||||
<!-- Resource Hints para domínios externos -->
|
||||
<link rel="dns-prefetch" href="https://wa.me">
|
||||
<link rel="dns-prefetch" href="https://www.martinsevieira.adv.br">
|
||||
<link rel="dns-prefetch" href="https://www.instagram.com">
|
||||
<link rel="dns-prefetch" href="https://www.facebook.com">
|
||||
<link rel="preconnect" href="https://advx.martinsevieira.adv.br">
|
||||
<link rel="preconnect" href="https://cloud.martinsevieira.adv.br">
|
||||
<link rel="preconnect" href="https://chat.martinsevieira.adv.br">
|
||||
|
||||
<!-- Preload da imagem crítica do logo -->
|
||||
<link rel="preload" as="image" href="fotos/logo.png" fetchpriority="high">
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
@@ -22,6 +36,7 @@
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
padding: 20px 0;
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
/* Background animado com gradiente */
|
||||
@@ -37,6 +52,7 @@
|
||||
animation: gradientAnimation 15s ease infinite;
|
||||
z-index: -2;
|
||||
will-change: background-position;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
@keyframes gradientAnimation {
|
||||
@@ -56,21 +72,24 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 auto 15px;
|
||||
margin: 0 auto 12px;
|
||||
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);
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: white;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 15px;
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
@@ -106,7 +125,7 @@
|
||||
|
||||
.save-contact {
|
||||
background: linear-gradient(135deg, #20337b, #2d4a9e);
|
||||
margin-bottom: 25px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.save-contact:hover {
|
||||
@@ -121,6 +140,7 @@
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
@@ -130,10 +150,11 @@
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
transition: transform 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-item:hover {
|
||||
transform: translateY(-5px);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
@@ -148,6 +169,8 @@
|
||||
margin-bottom: 8px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.icon-item:hover .icon-box {
|
||||
@@ -179,7 +202,7 @@
|
||||
|
||||
.pix-button {
|
||||
background: linear-gradient(135deg, #32BCAD, #00A86B);
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -245,11 +268,12 @@
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
||||
transform: translateY(30px) scale(0.9);
|
||||
opacity: 0;
|
||||
will-change: transform, opacity;
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
.modal.active .modal-content {
|
||||
animation: slideUpScale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
@keyframes slideUpScale {
|
||||
@@ -363,7 +387,7 @@
|
||||
transition: all 0.2s ease;
|
||||
border: 2px solid transparent;
|
||||
position: relative;
|
||||
will-change: transform, opacity;
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
.pix-code-area::before {
|
||||
@@ -394,6 +418,7 @@
|
||||
.pix-code-area.active {
|
||||
display: block;
|
||||
animation: slideInFade 0.4s ease forwards;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
@keyframes slideInFade {
|
||||
@@ -424,8 +449,9 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
margin-top: 15px;
|
||||
flex-wrap: wrap;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.small-icon {
|
||||
@@ -440,11 +466,13 @@
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.small-icon:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-3px);
|
||||
transform: scale(1.15);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user