/* ESTILO EXCLUSIVO DO DIRETÓRIO PRECADASTRO (PÁGINA DE SOLICITAÇÃO DE TESTE) Fica na própria pasta precadastro e é referenciado diretamente pela inicio.php (sem constante). Ao alterar este arquivo, atualize o ?versao= no link da inicio.php. As cores de cada marca ficam nas classes .marca-ace e .marca-gestao, aplicadas no . Não depende do Bootstrap nem do estilo.css. */ /* ========================================================= CORES DAS MARCAS ========================================================= */ :root { --cor-texto: #2B2F38; --cor-texto-suave: #5A6170; --cor-linha: #DCE3EA; --cor-borda-campo: #C5CFDA; --cor-branco: #FFFFFF; --cor-verde-status: #2E7D4F; --cor-amarelo-status: #9A6B00; --fonte-titulo: 'Saira', 'Inter', Arial, sans-serif; --fonte-texto: 'Inter', Arial, sans-serif; } /* ACE Currículos: azul da nuvem + azul-marinho do nome */ .marca-ace { --cor-marca: #1775B9; --cor-marca-forte: #1775B9; --cor-marca-hover: #125F97; --cor-marca-escura: #1F2044; --cor-marca-suave: #E3EFF8; --cor-fundo-tingido: #F3F7FB; --cor-foco: rgba(23, 117, 185, .28); --sombra-marca: 0 22px 48px -28px rgba(31, 32, 68, .45); } /* Gestão de Currículos: verde da lupa + cinza do nome (o verde original é claro demais para texto branco; nos botões usamos um tom mais forte) */ .marca-gestao { --cor-marca: #58C09F; --cor-marca-forte: #1F7D62; --cor-marca-hover: #17654F; --cor-marca-escura: #3F4043; --cor-marca-suave: #DDF2EA; --cor-fundo-tingido: #F2F8F6; --cor-foco: rgba(88, 192, 159, .35); --sombra-marca: 0 22px 48px -28px rgba(63, 64, 67, .45); } /* ========================================================= BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; background: var(--cor-branco); color: var(--cor-texto); font-family: var(--fonte-texto); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-family: var(--fonte-titulo); font-weight: 600; color: var(--cor-marca-escura); line-height: 1.15; } p { margin: 0; } img { max-width: 100%; } a { color: var(--cor-marca-forte); } a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 2px; } .pc-limite { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; } .pc-limite-estreito { max-width: 820px; } #loading { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; background: rgba(0,0,0,0.75) url(../files/images/loading.gif) no-repeat center center; z-index: 10000; } /* ========================================================= BOTÕES E LINKS ========================================================= */ .pc-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 26px; border: 0; border-radius: 10px; background: var(--cor-marca-forte); color: var(--cor-branco); font-family: var(--fonte-texto); font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .15s ease; } .pc-botao:hover { background: var(--cor-marca-hover); color: var(--cor-branco); } .pc-botao:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; } .pc-botao-pequeno { min-height: 42px; padding: 8px 18px; font-size: .9375rem; } .pc-link { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .pc-link:hover { text-decoration-thickness: 2px; } /* ========================================================= TOPO ========================================================= */ .pc-topo { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--cor-linha); } .pc-topo-conteudo { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; } .pc-topo-logo { display: inline-flex; } .pc-topo-logo img { display: block; height: 40px; width: auto; } .marca-gestao .pc-topo-logo img { height: 48px; } /* ========================================================= APRESENTAÇÃO (HERO) ========================================================= */ .pc-hero { background: var(--cor-fundo-tingido); padding: 72px 0 80px; } .pc-hero-grade { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; } .pc-hero h1 { font-size: clamp(2rem, 4.1vw, 3.05rem); letter-spacing: -.01em; max-width: 19ch; } .pc-hero-descricao { margin-top: 20px; max-width: 58ch; font-size: 1.0625rem; color: var(--cor-texto-suave); } .pc-hero-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; } .pc-hero-garantias { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 28px 0 0; padding: 0; list-style: none; font-size: .9375rem; color: var(--cor-texto-suave); } .pc-hero-garantias i { color: var(--cor-marca); margin-right: 4px; } /* Representação ilustrativa da tela de triagem */ .pc-demo { background: var(--cor-branco); border: 1px solid var(--cor-linha); border-radius: 16px; box-shadow: var(--sombra-marca); padding: 22px; font-size: .875rem; } .pc-demo-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pc-demo-titulo { font-family: var(--fonte-titulo); font-size: 1.0625rem; font-weight: 600; color: var(--cor-marca-escura); } .pc-demo-titulo i { color: var(--cor-marca); margin-right: 4px; } .pc-demo-total { color: var(--cor-texto-suave); font-size: .8125rem; } .pc-demo-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; } .pc-demo-filtros span { padding: 3px 10px; border-radius: 999px; background: var(--cor-marca-suave); color: var(--cor-marca-escura); font-size: .8125rem; font-weight: 500; } .pc-demo-lista { margin: 0; padding: 0; list-style: none; } .pc-demo-lista li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--cor-linha); } .pc-demo-avatar { flex: 0 0 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cor-marca-escura); color: var(--cor-branco); font-size: .8125rem; font-weight: 600; } .pc-demo-dados { flex: 1 1 auto; min-width: 0; } .pc-demo-dados strong { display: block; font-weight: 600; color: var(--cor-texto); } .pc-demo-dados small { display: block; color: var(--cor-texto-suave); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-demo-status { flex: 0 0 auto; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; } .pc-demo-verde { background: #E2F3E8; color: var(--cor-verde-status); } .pc-demo-amarelo { background: #FBF0D4; color: var(--cor-amarelo-status); } .pc-demo-resumo { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: var(--cor-fundo-tingido); border-left: 3px solid var(--cor-marca); } .pc-demo-resumo-titulo { display: block; margin-bottom: 4px; font-weight: 600; color: var(--cor-marca-escura); } .pc-demo-resumo-titulo i { color: var(--cor-marca); margin-right: 4px; } .pc-demo-resumo p { color: var(--cor-texto-suave); line-height: 1.5; } /* ========================================================= SEÇÕES ========================================================= */ .pc-secao { padding: 88px 0; } .pc-secao-tingida { background: var(--cor-fundo-tingido); } .pc-secao h2, .pc-faixa h2, .pc-form-lateral h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); letter-spacing: -.005em; } .pc-secao-descricao { margin-top: 10px; max-width: 60ch; color: var(--cor-texto-suave); font-size: 1.0625rem; } /* Como funciona: passos em sequência */ .pc-passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 48px 0 0; padding: 0; list-style: none; counter-reset: passo; } .pc-passos li { position: relative; counter-increment: passo; padding-top: 64px; } .pc-passos li::before { content: counter(passo); position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cor-marca-forte); color: var(--cor-branco); font-family: var(--fonte-titulo); font-size: 1.25rem; font-weight: 600; } /* linha que liga um passo ao seguinte */ .pc-passos li:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 56px; right: -20px; height: 2px; background: var(--cor-marca-suave); } .pc-passos h3 { font-size: 1.1875rem; } .pc-passos p { margin-top: 8px; color: var(--cor-texto-suave); max-width: 32ch; } /* Painéis */ .pc-paineis { display: grid; gap: 24px; margin-top: 40px; } .pc-paineis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pc-paineis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; } .pc-painel { background: var(--cor-branco); border: 1px solid var(--cor-linha); border-top: 4px solid var(--cor-marca); border-radius: 12px; padding: 26px 26px 28px; } .pc-painel i { font-size: 1.5rem; color: var(--cor-marca-forte); } .pc-painel h3 { margin-top: 14px; font-size: 1.25rem; } .pc-painel p { margin-top: 8px; color: var(--cor-texto-suave); } /* Recursos */ .pc-recursos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 56px; margin: 44px 0 0; padding: 0; list-style: none; } .pc-recursos li { display: flex; gap: 18px; align-items: flex-start; } .pc-recurso-icone { flex: 0 0 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--cor-marca-suave); color: var(--cor-marca-forte); font-size: 1.125rem; } .pc-recursos h3 { font-size: 1.1875rem; } .pc-recursos p { margin-top: 6px; color: var(--cor-texto-suave); max-width: 52ch; } /* ========================================================= FAIXA: O BANCO COMEÇA VAZIO ========================================================= */ .pc-faixa { background: var(--cor-marca-escura); color: rgba(255, 255, 255, .86); padding: 84px 0; } .pc-faixa h2 { color: var(--cor-branco); max-width: 26ch; } .pc-faixa-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; align-items: center; } .pc-faixa-texto p { margin-top: 18px; max-width: 60ch; font-size: 1.0625rem; } .pc-faixa-canais { border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; padding: 26px 28px; } .pc-faixa-canais h3 { color: var(--cor-branco); font-size: 1.1875rem; } .pc-faixa-canais ul { margin: 14px 0 0; padding: 0; list-style: none; } .pc-faixa-canais li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); } .pc-faixa-canais li:last-child { border-bottom: 0; padding-bottom: 0; } .pc-faixa-canais i { width: 20px; text-align: center; color: var(--cor-marca); font-size: 1.0625rem; } /* ========================================================= FORMULÁRIO ========================================================= */ .pc-form-grade { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 56px; align-items: start; } .pc-form-lateral { position: sticky; top: 104px; } .pc-form-lateral > p { margin-top: 14px; color: var(--cor-texto-suave); } .pc-lista-lateral { margin: 28px 0 0; padding: 0; list-style: none; } .pc-lista-lateral li { display: flex; gap: 14px; padding: 12px 0; } .pc-lista-lateral i { flex: 0 0 20px; margin-top: 4px; color: var(--cor-marca-forte); text-align: center; } .pc-lista-lateral strong { display: block; font-weight: 600; color: var(--cor-texto); } .pc-lista-lateral span { color: var(--cor-texto-suave); font-size: .9375rem; } .pc-consultor { display: flex; gap: 14px; margin-top: 22px; padding: 16px 18px; border-radius: 12px; background: var(--cor-branco); border: 1px solid var(--cor-linha); font-size: .875rem; color: var(--cor-texto-suave); } .pc-consultor i { margin-top: 3px; color: var(--cor-marca-forte); } .pc-consultor strong { display: block; font-size: 1rem; font-weight: 600; color: var(--cor-texto); } .pc-consultor small { display: block; word-break: break-all; } .pc-form { background: var(--cor-branco); border: 1px solid var(--cor-linha); border-radius: 16px; padding: 36px 36px 40px; } .pc-form-aviso { font-size: .875rem; color: var(--cor-texto-suave); } .pc-form fieldset { margin: 28px 0 0; padding: 0; border: 0; min-width: 0; } .pc-form fieldset + fieldset { padding-top: 28px; border-top: 1px solid var(--cor-linha); } .pc-form legend { float: left; width: 100%; margin-bottom: 14px; padding: 0; font-family: var(--fonte-titulo); font-size: 1.25rem; font-weight: 600; color: var(--cor-marca-escura); } .pc-form legend i { margin-right: 6px; color: var(--cor-marca); font-size: 1rem; } .pc-campos { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; } .pc-campo-inteiro { grid-column: 1 / -1; } .pc-campo-duplo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; } .pc-campo label { display: block; margin-bottom: 6px; font-size: .9375rem; font-weight: 500; color: var(--cor-texto); } .pc-campo small { display: block; margin-top: 6px; font-size: .8125rem; line-height: 1.45; color: var(--cor-texto-suave); overflow-wrap: anywhere; } .pc-obrigatorio { color: #B42318; } .pc-opcional { font-weight: 400; color: var(--cor-texto-suave); font-size: .875rem; } .pc-form legend .pc-opcional { font-family: var(--fonte-texto); font-size: .875rem; } .pc-form input[type="text"], .pc-form input[type="email"], .pc-form input[type="tel"], .pc-form select, .pc-form textarea { display: block; width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--cor-borda-campo); border-radius: 8px; background: var(--cor-branco); color: var(--cor-texto); font-family: var(--fonte-texto); font-size: 1rem; transition: border-color .15s ease, box-shadow .15s ease; } .pc-form textarea { resize: none; line-height: 1.5; } .pc-form input[type="file"] { display: block; width: 100%; padding: 10px 12px; border: 1px dashed var(--cor-borda-campo); border-radius: 8px; background: var(--cor-fundo-tingido); color: var(--cor-texto-suave); font-family: var(--fonte-texto); font-size: .9375rem; cursor: pointer; } .pc-form input[type="file"]::file-selector-button { margin-right: 14px; padding: 8px 16px; border: 0; border-radius: 6px; background: var(--cor-marca-forte); color: var(--cor-branco); font-family: var(--fonte-texto); font-size: .875rem; font-weight: 600; cursor: pointer; } .pc-form input[type="file"]:focus-visible { outline: none; border-color: var(--cor-marca-forte); box-shadow: 0 0 0 3px var(--cor-foco); } .pc-form select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6170' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .pc-form input::placeholder, .pc-form textarea::placeholder { color: #8C94A3; } .pc-form input:focus, .pc-form select:focus, .pc-form textarea:focus { outline: none; border-color: var(--cor-marca-forte); box-shadow: 0 0 0 3px var(--cor-foco); } .pc-form input:disabled, .pc-form select:disabled, .pc-form textarea:disabled { background: #F4F6F8; } .pc-aceite { display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; padding: 16px 18px; border-radius: 10px; background: var(--cor-fundo-tingido); } .pc-aceite input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cor-marca-forte); } .pc-aceite label { font-size: .9375rem; color: var(--cor-texto); cursor: pointer; } .pc-botao-enviar { width: 100%; margin-top: 24px; min-height: 54px; font-size: 1.0625rem; } .pc-botao-enviar:disabled { opacity: .7; cursor: wait; } /* ========================================================= PERGUNTAS FREQUENTES ========================================================= */ .pc-perguntas { margin-top: 32px; border-top: 1px solid var(--cor-linha); } .pc-perguntas details { border-bottom: 1px solid var(--cor-linha); } .pc-perguntas summary { position: relative; padding: 20px 44px 20px 0; list-style: none; cursor: pointer; font-family: var(--fonte-titulo); font-size: 1.1875rem; font-weight: 600; color: var(--cor-marca-escura); } .pc-perguntas summary::-webkit-details-marker { display: none; } /* sinal de + que vira - ao abrir */ .pc-perguntas summary::before, .pc-perguntas summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 2px; background: var(--cor-marca-forte); transition: transform .2s ease; } .pc-perguntas summary::after { transform: rotate(90deg); } .pc-perguntas details[open] summary::after { transform: rotate(0deg); } .pc-perguntas details p { padding: 0 44px 22px 0; color: var(--cor-texto-suave); max-width: 70ch; } .pc-perguntas-final { margin-top: 40px; } /* ========================================================= RODAPÉ ========================================================= */ .pc-rodape { padding: 40px 0 44px; border-top: 1px solid var(--cor-linha); text-align: center; font-size: .875rem; color: var(--cor-texto-suave); } .pc-rodape strong { font-weight: 500; } .pc-rodape-logo { display: block; height: 30px; width: auto; margin: 0 auto 16px; } .marca-gestao .pc-rodape-logo { height: 38px; } .pc-rodape-linha2 { margin-top: 2px; font-size: .8125rem; } /* SweetAlert com a cor da marca */ .swal2-styled.swal2-confirm { background-color: var(--cor-marca-forte) !important; } /* ========================================================= RESPONSIVIDADE ========================================================= */ @media (max-width: 991px) { .pc-hero { padding: 48px 0 56px; } .pc-hero-grade, .pc-faixa-grade, .pc-form-grade { grid-template-columns: minmax(0, 1fr); gap: 40px; } .pc-hero h1 { max-width: 22ch; } .pc-demo { max-width: 520px; } .pc-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; } .pc-passos li::after { display: none; } .pc-paineis-3 { grid-template-columns: minmax(0, 1fr); } .pc-form-lateral { position: static; } .pc-secao { padding: 64px 0; } .pc-faixa { padding: 64px 0; } } @media (max-width: 767px) { .pc-limite { padding: 0 18px; } .pc-topo-conteudo { min-height: 62px; } .pc-topo-logo img { height: 28px; } .marca-gestao .pc-topo-logo img { height: 38px; } .pc-botao-pequeno { min-height: 38px; padding: 6px 12px; font-size: .8125rem; } .pc-hero-acoes .pc-botao { width: 100%; } .pc-hero-acoes { justify-content: center; } .pc-demo { padding: 16px; } .pc-passos, .pc-paineis-2, .pc-recursos, .pc-campos { grid-template-columns: minmax(0, 1fr); } .pc-campo-vazio { display: none; } .pc-recursos { gap: 28px; } .pc-form { padding: 24px 18px 28px; border-radius: 14px; } .pc-faixa-canais { padding: 22px 20px; } .pc-perguntas summary { font-size: 1.0625rem; } .pc-perguntas-final .pc-botao { width: 100%; } } @media (max-width: 380px) { .pc-topo-logo img { height: 24px; } .pc-campo-duplo { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pc-botao, .pc-perguntas summary::before, .pc-perguntas summary::after { transition: none; } }