Skip to content

Commit 8494459

Browse files
lauraataide8lauraataide8
authored
Refactor CSS for clarity and consistency
1 parent e1d16fb commit 8494459

1 file changed

Lines changed: 63 additions & 124 deletions

File tree

‎style.css‎

Lines changed: 63 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,20 @@
1111
--max-width-site: 1200px;
1212
}
1313

14-
/* --- RESET BÁSICO E PROTEÇÃO DE ZOOM --- */
14+
/* --- RESET & PROTEÇÃO --- */
1515
* { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; }
1616
html { scroll-behavior: smooth; }
1717

1818
body {
1919
font-family: var(--fonte-corpo);
2020
color: var(--cor-texto);
2121
background: linear-gradient(68deg, var(--cor-fundo-inicio), var(--cor-fundo-fim));
22-
overflow-x: hidden; /* CRÍTICO: Impede rolagem lateral e zoom errado no iPhone */
22+
overflow-x: hidden; /* Impede zoom errado no iPhone */
2323
width: 100%;
24-
-webkit-text-size-adjust: 100%; /* Impede iOS de aumentar fonte sozinho */
24+
-webkit-text-size-adjust: 100%;
2525
}
2626

27-
/* --- CONTAINER GLOBAL --- */
27+
/* --- CONTAINER --- */
2828
.container {
2929
max-width: var(--max-width-site);
3030
margin: 0 auto;
@@ -35,32 +35,19 @@ body {
3535
/* --- CABEÇALHO --- */
3636
.cabecalho {
3737
background-color: #000000;
38-
position: sticky;
39-
top: 0;
40-
z-index: 1000;
41-
width: 100%;
38+
position: sticky; top: 0; z-index: 1000; width: 100%;
4239
border-bottom: 1px solid rgba(151, 241, 38, 0.2);
4340
}
44-
4541
.cabecalho-container {
46-
display: flex;
47-
justify-content: space-between;
48-
align-items: center;
49-
padding: 20px 0;
42+
display: flex; justify-content: space-between; align-items: center; padding: 15px 0;
5043
}
51-
5244
.cabecalho-logo {
53-
font-family: var(--fonte-titulos);
54-
font-size: 26px;
55-
color: #fff;
56-
font-weight: 700;
45+
font-family: var(--fonte-titulos); font-size: 24px; color: #fff; font-weight: 700;
5746
}
5847
.cabecalho-logo span { color: var(--cor-destaque); }
59-
6048
.cabecalho-menu { display: flex; gap: 30px; }
61-
6249
.cabecalho-menu-item {
63-
color: #fff; font-weight: 600; font-size: 17px; transition: 0.3s; position: relative;
50+
color: #fff; font-weight: 600; font-size: 16px; transition: 0.3s; position: relative;
6451
}
6552
.cabecalho-menu-item:hover { color: var(--cor-destaque); text-shadow: 0 0 10px rgba(151, 241, 38, 0.8); }
6653
.cabecalho-menu-item::after {
@@ -69,107 +56,58 @@ body {
6956
}
7057
.cabecalho-menu-item:hover::after { width: 100%; }
7158

72-
/* --- HERO SECTION (BALANCEADO PARA PC) --- */
59+
/* --- HERO SECTION (CORRIGIDA) --- */
7360
.conteudo-principal {
74-
display: flex;
75-
align-items: center;
76-
justify-content: space-between;
77-
padding: 80px 0;
78-
gap: 40px; /* Espaço seguro entre texto e imagem */
79-
width: 100%;
80-
}
81-
82-
/* Lado Esquerdo: Texto + Cobrinha (Ocupa o espaço restante) */
83-
.conteudo-principal-escrito {
84-
flex: 1; /* Cresce para ocupar o espaço disponível */
85-
min-width: 0; /* Impede que a cobrinha empurre o layout */
86-
}
87-
88-
.conteudo-principal-titulo span {
89-
font-family: var(--fonte-titulos);
90-
font-size: clamp(2.5rem, 4vw, 4.2rem);
91-
color: var(--cor-destaque);
92-
display: block;
93-
line-height: 1.1;
94-
}
95-
96-
.conteudo-principal-subtitulo {
97-
font-size: clamp(1rem, 1.2vw, 1.2rem);
98-
margin: 20px 0;
99-
line-height: 1.6;
100-
}
101-
102-
/* Cobrinha */
103-
.snake-container {
104-
margin-top: 20px;
105-
width: 100%;
106-
max-width: 600px;
107-
}
61+
display: flex; align-items: center; justify-content: space-between;
62+
padding: 80px 0; gap: 50px; width: 100%;
63+
}
64+
.conteudo-principal-escrito { flex: 1; min-width: 0; }
65+
.conteudo-principal-titulo { font-family: var(--fonte-titulos); font-size: 3rem; color: #fff; line-height: 1.1; }
66+
.conteudo-principal-titulo span { font-size: clamp(3rem, 5vw, 4.5rem); color: var(--cor-destaque); display: block; }
67+
.conteudo-principal-subtitulo { font-size: clamp(1rem, 1.2vw, 1.2rem); margin: 20px 0; line-height: 1.6; color: #ddd; }
68+
.snake-container { margin-top: 25px; width: 100%; max-width: 600px; }
10869
.snake-container img { width: 100%; height: auto; display: block; }
10970

110-
/* Lado Direito: Foto (FIXADA EM UM TAMANHO MÉDIO NO PC) */
11171
.conteudo-principal-imagem {
112-
/* Define uma largura fixa ideal para PC, nem gigante nem minúscula */
113-
flex: 0 0 350px;
114-
width: 350px;
115-
display: flex;
116-
justify-content: center;
72+
flex: 0 0 350px; /* TRAVADO EM 350px NO PC */
73+
width: 350px; display: flex; justify-content: center; align-items: center;
11774
}
118-
11975
.conteudo-principal-imagem img {
120-
width: 100%;
121-
height: auto;
122-
border-radius: 30px;
123-
border: 2px solid var(--cor-destaque);
124-
box-shadow: 0 0 20px rgba(151, 241, 38, 0.2);
125-
animation: floatAnimation 6s ease-in-out infinite;
126-
object-fit: cover;
76+
width: 100%; height: auto; border-radius: 30px;
77+
border: 2px solid var(--cor-destaque); box-shadow: 0 0 25px rgba(151, 241, 38, 0.15);
78+
animation: floatAnimation 6s ease-in-out infinite; object-fit: cover;
12779
}
12880

129-
/* --- SEÇÕES SECUNDÁRIAS --- */
81+
/* --- SEÇÕES GERAIS --- */
13082
.conteudo-secundario { padding: 60px 0; border-top: 1px solid rgba(151, 241, 38, 0.1); }
131-
13283
.conteudo-secundario-titulo {
13384
font-family: var(--fonte-titulos); font-size: 2.5rem;
13485
color: var(--cor-destaque); text-align: center; margin-bottom: 40px;
13586
}
87+
.sobre-texto { column-count: 2; column-gap: 60px; line-height: 1.8; text-align: justify; font-size: 1.05rem; }
13688

137-
.sobre-texto { column-count: 2; column-gap: 50px; line-height: 1.7; text-align: justify; }
138-
139-
/* --- CARDS DE PROJETOS (ALTURA IGUAL) --- */
140-
.meu-swiper {
141-
padding: 30px 10px 60px 10px; overflow: visible !important;
142-
}
89+
/* --- CARDS PROJETOS --- */
90+
.meu-swiper { padding: 20px 10px 60px 10px; overflow: visible !important; }
14391
.swiper-slide { height: auto; display: flex; }
144-
14592
.projeto-card {
146-
background: var(--cor-card);
147-
padding: 25px;
148-
border-radius: 15px;
149-
border: 1px solid rgba(151, 241, 38, 0.1);
150-
width: 100%;
93+
background: var(--cor-card); padding: 25px; border-radius: 15px;
94+
border: 1px solid rgba(151, 241, 38, 0.1); width: 100%;
15195
display: flex; flex-direction: column; justify-content: space-between;
15296
transition: 0.4s; text-align: center;
15397
}
154-
.projeto-card:hover {
155-
transform: scale(1.03); border-color: var(--cor-destaque);
156-
box-shadow: 0 0 30px rgba(151, 241, 38, 0.2); z-index: 10;
157-
}
98+
.projeto-card:hover { transform: translateY(-5px); border-color: var(--cor-destaque); box-shadow: 0 5px 20px rgba(151, 241, 38, 0.2); z-index: 10; }
15899
.projeto-imagem-wrapper { height: 180px; overflow: hidden; border-radius: 10px; margin-bottom: 15px; flex-shrink: 0; }
159100
.projeto-imagem-wrapper img { width: 100%; height: 100%; object-fit: cover; }
160-
.projeto-card h4 { margin-bottom: 10px; color: #fff; }
161-
.projeto-card p { flex-grow: 1; margin-bottom: 20px; font-size: 0.95rem; }
162-
101+
.projeto-card h4 { margin-bottom: 10px; color: #fff; font-size: 1.2rem; }
102+
.projeto-card p { flex-grow: 1; margin-bottom: 20px; font-size: 0.95rem; color: #ccc; }
163103
.github-btn {
164104
display: block; padding: 12px; background: var(--cor-destaque);
165-
color: #000; font-weight: bold; border-radius: 6px; width: 100%; margin-top: auto;
105+
color: #000; font-weight: bold; border-radius: 6px; width: 100%; margin-top: auto; transition: 0.3s;
166106
}
107+
.github-btn:hover { background: #fff; box-shadow: 0 0 15px #fff; }
167108

168109
/* --- HABILIDADES --- */
169-
.habilidades-lista {
170-
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
171-
gap: 20px; list-style: none;
172-
}
110+
.habilidades-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 20px; list-style: none; }
173111
.habilidades-lista li {
174112
background: var(--cor-card); padding: 20px; border-radius: 12px;
175113
display: flex; flex-direction: column; align-items: center; gap: 10px;
@@ -178,21 +116,28 @@ body {
178116
.habilidades-lista li:hover { border-color: var(--cor-destaque-secundario); transform: translateY(-5px); }
179117
.habilidades-lista li i { font-size: 2.5rem; color: var(--cor-destaque-secundario); }
180118

181-
/* --- RODAPÉ --- */
119+
/* --- RODAPÉ (RESTAURADO E COMPACTO) --- */
182120
.rodape {
183-
background-color: #000000; padding: 30px 0; border-top: 2px solid var(--cor-destaque);
121+
background-color: #000000;
122+
padding: 30px 0; /* Padding menor */
123+
border-top: 2px solid var(--cor-destaque);
124+
width: 100%;
125+
}
126+
.rodape-container {
127+
display: flex; justify-content: space-between; align-items: center; gap: 30px;
184128
}
185-
.rodape-container { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
186129
.rodape-info h2 { font-family: var(--fonte-titulos); color: #fff; font-size: 1.5rem; margin-bottom: 10px; }
130+
131+
/* Badges de Contato (Compactos) */
187132
.rodape-contato-badges { display: flex; gap: 10px; flex-wrap: wrap; }
188133
.badge-contato {
189134
display: flex; align-items: center; gap: 8px; background: #111;
190135
padding: 8px 14px; border-radius: 30px; color: #fff;
191136
border: 1px solid rgba(255,255,255,0.1); font-size: 13px; transition: 0.3s;
192137
}
193-
.badge-contato:hover { border-color: var(--cor-destaque); background: rgba(151, 241, 38, 0.1); }
138+
.badge-contato:hover { border-color: var(--cor-destaque); background: rgba(151, 241, 38, 0.1); color: var(--cor-destaque); }
194139

195-
/* Portal Gun Card */
140+
/* Portal Gun Card (Rick & Morty) */
196141
.portal-gun-card {
197142
position: relative; width: 240px; height: 120px;
198143
background: #111; border: 2px solid #333; border-radius: 12px;
@@ -205,45 +150,39 @@ body {
205150
.clique-texto { font-size: 0.7rem; color: #fff; font-weight: bold; opacity: 0; transition: 0.4s; }
206151
.fluido-container { position: absolute; bottom: 0; width: 100%; height: 0%; background: linear-gradient(transparent, rgba(151, 241, 38, 0.4)); transition: 0.5s; }
207152
.bolha { position: absolute; background: var(--cor-destaque); border-radius: 50%; bottom: -10px; opacity: 0; filter: blur(4px); }
208-
.portal-gun-card:hover { transform: scale(1.05); border-color: var(--cor-destaque); .clique-texto { opacity: 1; } .fluido-container { height: 100%; } .bolha { animation: bubbleRise 2s infinite ease-out; } }
153+
.portal-gun-card:hover { transform: scale(1.05); border-color: var(--cor-destaque); }
154+
.portal-gun-card:hover .clique-texto { opacity: 1; }
155+
.portal-gun-card:hover .fluido-container { height: 100%; }
156+
.portal-gun-card:hover .bolha { animation: bubbleRise 2s infinite ease-out; }
157+
209158
.rodape-copyright { text-align: center; margin-top: 20px; font-size: 12px; opacity: 0.5; color: #fff; }
210159

211-
/* --- ANIMAÇÕES --- */
160+
/* --- ANIMAÇÕES E EXTRAS --- */
212161
@keyframes bubbleRise { 0% { transform: translateY(0); opacity: 0.6; } 100% { transform: translateY(-130px); opacity: 0; } }
213162
@keyframes floatAnimation { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
214163
.whatsapp-flutuante {
215164
position: fixed; bottom: 20px; right: 20px; background: #25d366;
216165
width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
217-
font-size: 30px; color: white; z-index: 2000; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
166+
font-size: 30px; color: white; z-index: 2000; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: 0.3s;
218167
}
168+
.whatsapp-flutuante:hover { transform: scale(1.1); }
219169

220-
/* --- RESPONSIVIDADE (CELULARES E TABLETS) --- */
170+
/* --- RESPONSIVIDADE --- */
221171
@media (max-width: 992px) {
222-
/* Layout Coluna (Um embaixo do outro) */
223-
.conteudo-principal {
224-
flex-direction: column-reverse; /* Foto em cima, Texto embaixo */
225-
text-align: center;
226-
padding: 50px 0;
227-
gap: 30px;
228-
}
229-
230-
/* Remove limites do PC */
172+
.conteudo-principal { flex-direction: column-reverse; text-align: center; padding: 40px 0; gap: 30px; }
173+
.conteudo-principal-imagem { flex: 0 0 auto; width: 100%; max-width: 280px; }
231174
.conteudo-principal-escrito { width: 100%; }
232-
233-
.conteudo-principal-imagem {
234-
flex: 0 0 auto; /* Remove a trava de 350px do PC */
235-
width: 100%; /* Ocupa a largura disponivel */
236-
max-width: 280px; /* Mas limita para não ficar gigante no celular */
237-
}
238-
239175
.snake-container { display: flex; justify-content: center; }
240-
.sobre-texto { column-count: 1; }
176+
.conteudo-principal-titulo { font-size: 2rem; }
177+
.sobre-texto { column-count: 1; text-align: left; }
241178
}
242179

243180
@media (max-width: 768px) {
244181
.cabecalho-container { flex-direction: column; gap: 15px; }
245-
.cabecalho-menu { flex-wrap: wrap; justify-content: center; gap: 20px; }
182+
.cabecalho-menu { flex-wrap: wrap; justify-content: center; gap: 15px; }
183+
184+
/* Footer no Celular */
246185
.rodape-container { flex-direction: column; text-align: center; gap: 25px; }
247186
.rodape-contato-badges { justify-content: center; }
248-
.portal-gun-card { width: 100%; max-width: 250px; }
187+
.portal-gun-card { width: 100%; max-width: 260px; } /* Evita quebra */
249188
}

0 commit comments

Comments
 (0)