Skip to content

Commit e3bbb2b

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

1 file changed

Lines changed: 95 additions & 137 deletions

File tree

‎style.css‎

Lines changed: 95 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* --- TEMA & VARIÁVEIS (Mantido) --- */
1+
/* --- TEMA & VARIÁVEIS --- */
22
:root {
33
--cor-fundo-inicio: #242038;
44
--cor-fundo-fim: #0d0c1d;
@@ -12,14 +12,13 @@
1212
--fonte-corpo: 'Poppins', sans-serif;
1313
}
1414

15-
/* --- ESTILOS GERAIS --- */
1615
* { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; }
1716
html { scroll-behavior: smooth; }
1817
body {
1918
font-family: var(--fonte-corpo);
2019
color: var(--cor-texto);
2120
background: linear-gradient(68.15deg, var(--cor-fundo-inicio) 16.62%, var(--cor-fundo-fim) 85.61%);
22-
overflow-x: hidden;
21+
overflow-x: hidden; /* Evita o scroll lateral no celular */
2322
}
2423

2524
/* --- CABEÇALHO --- */
@@ -36,25 +35,24 @@ body {
3635
}
3736
.cabecalho-logo { font-family: var(--fonte-titulos); font-size: 1.6em; color: var(--cor-texto-forte); }
3837
.cabecalho-logo span { color: var(--cor-destaque); }
39-
.cabecalho-menu { display: flex; gap: 25px; }
40-
.cabecalho-menu-item { color: var(--cor-texto); font-weight: 600; transition: 0.3s; }
41-
.cabecalho-menu-item:hover { color: var(--cor-destaque); text-shadow: 0 0 10px 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; }
4240

4341
/* --- HERO SECTION --- */
4442
.conteudo { padding: 0 5%; }
4543
.conteudo-principal { display: flex; align-items: center; justify-content: space-between; padding: 60px 0; min-height: 85vh; gap: 40px; }
46-
.conteudo-principal-escrito { display: flex; flex-direction: column; gap: 30px; }
44+
.conteudo-principal-escrito { display: flex; flex-direction: column; gap: 30px; flex: 1; }
4745
.conteudo-principal-titulo {
4846
font-family: var(--fonte-corpo);
4947
text-transform: uppercase;
50-
letter-spacing: .3em;
48+
letter-spacing: .2em;
5149
border-top: 4px double var(--cor-separador);
5250
border-bottom: 4px double var(--cor-separador);
5351
padding: 1em 0;
5452
}
5553
.conteudo-principal-titulo span {
5654
font-family: var(--fonte-titulos);
57-
font-size: clamp(2.5em, 5vw, 4em);
55+
font-size: clamp(2rem, 8vw, 4rem);
5856
display: block;
5957
background: linear-gradient(-45deg, var(--cor-destaque), var(--cor-destaque-secundario), #a855f7, var(--cor-destaque));
6058
background-size: 400% 400%;
@@ -64,7 +62,6 @@ body {
6462
animation: gradientAnimation 10s ease infinite;
6563
}
6664

67-
.cta-container { display: flex; flex-direction: column; gap: 40px; margin-top: 15px; }
6865
.conteudo-principal-cta {
6966
align-self: flex-start;
7067
background: var(--cor-destaque);
@@ -75,209 +72,170 @@ body {
7572
border-radius: 5px;
7673
transition: 0.3s;
7774
}
78-
.conteudo-principal-cta:hover { transform: scale(1.05); box-shadow: 0 0 20px var(--cor-destaque); }
79-
.snake-container { opacity: 0.8; margin-top: 10px; }
8075

8176
.conteudo-principal-imagem img {
82-
max-width: 400px;
77+
max-width: 100%;
78+
width: 400px;
8379
border-radius: 40% 5% 40% 5%;
8480
border: 3px solid var(--cor-destaque-secundario);
8581
box-shadow: 0 0 30px rgba(130, 216, 227, 0.3);
8682
animation: floatAnimation 6s ease-in-out infinite;
8783
}
8884

89-
/* --- SOBRE MIM --- */
90-
.conteudo-secundario { padding: 100px 0; border-top: 1px solid var(--cor-separador); }
91-
.conteudo-secundario-titulo { font-family: var(--fonte-titulos); font-size: 3.0em; color: var(--cor-destaque); text-align: center; margin-bottom: 50px; }
92-
.sobre-texto { column-count: 2; column-gap: 50px; max-width: 1100px; margin: 0 auto; text-align: justify; line-height: 1.9; font-size: 1.60rem; }
93-
94-
/* --- PROJETOS --- */
95-
.projeto-card {
96-
background: var(--cor-card);
97-
padding: 25px;
98-
border-radius: 13px;
99-
border: 1px solid var(--cor-separador);
100-
height: 100%;
101-
display: flex;
102-
flex-direction: column;
103-
min-height: 480px;
104-
}
105-
.projeto-imagem-wrapper { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 8px; margin-bottom: 15px; }
106-
.projeto-imagem-wrapper img { width: 100%; height: 100%; object-fit: cover; }
107-
.projeto-card h4 { color: var(--cor-texto-forte); margin-bottom: 10px; }
108-
.projeto-card p { flex-grow: 1; margin-bottom: 25px; font-size: 1rem; }
109-
110-
.github-btn {
111-
color: var(--cor-destaque);
112-
border: 1px solid var(--cor-destaque);
113-
padding: 10px 15px;
114-
border-radius: 5px;
115-
text-align: center;
116-
transition: 0.3s;
117-
font-weight: 600;
118-
}
85+
/* --- SOBRE MIM (DESKTOP) --- */
86+
.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; }
11989

12090
/* --- TECH STACK --- */
12191
.habilidades-lista {
12292
display: grid;
123-
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
124-
gap: 25px;
93+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
94+
gap: 20px;
12595
list-style: none;
12696
max-width: 1200px;
12797
margin: 0 auto;
12898
}
12999
.habilidades-lista li {
130100
background: var(--cor-card);
131-
padding: 30px 20px;
101+
padding: 25px;
132102
border-radius: 12px;
133103
display: flex;
134104
flex-direction: column;
135105
align-items: center;
136-
gap: 15px;
137-
transition: 0.3s;
106+
gap: 10px;
138107
border: 1px solid rgba(255, 255, 255, 0.05);
139108
}
140-
.habilidades-lista i { font-size: 3em; color: var(--cor-destaque-secundario); }
141-
142-
/* --- RODAPÉ REESTRUTURADO (AJUSTES FINAIS) --- */
143-
.rodape {
144-
padding: 80px 5% 40px;
145-
background: var(--cor-fundo-fim);
146-
border-top: 2px solid var(--cor-destaque);
147-
overflow: hidden;
148-
}
109+
.habilidades-lista i { font-size: 2.5em; color: var(--cor-destaque-secundario); }
149110

111+
/* --- RODAPÉ REESTRUTURADO --- */
112+
.rodape { padding: 60px 5% 30px; background: var(--cor-fundo-fim); border-top: 2px solid var(--cor-destaque); }
150113
.rodape-conteudo {
151114
display: flex;
152-
flex-direction: row-reverse; /* Inverte: Portal na Esquerda, Info na Direita */
115+
flex-direction: row-reverse; /* Portal na Esquerda, Info na Direita */
153116
justify-content: space-between;
154117
align-items: center;
155-
flex-wrap: wrap;
156-
gap: 60px;
118+
gap: 40px;
157119
max-width: 1200px;
158-
margin: 0 auto 60px;
120+
margin: 0 auto 40px;
159121
}
160122

161-
/* Coluna de Texto (Lado Direito) */
162123
.rodape-info {
163124
flex: 1;
164-
min-width: 320px;
165125
display: flex;
166126
flex-direction: column;
167-
align-items: flex-end; /* Alinha tudo à direita */
168-
text-align: right; /* Texto alinhado à direita */
169-
gap: 30px; /* Aumentei o espaço para não ficar "grudado" */
170-
}
171-
172-
.rodape-info p {
173-
max-width: 500px;
174-
font-size: 1.1rem;
175-
line-height: 1.6;
127+
align-items: flex-end;
128+
text-align: right;
129+
gap: 20px;
176130
}
177131

178-
/* Badges de Contato */
179132
.rodape-contato-badges {
180133
display: flex;
181134
flex-wrap: wrap;
182-
gap: 15px;
183-
justify-content: flex-end; /* Garante que os badges fiquem na direita */
184-
margin-top: 10px; /* Espaço extra acima dos badges */
135+
gap: 12px;
136+
justify-content: flex-end;
185137
}
186138

187139
.badge-contato {
188140
display: flex;
189141
align-items: center;
190-
gap: 10px;
142+
gap: 8px;
191143
background: var(--cor-card);
192-
padding: 12px 20px;
144+
padding: 10px 18px;
193145
border-radius: 50px;
194146
color: var(--cor-texto);
195147
border: 1px solid var(--cor-separador);
196-
transition: 0.3s;
148+
font-size: 0.9rem;
197149
font-weight: 600;
198150
}
199-
.badge-contato:hover { background: var(--cor-destaque); color: var(--cor-fundo-inicio); transform: translateY(-3px); }
200-
201-
/* --- PORTAL RICK & MORTY (AUMENTADO NA ESQUERDA) --- */
202-
.rodape-portal-container {
203-
display: flex;
204-
justify-content: center;
205-
align-items: center;
206-
}
207-
208-
.portal-wrapper {
209-
display: flex;
210-
flex-direction: column;
211-
align-items: center;
212-
gap: 20px;
213-
transition: 0.3s;
214-
}
215151

152+
/* --- PORTAL RICK & MORTY --- */
216153
.portal {
217-
width: 250px; /* Aumentado de 210px para 250px como solicitado */
218-
height: 250px;
154+
width: 250px; height: 250px;
219155
position: relative;
220156
display: flex;
221157
justify-content: center;
222158
align-items: center;
223-
filter: drop-shadow(0 0 25px var(--cor-destaque));
159+
filter: drop-shadow(0 0 20px var(--cor-destaque));
224160
}
225-
226161
.portal-efeito {
227-
position: absolute;
228-
width: 100%;
229-
height: 100%;
162+
position: absolute; width: 100%; height: 100%;
230163
background: radial-gradient(circle, var(--cor-destaque) 10%, #4ade80 40%, transparent 70%);
231164
border-radius: 50% 40% 60% 30% / 40% 50% 40% 60%;
232165
animation: portal-girar 3s linear infinite;
233-
opacity: 0.8;
234166
}
235-
236167
.portal-nucleo {
237-
position: absolute;
238-
width: 75%;
239-
height: 75%;
168+
position: absolute; width: 70%; height: 70%;
240169
background: repeating-conic-gradient(from 0deg, #1a1a1a 0deg 20deg, var(--cor-destaque) 20deg 40deg);
241-
border-radius: 50%;
242-
mix-blend-mode: overlay;
170+
border-radius: 50%; mix-blend-mode: overlay;
243171
animation: portal-pulso 2s ease-in-out infinite;
244172
}
245173

246-
.portal-legenda {
247-
font-family: var(--fonte-titulos);
248-
color: var(--cor-destaque);
249-
font-size: 1.1rem;
250-
letter-spacing: 3px;
251-
font-weight: bold;
252-
text-shadow: 0 0 10px var(--cor-destaque);
253-
}
254-
255-
/* --- COPYRIGHT CENTRALIZADO NO MEIO --- */
174+
/* COPYRIGHT CENTRALIZADO */
256175
.rodape-copyright {
257-
text-align: center; /* Centraliza o texto */
176+
text-align: center;
258177
width: 100%;
259178
border-top: 1px solid var(--cor-separador);
260-
padding-top: 40px;
261-
margin-top: 20px;
262-
}
263-
264-
.rodape-copyright p {
265-
font-size: 1rem;
266-
opacity: 0.8;
179+
padding-top: 30px;
180+
font-size: 0.9rem;
267181
}
268182

269183
/* --- ANIMAÇÕES --- */
270184
@keyframes portal-girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
271-
@keyframes portal-pulso { 0%, 100% { transform: scale(0.95); } 50% { transform: scale(1.05); } }
185+
@keyframes portal-pulso { 0%, 100% { transform: scale(0.9); } 50% { transform: scale(1.1); } }
272186
@keyframes floatAnimation { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
273187
@keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
274188

275-
/* --- WHATSAPP & RESPONSIVIDADE --- */
276-
.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); }
277-
278-
@media (max-width: 992px) {
279-
.rodape-conteudo { flex-direction: column; text-align: center; }
280-
.rodape-info { align-items: center; text-align: center; }
281-
.rodape-contato-badges { justify-content: center; }
282-
.sobre-texto { column-count: 1; font-size: 1.3rem; }
283-
}
189+
/* ============================================================
190+
AJUSTES PARA CELULAR (RESPONSIVIDADE)
191+
============================================================ */
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 */
211+
}
212+
213+
/* Tech Stack */
214+
.habilidades-lista { grid-template-columns: repeat(2, 1fr); gap: 15px; }
215+
216+
/* RODAPÉ CELULAR: Tudo centralizado e empilhado */
217+
.rodape-conteudo {
218+
flex-direction: column; /* No celular o portal fica em cima e info embaixo */
219+
text-align: center;
220+
gap: 50px;
221+
}
222+
223+
.rodape-info {
224+
align-items: center;
225+
text-align: center;
226+
}
227+
228+
.rodape-contato-badges {
229+
justify-content: center;
230+
}
231+
232+
.portal {
233+
width: 180px; /* Reduzi um pouco para não estourar a tela do celular */
234+
height: 180px;
235+
}
236+
237+
.badge-contato { width: 100%; justify-content: center; } /* Badges ocupam a largura toda no celular */
238+
}
239+
240+
/* Botão WhatsApp */
241+
.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)