/*! * Tema Procuradoria da Criança e do Adolescente — CMSP * main.css — Design system base, reset/normalize, classes utilitárias. * * Sumário: * 1. CSS variables (paleta, tipografia, espaçamento, container, raios) * 2. Reset / normalize * 3. Tipografia base * 4. Acessibilidade (skip link, foco visível, screen-reader-text) * 5. Layout (container, main) * 6. Utilitários * 7. Preferências de movimento reduzido */ /* ============================================================ 1. CSS variables ============================================================ */ :root { /* Paleta — extraída diretamente do arquivo .ai (hot_site_ok.ai). */ --cor-primaria: #E35010; /* laranja vibrante (CTAs, marca, sidebar a11y) */ --cor-primaria-hover: #C44109; --cor-hero-bg: #F39222; /* laranja mais quente (apenas hero esquerda) */ --cor-pessego-claro: #FBF1EB; /* fundo seção Normas Legais */ --cor-amarelo-claro: #FFF8E9; /* fundo seção Composição */ --cor-vermelho-tag: #EC6338; /* tag criança + título Emergência */ --cor-amarelo-tag: #F5B82E; /* tag adolescente */ --cor-laranja-tag: #DB6628; /* tag infantil */ --cor-cinza-fundo: #ECECEC; /* fundo seção Atendimento */ --cor-texto: #1F1F1F; --cor-texto-claro: #595959; --cor-branco: #FFFFFF; --cor-borda: #E0E0E0; --cor-footer-bg: #2E2E2E; /* footer dark */ --cor-footer-texto: #C9C9C9; /* Tipografia */ --ff-base: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fs-h1: 3rem; /* 48px */ --fs-h2: 2rem; /* 32px */ --fs-h3: 1.5rem; /* 24px */ --fs-body: 1rem; /* 16px */ --fs-small: 0.875rem; /* 14px */ --fs-tiny: 0.75rem; /* 12px */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-base: 1.6; --lh-tight: 1.2; /* Espaçamento — base 8px. */ --sp-1: 0.5rem; /* 8 */ --sp-2: 1rem; /* 16 */ --sp-3: 1.5rem; /* 24 */ --sp-4: 2rem; /* 32 */ --sp-6: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ --sp-12: 6rem; /* 96 */ /* Container */ --container-max: 1240px; --container-pad-mobile: 1rem; --container-pad-desktop: 2rem; /* Border radius */ --br-button: 8px; --br-card: 12px; --br-pill: 999px; /* Transições */ --tr-fast: 150ms ease; --tr-base: 250ms ease; /* Foco a11y */ --focus-outline: 3px solid var(--cor-primaria); --focus-offset: 2px; } /* * Controle de tamanho de fonte (a11y) — três níveis aplicados no * pelo JS de acessibilidade (assets/js/acessibilidade.js). */ html { font-size: 100%; } html.fs-2 { font-size: 112.5%; } /* 18px */ html.fs-3 { font-size: 125%; } /* 20px */ /* ============================================================ 2. Reset / normalize ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--ff-base); font-size: var(--fs-body); line-height: var(--lh-base); color: var(--cor-texto); background-color: var(--cor-branco); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; } input, textarea, select { font: inherit; } ul, ol { padding-left: var(--sp-3); } /* ============================================================ 3. Tipografia base ============================================================ */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-2); line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--cor-texto); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); } p { margin: 0 0 var(--sp-2); } a { color: var(--cor-primaria); text-decoration: underline; text-underline-offset: 2px; transition: color var(--tr-fast); } a:hover { color: var(--cor-primaria-hover); } strong, b { font-weight: var(--fw-bold); } /* ============================================================ 4. Acessibilidade ============================================================ */ /* Texto oculto para leitores de tela (padrão WordPress). */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: var(--cor-branco); color: var(--cor-texto); clip: auto !important; -webkit-clip-path: none; clip-path: none; display: block; font-size: var(--fs-body); height: auto; left: var(--sp-1); line-height: normal; padding: var(--sp-2) var(--sp-3); text-decoration: underline; top: var(--sp-1); width: auto; z-index: 100000; } /* Skip link (primeiro elemento focável da página). */ .pca-skiplink { position: absolute; top: -100px; left: 0; background: var(--cor-primaria); color: var(--cor-branco); padding: var(--sp-2) var(--sp-3); z-index: 100000; text-decoration: none; font-weight: var(--fw-semibold); transition: top var(--tr-fast); } .pca-skiplink:focus { top: 0; outline: var(--focus-outline); outline-offset: 0; color: var(--cor-branco); } /* Foco visível em todos os elementos interativos. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); border-radius: 2px; } /* ============================================================ 5. Layout base ============================================================ */ .pca-container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-pad-mobile); padding-right: var(--container-pad-mobile); } @media (min-width: 768px) { .pca-container { padding-left: var(--container-pad-desktop); padding-right: var(--container-pad-desktop); } } .pca-main { min-height: 60vh; padding-top: var(--sp-6); padding-bottom: var(--sp-8); } /* ============================================================ 6. Utilitários ============================================================ */ .text-center { text-align: center; } .text-right { text-align: right; } .fw-regular { font-weight: var(--fw-regular); } .fw-medium { font-weight: var(--fw-medium); } .fw-semibold { font-weight: var(--fw-semibold); } .fw-bold { font-weight: var(--fw-bold); } .fs-small { font-size: var(--fs-small); } .fs-tiny { font-size: var(--fs-tiny); } .mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .d-none { display: none; } .d-block { display: block; } .d-flex { display: flex; } .d-grid { display: grid; } /* ============================================================ 7. Movimento reduzido ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ 8. Botões ============================================================ */ .pca-btn { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0.6rem 1.2rem; font-family: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1; border: 2px solid transparent; border-radius: var(--br-button); text-decoration: none; cursor: pointer; transition: background-color var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast); } .pca-btn--primary { background-color: var(--cor-primaria); color: var(--cor-branco); border-color: var(--cor-primaria); } .pca-btn--primary:hover, .pca-btn--primary:focus { background-color: var(--cor-primaria-hover); border-color: var(--cor-primaria-hover); color: var(--cor-branco); } .pca-btn--outline { background-color: var(--cor-branco); color: var(--cor-primaria); border-color: var(--cor-primaria); } .pca-btn--outline:hover, .pca-btn--outline:focus { background-color: var(--cor-primaria); color: var(--cor-branco); } /* CTAs do header maiores */ .pca-header__acoes .pca-btn { padding: 0.8rem 1.3rem; border-radius: var(--br-button); font-size: 0.9375rem; } /* ============================================================ 9. Ícones ============================================================ */ .pca-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; } /* ============================================================ 10. Header — topbar de acessibilidade ============================================================ */ .pca-topbar { background-color: var(--cor-branco); font-size: var(--fs-small); } .pca-topbar__inner { display: flex; justify-content: flex-end; align-items: center; min-height: 44px; gap: 0; } .pca-topbar__controles { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; align-items: center; } .pca-topbar__separador { width: 1px; height: 20px; background-color: var(--cor-borda); margin: 0 var(--sp-1); } .pca-topbar__btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.8rem; font-size: 0.875rem; font-weight: var(--fw-semibold); color: var(--cor-texto); border-radius: 4px; border-bottom: 2px solid transparent; transition: color var(--tr-fast), border-color var(--tr-fast); } .pca-topbar__btn--fonte { padding: 0.5rem 0.6rem; font-weight: var(--fw-bold); } .pca-topbar__btn--fonte:nth-child(1) span { font-size: 0.8rem; } .pca-topbar__btn--fonte:nth-child(2) span { font-size: 1rem; } .pca-topbar__btn--fonte:nth-child(3) span { font-size: 1.15rem; } .pca-topbar__btn:hover, .pca-topbar__btn:focus-visible { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); } .pca-topbar__btn[aria-pressed="true"] { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); } .pca-topbar__btn .pca-icon { color: var(--cor-texto-claro); transition: color var(--tr-fast); } .pca-topbar__btn:hover .pca-icon, .pca-topbar__btn:focus-visible .pca-icon, .pca-topbar__btn[aria-pressed="true"] .pca-icon { color: var(--cor-primaria); } /* ============================================================ 11. Header — principal ============================================================ */ .pca-header__principal { background-color: var(--cor-branco); border-bottom: 1px solid var(--cor-borda); } .pca-header__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-2); padding-bottom: var(--sp-2); position: relative; } .pca-header__brand { display: flex; align-items: center; gap: var(--sp-2); } .pca-logo-link { display: inline-flex; align-items: center; text-decoration: none; } .pca-logo-link--cmsp .pca-logo { max-height: 56px; width: auto; } .pca-logo-link--procuradoria .pca-logo { max-height: 64px; width: auto; } .pca-logo--footer { max-height: 80px; width: auto; } .pca-header__divisor { display: inline-block; width: 1px; height: 54px; background-color: var(--cor-borda); margin: 0 var(--sp-1); } .pca-header__acoes { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; } .pca-busca-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background-color: var(--cor-primaria); color: var(--cor-branco); border: 0; transition: background-color var(--tr-fast), transform var(--tr-fast); } .pca-busca-toggle:hover, .pca-busca-toggle:focus, .pca-busca-toggle[aria-expanded="true"] { background-color: var(--cor-primaria-hover); color: var(--cor-branco); transform: scale(1.05); } .pca-busca { position: absolute; top: 100%; right: var(--container-pad-desktop); background: var(--cor-branco); border: 1px solid var(--cor-borda); border-radius: var(--br-button); padding: var(--sp-1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); z-index: 50; } .pca-search-form { display: flex; align-items: center; gap: var(--sp-1); } .pca-search-form__input { padding: 0.5rem 0.75rem; border: 1px solid var(--cor-borda); border-radius: var(--br-button); min-width: 240px; font-size: var(--fs-body); } .pca-search-form__submit { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--cor-primaria); color: var(--cor-branco); border-radius: var(--br-button); } /* ============================================================ 12. Header — menu principal ============================================================ */ .pca-nav { background-color: var(--cor-branco); border-bottom: 1px solid var(--cor-borda); } .pca-menu { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; padding: var(--sp-1) 0; list-style: none; } .pca-menu .menu-item > a, .pca-menu__item > a { display: inline-block; padding: 0.5rem 0.25rem; color: var(--cor-texto); font-weight: var(--fw-semibold); text-decoration: none; position: relative; } .pca-menu .menu-item > a::after, .pca-menu__item > a::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: 0; height: 3px; background-color: var(--cor-primaria); transition: left var(--tr-fast), right var(--tr-fast); } .pca-menu .menu-item > a:hover::after, .pca-menu .menu-item > a:focus::after, .pca-menu__item > a:hover::after, .pca-menu__item > a:focus::after, .pca-menu .current-menu-item > a::after, .pca-menu .current_page_item > a::after { left: 0; right: 0; } .pca-menu .current-menu-item > a, .pca-menu .current_page_item > a { color: var(--cor-primaria); } /* ============================================================ 13. Faixa institucional ============================================================ */ .pca-faixa-institucional { background-color: var(--cor-branco); padding: var(--sp-4) 0; } .pca-faixa-institucional__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .pca-faixa-institucional__texto { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 280px; } .pca-faixa-institucional__texto .pca-icon { color: var(--cor-primaria); flex-shrink: 0; } .pca-faixa-institucional__texto p { margin: 0; font-size: 0.9375rem; color: var(--cor-texto-claro); max-width: 560px; } .pca-faixa-institucional__ilustracao { max-width: 360px; } .pca-faixa-institucional__ilustracao img { width: 100%; height: auto; display: block; } /* ============================================================ 14. Footer — fundo escuro ============================================================ */ .pca-footer { background-color: var(--cor-footer-bg); padding: var(--sp-6) 0 var(--sp-4); color: var(--cor-footer-texto); } .pca-footer__main { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 768px) { .pca-footer__main { grid-template-columns: 1.5fr 1fr 1fr 1fr; } } .pca-footer__col--brand .pca-logo { max-height: 90px; max-width: 100%; width: auto; height: auto; } .pca-footer__heading { font-size: 0.9375rem; font-weight: var(--fw-bold); color: var(--cor-branco); margin-bottom: var(--sp-2); } .pca-footer__menu { list-style: none; margin: 0; padding: 0; } .pca-footer__menu li { margin-bottom: 6px; } .pca-footer__menu a { color: var(--cor-footer-texto); text-decoration: none; font-size: var(--fs-small); } .pca-footer__menu a:hover, .pca-footer__menu a:focus { color: var(--cor-primaria); text-decoration: underline; } .pca-redes-sociais { display: flex; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; } .pca-redes-sociais__link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: var(--cor-primaria); color: var(--cor-branco); text-decoration: none; transition: background-color var(--tr-fast); } .pca-redes-sociais__link:hover, .pca-redes-sociais__link:focus { background-color: var(--cor-primaria-hover); color: var(--cor-branco); } /* No body (não no footer escuro), os ícones de redes sociais usam o tom laranja sobre fundo claro */ .pca-secao-atendimento .pca-redes-sociais__link { background-color: var(--cor-primaria); } /* ============================================================ 16. Botão voltar ao topo ============================================================ */ .pca-voltar-topo { position: fixed; right: 100px; bottom: var(--sp-3); display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background-color: var(--cor-primaria); color: var(--cor-branco); border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 80; transition: background-color var(--tr-fast); } .pca-voltar-topo:hover, .pca-voltar-topo:focus { background-color: var(--cor-primaria-hover); } .pca-voltar-topo[hidden] { display: none; } /* ============================================================ 17. Responsividade do header ============================================================ */ @media (max-width: 767px) { .pca-header__brand { gap: var(--sp-1); } .pca-header__acoes .pca-btn span:not(.screen-reader-text) { display: none; } .pca-busca { right: var(--container-pad-mobile); left: var(--container-pad-mobile); } .pca-search-form__input { min-width: 0; flex: 1; } .pca-topbar__btn > span { display: none; } } /* ============================================================ 18. Front-page — base ============================================================ */ .pca-main--front { padding-top: 0; padding-bottom: 0; } .pca-secao { padding: var(--sp-8) 0; } .pca-secao__cabecalho { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); } .pca-secao__titulo { margin: 0; font-size: var(--fs-h2); color: var(--cor-texto); } .pca-secao__descricao { color: var(--cor-texto-claro); margin-bottom: var(--sp-3); max-width: 480px; } .pca-secao__link-ver-todos { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--cor-primaria); font-weight: var(--fw-semibold); text-decoration: none; } .pca-secao__link-ver-todos:hover, .pca-secao__link-ver-todos:focus { text-decoration: underline; } .pca-secao__icone-circulo { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background-color: transparent; color: var(--cor-primaria); border: 3px solid var(--cor-primaria); border-radius: 50%; margin-bottom: var(--sp-2); } .pca-btn--pill { border-radius: var(--br-pill); padding: 0.7rem 1.5rem; } .pca-secao__vazio { color: var(--cor-texto-claro); font-style: italic; } /* ============================================================ 19. Hero ============================================================ */ .pca-hero { display: grid; grid-template-columns: 1fr; min-height: 480px; } @media (min-width: 900px) { .pca-hero { grid-template-columns: 36% 64%; min-height: 580px; } } .pca-hero__esquerda { background-color: var(--cor-hero-bg); color: var(--cor-branco); display: flex; align-items: center; padding: var(--sp-6) var(--sp-4); } .pca-hero__esquerda-inner { max-width: 460px; margin-left: auto; padding-right: var(--sp-2); } .pca-hero__logo { margin: 0 0 var(--sp-3); line-height: 0; } .pca-hero__logo img { width: 100%; max-width: 360px; height: auto; display: block; } .pca-hero__texto { color: var(--cor-branco); font-size: 0.9375rem; line-height: 1.55; margin: 0; } .pca-hero__direita { display: block; overflow: hidden; background-color: var(--cor-hero-bg); } .pca-hero__direita picture { display: block; width: 100%; height: 100%; line-height: 0; } .pca-hero__imagem { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================ 20. Grid de cards (destaques) ============================================================ */ .pca-grid-cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); } @media (min-width: 640px) { .pca-grid-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .pca-grid-cards { grid-template-columns: repeat(4, 1fr); } } /* ============================================================ 21. Card de notícia ============================================================ */ .pca-card-noticia { background-color: var(--cor-branco); border-radius: var(--br-card); overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: transform var(--tr-base), box-shadow var(--tr-base); } .pca-card-noticia:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .pca-card-noticia__link { display: block; color: inherit; text-decoration: none; } .pca-card-noticia__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .pca-card-noticia__img { width: 100%; height: 100%; object-fit: cover; display: block; } .pca-card-noticia__img--placeholder { background: linear-gradient(135deg, var(--cor-pessego-claro), var(--cor-amarelo-claro)); } .pca-card-noticia__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--cor-branco); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); } .pca-card-noticia__body { padding: var(--sp-2); } .pca-card-noticia__meta { font-size: var(--fs-tiny); color: var(--cor-texto-claro); margin: 0 0 var(--sp-1); text-transform: uppercase; letter-spacing: 0.04em; } .pca-card-noticia__tipo { font-weight: var(--fw-semibold); color: var(--cor-primaria); } .pca-card-noticia__title { font-size: 1.0625rem; margin: 0 0 var(--sp-2); line-height: 1.3; color: var(--cor-texto); } .pca-card-noticia__tag { display: inline-block; padding: 4px 10px; border-radius: var(--br-pill); font-size: var(--fs-tiny); font-weight: var(--fw-bold); color: var(--cor-branco); text-transform: uppercase; letter-spacing: 0.05em; } .pca-card-noticia__resumo { font-size: var(--fs-small); color: var(--cor-texto-claro); line-height: 1.5; margin: 0; } .pca-archive__fonte { font-size: var(--fs-small); color: var(--cor-texto-claro); margin: 0 0 var(--sp-3); max-width: 60ch; } /* ============================================================ 22. Seção Normas Legais ============================================================ */ .pca-secao-normas { background-color: var(--cor-pessego-claro); } .pca-secao-normas__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: start; } @media (min-width: 900px) { .pca-secao-normas__grid { grid-template-columns: 1fr 1.6fr; gap: var(--sp-6); } } .pca-secao-normas__info { display: flex; flex-direction: column; align-items: flex-start; } /* ============================================================ 23. Lista de documentos — card único com divisores ============================================================ */ .pca-lista-documentos { background-color: var(--cor-branco); border-radius: var(--br-card); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); overflow: hidden; } .pca-doc-linha { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3); color: inherit; text-decoration: none; border-bottom: 1px solid var(--cor-borda); transition: background-color var(--tr-fast); } .pca-doc-linha:last-child { border-bottom: 0; } .pca-doc-linha:hover, .pca-doc-linha:focus { background-color: var(--cor-pessego-claro); } .pca-doc-linha__icone { color: var(--cor-texto-claro); display: inline-flex; } .pca-doc-linha__corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pca-doc-linha__titulo { font-weight: var(--fw-semibold); color: var(--cor-texto); font-size: 0.95rem; } .pca-doc-linha__titulo strong { color: var(--cor-texto); } .pca-doc-linha__descricao { font-size: var(--fs-small); color: var(--cor-texto-claro); } .pca-doc-linha__formato { font-size: var(--fs-tiny); font-weight: var(--fw-bold); color: var(--cor-primaria); letter-spacing: 0.05em; } /* ============================================================ 24. Seção Composição ============================================================ */ .pca-secao-composicao { background-color: var(--cor-amarelo-claro); } .pca-secao-composicao__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 900px) { .pca-secao-composicao__grid { grid-template-columns: 1fr 1.4fr; gap: var(--sp-6); } } .pca-secao-composicao__info { display: flex; flex-direction: column; align-items: flex-start; } .pca-secao-composicao__cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); } @media (min-width: 640px) { .pca-secao-composicao__cards { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .pca-secao-composicao__cards { grid-template-columns: repeat(5, 1fr); } } /* ============================================================ 25. Card de membro ============================================================ */ .pca-card-membro { background-color: var(--cor-branco); border-radius: var(--br-card); padding: var(--sp-3) var(--sp-2) var(--sp-2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: box-shadow var(--tr-fast); display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; } .pca-card-membro:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10); } .pca-card-membro__foto-wrapper { width: 110px; height: 110px; border-radius: 50%; overflow: hidden; margin-bottom: var(--sp-2); background-color: var(--cor-cinza-fundo); } .pca-card-membro__foto { width: 100%; height: 100%; object-fit: cover; display: block; } .pca-card-membro__foto--placeholder { display: flex; align-items: center; justify-content: center; color: var(--cor-texto-claro); } .pca-card-membro__nome { font-size: 0.95rem; margin: 0 0 4px; line-height: 1.25; color: var(--cor-texto); font-weight: var(--fw-bold); } .pca-card-membro__prefix { color: var(--cor-texto); font-weight: var(--fw-bold); } .pca-card-membro__cargo { font-size: 0.8125rem; color: var(--cor-texto-claro); margin: 0 0 var(--sp-2); line-height: 1.3; } .pca-card-membro__externo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: var(--cor-primaria); color: var(--cor-branco); border-radius: 4px; text-decoration: none; transition: background-color var(--tr-fast); } .pca-card-membro__externo:hover, .pca-card-membro__externo:focus { background-color: var(--cor-primaria-hover); color: var(--cor-branco); } /* ============================================================ 26. Seção Contatos de Emergência — fundo branco, sem bloco vermelho ============================================================ */ .pca-secao-emergencia { background-color: var(--cor-branco); } .pca-secao-emergencia__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: start; } @media (min-width: 900px) { .pca-secao-emergencia__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-4); } } .pca-secao-emergencia__titulo { color: var(--cor-vermelho-tag); font-size: 1.25rem; font-weight: var(--fw-bold); letter-spacing: 0.02em; margin: 0 0 var(--sp-2); text-transform: uppercase; } .pca-secao-emergencia__intro { color: var(--cor-texto-claro); margin-bottom: var(--sp-3); } .pca-secao-emergencia__subtitulo { color: var(--cor-vermelho-tag); font-size: 1rem; font-weight: var(--fw-bold); letter-spacing: 0.05em; margin: var(--sp-3) 0 var(--sp-2); text-transform: uppercase; } .pca-telefones-lista { list-style: none; margin: 0; padding: 0; } .pca-telefones-lista li { color: var(--cor-texto); font-size: 1.125rem; padding: 4px 0; } .pca-telefones-lista li strong { font-weight: var(--fw-bold); } .pca-qrcode { margin-top: var(--sp-3); display: inline-block; } .pca-qrcode__img { width: 140px; height: 140px; display: block; } .pca-canal-denuncia { margin-bottom: var(--sp-3); } .pca-canal-denuncia__heading { color: var(--cor-vermelho-tag); margin: 0 0 var(--sp-1); font-size: 1rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.02em; } .pca-canal-denuncia__texto { color: var(--cor-texto-claro); } .pca-canal-denuncia__texto p { margin: 0 0 var(--sp-1); } .pca-canal-denuncia__link { color: var(--cor-primaria); word-break: break-all; text-decoration: underline; font-size: var(--fs-small); } .pca-secao-emergencia__coluna--imagem { position: relative; border-radius: var(--br-card); overflow: hidden; } .pca-secao-emergencia__imagem { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; } /* ============================================================ 27. Seção Atendimento — 1 coluna intro grande + 3 colunas pequenas ============================================================ */ .pca-secao-atendimento { background-color: var(--cor-cinza-fundo); } .pca-secao-atendimento__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 900px) { .pca-secao-atendimento__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-3); align-items: start; } } .pca-coluna-atendimento { display: flex; flex-direction: column; gap: 4px; } .pca-coluna-atendimento--intro { gap: var(--sp-1); } .pca-secao__icone-circulo--sm { width: 56px; height: 56px; margin-bottom: var(--sp-1); } .pca-coluna-atendimento__titulo { font-size: 1.5rem; color: var(--cor-texto); margin: 0 0 var(--sp-1); font-weight: var(--fw-bold); } .pca-coluna-atendimento__intro-texto { color: var(--cor-texto-claro); font-size: var(--fs-small); margin: 0; max-width: 320px; } .pca-coluna-atendimento__heading { font-size: 0.9375rem; font-weight: var(--fw-bold); color: var(--cor-texto); margin: 0 0 var(--sp-1); } .pca-coluna-atendimento__item { display: block; margin: 0 0 var(--sp-1); font-size: var(--fs-small); color: var(--cor-texto); line-height: 1.4; } .pca-coluna-atendimento__item--icone { display: flex; align-items: center; gap: 6px; } .pca-coluna-atendimento__item--icone .pca-icon { color: var(--cor-primaria); flex-shrink: 0; } .pca-coluna-atendimento__item a { color: var(--cor-texto); text-decoration: none; } .pca-coluna-atendimento__item a:hover, .pca-coluna-atendimento__item a:focus { color: var(--cor-primaria); text-decoration: underline; } /* ============================================================ 28. Page header (subpáginas) ============================================================ */ .pca-page-header { background-color: var(--cor-pessego-claro); padding: var(--sp-6) 0 var(--sp-4); border-bottom: 4px solid var(--cor-primaria); } .pca-page-header__titulo { margin: 0; color: var(--cor-texto); font-size: clamp(1.75rem, 2.5vw + 1rem, var(--fs-h1)); } .pca-page-header__lead { margin: var(--sp-2) 0 0; color: var(--cor-texto-claro); font-size: 1.125rem; max-width: 720px; } /* ============================================================ 29. Breadcrumb ============================================================ */ .pca-breadcrumb { margin-bottom: var(--sp-2); } .pca-breadcrumb__lista { display: flex; flex-wrap: wrap; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); color: var(--cor-texto-claro); } .pca-breadcrumb__item:not(:last-child)::after { content: '›'; margin-left: var(--sp-1); color: var(--cor-texto-claro); } .pca-breadcrumb__item[aria-current="page"] { color: var(--cor-texto); font-weight: var(--fw-semibold); } .pca-breadcrumb a { color: var(--cor-primaria); text-decoration: none; } .pca-breadcrumb a:hover, .pca-breadcrumb a:focus { text-decoration: underline; } /* ============================================================ 30. Páginas (page.php, search.php, 404.php, archives) ============================================================ */ .pca-pagina-conteudo, .pca-archive { padding-top: var(--sp-4); padding-bottom: var(--sp-8); } .pca-pagina__thumb { margin-bottom: var(--sp-3); border-radius: var(--br-card); overflow: hidden; } .pca-pagina__conteudo { font-size: 1.0625rem; line-height: 1.7; max-width: 760px; } .pca-pagina__conteudo p, .pca-pagina__conteudo ul, .pca-pagina__conteudo ol { margin-bottom: var(--sp-3); } /* Filtros (archives) */ .pca-filtros { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-end; margin-bottom: var(--sp-4); padding: var(--sp-2); background-color: var(--cor-cinza-fundo); border-radius: var(--br-card); } .pca-filtros__campo { display: flex; flex-direction: column; gap: 4px; } .pca-filtros__label { font-size: var(--fs-tiny); font-weight: var(--fw-semibold); color: var(--cor-texto-claro); text-transform: uppercase; letter-spacing: 0.05em; } .pca-filtros select { padding: 0.5rem 0.75rem; border: 1px solid var(--cor-borda); border-radius: var(--br-button); background-color: var(--cor-branco); min-width: 180px; } /* Paginação */ .page-numbers { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: var(--sp-4) 0 0; padding: 0; justify-content: center; } .page-numbers li .page-numbers, .page-numbers li .current { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 0.75rem; border-radius: var(--br-button); text-decoration: none; font-weight: var(--fw-semibold); color: var(--cor-texto); background-color: var(--cor-cinza-fundo); border: 1px solid var(--cor-borda); } .page-numbers li .current { background-color: var(--cor-primaria); color: var(--cor-branco); border-color: var(--cor-primaria); } .page-numbers li a:hover, .page-numbers li a:focus { background-color: var(--cor-primaria); color: var(--cor-branco); border-color: var(--cor-primaria); } /* Lista de resultados de busca */ .pca-lista-resultados { list-style: none; margin: 0; padding: 0; } .pca-resultado { padding: var(--sp-3) 0; border-bottom: 1px solid var(--cor-borda); } .pca-resultado__title { font-size: 1.25rem; margin: 0 0 var(--sp-1); } .pca-resultado__title a { color: var(--cor-primaria); text-decoration: none; } .pca-resultado__title a:hover, .pca-resultado__title a:focus { text-decoration: underline; } .pca-resultado__meta { font-size: var(--fs-tiny); color: var(--cor-texto-claro); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--sp-1); } .pca-busca-resumo { color: var(--cor-texto-claro); margin-bottom: var(--sp-3); } /* 404 */ .pca-erro-404 { padding: var(--sp-6) 0 var(--sp-8); text-align: center; } .pca-erro-404__mensagem { font-size: 1.25rem; margin-bottom: var(--sp-4); } .pca-erro-404__acoes { margin-bottom: var(--sp-4); } .pca-erro-404__busca { max-width: 480px; margin: 0 auto; } /* Single notícia */ .pca-single-noticia { padding-top: var(--sp-4); padding-bottom: var(--sp-8); } .pca-single-noticia__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; margin-bottom: var(--sp-3); font-size: var(--fs-small); color: var(--cor-texto-claro); } .pca-single-noticia__tipo { color: var(--cor-primaria); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; } .pca-single-noticia__thumb { margin-bottom: var(--sp-3); border-radius: var(--br-card); overflow: hidden; } .pca-single-noticia__video { margin-bottom: var(--sp-3); } .pca-single-noticia__conteudo { font-size: 1.0625rem; line-height: 1.7; max-width: 760px; } .pca-relacionados { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--cor-borda); } .pca-relacionados__titulo { font-size: var(--fs-h3); margin-bottom: var(--sp-3); } .pca-grid-cards--3 { grid-template-columns: 1fr; } @media (min-width: 768px) { .pca-grid-cards--3 { grid-template-columns: repeat(3, 1fr); } } /* Página de Composição */ .pca-pagina-composicao { padding-top: var(--sp-4); padding-bottom: var(--sp-8); } .pca-grupo-membros { margin-bottom: var(--sp-6); } .pca-grupo-membros__titulo { font-size: var(--fs-h3); color: var(--cor-primaria); margin-bottom: var(--sp-3); padding-bottom: var(--sp-1); border-bottom: 2px solid var(--cor-primaria); } /* Página de Atendimento */ .pca-pagina-atendimento { padding-top: var(--sp-4); padding-bottom: 0; } /* Atendimento presencial + mapa lado a lado */ .pca-atendimento-presencial { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); } @media (min-width: 768px) { .pca-atendimento-presencial { grid-template-columns: 1fr 1fr; align-items: stretch; } } .pca-atendimento-presencial .pca-atendimento-bloco { height: 100%; } .pca-atendimento-contato { margin-bottom: var(--sp-6); } .pca-atendimento-contato .pca-atendimento-bloco { max-width: 560px; } .pca-atendimento-bloco { background-color: var(--cor-cinza-fundo); padding: var(--sp-3); border-radius: var(--br-card); } .pca-atendimento-bloco__titulo { color: var(--cor-primaria); font-size: 1.25rem; margin-bottom: var(--sp-2); } .pca-atendimento-bloco__item { display: flex; align-items: flex-start; gap: var(--sp-1); margin-bottom: var(--sp-2); } .pca-atendimento-bloco__item .pca-icon { color: var(--cor-primaria); margin-top: 4px; } .pca-mapa { margin-bottom: var(--sp-6); } .pca-mapa h2 { font-size: 1.5rem; margin-bottom: var(--sp-2); } .pca-mapa__embed iframe { border-radius: var(--br-card); display: block; } /* Mapa quando exibido ao lado do bloco de atendimento presencial */ .pca-mapa--lado { display: flex; flex-direction: column; margin-bottom: 0; } .pca-mapa--lado .pca-mapa__embed { flex: 1 1 auto; min-height: 300px; } .pca-mapa--lado .pca-mapa__embed iframe { width: 100%; height: 100%; min-height: 300px; } .pca-mapa__link { margin-top: var(--sp-1); font-size: var(--fs-small); } .pca-mapa__link a { color: var(--cor-primaria); text-decoration: none; } .pca-mapa__link a:hover, .pca-mapa__link a:focus { text-decoration: underline; } /* ============================================================ 30. Hero — CTA "Saiba Mais" ============================================================ */ .pca-hero__cta { margin: var(--sp-3) 0 0; } .pca-btn--hero { background-color: var(--cor-branco); color: var(--cor-primaria); border-color: var(--cor-branco); padding: 0.75rem 1.4rem; border-radius: var(--br-pill); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); } .pca-btn--hero:hover, .pca-btn--hero:focus { background-color: var(--cor-primaria); color: var(--cor-branco); border-color: var(--cor-branco); } /* ============================================================ 31. Seção institucional "O que é a Procuradoria" + competências ============================================================ */ .pca-secao-sobre { background-color: var(--cor-pessego-claro); padding-bottom: 0; } .pca-secao-sobre__cabecalho { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-3); } .pca-secao-sobre__titulo { max-width: 760px; color: var(--cor-primaria); } .pca-secao__icone-circulo--claro { border-color: var(--cor-branco); background-color: var(--cor-branco); color: var(--cor-primaria); } .pca-secao-sobre__texto { max-width: 880px; color: var(--cor-texto); line-height: var(--lh-base); } .pca-secao-sobre__texto p { margin: 0 0 var(--sp-2); } .pca-secao-sobre__competencias { background-color: var(--cor-hero-bg); color: var(--cor-branco); margin-top: var(--sp-6); padding: var(--sp-6) 0; } .pca-secao-sobre__competencias-titulo { color: var(--cor-branco); font-size: var(--fs-h3); margin: 0 0 var(--sp-4); } .pca-competencias { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); list-style: none; padding: 0; margin: 0; } @media (min-width: 640px) { .pca-competencias { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .pca-competencias { grid-template-columns: repeat(4, 1fr); } } .pca-competencias__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3); background-color: rgba(255, 255, 255, 0.12); border-radius: var(--br-card); } .pca-competencias__icone { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background-color: var(--cor-branco); color: var(--cor-primaria); border-radius: 50%; } .pca-competencias__texto { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--cor-branco); } /* ============================================================ 32. Seção "Instalação da Procuradoria" ============================================================ */ .pca-secao-instalacao { background-color: var(--cor-amarelo-claro); } .pca-secao-instalacao__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: center; } @media (min-width: 900px) { .pca-secao-instalacao__grid { grid-template-columns: 1fr 1.2fr; gap: var(--sp-6); } } .pca-secao-instalacao__titulo { color: var(--cor-primaria); margin-top: var(--sp-2); } .pca-secao-instalacao__data { font-weight: var(--fw-semibold); color: var(--cor-texto); margin: var(--sp-2) 0; } .pca-secao-instalacao__chamada { color: var(--cor-texto-claro); margin: 0; } .pca-secao-instalacao__video { position: relative; aspect-ratio: 16 / 9; background-color: #000; border-radius: var(--br-card); overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15); } .pca-secao-instalacao__video iframe, .pca-secao-instalacao__video video { width: 100%; height: 100%; border: 0; display: block; } .pca-secao-instalacao__video--vazio { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--cor-primaria), var(--cor-hero-bg)); color: var(--cor-branco); } .pca-secao-instalacao__video-placeholder { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--fs-small); } /* ============================================================ 33. Atalhos para páginas internas (balões brancos) ============================================================ */ .pca-secao-atalhos { background-color: var(--cor-branco); text-align: center; } .pca-secao-atalhos__cabecalho { max-width: 720px; margin: 0 auto var(--sp-4); } .pca-secao-atalhos__titulo { color: var(--cor-primaria); } .pca-secao-atalhos__chamada { color: var(--cor-texto-claro); margin: var(--sp-2) 0 0; } .pca-atalhos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--sp-3); } @media (min-width: 640px) { .pca-atalhos { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .pca-atalhos { grid-template-columns: repeat(4, 1fr); } } .pca-atalhos__balao { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-3) var(--sp-2); background-color: var(--cor-branco); color: var(--cor-texto); text-decoration: none; border-radius: var(--br-card); border: 1px solid var(--cor-borda); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-fast); height: 100%; } .pca-atalhos__balao:hover, .pca-atalhos__balao:focus { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); border-color: var(--cor-primaria); } .pca-atalhos__icone { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background-color: var(--cor-pessego-claro); color: var(--cor-primaria); margin-bottom: var(--sp-1); } .pca-atalhos__label { font-weight: var(--fw-semibold); font-size: 1.0625rem; color: var(--cor-texto); } .pca-atalhos__seta { color: var(--cor-primaria); }