/* ============================================================
STYLES.CSS — Design System Unificado
Pasta: public_html/styles/styles.css
IMPORTANTE: Não use @import para Google Fonts aqui.
Adicione esta linha no de cada HTML, antes do link
para este arquivo CSS:
============================================================ */
/* ============================================================
1. VARIÁVEIS CSS (TOKENS DE DESIGN)
============================================================ */
:root {
/* Cores */
--brand-primary: #23BBE7; /* Azul claro */
--brand-secondary: #093440; /* Azul escuro / Petrol */
--brand-deep: #093440; /* Azul escuro */
--brand-petrol: #13677F; /* Azul petróleo */
--text-primary: #093440;
--text-secondary: #3E6570;
--text-tertiary: #6F8991;
--surface: #FFFFFF;
--surface-light: #F6FBFD;
--surface-blue: #EAF8FC;
--border: #D7EAF0;
/* Tipografia */
--ff: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Espaçamento */
--s-xs: 4px;
--s-sm: 8px;
--s-md: 16px;
--s-lg: 24px;
--s-xl: 32px;
--s-xxl: 48px;
/* Raio de borda */
--r-sm: 4px;
--r-md: 8px;
--r-lg: 12px;
--r-xl: 20px;
--r-xxl: 24px;
--r-pill: 9999px;
--r-field: 16px; /* Raio para campos de formulário */
/* Sombras */
--shadow-1: 0 1px 2px rgba(0,0,0,.05);
--shadow-2: 0 4px 6px rgba(0,0,0,.08);
--shadow-3: 0 10px 15px rgba(0,0,0,.1);
}
/* ============================================================
2. RESET BÁSICO E ESTILOS GLOBAIS
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
font-size: 16px;
}
body {
font-family: var(--ff);
line-height: 1.5;
color: var(--text-primary);
background: var(--surface);
min-height: 100vh; /* Garante que o body ocupe a altura total da viewport */
}
a {
color: var(--brand-primary);
text-decoration: none;
transition: color 160ms ease;
}
a:hover {
color: var(--brand-secondary);
}
img {
max-width: 100%;
height: auto;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
/* ============================================================
3. BOTÕES
============================================================ */
.button-primary,
.button-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
border-radius: var(--r-lg);
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 160ms ease;
text-decoration: none;
border: 1px solid transparent;
}
.button-primary {
background: var(--brand-primary);
color: var(--surface);
}
.button-primary:hover {
background: var(--brand-secondary);
}
.button-primary:disabled {
background: var(--text-tertiary);
cursor: not-allowed;
}
.button-secondary {
background: var(--surface);
color: var(--text-primary);
border-color: var(--border);
}
.button-secondary:hover {
background: var(--surface-blue);
border-color: var(--brand-primary);
color: var(--brand-primary);
}
.button-secondary:disabled {
color: var(--text-tertiary);
border-color: var(--text-tertiary);
cursor: not-allowed;
}
/* ============================================================
4. COMPONENTES DE LAYOUT E ESTILOS ESPECÍFICOS DO ADERIR
============================================================ */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
background: linear-gradient(135deg, #fff 0%, #F6FBFD 58%, rgba(35,187,231,.14) 100%);
}
.aderir-topbar {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 32px;
}
.aderir-topbar img { height: 48px; width: auto; }
.aderir-main {
flex: 1;
display: flex;
align-items: flex-start; /* Alinha ao topo */
justify-content: center;
padding: 24px 20px 48px;
}
.aderir-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--r-xl);
box-shadow: var(--shadow-1);
padding: 48px 40px 40px;
width: 100%;
max-width: 720px; /* Um pouco mais largo para o formulário */
animation: fadeSlideUp 340ms ease both;
}
.aderir-card h1 {
font-size: clamp(20px, 3vw, 26px);
margin-bottom: 6px;
}
.subtitle {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 28px;
line-height: 1.5;
}
.info-box {
background: var(--surface-blue);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 14px 18px;
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 24px;
animation: fadeSlideUp 320ms ease both;
}
.form-block {
margin-bottom: 32px; /* Espaçamento entre blocos */
padding-bottom: 24px;
border-bottom: 1px solid var(--border);
}
.form-block:last-of-type {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.form-block h2 {
font-size: clamp(18px, 2.5vw, 22px);
margin-bottom: 6px;
}
.form-block .help-text {
font-size: 12px;
color: var(--text-tertiary);
margin-bottom: 20px;
display: block;
}
.field-group {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.field-wrap { display: flex; flex-direction: column; gap: 4px; }
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* Estilo para os radio buttons de vínculo */
.radio-group.vinculo-supera {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* Estilo para os radio buttons de plano */
.radio-group.planos {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Esconder o bloco de plano inicialmente */
#bloco-plano {
display: none;
}
/* Estilo para upload de arquivos */
.upload-area {
position: relative;
border: 2px dashed var(--border);
border-radius: var(--r-field);
padding: 24px 20px;
text-align: center;
cursor: pointer;
transition: all 200ms ease;
background: var(--surface);
}
.upload-area input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
min-height: unset;
border: none;
padding: 0;
}
.upload-area:hover,
.upload-area.drag-over {
border-color: var(--brand-primary);
background: var(--surface-blue);
}
.upload-area.has-file {
border-color: #22c55e; /* Verde */
background: #f0fdf4; /* Verde claro */
}
.upload-icon {
font-size: 28px;
margin-bottom: 8px;
display: block;
}
.upload-text {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
.upload-text strong {
color: var(--brand-petrol);
}
.upload-filename {
margin-top: 10px;
font-size: 12px;
color: var(--brand-petrol);
font-weight: 600;
display: none;
}
.upload-area.has-file .upload-filename {
display: block;
}
.btn-full {
width: 100%;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.lgpd-text {
font-size: 11px;
color: var(--text-tertiary);
text-align: center;
margin-top: 14px;
line-height: 1.5;
}
/* Estilo para mensagens de erro de validação */
.field-error-msg {
font-size: 12px;
color: #dc2626;
margin-top: 4px;
display: none;
}
.field-error-msg.visible {
display: block;
}
/* Estilo para campos com erro */
input.err, select.err, textarea.err {
border-color: #dc2626;
background: #fef2f2;
}
/* Wrapper com spinner de loading (CEP / CNPJ) */
.field-loading { position: relative; }
.field-loading::after {
content: '';
position: absolute;
right: 14px;
top: 50%;
width: 16px;
height: 16px;
margin-top: -8px;
border: 2px solid var(--border);
border-top-color: var(--brand-primary);
border-radius: 50%;
animation: spin 600ms linear infinite;
pointer-events: none;
}
/* Checkbox e Radio buttons customizados */
.check-group,
.radio-option {
display: flex;
align-items: flex-start; /* Alinha o texto ao topo do checkbox/radio */
gap: 10px;
cursor: pointer;
user-select: none;
padding: 12px 16px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface);
transition: all 160ms ease;
}
.check-group input[type="checkbox"],
.radio-option input[type="radio"] {
/* Esconde o input original */
position: absolute;
opacity: 0;
width: 0;
height: 0;
margin: 0;
padding: 0;
cursor: pointer;
}
.check-box {
flex-shrink: 0;
width: 18px;
height: 18px;
border: 2px solid var(--text-tertiary);
border-radius: var(--r-sm);
display: flex;
align-items: center;
justify-content: center;
transition: all 160ms ease;
margin-top: 2px; /* Alinha com o texto */
}
.check-box::after {
content: '✔';
font-size: 12px;
color: var(--surface);
transform: scale(0);
transition: transform 160ms ease;
}
.check-group input[type="checkbox"]:checked ~ .check-box {
background: var(--brand-primary);
border-color: var(--brand-primary);
}
.check-group input[type="checkbox"]:checked ~ .check-box::after {
transform: scale(1);
}
.check-label {
font-size: 14px;
color: var(--text-primary);
line-height: 1.4;
}
.radio-dot {
flex-shrink: 0;
width: 18px;
height: 18px;
border: 2px solid var(--text-tertiary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 160ms ease;
margin-top: 2px; /* Alinha com o texto */
}
.radio-dot::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--surface);
transform: scale(0);
transition: transform 160ms ease;
}
.radio-option input[type="radio"]:checked ~ .radio-dot {
border-color: var(--brand-secondary);
background: var(--brand-secondary);
}
.radio-option input[type="radio"]:checked ~ .radio-dot::after {
transform: scale(1);
}
.radio-option:has(input:checked) {
border-color: var(--brand-secondary);
background: var(--surface-blue);
}
.radio-content { flex: 1; }
.radio-title {
font-weight: 700;
font-size: 13px;
color: var(--text-primary);
line-height: 1.3;
display: block;
}
.radio-desc {
font-size: 12px;
color: var(--text-secondary);
margin-top: 3px;
display: block;
}
/* --- Upload genérico (.upload-area) --- */
/* Já definido acima, mas mantendo para consistência */
/* --- Upload do form.js (.upl-area) --- */
/* Este é do admin, não deve ser usado aqui */
/* --- Banners de status --- */
.status-banner {
border-radius: var(--r-xl); /* Ajustado para ser maior */
padding: 20px 24px;
margin-bottom: 24px;
display: none;
animation: fadeSlideUp 300ms ease;
}
.status-banner.success {
background: #f0fdf4;
border: 1px solid #86efac;
color: #166534;
display: block;
}
.status-banner.error {
background: #fef2f2;
border: 1px solid #fca5a5;
color: #991b1b;
display: block;
}
/* --- Spinner do botão de envio --- */
#btn-sp {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: spin 600ms linear infinite;
vertical-align: middle;
}
/* ============================================================
5. FORMULÁRIOS
============================================================ */
label {
display: block;
margin-bottom: 8px;
color: var(--text-primary);
font-weight: 600;
font-size: 13px;
line-height: 1.35;
}
input,
select,
textarea {
width: 100%;
min-height: 44px;
border: 1px solid var(--border);
border-radius: var(--r-field);
padding: 10px 12px;
font-family: var(--ff);
font-size: 14px;
font-weight: 500;
line-height: 1.35;
color: var(--text-primary);
background: var(--surface);
transition: border-color 180ms ease, background 180ms ease;
}
input::placeholder,
textarea::placeholder {
color: var(--text-tertiary);
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--brand-primary);
}
.help-text {
font-size: 12px;
line-height: 1.35;
color: var(--text-tertiary);
}
.error-text { /* Usado em alguns contextos, mas field-error-msg é mais específico */
font-size: 12px;
line-height: 1.35;
color: #dc2626; /* Vermelho */
}
/* Estados de validação */
input.ok,
select.ok,
textarea.ok {
border-color: #22c55e;
background: #f0fdf4;
}
input.err,
select.err,
textarea.err {
border-color: #dc2626;
background: #fef2f2;
}
/* Mensagens de erro inline */
.field-error-msg {
display: none;
font-size: 12px;
color: #dc2626;
margin-top: 5px;
animation: fadeIn 180ms ease;
}
.field-error-msg.visible {
display: block;
}
/* ============================================================
6. UTILIDADES
============================================================ */
.text-max { max-width: 760px; }
.hero-text-max { max-width: 840px; }
/* Grid responsivo */
.grid {
display: grid;
gap: 24px;
}
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) {
.grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
.grid.cols-2,
.grid.cols-3 {
grid-template-columns: 1fr;
gap: 20px;
}
.aderir-topbar { padding: 16px 20px; }
.aderir-card { padding: 36px 24px 32px; }
.field-row { grid-template-columns: 1fr; }
.radio-group.vinculo-supera { grid-template-columns: 1fr; }
}
/* ============================================================
ANIMAÇÕES
============================================================ */
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ============================================================
ESTILOS ESPECÍFICOS PARA O FORMULÁRIO DE ADESÃO
Adicione este bloco ao final do seu arquivo
public_html/styles/styles.css
============================================================ */
body {
/* Sobrescreve o background do body para o gradiente específico do aderir */
background: linear-gradient(135deg, #fff 0%, #F6FBFD 58%, rgba(35,187,231,.14) 100%);
flex-direction: column; /* Garante que o footer fique no final */
}
.aderir-topbar {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 32px;
}
.aderir-topbar img { height: 48px; width: auto; }
.aderir-main {
flex: 1;
display: flex;
align-items: flex-start; /* Alinha ao topo */
justify-content: center;
padding: 24px 20px 48px;
}
.aderir-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--r-xl);
box-shadow: var(--shadow-1);
padding: 48px 40px 40px;
width: 100%;
max-width: 720px; /* Um pouco mais largo para o formulário */
animation: fadeSlideUp 340ms ease both;
}
.aderir-card h1 {
font-size: clamp(20px, 3vw, 26px);
margin-bottom: 6px;
}
.subtitle {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 28px;
line-height: 1.5;
}
.info-box {
background: var(--surface-blue);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 14px 18px;
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 24px;
animation: fadeSlideUp 320ms ease both;
}
.form-block {
margin-bottom: 32px; /* Espaçamento entre blocos */
padding-bottom: 24px;
border-bottom: 1px solid var(--border);
}
.form-block:last-of-type {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.form-block h2 {
font-size: clamp(18px, 2.5vw, 22px);
margin-bottom: 6px;
}
.form-block .help-text {
font-size: 12px;
color: var(--text-tertiary);
margin-bottom: 20px;
display: block;
}
.field-group {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.field-wrap { display: flex; flex-direction: column; gap: 4px; }
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* Estilo para os radio buttons de vínculo */
.radio-group.vinculo-supera {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* Estilo para os radio buttons de plano */
.radio-group.planos {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Esconder o bloco de plano inicialmente */
#bloco-plano {
display: none;
}
/* Estilo para upload de arquivos */
/* Já existe no styles.css, mas garantindo que o has-file e filename estão corretos */
.upload-area.has-file {
border-color: #22c55e; /* Verde */
background: #f0fdf4; /* Verde claro */
}
.upload-filename {
margin-top: 10px;
font-size: 12px;
color: var(--brand-petrol);
font-weight: 600;
display: none;
}
.upload-area.has-file .upload-filename {
display: block;
}
.btn-full {
width: 100%;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.lgpd-text {
font-size: 11px;
color: var(--text-tertiary);
text-align: center;
margin-top: 14px;
line-height: 1.5;
}
/* Wrapper com spinner de loading (CEP / CNPJ) */
.field-loading { position: relative; }
.field-loading::after {
content: '';
position: absolute;
right: 14px;
top: 50%;
width: 16px;
height: 16px;
margin-top: -8px;
border: 2px solid var(--border);
border-top-color: var(--brand-primary);
border-radius: 50%;
animation: spin 600ms linear infinite;
pointer-events: none;
}
/* Rodapé */
footer {
text-align: center;
padding: 20px;
font-size: 12px;
color: var(--text-tertiary);
}
/* Media Queries específicas do formulário */
@media (max-width: 768px) {
.aderir-topbar { padding: 16px 20px; }
.aderir-card { padding: 36px 24px 32px; }
.field-row { grid-template-columns: 1fr; }
.radio-group.vinculo-supera { grid-template-columns: 1fr; }
}