Ajustes de responsividade
This commit is contained in:
Eduardo
parent
3798a669c7
commit
8bf3c67d7a
|
|
@ -100,5 +100,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
.cta-button {
|
||||
width: 360px;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
height: 66px;
|
||||
margin-top: 50px; /* Adiciona espaço entre os cards e o botão */
|
||||
margin-bottom: 100px; /* Adiciona espaço após o botão */
|
||||
margin-top: 50px;
|
||||
margin-bottom: 100px;
|
||||
|
||||
background-color: rgba(201, 30, 181, 0.76);
|
||||
color: #FFFFFF;
|
||||
|
|
@ -17,6 +18,29 @@
|
|||
border-radius: 4px;
|
||||
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
// --- MOBILE PEQUENO (até 360px) ---
|
||||
@media (max-width: 360px) {
|
||||
max-width: 260px;
|
||||
height: 56px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
// --- CELULARES (até 480px) ---
|
||||
@media (max-width: 480px) {
|
||||
max-width: 300px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
// --- TABLETS (até 768px) ---
|
||||
@media (max-width: 768px) {
|
||||
max-width: 330px;
|
||||
}
|
||||
|
||||
// --- DESKTOPS MÉDIOS (1024px ou menos) ---
|
||||
@media (max-width: 1024px) {
|
||||
max-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
|
|
|
|||
|
|
@ -1,72 +1,112 @@
|
|||
.feature-card-container {
|
||||
/* Garante que o container flexível do Bootstrap organize bem os cards */
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Container principal do card */
|
||||
/* CARD BASE — mantém o design exato do Figma em desktops */
|
||||
.feature-card {
|
||||
/* ... estilos anteriores ... */
|
||||
border: 1px solid #000000;
|
||||
background-color: #FFFFFF;
|
||||
padding: 30px;
|
||||
border-radius: 5px;
|
||||
|
||||
/* ❌ Remover: cursor: pointer; (ou definir como default) */
|
||||
cursor: default;
|
||||
|
||||
/* 📐 DEFININDO TAMANHO FIXO DO FIGMA */
|
||||
width: 365px; /* Largura EXATA solicitada */
|
||||
height: 169px; /* Altura EXATA solicitada */
|
||||
/* DESKTOP (layout original) */
|
||||
width: 365px;
|
||||
height: 169px;
|
||||
|
||||
/* Permite que o texto quebre ou esconda se exceder o limite */
|
||||
overflow: hidden;
|
||||
|
||||
/* Garante que o texto comece sempre do topo, mesmo com altura fixa */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
|
||||
/* ================================
|
||||
📱 RESPONSIVIDADE
|
||||
================================ */
|
||||
|
||||
/* Telas MUITO pequenas (≤ 360px) */
|
||||
@media (max-width: 360px) {
|
||||
width: 95%;
|
||||
height: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* ... o restante do CSS se mantém ... */
|
||||
/* Celulares (≤ 480px) */
|
||||
@media (max-width: 480px) {
|
||||
width: 95%;
|
||||
height: auto; /* Permite texto quebrar */
|
||||
}
|
||||
|
||||
/* Efeito de HOVER (Mouse passa por cima) */
|
||||
/* Tablets pequenos (≤ 768px) */
|
||||
@media (max-width: 768px) {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Tablets grandes e monitores pequenos (≤ 1024px) */
|
||||
@media (max-width: 1024px) {
|
||||
width: 330px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* HOVER */
|
||||
.feature-card.hover-state {
|
||||
background-color: #E1E1E1; /* Cor cinza #E1E1E1 ao passar o mouse */
|
||||
background-color: #E1E1E1;
|
||||
}
|
||||
|
||||
/* --- TÍTULO DO CARD --- */
|
||||
/* -------------------------
|
||||
TÍTULO DO CARD
|
||||
-------------------------- */
|
||||
.card-title {
|
||||
/* Propriedades do Figma: Inter, Bold, 21, #E33DCF */
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 700; /* Bold */
|
||||
color: #E33DCF; /* Rosa */
|
||||
font-weight: 700;
|
||||
color: #E33DCF;
|
||||
|
||||
margin-top: -15px;
|
||||
margin-bottom: 10px;
|
||||
display: flex; /* Para alinhar ícone e texto */
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
justify-content: center;
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 480px) {
|
||||
font-size: 18px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Estilização do Ícone */
|
||||
/* ÍCONE */
|
||||
.card-icon {
|
||||
margin-right: 10px;
|
||||
font-size: 24px; /* Tamanho ligeiramente maior que o texto */
|
||||
font-size: 24px;
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 480px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- DESCRIÇÃO/PARÁGRAFO DO CARD --- */
|
||||
/* -------------------------
|
||||
DESCRIÇÃO DO CARD
|
||||
-------------------------- */
|
||||
.card-description {
|
||||
/* Propriedades do Figma: Inter, Mixed, 18, Preto */
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
line-height: 1;
|
||||
padding-left: 15px;
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 480px) {
|
||||
font-size: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Garante que o começo da frase (em negrito) tenha o peso correto */
|
||||
.card-description strong {
|
||||
font-weight: 700; /* Bold */
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -13,6 +13,17 @@
|
|||
|
||||
font-family: "Inter", sans-serif;
|
||||
color: #FFFFFF;
|
||||
|
||||
/* ===========================
|
||||
📱 RESPONSIVIDADE
|
||||
=========================== */
|
||||
|
||||
/* Tablets e celulares — empilha tudo */
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
padding: 25px 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===================================== */
|
||||
|
|
@ -20,13 +31,30 @@
|
|||
/* ===================================== */
|
||||
|
||||
.footer-left {
|
||||
margin-top: 100px; /* move bloco todo sem mexer no espaçamento entre linhas */
|
||||
margin-top: 100px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-left p {
|
||||
margin: 0 0 4px 270px;
|
||||
font-size: 14px; /* levemente menor como no exemplo */
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-left: 0; /* remove o deslocamento gigante */
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===================================== */
|
||||
|
|
@ -36,11 +64,25 @@
|
|||
.footer-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; /* << alinhado igual sua segunda imagem */
|
||||
margin-top: 100px; /* << move bloco da direita para baixo */
|
||||
align-items: center;
|
||||
margin-top: 100px;
|
||||
gap: 0px;
|
||||
|
||||
margin-right: 300px; /* ajuste como quiser */
|
||||
margin-right: 300px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-right: 0;
|
||||
align-items: flex-start; /* tudo fica alinhado à esquerda */
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Redes sociais */
|
||||
|
|
@ -48,29 +90,43 @@
|
|||
.social-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start; /* joga pra esquerda */
|
||||
margin-bottom: 0px; /* distância entre redes e botão */
|
||||
}
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.social-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 0px; /* aproxima do botão */
|
||||
margin-bottom: 0;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.social-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ÍCONES — agora brancos */
|
||||
.social-icon i {
|
||||
font-size: 22px;
|
||||
color: #FFF; /* << branquinho */
|
||||
color: #FFF;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.social-icon i:hover {
|
||||
|
|
@ -79,5 +135,9 @@
|
|||
|
||||
/* Botão */
|
||||
.footer-button-wrapper {
|
||||
margin-top: 0; /* tiramos o espaço que empurrava demais */
|
||||
margin-top: 0;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,12 @@
|
|||
background: #ffffff;
|
||||
font-family: 'Inter', sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column; /* permite faixa azul abaixo */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Área do conteúdo superior do header */
|
||||
/* ===================== */
|
||||
/* TOP AREA (LOGO + MENU + BOTÕES) */
|
||||
/* ===================== */
|
||||
.header-top {
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
|
|
@ -17,51 +19,156 @@
|
|||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
justify-content: space-between; /* Alinha logo / menu / botões */
|
||||
gap: 40px;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===================== */
|
||||
/* LOGO */
|
||||
/* ===================== */
|
||||
|
||||
.logo {
|
||||
width: 44px;
|
||||
width: 44px; /* MENOR DO QUE ANTES */
|
||||
height: 44px;
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-area {
|
||||
margin-left: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.logo-text .line {
|
||||
color: #030FAA;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* TEXTO DA LOGO */
|
||||
.logo-text .line,
|
||||
.logo-text .gestao {
|
||||
color: #000000;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
font-size: 32px; /* ANTES 26 → reduzido mais para abrir espaço */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-text .line { color: #030FAA; }
|
||||
.logo-text .gestao { color: #000000; }
|
||||
|
||||
/* ===================== */
|
||||
/* MENU */
|
||||
/* ===================== */
|
||||
.menu {
|
||||
gap: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 150px; /* <-- aumentei para afastar do logo */
|
||||
gap: 24px;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #000 !important;
|
||||
text-decoration: none !important;
|
||||
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
font-size: 14.5px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
font-size: 14x;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
|
|
@ -75,7 +182,16 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-left: 32px;
|
||||
margin-left: 0 !important; /* Remove o empurrão à direita */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Botão Cadastre-se --- */
|
||||
|
|
@ -84,41 +200,76 @@
|
|||
height: 41px;
|
||||
background: #E1E1E1;
|
||||
border-radius: 8px;
|
||||
border: none !important;
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
font-weight: 600;
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
width: 140px;
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-cadastrar:hover,
|
||||
.btn-cadastrar:active,
|
||||
.btn-cadastrar:focus {
|
||||
background: #E1E1E1 !important;
|
||||
opacity: 0.85;
|
||||
box-shadow: none !important;
|
||||
@media (max-width: 1024px) {
|
||||
width: 140px;
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
width: 135px;
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 120px;
|
||||
height: 34px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Botão Login --- */
|
||||
/* Agora com a cor original **sem perder saturação** */
|
||||
.btn-login {
|
||||
width: 164px;
|
||||
height: 41px;
|
||||
background: #E33DCF; /* cor original sólida */
|
||||
background: #E33DCF;
|
||||
border-radius: 8px;
|
||||
border: none !important;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
font-weight: 600;
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
width: 140px;
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-login:hover,
|
||||
.btn-login:active,
|
||||
.btn-login:focus {
|
||||
background: #E33DCF !important; /* mantém a mesma cor */
|
||||
opacity: 0.85; /* apenas leve escurecida */
|
||||
box-shadow: none !important;
|
||||
@media (max-width: 1024px) {
|
||||
width: 150px;
|
||||
height: 38px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
width: 135px;
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 120px;
|
||||
height: 34px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===================== */
|
||||
|
|
@ -127,15 +278,26 @@
|
|||
.header-bar {
|
||||
width: 100%;
|
||||
height: 38.41px;
|
||||
background: rgba(3, 15, 170, 0.93); /* #030FAA 93% */
|
||||
background: rgba(3, 15, 170, 0.93);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-bar-text {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
font-family: 'Inter', sans-serif;
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,62 +1,136 @@
|
|||
/* Container principal da seção de texto (sem limite de largura para acomodar o parágrafo de 985px) */
|
||||
/* =============================== */
|
||||
/* CONTAINER PRINCIPAL */
|
||||
/* =============================== */
|
||||
.hero-text-section {
|
||||
text-align: center; /* Mantém o título e o parágrafo centralizados */
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* --- TÍTULO PRINCIPAL (AJUSTADO PARA DESALINHAMENTO) --- */
|
||||
/* =============================== */
|
||||
/* TÍTULO PRINCIPAL */
|
||||
/* =============================== */
|
||||
.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 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
width: fit-content;
|
||||
margin: 0 auto 80px auto;
|
||||
|
||||
/* ========== RESPONSIVO ========== */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
/* TABLET */
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
/* CELULAR */
|
||||
@media (max-width: 480px) {
|
||||
font-size: 34px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Primeira linha */
|
||||
.main-title .first-line {
|
||||
color: #E33DCF;
|
||||
font-weight: 500;
|
||||
display: block; /* Garante que a transformação funcione */
|
||||
display: block;
|
||||
|
||||
/* 👈 Movimenta a primeira linha para a esquerda (ajuste o valor se necessário) */
|
||||
transform: translateX(-70px);
|
||||
|
||||
/* RESPONSIVO */
|
||||
@media (max-width: 1024px) {
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Segunda linha */
|
||||
.main-title .second-line {
|
||||
color: #E33DCF;
|
||||
font-weight: 500;
|
||||
display: block; /* Garante que a transformação funcione */
|
||||
display: block;
|
||||
|
||||
/* 👉 Movimenta a segunda linha para a direita (ajuste o valor se necessário) */
|
||||
transform: translateX(100px) translateY(-6px);
|
||||
|
||||
/* RESPONSIVO */
|
||||
@media (max-width: 1024px) {
|
||||
transform: translateX(60px) translateY(-5px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
transform: translateX(30px) translateY(-4px);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- PARÁGRAFO CENTRAL (AJUSTADO PARA 985x132) --- */
|
||||
/* =============================== */
|
||||
/* PARÁGRAFO PRINCIPAL */
|
||||
/* =============================== */
|
||||
.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 */
|
||||
width: 985px;
|
||||
height: 132px;
|
||||
margin: 0 auto 50px auto;
|
||||
|
||||
/* 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;
|
||||
|
||||
/* ========== RESPONSIVO ========== */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
width: 65%;
|
||||
height: auto;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* --- DESTAQUES NO PARÁGRAFO --- */
|
||||
.main-paragraph strong {
|
||||
font-weight: 700; /* Todas as tags <strong> serão Bold */
|
||||
/* Tablets */
|
||||
@media (max-width: 1024px) {
|
||||
width: 60%;
|
||||
height: auto;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
/* Tablets pequenos */
|
||||
@media (max-width: 768px) {
|
||||
width: 60%;
|
||||
font-size: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* Celulares */
|
||||
@media (max-width: 480px) {
|
||||
width: 60%;
|
||||
font-size: 18px;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-paragraph strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
Loading…
Reference in New Issue