Skip to content

Commit 3feafb5

Browse files
lauraataide8lauraataide8
authored
Atualizar o style.css
1 parent e3bbb2b commit 3feafb5

1 file changed

Lines changed: 140 additions & 72 deletions

File tree

‎style.css‎

Lines changed: 140 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,17 @@
1212
--fonte-corpo: 'Poppins', sans-serif;
1313
}
1414

15+
/* --- RESET & GERAL --- */
1516
* { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; }
1617
html { scroll-behavior: smooth; }
18+
1719
body {
1820
font-family: var(--fonte-corpo);
1921
color: var(--cor-texto);
2022
background: linear-gradient(68.15deg, var(--cor-fundo-inicio) 16.62%, var(--cor-fundo-fim) 85.61%);
21-
overflow-x: hidden; /* Evita o scroll lateral no celular */
23+
/* ISSO AQUI É CRUCIAL PARA NÃO QUEBRAR NO CELULAR: */
24+
overflow-x: hidden;
25+
width: 100%;
2226
}
2327

2428
/* --- CABEÇALHO --- */
@@ -29,19 +33,22 @@ body {
2933
padding: 20px 5%;
3034
position: sticky;
3135
top: 0;
32-
background: rgba(13, 12, 29, 0.9);
36+
background: rgba(13, 12, 29, 0.95); /* Um pouco mais escuro para leitura */
3337
backdrop-filter: blur(10px);
3438
z-index: 1000;
39+
width: 100%; /* Garante que não ultrapasse a tela */
3540
}
36-
.cabecalho-logo { font-family: var(--fonte-titulos); font-size: 1.6em; color: var(--cor-texto-forte); }
41+
.cabecalho-logo { font-family: var(--fonte-titulos); font-size: 1.6em; color: var(--cor-texto-forte); white-space: nowrap; }
3742
.cabecalho-logo span { color: var(--cor-destaque); }
38-
.cabecalho-menu { display: flex; gap: 20px; }
39-
.cabecalho-menu-item { color: var(--cor-texto); font-weight: 600; font-size: 0.9rem; transition: 0.3s; }
43+
.cabecalho-menu { display: flex; gap: 25px; }
44+
.cabecalho-menu-item { color: var(--cor-texto); font-weight: 600; transition: 0.3s; font-size: 1rem; }
45+
.cabecalho-menu-item:hover { color: var(--cor-destaque); text-shadow: 0 0 10px var(--cor-destaque); }
4046

4147
/* --- HERO SECTION --- */
4248
.conteudo { padding: 0 5%; }
4349
.conteudo-principal { display: flex; align-items: center; justify-content: space-between; padding: 60px 0; min-height: 85vh; gap: 40px; }
4450
.conteudo-principal-escrito { display: flex; flex-direction: column; gap: 30px; flex: 1; }
51+
4552
.conteudo-principal-titulo {
4653
font-family: var(--fonte-corpo);
4754
text-transform: uppercase;
@@ -52,7 +59,7 @@ body {
5259
}
5360
.conteudo-principal-titulo span {
5461
font-family: var(--fonte-titulos);
55-
font-size: clamp(2rem, 8vw, 4rem);
62+
font-size: clamp(2.5em, 5vw, 4em); /* Ajuste dinâmico do tamanho */
5663
display: block;
5764
background: linear-gradient(-45deg, var(--cor-destaque), var(--cor-destaque-secundario), #a855f7, var(--cor-destaque));
5865
background-size: 400% 400%;
@@ -62,6 +69,7 @@ body {
6269
animation: gradientAnimation 10s ease infinite;
6370
}
6471

72+
.cta-container { display: flex; flex-direction: column; gap: 40px; margin-top: 15px; }
6573
.conteudo-principal-cta {
6674
align-self: flex-start;
6775
background: var(--cor-destaque);
@@ -72,6 +80,9 @@ body {
7280
border-radius: 5px;
7381
transition: 0.3s;
7482
}
83+
.conteudo-principal-cta:hover { transform: scale(1.05); box-shadow: 0 0 20px var(--cor-destaque); }
84+
85+
.snake-container { opacity: 0.8; margin-top: 10px; max-width: 100%; overflow: hidden; }
7586

7687
.conteudo-principal-imagem img {
7788
max-width: 100%;
@@ -82,160 +93,217 @@ body {
8293
animation: floatAnimation 6s ease-in-out infinite;
8394
}
8495

85-
/* --- SOBRE MIM (DESKTOP) --- */
96+
/* --- SOBRE MIM --- */
8697
.conteudo-secundario { padding: 80px 0; border-top: 1px solid var(--cor-separador); }
87-
.conteudo-secundario-titulo { font-family: var(--fonte-titulos); font-size: 3.0em; color: var(--cor-destaque); text-align: center; margin-bottom: 40px; }
88-
.sobre-texto { column-count: 2; column-gap: 50px; max-width: 1100px; margin: 0 auto; text-align: justify; line-height: 1.8; font-size: 1.6rem; }
98+
.conteudo-secundario-titulo { font-family: var(--fonte-titulos); font-size: 3.0em; color: var(--cor-destaque); text-align: center; margin-bottom: 50px; }
99+
.sobre-texto {
100+
column-count: 2;
101+
column-gap: 50px;
102+
max-width: 1100px;
103+
margin: 0 auto;
104+
text-align: justify;
105+
line-height: 1.9;
106+
font-size: 1.60rem;
107+
}
108+
109+
/* --- PROJETOS --- */
110+
.projeto-card {
111+
background: var(--cor-card);
112+
padding: 25px;
113+
border-radius: 13px;
114+
border: 1px solid var(--cor-separador);
115+
height: 100%;
116+
display: flex;
117+
flex-direction: column;
118+
min-height: 480px;
119+
}
120+
.projeto-imagem-wrapper { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 8px; margin-bottom: 15px; }
121+
.projeto-imagem-wrapper img { width: 100%; height: 100%; object-fit: cover; }
122+
.projeto-card h4 { color: var(--cor-texto-forte); margin-bottom: 10px; }
123+
.projeto-card p { flex-grow: 1; margin-bottom: 25px; font-size: 1rem; }
124+
125+
.github-btn {
126+
color: var(--cor-destaque);
127+
border: 1px solid var(--cor-destaque);
128+
padding: 10px 15px;
129+
border-radius: 5px;
130+
text-align: center;
131+
transition: 0.3s;
132+
font-weight: 600;
133+
display: block; /* Garante que o botão ocupe o espaço correto */
134+
}
89135

90136
/* --- TECH STACK --- */
91137
.habilidades-lista {
92138
display: grid;
93139
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
94-
gap: 20px;
140+
gap: 25px;
95141
list-style: none;
96142
max-width: 1200px;
97143
margin: 0 auto;
98144
}
99145
.habilidades-lista li {
100146
background: var(--cor-card);
101-
padding: 25px;
147+
padding: 30px 20px;
102148
border-radius: 12px;
103149
display: flex;
104150
flex-direction: column;
105151
align-items: center;
106-
gap: 10px;
152+
gap: 15px;
153+
transition: 0.3s;
107154
border: 1px solid rgba(255, 255, 255, 0.05);
108155
}
109-
.habilidades-lista i { font-size: 2.5em; color: var(--cor-destaque-secundario); }
156+
.habilidades-lista i { font-size: 3em; color: var(--cor-destaque-secundario); }
157+
158+
/* --- RODAPÉ --- */
159+
.rodape {
160+
padding: 80px 5% 40px;
161+
background: var(--cor-fundo-fim);
162+
border-top: 2px solid var(--cor-destaque);
163+
overflow: hidden;
164+
}
110165

111-
/* --- RODAPÉ REESTRUTURADO --- */
112-
.rodape { padding: 60px 5% 30px; background: var(--cor-fundo-fim); border-top: 2px solid var(--cor-destaque); }
113166
.rodape-conteudo {
114167
display: flex;
115-
flex-direction: row-reverse; /* Portal na Esquerda, Info na Direita */
168+
flex-direction: row-reverse;
116169
justify-content: space-between;
117170
align-items: center;
118-
gap: 40px;
171+
flex-wrap: wrap;
172+
gap: 60px;
119173
max-width: 1200px;
120-
margin: 0 auto 40px;
174+
margin: 0 auto 60px;
121175
}
122176

123177
.rodape-info {
124178
flex: 1;
179+
min-width: 300px; /* Reduzi um pouco para caber melhor */
125180
display: flex;
126181
flex-direction: column;
127182
align-items: flex-end;
128183
text-align: right;
129-
gap: 20px;
184+
gap: 30px;
130185
}
131186

132187
.rodape-contato-badges {
133188
display: flex;
134189
flex-wrap: wrap;
135-
gap: 12px;
190+
gap: 15px;
136191
justify-content: flex-end;
137192
}
138193

139194
.badge-contato {
140195
display: flex;
141196
align-items: center;
142-
gap: 8px;
197+
gap: 10px;
143198
background: var(--cor-card);
144-
padding: 10px 18px;
199+
padding: 12px 20px;
145200
border-radius: 50px;
146201
color: var(--cor-texto);
147202
border: 1px solid var(--cor-separador);
148-
font-size: 0.9rem;
203+
transition: 0.3s;
149204
font-weight: 600;
150205
}
151206

152-
/* --- PORTAL RICK & MORTY --- */
207+
/* PORTAL */
208+
.rodape-portal-container { display: flex; justify-content: center; align-items: center; }
209+
.portal-wrapper { display: flex; flex-direction: column; align-items: center; gap: 20px; transition: 0.3s; }
210+
153211
.portal {
154-
width: 250px; height: 250px;
212+
width: 250px;
213+
height: 250px;
155214
position: relative;
156215
display: flex;
157216
justify-content: center;
158217
align-items: center;
159-
filter: drop-shadow(0 0 20px var(--cor-destaque));
218+
filter: drop-shadow(0 0 25px var(--cor-destaque));
160219
}
161220
.portal-efeito {
162221
position: absolute; width: 100%; height: 100%;
163222
background: radial-gradient(circle, var(--cor-destaque) 10%, #4ade80 40%, transparent 70%);
164223
border-radius: 50% 40% 60% 30% / 40% 50% 40% 60%;
165-
animation: portal-girar 3s linear infinite;
224+
animation: portal-girar 3s linear infinite; opacity: 0.8;
166225
}
167226
.portal-nucleo {
168-
position: absolute; width: 70%; height: 70%;
227+
position: absolute; width: 75%; height: 75%;
169228
background: repeating-conic-gradient(from 0deg, #1a1a1a 0deg 20deg, var(--cor-destaque) 20deg 40deg);
170229
border-radius: 50%; mix-blend-mode: overlay;
171230
animation: portal-pulso 2s ease-in-out infinite;
172231
}
232+
.portal-legenda {
233+
font-family: var(--fonte-titulos); color: var(--cor-destaque); font-size: 1.1rem;
234+
letter-spacing: 3px; font-weight: bold; text-shadow: 0 0 10px var(--cor-destaque);
235+
}
173236

174-
/* COPYRIGHT CENTRALIZADO */
175237
.rodape-copyright {
176-
text-align: center;
177-
width: 100%;
178-
border-top: 1px solid var(--cor-separador);
179-
padding-top: 30px;
180-
font-size: 0.9rem;
238+
text-align: center; width: 100%; border-top: 1px solid var(--cor-separador);
239+
padding-top: 40px; margin-top: 20px;
181240
}
182241

183242
/* --- ANIMAÇÕES --- */
184243
@keyframes portal-girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
185-
@keyframes portal-pulso { 0%, 100% { transform: scale(0.9); } 50% { transform: scale(1.1); } }
244+
@keyframes portal-pulso { 0%, 100% { transform: scale(0.95); } 50% { transform: scale(1.05); } }
186245
@keyframes floatAnimation { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
187246
@keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
188247

248+
.whatsapp-flutuante { position: fixed; bottom: 30px; right: 30px; background: var(--cor-destaque); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: white; z-index: 1000; box-shadow: 0 0 20px rgba(0,0,0,0.4); }
249+
189250
/* ============================================================
190-
AJUSTES PARA CELULAR (RESPONSIVIDADE)
251+
AQUI ESTÁ A CORREÇÃO MÁGICA PARA O SEU CELULAR
191252
============================================================ */
192-
@media (max-width: 768px) {
193-
/* Header compacta */
194-
.cabecalho { flex-direction: column; gap: 15px; padding: 15px; }
195-
.cabecalho-menu { gap: 10px; flex-wrap: wrap; justify-content: center; }
196-
197-
/* Hero Section empilhada */
198-
.conteudo-principal { flex-direction: column-reverse; text-align: center; padding: 30px 0; }
199-
.conteudo-principal-escrito { align-items: center; }
200-
.conteudo-principal-titulo { letter-spacing: 0.1em; }
201-
.conteudo-principal-cta { align-self: center; }
202-
.conteudo-principal-imagem img { width: 280px; }
203-
204-
/* Sobre Mim em uma coluna e fonte menor */
205-
.conteudo-secundario-titulo { font-size: 2.2em; }
206-
.sobre-texto {
207-
column-count: 1;
208-
font-size: 1.15rem; /* Fonte legível mas menor que no desktop */
209-
line-height: 1.6;
210-
text-align: left; /* Melhor leitura no celular */
253+
@media (max-width: 992px) {
254+
/* 1. CORREÇÃO DO MENU QUE ESTAVA QUEBRANDO */
255+
.cabecalho {
256+
flex-direction: column; /* Coloca o logo em cima e o menu embaixo */
257+
gap: 20px; /* Espaço entre logo e menu */
258+
padding: 15px;
259+
}
260+
261+
.cabecalho-menu {
262+
width: 100%;
263+
justify-content: center; /* Centraliza os itens */
264+
flex-wrap: wrap; /* Se não couber, quebra linha */
265+
gap: 15px;
211266
}
212267

213-
/* Tech Stack */
214-
.habilidades-lista { grid-template-columns: repeat(2, 1fr); gap: 15px; }
268+
/* 2. CORREÇÃO DO "SOBRE MIM" ESPREMIDO */
269+
.sobre-texto {
270+
column-count: 1; /* Tira as colunas duplas */
271+
font-size: 1.2rem; /* Diminui a fonte para caber */
272+
text-align: left; /* Melhora a leitura no celular */
273+
padding: 0 10px;
274+
}
275+
.conteudo-secundario-titulo { font-size: 2.2em; }
215276

216-
/* RODAPÉ CELULAR: Tudo centralizado e empilhado */
217-
.rodape-conteudo {
218-
flex-direction: column; /* No celular o portal fica em cima e info embaixo */
277+
/* 3. HERO SECTION (INÍCIO) */
278+
.conteudo-principal {
279+
flex-direction: column-reverse;
219280
text-align: center;
220-
gap: 50px;
281+
padding: 40px 0;
282+
min-height: auto;
221283
}
284+
.conteudo-principal-escrito { width: 100%; }
285+
.conteudo-principal-cta { align-self: center; } /* Centraliza o botão */
222286

287+
.conteudo-principal-titulo span {
288+
font-size: 2.5rem; /* Diminui o título gigante */
289+
}
290+
291+
/* 4. RODAPÉ */
292+
.rodape-conteudo {
293+
flex-direction: column; /* Empilha tudo */
294+
text-align: center;
295+
gap: 40px;
296+
}
223297
.rodape-info {
224298
align-items: center;
225299
text-align: center;
300+
min-width: auto;
226301
}
227-
228-
.rodape-contato-badges {
229-
justify-content: center;
230-
}
231-
302+
.rodape-contato-badges { justify-content: center; }
303+
232304
.portal {
233-
width: 180px; /* Reduzi um pouco para não estourar a tela do celular */
234-
height: 180px;
305+
width: 200px; /* Diminui um pouco o portal no celular */
306+
height: 200px;
235307
}
236-
237-
.badge-contato { width: 100%; justify-content: center; } /* Badges ocupam a largura toda no celular */
238308
}
239-
240-
/* Botão WhatsApp */
241309
.whatsapp-flutuante { position: fixed; bottom: 20px; right: 20px; background: #25d366; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 25px; color: white; z-index: 1000; }

0 commit comments

Comments
 (0)