62 lines
2.0 KiB
SCSS
62 lines
2.0 KiB
SCSS
/* Container principal da seção de texto (sem limite de largura para acomodar o parágrafo de 985px) */
|
|
.hero-text-section {
|
|
text-align: center; /* Mantém o título e o parágrafo centralizados */
|
|
padding-top: 50px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* --- TÍTULO PRINCIPAL (AJUSTADO PARA DESALINHAMENTO) --- */
|
|
.main-title {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 48px;
|
|
line-height: 1.2;
|
|
margin-bottom: 30px;
|
|
|
|
/* Importante: para mover o texto, o display precisa ser block/inline-block */
|
|
display: flex; /* Permite que os spans se alinhem e sejam manipulados */
|
|
flex-direction: column; /* Coloca os spans um abaixo do outro */
|
|
align-items: center; /* Centraliza visualmente o bloco de texto */
|
|
width: fit-content; /* Ajusta a largura do h1 ao conteúdo interno */
|
|
margin: 0 auto 80px auto; /* Centraliza o h1 na página */
|
|
}
|
|
|
|
.main-title .first-line {
|
|
color: #E33DCF;
|
|
font-weight: 500;
|
|
display: block; /* Garante que a transformação funcione */
|
|
|
|
/* 👈 Movimenta a primeira linha para a esquerda (ajuste o valor se necessário) */
|
|
transform: translateX(-70px);
|
|
}
|
|
|
|
.main-title .second-line {
|
|
color: #E33DCF;
|
|
font-weight: 500;
|
|
display: block; /* Garante que a transformação funcione */
|
|
|
|
/* 👉 Movimenta a segunda linha para a direita (ajuste o valor se necessário) */
|
|
transform: translateX(100px) translateY(-6px);
|
|
}
|
|
|
|
|
|
|
|
/* --- PARÁGRAFO CENTRAL (AJUSTADO PARA 985x132) --- */
|
|
.main-paragraph {
|
|
/* Propriedades de Layout ajustadas para proporção 985 x 132 */
|
|
width: 985px; /* Define a largura EXATA solicitada */
|
|
height: 132px; /* Define a altura EXATA solicitada */
|
|
margin: 0 auto 50px auto; /* Centraliza o bloco do parágrafo horizontalmente */
|
|
|
|
/* Propriedades de Texto (Do Figma: Poppins, Mixed, 24, #000000) */
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 24px;
|
|
color: #000000;
|
|
line-height: 1;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
}
|
|
|
|
/* --- DESTAQUES NO PARÁGRAFO --- */
|
|
.main-paragraph strong {
|
|
font-weight: 700; /* Todas as tags <strong> serão Bold */
|
|
} |