/* ============================================================================ Crachá Palmas — Design System ---------------------------------------------------------------------------- Um arquivo só, CSS puro, sem build. A hospedagem é PHP compartilhada: não há bundler nem pré-processador, então o "sistema" mora em custom properties e em classes com prefixo estável. Ordem do arquivo: 1. Tokens 6. Selos e avaliação 2. Base 7. Cards (profissional, categoria, confiança, depoimento) 3. Layout 8. Galeria e portfólio 4. Tipografia 9. Navegação (header, rodapé, barra inferior) 5. Formulários 10. Estados (vazio, toast, modal, stepper) Regra de nomenclatura: classes em português, prefixo `cp-` só onde há risco real de colidir com o CSS legado do index.html (botões, campos, chips). ========================================================================== */ /* ── 1. Tokens ───────────────────────────────────────────────────────────── */ :root{ color-scheme: light only; /* Azul — a cor dominante da marca. O 600 é a cor de ação (botão primário), o 900 é o institucional (rodapé, títulos), o 50/100 são fundos. */ --azul-900:#0A2A6E; --azul-800:#123C9E; --azul-700:#1740B3; --azul-600:#1D4ED8; --azul-500:#2E7BF6; --azul-400:#5B9BF8; --azul-300:#9CC3FB; --azul-100:#E3ECFF; --azul-50:#F2F7FF; /* Amarelo — destaque, nunca massa. Usado em: palavra do título, CTA secundário, ícones, estrelas. Se estiver virando fundo grande, está errado. */ --amarelo-600:#E08600; --amarelo-500:#F5A524; --amarelo-400:#FFC233; --amarelo-300:#FFD96B; --amarelo-100:#FFF4D6; /* Estado */ --ok:#0E7A55; --ok-bg:#E6F4EE; --ok-borda:#A7D9C4; --aviso:#B45309;--aviso-bg:#FEF4E6; --erro:#B42318; --erro-bg:#FEECEB; --zap:#1EA855; --zap-2:#17914A; /* verde do WhatsApp, escurecido p/ contraste AA no branco */ /* Neutros */ --fundo:#FFFFFF; --fundo-alt:#F2F7FF; --superficie:#FFFFFF; --superficie-2:#F6F8FC; --borda:#DCE4F0; --borda-forte:#C3CFE2; --tinta:#0B1220; --tinta-2:#3F4A5C; --tinta-3:#6B7684; --tinta-inv:#FFFFFF; /* Tipografia — Archivo nos títulos (grotesca sólida, números fortes), Inter no corpo. Ambas já carregadas no . */ --fonte-titulo:'Archivo','Inter',system-ui,-apple-system,sans-serif; --fonte:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; /* Escala de texto — fluida, sem media query, presa entre um mínimo legível no iPhone e um máximo que não estoura no ultrawide. */ --t-xs:13px; --t-sm:14px; --t-md:16px; --t-lg:18px; --t-h3:clamp(19px, 1.2vw + 15px, 24px); --t-h2:clamp(24px, 2vw + 16px, 36px); --t-h1:clamp(32px, 4vw + 14px, 56px); /* Raio, sombra, espaço */ --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --sombra-1:0 1px 2px rgba(11,18,32,.06), 0 1px 3px rgba(11,18,32,.04); --sombra-2:0 4px 12px rgba(11,18,32,.07), 0 2px 4px rgba(11,18,32,.04); --sombra-3:0 12px 32px rgba(10,42,110,.12), 0 4px 10px rgba(11,18,32,.05); --anel:0 0 0 3px rgba(29,78,216,.30); /* Layout */ --container:1280px; /* item 68: entre 1200 e 1440, centralizado */ --container-estreito:820px; --toque:48px; /* item 39: alvo de toque mínimo no celular */ --safe-b:env(safe-area-inset-bottom, 0px); } /* ── 2. Base ─────────────────────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--fundo); color:var(--tinta); font:400 var(--t-md)/1.6 var(--fonte); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg,video{ max-width:100%; height:auto; display:block; } button,input,select,textarea{ font:inherit; color:inherit; } a{ color:var(--azul-600); text-decoration:none; } a:hover{ text-decoration:underline; } /* Foco visível em tudo que recebe teclado (item 49). Nunca remover sem trocar. */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:none; box-shadow:var(--anel); border-radius:var(--r-xs); } .sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* O [hidden] do navegador é só `display:none` sem importância nenhuma: qualquer `display:grid/flex` nosso passa por cima e o elemento continua na tela. Um `hidden` que não esconde é pior que não ter hidden. */ [hidden]{ display:none !important; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ── 3. Layout ───────────────────────────────────────────────────────────── */ .cp-wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--s-4); } @media (min-width:768px){ .cp-wrap{ padding-inline:var(--s-5); } } .cp-wrap--estreito{ max-width:var(--container-estreito); } .cp-secao{ padding-block:var(--s-7); } @media (min-width:768px){ .cp-secao{ padding-block:var(--s-8); } } .cp-secao--alt{ background:var(--fundo-alt); } .cp-grade{ display:grid; gap:var(--s-4); } .cp-grade--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); } .cp-grade--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); } .cp-grade--4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); } /* ── 4. Tipografia ───────────────────────────────────────────────────────── */ .cp-h1,.cp-h2,.cp-h3{ font-family:var(--fonte-titulo); font-weight:800; line-height:1.08; letter-spacing:-.022em; margin:0; color:var(--azul-900); text-wrap:balance; } .cp-h1{ font-size:var(--t-h1); } .cp-h2{ font-size:var(--t-h2); } .cp-h3{ font-size:var(--t-h3); font-weight:700; letter-spacing:-.01em; } /* O amarelo entra em UMA parte do título — "com quem faz." — nunca no título todo. */ .cp-destaque{ color:var(--amarelo-500); } .cp-sub{ margin:var(--s-3) 0 0; color:var(--tinta-2); font-size:var(--t-lg); max-width:58ch; text-wrap:pretty; } .cp-olho{ font-family:var(--fonte-titulo); font-weight:700; font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--azul-600); display:flex; align-items:center; gap:var(--s-3); } .cp-olho::before{ content:""; width:28px; height:3px; border-radius:2px; background:var(--amarelo-400); flex:none; } .cp-cab-secao{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-5); } .cp-cab-secao p{ margin:var(--s-1) 0 0; color:var(--tinta-2); font-size:var(--t-sm); } /* ── 5. Botões ───────────────────────────────────────────────────────────── */ .cp-btn{ --cor:var(--azul-600); --tx:#fff; --bd:transparent; display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); min-height:var(--toque); padding:0 var(--s-5); border:1.5px solid var(--bd); border-radius:var(--r-sm); background:var(--cor); color:var(--tx); font-family:var(--fonte); font-weight:600; font-size:var(--t-md); line-height:1; cursor:pointer; text-decoration:none; white-space:nowrap; transition:transform .12s ease, box-shadow .16s ease, background-color .16s ease; } .cp-btn:hover{ text-decoration:none; transform:translateY(-1px); box-shadow:var(--sombra-2); } .cp-btn:active{ transform:translateY(0); box-shadow:none; } .cp-btn[disabled],.cp-btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; } .cp-btn svg{ width:20px; height:20px; flex:none; } .cp-btn--primario{ --cor:var(--azul-600); } .cp-btn--primario:hover{ --cor:var(--azul-700); } /* Amarelo = CTA secundário ("Criar meu Crachá"). Texto azul escuro: amarelo com texto branco não passa em contraste AA. */ .cp-btn--amarelo{ --cor:var(--amarelo-400); --tx:var(--azul-900); } .cp-btn--amarelo:hover{ --cor:var(--amarelo-500); } .cp-btn--contorno{ --cor:transparent; --tx:var(--azul-600); --bd:var(--azul-300); } .cp-btn--contorno:hover{ --cor:var(--azul-50); --bd:var(--azul-600); } .cp-btn--zap{ --cor:var(--zap); } .cp-btn--zap:hover{ --cor:var(--zap-2); } .cp-btn--fantasma{ --cor:transparent; --tx:var(--tinta-2); --bd:transparent; } .cp-btn--fantasma:hover{ --cor:var(--superficie-2); } .cp-btn--lg{ min-height:56px; padding:0 var(--s-6); font-size:var(--t-lg); border-radius:var(--r); } .cp-btn--sm{ min-height:40px; padding:0 var(--s-4); font-size:var(--t-sm); } .cp-btn--bloco{ width:100%; } /* ── 5b. Campos ──────────────────────────────────────────────────────────── */ .cp-campo{ display:flex; flex-direction:column; gap:var(--s-2); } .cp-campo > label{ font-weight:600; font-size:var(--t-sm); color:var(--tinta); } .cp-campo .obrig{ color:var(--erro); margin-left:2px; } .cp-campo .dica{ font-size:var(--t-xs); color:var(--tinta-3); } .cp-input,.cp-select,.cp-textarea{ width:100%; min-height:var(--toque); padding:var(--s-3) var(--s-4); border:1.5px solid var(--borda); border-radius:var(--r-sm); background:var(--superficie); color:var(--tinta); font-size:var(--t-md); transition:border-color .16s ease, box-shadow .16s ease; } .cp-input::placeholder,.cp-textarea::placeholder{ color:var(--tinta-3); } .cp-input:hover,.cp-select:hover,.cp-textarea:hover{ border-color:var(--borda-forte); } .cp-input:focus,.cp-select:focus,.cp-textarea:focus{ outline:none; border-color:var(--azul-600); box-shadow:var(--anel); } .cp-input[aria-invalid="true"]{ border-color:var(--erro); } .cp-textarea{ min-height:120px; resize:vertical; line-height:1.55; } .cp-select{ appearance:none; padding-right:var(--s-7); cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7684' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right var(--s-4) center; background-size:18px; } /* Busca — o campo mais importante do site. Ícone à esquerda, botão colado. */ .cp-busca{ display:flex; align-items:center; gap:var(--s-2); width:100%; background:var(--superficie); border:1.5px solid var(--borda); border-radius:var(--r); padding:var(--s-1) var(--s-1) var(--s-1) var(--s-4); transition:border-color .16s ease, box-shadow .16s ease; } .cp-busca:focus-within{ border-color:var(--azul-600); box-shadow:var(--anel); } .cp-busca > svg{ width:22px; height:22px; color:var(--tinta-3); flex:none; } .cp-busca input{ flex:1; min-width:0; min-height:var(--toque); border:0; background:none; font-size:var(--t-md); padding:0 var(--s-2); } .cp-busca input:focus{ outline:none; box-shadow:none; } .cp-busca .cp-btn{ flex:none; } @media (max-width:560px){ .cp-busca{ flex-wrap:wrap; padding:var(--s-3); } .cp-busca input{ width:100%; } .cp-busca .cp-btn{ width:100%; } } /* Chip de filtro */ .cp-chip{ display:inline-flex; align-items:center; gap:var(--s-2); min-height:40px; padding:0 var(--s-4); border:1.5px solid var(--borda); border-radius:var(--r-pill); background:var(--superficie); color:var(--tinta-2); font-size:var(--t-sm); font-weight:600; cursor:pointer; white-space:nowrap; transition:background-color .14s ease, border-color .14s ease, color .14s ease; } .cp-chip:hover{ border-color:var(--azul-300); color:var(--azul-700); } .cp-chip[aria-pressed="true"]{ background:var(--azul-600); border-color:var(--azul-600); color:#fff; } .cp-chip svg{ width:16px; height:16px; } /* min-width:0 não é detalhe: sem ele um filho de grid/flex se recusa a encolher abaixo do próprio conteúdo, o overflow-x nunca entra em ação e a fila de chips estica a página inteira — 4.000px de rolagem lateral no celular. */ .cp-chips{ display:flex; gap:var(--s-2); overflow-x:auto; padding-bottom:var(--s-2); min-width:0; max-width:100%; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .cp-chips::-webkit-scrollbar{ display:none; } .cp-grade > *{ min-width:0; } /* Checkbox de filtro com contagem */ .cp-check{ display:flex; align-items:center; gap:var(--s-3); min-height:40px; font-size:var(--t-sm); color:var(--tinta-2); cursor:pointer; } .cp-check input{ width:20px; height:20px; accent-color:var(--azul-600); flex:none; cursor:pointer; } .cp-check .conta{ margin-left:auto; color:var(--tinta-3); font-variant-numeric:tabular-nums; } /* ── 6. Selos e avaliação ────────────────────────────────────────────────── */ .cp-selo{ display:inline-flex; align-items:center; gap:6px; padding:5px var(--s-3); border-radius:var(--r-pill); font-size:var(--t-xs); font-weight:700; line-height:1.2; background:var(--azul-100); color:var(--azul-800); } .cp-selo svg{ width:14px; height:14px; flex:none; } /* Identidade verificada — verde, sempre com o mesmo texto (item 22). */ .cp-selo--verificado{ background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-borda); } .cp-selo--amarelo{ background:var(--amarelo-100); color:var(--amarelo-600); } .cp-selo--local{ background:var(--azul-50); color:var(--azul-700); } /* A ressalva do item 22 anda junto do selo sempre que ele aparece grande. */ .cp-ressalva{ margin:var(--s-3) 0 0; padding:var(--s-3) var(--s-4); background:var(--azul-50); border-radius:var(--r-sm); color:var(--tinta-2); font-size:var(--t-xs); line-height:1.5; } .cp-nota{ display:inline-flex; align-items:center; gap:6px; font-size:var(--t-sm); color:var(--tinta-2); } .cp-nota b{ color:var(--tinta); font-variant-numeric:tabular-nums; } .cp-estrelas{ display:inline-flex; gap:2px; color:var(--amarelo-400); } .cp-estrelas svg{ width:16px; height:16px; } .cp-estrelas--lg svg{ width:20px; height:20px; } .cp-tag{ display:inline-flex; align-items:center; padding:5px var(--s-3); border-radius:var(--r-xs); background:var(--superficie-2); color:var(--tinta-2); font-size:var(--t-xs); font-weight:500; } .cp-tags{ display:flex; flex-wrap:wrap; gap:6px; } /* ── 7. Cards ────────────────────────────────────────────────────────────── */ .cp-card{ background:var(--superficie); border:1px solid var(--borda); border-radius:var(--r); box-shadow:var(--sombra-1); padding:var(--s-5); } /* Card do profissional — é um crachá, não um anúncio. Foto à esquerda, identidade à direita, ações no rodapé. */ .cp-prof{ display:grid; grid-template-columns:104px 1fr; gap:var(--s-4); background:var(--superficie); border:1px solid var(--borda); border-radius:var(--r); box-shadow:var(--sombra-1); padding:var(--s-4); position:relative; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .cp-prof:hover{ box-shadow:var(--sombra-3); transform:translateY(-2px); border-color:var(--azul-300); } .cp-prof__foto{ width:104px; height:124px; border-radius:var(--r-sm); object-fit:cover; background:var(--superficie-2); } .cp-prof__corpo{ min-width:0; display:flex; flex-direction:column; gap:6px; } /* Dois selos (demonstração + verificado) precisam caber lado a lado e quebrar sem empurrar o nome. */ .cp-prof__corpo > .cp-selo{ align-self:flex-start; } .cp-prof__selos{ display:flex; flex-wrap:wrap; gap:6px; } .cp-prof__nome{ font-family:var(--fonte-titulo); font-weight:800; font-size:var(--t-lg); color:var(--azul-900); margin:0; line-height:1.2; } .cp-prof__oficio{ color:var(--azul-600); font-weight:600; font-size:var(--t-sm); } .cp-prof__local{ display:flex; align-items:center; gap:5px; color:var(--tinta-3); font-size:var(--t-xs); } .cp-prof__local svg{ width:14px; height:14px; flex:none; } .cp-prof__frase{ color:var(--tinta-2); font-size:var(--t-sm); line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* Uma linha de tags, sem reflow: duas linhas empurram os botões e cada card da grade fica com uma altura, o que faz a lista inteira parecer desalinhada. */ .cp-prof .cp-tags{ max-height:26px; overflow:hidden; } /* Os botões encostam no rodapé do card — assim ficam na mesma linha em toda a grade. */ .cp-prof__acoes{ display:flex; gap:var(--s-2); margin-top:auto; padding-top:var(--s-3); } .cp-prof__acoes .cp-btn{ flex:1; min-height:42px; font-size:var(--t-sm); padding-inline:var(--s-3); } /* Favoritar fica no canto, fora do fluxo, para não competir com as ações. */ .cp-prof__fav{ position:absolute; top:var(--s-3); right:var(--s-3); width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:var(--r-pill); background:transparent; color:var(--tinta-3); cursor:pointer; } .cp-prof__fav:hover{ background:var(--superficie-2); color:var(--erro); } .cp-prof__fav[aria-pressed="true"]{ color:var(--erro); } .cp-prof__fav svg{ width:22px; height:22px; } @media (max-width:420px){ .cp-prof{ grid-template-columns:84px 1fr; gap:var(--s-3); } .cp-prof__foto{ width:84px; height:100px; } .cp-prof__acoes{ flex-direction:column; } } /* Card de categoria */ .cp-cat{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-2); min-height:112px; padding:var(--s-4) var(--s-2); background:var(--superficie); border:1px solid var(--borda); border-radius:var(--r-sm); color:var(--tinta); font-size:var(--t-sm); font-weight:600; text-align:center; cursor:pointer; text-decoration:none; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .cp-cat:hover{ text-decoration:none; border-color:var(--azul-400); box-shadow:var(--sombra-2); transform:translateY(-2px); } .cp-cat svg{ width:34px; height:34px; color:var(--azul-600); } /* Faixa de confiança (item 10) */ .cp-confianca{ display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); background:var(--superficie); border:1px solid var(--borda); border-radius:var(--r-lg); box-shadow:var(--sombra-2); padding:var(--s-5); } .cp-confianca__item{ display:flex; align-items:center; gap:var(--s-3); } .cp-confianca__item > span:first-child{ width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:var(--r-pill); background:var(--azul-50); color:var(--azul-600); } .cp-confianca__item svg{ width:22px; height:22px; } .cp-confianca__item b{ display:block; font-size:var(--t-sm); color:var(--azul-900); } .cp-confianca__item small{ color:var(--tinta-3); font-size:var(--t-xs); } .cp-confianca__item:nth-child(odd) > span:first-child{ background:var(--amarelo-100); color:var(--amarelo-600); } /* Passo de "Como funciona" */ .cp-passo{ display:flex; gap:var(--s-4); align-items:flex-start; } .cp-passo__n{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:var(--r-pill); background:var(--azul-600); color:#fff; font-family:var(--fonte-titulo); font-weight:800; } .cp-passo b{ display:block; color:var(--azul-900); font-size:var(--t-lg); } .cp-passo p{ margin:var(--s-1) 0 0; color:var(--tinta-2); font-size:var(--t-sm); } /* Depoimento (só com dado real — item 18) */ .cp-depo{ background:var(--superficie); border:1px solid var(--borda); border-radius:var(--r); padding:var(--s-5); box-shadow:var(--sombra-1); } .cp-depo__texto{ margin:0 0 var(--s-4); color:var(--tinta-2); font-size:var(--t-sm); line-height:1.6; } .cp-depo__quem{ display:flex; align-items:center; gap:var(--s-3); } .cp-depo__quem img{ width:44px; height:44px; border-radius:var(--r-pill); object-fit:cover; } .cp-depo__quem b{ display:block; font-size:var(--t-sm); color:var(--azul-900); } .cp-depo__quem small{ color:var(--tinta-3); font-size:var(--t-xs); } /* Número forte (só aparece quando o dado é real — item 17) */ .cp-stat{ display:flex; align-items:center; gap:var(--s-3); } .cp-stat__i{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:var(--r-sm); background:var(--azul-50); color:var(--azul-600); } .cp-stat__i svg{ width:20px; height:20px; } .cp-stat b{ display:block; font-family:var(--fonte-titulo); font-weight:800; font-size:var(--t-h3); color:var(--azul-900); line-height:1.1; font-variant-numeric:tabular-nums; white-space:nowrap; } /* Valor que é texto ("set 2026"), não contagem: cabe na linha sem virar manchete. */ .cp-stat--texto b{ font-size:var(--t-lg); } .cp-stat small{ color:var(--tinta-3); font-size:var(--t-xs); } /* ── 8. Galeria / portfólio ──────────────────────────────────────────────── */ .cp-galeria{ display:grid; gap:var(--s-3); grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr)); } .cp-galeria__item{ position:relative; aspect-ratio:4/3; border-radius:var(--r-sm); overflow:hidden; background:var(--superficie-2); border:0; padding:0; cursor:zoom-in; } .cp-galeria__item img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; } .cp-galeria__item:hover img{ transform:scale(1.05); } .cp-galeria__item figcaption{ position:absolute; inset:auto 0 0 0; padding:var(--s-2) var(--s-3); background:linear-gradient(transparent, rgba(10,42,110,.82)); color:#fff; font-size:var(--t-xs); text-align:left; } /* O "+6" do mockup: último tile vira contador do que sobrou. */ .cp-galeria__mais{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(10,42,110,.62); color:#fff; font-family:var(--fonte-titulo); font-weight:800; font-size:var(--t-h3); } @media (max-width:520px){ .cp-galeria{ grid-template-columns:repeat(2,1fr); } } /* Upload (item 34) */ .cp-upload{ display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-4); border:1.5px dashed var(--borda-forte); border-radius:var(--r-sm); background:var(--azul-50); text-align:center; cursor:pointer; transition:border-color .16s ease, background-color .16s ease; } .cp-upload:hover{ border-color:var(--azul-600); background:var(--azul-100); } .cp-upload svg{ width:26px; height:26px; color:var(--azul-600); margin-inline:auto; } .cp-upload b{ font-size:var(--t-sm); color:var(--azul-900); } .cp-upload small{ font-size:var(--t-xs); color:var(--tinta-3); } /* ── 9. Navegação ────────────────────────────────────────────────────────── */ /* Lockup da logo: o símbolo é SVG, o nome é texto em Archivo. Assim escala, fica nítido em qualquer tela e não vira imagem de 900 KB. */ .cp-logo{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex:none; } .cp-logo:hover{ text-decoration:none; } .cp-logo img,.cp-logo svg{ width:42px; height:42px; flex:none; } .cp-logo__nome{ display:flex; flex-direction:column; line-height:.94; } .cp-logo__nome b{ font-family:var(--fonte-titulo); font-weight:800; font-size:21px; letter-spacing:-.025em; color:var(--azul-800); } .cp-logo__nome i{ font-family:var(--fonte-titulo); font-style:normal; font-weight:800; font-size:15px; letter-spacing:.16em; color:var(--amarelo-500); } .cp-logo__nome small{ font-size:7.5px; letter-spacing:.11em; font-weight:600; color:var(--azul-600); text-transform:uppercase; margin-top:2px; } .cp-logo--vertical{ flex-direction:column; gap:var(--s-2); text-align:center; } .cp-logo--vertical img,.cp-logo--vertical svg{ width:76px; height:76px; } .cp-logo--vertical .cp-logo__nome{ align-items:center; } /* Fundo escuro (rodapé): o nome fica branco, "PALMAS" continua amarelo. */ .cp-logo--escura .cp-logo__nome b{ color:#fff; } .cp-logo--escura .cp-logo__nome small{ color:var(--azul-300); } .cp-logo--sm img,.cp-logo--sm svg{ width:34px; height:34px; } .cp-logo--sm .cp-logo__nome b{ font-size:17px; } .cp-logo--sm .cp-logo__nome i{ font-size:12px; } .cp-logo--sm .cp-logo__nome small{ display:none; } .cp-topo{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--borda); } .cp-topo__linha{ display:flex; align-items:center; gap:var(--s-5); min-height:72px; } .cp-menu{ display:flex; align-items:center; gap:var(--s-5); margin-inline:auto; } .cp-menu a{ color:var(--tinta-2); font-size:var(--t-sm); font-weight:600; padding:6px 0; border-bottom:2.5px solid transparent; } .cp-menu a:hover{ color:var(--azul-700); text-decoration:none; } .cp-menu a[aria-current="page"]{ color:var(--azul-700); border-bottom-color:var(--amarelo-400); } .cp-topo__acoes{ display:flex; align-items:center; gap:var(--s-3); flex:none; } /* Quem está logado aparece no topo: foto (ou inicial) e primeiro nome. */ .cp-eu{ display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border-radius:var(--r-pill); background:var(--azul-50); color:var(--azul-800); font-weight:700; font-size:var(--t-sm); text-decoration:none; } .cp-eu:hover{ background:var(--azul-100); text-decoration:none; } .cp-eu img,.cp-eu i{ width:28px; height:28px; flex:none; border-radius:var(--r-pill); object-fit:cover; } .cp-eu i{ display:grid; place-items:center; background:var(--azul-600); color:#fff; font-style:normal; font-family:var(--fonte-titulo); font-weight:800; font-size:13px; } .cp-hamburguer{ display:none; width:46px; height:46px; place-items:center; border:1px solid var(--borda); border-radius:var(--r-sm); background:var(--azul-50); color:var(--azul-700); cursor:pointer; } .cp-hamburguer svg{ width:24px; height:24px; } @media (max-width:900px){ .cp-topo__linha{ min-height:64px; justify-content:space-between; } .cp-menu{ display:none; } .cp-topo__acoes{ display:none; } .cp-hamburguer{ display:grid; } } /* Gaveta do menu no celular (item 70) */ .cp-gaveta{ border:0; padding:0; width:min(320px,86vw); height:100dvh; max-height:100dvh; margin:0 0 0 auto; background:var(--superficie); } .cp-gaveta::backdrop{ background:rgba(10,42,110,.44); } .cp-gaveta__corpo{ display:flex; flex-direction:column; gap:var(--s-4); min-height:100dvh; padding:var(--s-4) var(--s-5) calc(var(--s-5) + var(--safe-b)); } .cp-gaveta__topo{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); } .cp-gaveta__x{ border:0; background:none; color:var(--tinta-3); display:grid; place-items:center; width:var(--toque); height:var(--toque); margin-right:calc(var(--s-3) * -1); border-radius:var(--r-sm); cursor:pointer; } .cp-gaveta__x:hover{ background:var(--azul-50); color:var(--azul-700); } /* Quem está logado começa pelo próprio crachá — é o que a pessoa vem fazer aqui. */ .cp-gaveta__eu{ display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3); border-radius:var(--r); background:var(--azul-50); color:var(--azul-900); } .cp-gaveta__eu:hover{ background:var(--azul-100); text-decoration:none; } .cp-gaveta__eu img,.cp-gaveta__eu > i{ width:40px; height:40px; border-radius:999px; flex:none; object-fit:cover; display:grid; place-items:center; background:var(--azul-600); color:#fff; font-style:normal; font-weight:700; } .cp-gaveta__eu > span{ flex:1; min-width:0; } .cp-gaveta__eu b{ display:block; font-size:var(--t-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cp-gaveta__eu small{ display:block; color:var(--tinta-3); font-size:var(--t-xs); } .cp-gaveta__eu svg{ flex:none; color:var(--tinta-3); transform:rotate(-90deg); } .cp-gaveta__nav{ display:flex; flex-direction:column; } .cp-gaveta__nav a{ display:flex; align-items:center; min-height:var(--toque); color:var(--tinta); font-weight:600; border-bottom:1px solid var(--borda); } .cp-gaveta__nav a:last-child{ border-bottom:0; } .cp-gaveta__nav a[aria-current="page"]{ color:var(--azul-600); } /* Os botões ficam no rodapé da gaveta, um embaixo do outro e do mesmo tamanho. */ .cp-gaveta__pe{ margin-top:auto; display:grid; gap:var(--s-2); padding-top:var(--s-4); } /* Rodapé */ .cp-rodape{ background:var(--azul-900); color:#DDE8FF; padding-block:var(--s-7); margin-top:var(--s-8); } .cp-rodape a{ color:#DDE8FF; font-size:var(--t-sm); } .cp-rodape a:hover{ color:#fff; } .cp-rodape__linha{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-5); } .cp-rodape__links{ display:flex; flex-wrap:wrap; gap:var(--s-4); margin-inline:auto; } .cp-rodape__fim{ margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid rgba(255,255,255,.16); font-size:var(--t-xs); color:#A9C2F0; display:flex; flex-wrap:wrap; gap:var(--s-3); justify-content:space-between; } /* Migalha de pão */ .cp-migalha{ display:flex; flex-wrap:wrap; gap:6px; font-size:var(--t-xs); color:var(--tinta-3); padding-block:var(--s-3); } .cp-migalha a{ color:var(--tinta-3); } .cp-migalha a:hover{ color:var(--azul-600); } .cp-migalha li{ display:flex; gap:6px; align-items:center; } .cp-migalha ol{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; } /* ── 10. Estados ─────────────────────────────────────────────────────────── */ /* Nunca mostrar tela vazia sem saída (item 50). */ .cp-vazio{ display:flex; flex-direction:column; align-items:center; gap:var(--s-3); padding:var(--s-7) var(--s-5); text-align:center; background:var(--fundo-alt); border:1px dashed var(--borda-forte); border-radius:var(--r); } .cp-vazio svg{ width:44px; height:44px; color:var(--azul-300); } .cp-vazio b{ font-family:var(--fonte-titulo); font-size:var(--t-lg); color:var(--azul-900); } .cp-vazio p{ margin:0; color:var(--tinta-2); font-size:var(--t-sm); max-width:44ch; } .cp-toast{ position:fixed; left:50%; bottom:calc(84px + var(--safe-b)); z-index:90; transform:translate(-50%,16px); opacity:0; pointer-events:none; max-width:min(92vw,440px); padding:var(--s-3) var(--s-5); background:var(--azul-900); color:#fff; border-radius:var(--r-pill); font-size:var(--t-sm); box-shadow:var(--sombra-3); transition:opacity .2s ease, transform .2s ease; } .cp-toast.on{ opacity:1; transform:translate(-50%,0); } .cp-modal{ border:0; padding:0; width:min(560px,94vw); border-radius:var(--r-lg); background:var(--superficie); box-shadow:var(--sombra-3); color:var(--tinta); } .cp-modal::backdrop{ background:rgba(10,42,110,.48); } .cp-modal__corpo{ padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-4); } .cp-modal--larga{ width:min(880px,96vw); } .cp-modal__x{ position:absolute; top:var(--s-3); right:var(--s-3); width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:var(--r-pill); background:var(--superficie-2); color:var(--tinta-2); cursor:pointer; } /* Stepper (item 31) */ .cp-passos{ display:flex; align-items:flex-start; gap:var(--s-2); margin-bottom:var(--s-5); } .cp-passos__i{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; position:relative; color:var(--tinta-3); font-size:var(--t-xs); } .cp-passos__i b{ width:38px; height:38px; display:grid; place-items:center; border-radius:var(--r-pill); background:var(--superficie-2); border:1.5px solid var(--borda); color:var(--tinta-3); font-family:var(--fonte-titulo); font-weight:800; } /* a trilha liga um passo ao outro; o último não tem para onde ligar */ .cp-passos__i:not(:last-child)::after{ content:""; position:absolute; top:19px; left:calc(50% + 24px); width:calc(100% - 48px); height:3px; border-radius:2px; background:var(--borda); } .cp-passos__i[data-estado="feito"] b{ background:var(--azul-600); border-color:var(--azul-600); color:#fff; } .cp-passos__i[data-estado="feito"]::after{ background:var(--azul-600); } .cp-passos__i[data-estado="atual"] b{ background:var(--azul-600); border-color:var(--azul-600); color:#fff; box-shadow:0 0 0 5px var(--azul-100); } .cp-passos__i[data-estado="atual"]{ color:var(--azul-700); font-weight:700; } .cp-passos__i span{ display:block; } .cp-passos__i small{ display:block; color:var(--tinta-3); font-size:11px; } @media (max-width:560px){ .cp-passos__i small{ display:none; } } /* Aviso / mensagem inline */ .cp-msg{ padding:var(--s-3) var(--s-4); border-radius:var(--r-sm); font-size:var(--t-sm); } .cp-msg:empty{ display:none; } .cp-msg.erro{ background:var(--erro-bg); color:var(--erro); } .cp-msg.ok{ background:var(--ok-bg); color:var(--ok); } .cp-msg.aviso{ background:var(--aviso-bg); color:var(--aviso); } /* Esqueleto de carregamento — evita o salto de layout enquanto a API responde. */ .cp-esqueleto{ background:linear-gradient(90deg,var(--superficie-2) 25%,#EDF2FA 50%,var(--superficie-2) 75%); background-size:200% 100%; animation:cp-brilho 1.4s infinite; border-radius:var(--r-sm); } @keyframes cp-brilho{ to{ background-position:-200% 0; } }