/* Theme Name: FESPSP Base Theme URI: https://www.fespsp.org.br/ Author: FESPSP Description: Tema parent (FSE) e design system compartilhado da FESPSP. Contém só o que é agnóstico de conteúdo — tokens (theme.json), CSS do sistema, blocos custom, patterns estruturais e parts de marca. Cada site (fespsp-institucional, fespsp-projetos, …) é um child theme que consome este base via Composer. Cores e medidas extraídas linha-por-linha do nicepage.css original — brand #bc2f2c (vermelho), texto #53565a (cinza grafite), top bar #d0d3d4, footer #333333. Sem plugins. Version: 0.1.56 Requires at least: 7.0 Tested up to: 7.1 Requires PHP: 8.1 License: GPL v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: fespsp Tags: full-site-editing, block-templates, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, featured-images */ /* ============================================================= FESPSP — design system extraído do Nicepage ---------------------------------------------------------------- Brand: #bc2f2c (hover #a92a28) Texto: #53565a (hover #4b4d51) Top bar: #d0d3d4 (hover #babec0) Cards: #f2f2f2 (grey-5) Footer: #333333 (grey-80) Body BG: #ffffff | Body text: #111111 ============================================================= */ /* ============================================================= UTILITÁRIOS ---------------------------------------------------------------- `.fespsp-sr-only` — some da tela e continua na árvore de acessibilidade. Não use `display:none` nem `visibility:hidden` para isso: os dois tiram o elemento do leitor de tela também, que é justamente quem deveria ler. O recorte de 1px com `clip-path` é o padrão que sobrevive a `position` herdada e não desloca o layout. ============================================================= */ .fespsp-sr-only:not(:focus):not(:active) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ============================================================= BREAKPOINTS — convenção única de responsividade (Bloco H) ---------------------------------------------------------------- Replicam os breakpoints do Nicepage original. São os ÚNICOS valores de corte usados no tema — não invente outros. Cada media query de reflow é desktop-first (max-width): xl 1140px laptop / abaixo da largura de conteúdo (contentSize) lg 980px tablet landscape / desktop pequeno md 760px tablet retrato — abaixo daqui vira layout "mobile" sm 460px smartphone Uso: @media (max-width: 760px) { … } ← literal, em px. CSS custom properties NÃO funcionam dentro da condição de um @media, então o valor vai literal no CSS; os mesmos números estão espelhados (como documentação/tokens legíveis por máquina) em theme.json → settings.custom.breakpoint (--wp--custom--breakpoint--{xl,lg,md,sm}). Desde a FB6 estes quatro são os ÚNICOS valores no arquivo — os herdados do Bootstrap do Nicepage (1199/991/782/767/600/575) não existem mais. `min-width: 981px` é o complemento exato de `max-width: 980px` e não é um quinto ponto. Se uma regra parecer precisar de um ponto que não está aqui, ela quase sempre não precisa de ponto nenhum: `auto-fit`+`minmax` e deixar um flex encolher resolvem em toda largura, e foi assim que o 575 saiu. Ponto novo exige justificativa escrita e medida. ============================================================= */ body { font-family: "Open Sans", sans-serif; color: #111; line-height: 1.55; } h1, h2, h3, h4, h5, h6 { font-family: Roboto, sans-serif; font-weight: 500; line-height: 1.2; } /* ============================================================= TOP BAR — botões Área do Aluno / Área do Professor Valores extraídos via Playwright do Nicepage original: bg #d0d3d4 explícito, border #53565a, font Montserrat 12px 400 NORMAL, padding 6px 19px 7px, radius 100px, text-transform none ============================================================= */ /* Topbar — bg ocupa tela toda, conteúdo centralizado em 1140px via layout constrained */ .fespsp-topbar { background: #d0d3d4 !important; padding: 6px 0 !important; } /* Largura 1140 explícita + margin auto força centralização e dá referência para o justify-content:flex-end empurrar botões pro right edge */ .fespsp-topbar .wp-block-buttons { justify-content: flex-end !important; gap: 8px !important; margin: 0 auto !important; width: 1140px !important; max-width: 100% !important; box-sizing: border-box; } .fespsp-topbar .wp-block-button .wp-block-button__link, .fespsp-topbar a.wp-block-button__link.wp-element-button { background: #d0d3d4 !important; color: #53565a !important; border: 1px solid #53565a !important; border-radius: 100px !important; font-family: Montserrat, sans-serif !important; font-weight: 400 !important; font-size: 12px !important; line-height: 1.5 !important; padding: 6px 19px 7px !important; text-transform: none !important; letter-spacing: normal !important; min-height: 0 !important; } .fespsp-topbar .wp-block-button .wp-block-button__link:hover, .fespsp-topbar a.wp-block-button__link.wp-element-button:hover { background: #bc2f2c !important; color: #fff !important; border-color: #bc2f2c !important; } /* ============================================================= HEADER — logo + navegação principal Sem padding horizontal — contentSize 1140px do layout constrained centraliza. ============================================================= */ .fespsp-header { background: #fff; padding: 18px 0; /* O submenu do core é `position: absolute` sem z-index próprio, então ele pinta na camada do header — que, sem `z-index`, é a camada 0 da raiz. Qualquer seção adiante que empilhe (`.fespsp-page-hero__inner` é z-index 2, e a `.fespsp-page-nav` sticky é 50) passa por cima do dropdown aberto: em /quem-somos o título do hero atravessava a lista de "Ensino". Aqui o header vira contexto de empilhamento acima dos dois, e o submenu sobe junto sem precisar de z-index em cada dropdown. */ position: relative; z-index: 100; } /* Wrapper interno (logo + nav) — 1140 centralizado */ .fespsp-header > .wp-block-group { width: 1140px !important; max-width: 100% !important; margin: 0 auto !important; } /* Logo colorido no header — 205px exato (medido via Playwright no Nicepage) */ .fespsp-header__logo, .fespsp-header .wp-block-image, .fespsp-header__logo img, .fespsp-header .wp-block-image img { max-width: 205px !important; height: auto !important; margin: 0 !important; } .fespsp-header__logo a { display: inline-block; } .fespsp-header .wp-block-site-logo img { max-width: 205px; height: auto; } /* Navegação principal — valores extraídos via Playwright do Nicepage original: font Montserrat 400, size 14px, top-level color #111111, padding 10px 15px */ .fespsp-main-nav { font-family: Montserrat, sans-serif !important; font-weight: 400 !important; font-size: 14px !important; } /* Esconde as setinhas "v" dos itens com submenu — Nicepage não mostra */ .fespsp-main-nav .wp-block-navigation__submenu-icon, .fespsp-main-nav button.wp-block-navigation-item__content + .wp-block-navigation__submenu-icon, .fespsp-main-nav > ul > li > a + .wp-block-navigation__submenu-icon, .fespsp-main-nav > ul > li > button + .wp-block-navigation__submenu-icon { display: none !important; } .fespsp-main-nav > ul > li > a.wp-block-navigation-item__content::after, .fespsp-main-nav > ul > li > button.wp-block-navigation-item__content::after { display: none !important; content: none !important; } /* Top-level menu items: cor #111111, peso 400, padding 10px 15px. Seletor genérico para pegar links em qualquer profundidade de wrapper do WP. */ .fespsp-main-nav a.wp-block-navigation-item__content, .fespsp-main-nav button.wp-block-navigation-item__content { color: #111 !important; font-weight: 400 !important; font-size: 14px !important; padding: 10px 15px !important; text-transform: none !important; letter-spacing: normal !important; } .fespsp-main-nav a.wp-block-navigation-item__content:hover, .fespsp-main-nav button.wp-block-navigation-item__content:hover { color: #bc2f2c !important; background: transparent !important; } .fespsp-main-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content { color: #bc2f2c !important; } /* Mega-menu (dropdown do Nicepage): bg branco, padding 10px 24px, itens em #53565a font-weight 400 size 14px — valores extraídos via Playwright */ .fespsp-main-nav .wp-block-navigation__submenu-container { background: #fff !important; border: 1px solid #e5e5e5 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); min-width: 240px; padding: 12px 0 !important; border-radius: 0 !important; } /* Submenu items: bg branco como Nicepage, cor #53565a, font 14px peso 400 */ .fespsp-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #53565a !important; background: #fff !important; padding: 10px 24px !important; font-weight: 400 !important; text-transform: none !important; font-size: 14px !important; } .fespsp-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: #bc2f2c !important; background: #f2f2f2 !important; } /* ============================================================= HEADER — responsivo (Bloco H / H2) Breakpoint md (760px, ver convenção no topo). Abaixo dele o menu principal (core/navigation, overlayMenu:"mobile") colapsa no hambúrguer. O WP nativo só colapsa < 600px; antecipamos o corte para 760px porque o Nicepage já colapsa a partir do MD. O drawer e o toggle abrir/fechar são NATIVOS do bloco — zero plugin/JS. ============================================================= */ @media (max-width: 760px) { /* Mostra o botão hambúrguer também na faixa 600–760px (o WP o esconde em min-width:600px; nosso seletor mais específico vence). */ .fespsp-main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } /* Esconde o menu inline (estado fechado) nessa faixa — o hambúrguer assume. O overlay aberto (.is-menu-open) NÃO casa este seletor, então continua abrindo normalmente. */ .fespsp-main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } /* ============================================================= OVERLAY DO MENU — o fundo que o core NÃO dá sozinho. ---------------------------------------------------------------- O `core/navigation` só pinta o overlay quando o bloco declara `overlayBackgroundColor`/`overlayTextColor`. O nosso não declara, então o painel abria TRANSPARENTE: a página inteira aparecia através dos itens do menu, e o título do hero passava por cima da lista. Parecia problema de z-index e não era — o container aberto já tem `z-index: 100000` e `position: fixed`. Aqui em vez dos atributos do bloco porque o header é template part do parent e o cabeçalho é branco em todos os children: mudar a cor do overlay é mudar a cor do cabeçalho, e essa decisão é do design system. ============================================================= */ .fespsp-main-nav .wp-block-navigation__responsive-container.is-menu-open { background-color: #fff; color: #53565a; padding: 24px; } /* Dentro do overlay o submenu é lista aberta, não cartão flutuante: o fundo branco sobre branco só criava um retângulo com sombra no meio da lista. O recuo é pela DIREITA porque a lista herda o alinhamento à direita do cabeçalho, e é dali que o segundo nível tem de se afastar para parecer subordinado. */ .fespsp-main-nav .is-menu-open .wp-block-navigation__submenu-container { background-color: transparent !important; border: 0 !important; box-shadow: none !important; padding-right: 16px !important; } .fespsp-main-nav .is-menu-open .wp-block-navigation-item__content { color: #53565a; } .fespsp-main-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: #bc2f2c; } /* ============================================================= CABEÇALHO, MENU E RODAPÉ NO CELULAR (FB7) ---------------------------------------------------------------- Estas três peças aparecem em toda página de todo site que consome o parent, e o comportamento delas abaixo de 760px vinha do export Nicepage e do default do core/navigation — não de uma decisão. Medido em 390px antes de mexer: a topbar comia 108px acima do logo (os três atalhos quebravam em duas linhas), os 13 itens do menu tinham 41,7px de altura e os links do rodapé, 17px. O que o core já fazia certo e não foi tocado: `Esc` fecha o painel e devolve o foco ao botão que o abriu, e o foco entra no primeiro item ao abrir. ============================================================= */ @media (max-width: 760px) { /* TOPBAR — uma linha só. Os atalhos são secundários mas não descartáveis (a Área do Aluno é o que um estudante procura no telefone), então encolhem em vez de sumir: o que não couber rola na horizontal, o que acontece abaixo de ~360px. */ .fespsp-topbar { padding: 4px 0 !important; } .fespsp-topbar .wp-block-buttons { justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 6px !important; padding: 0 16px !important; overflow-x: auto; /* A barra de rolagem sobre uma faixa de 52px comeria o alvo de toque. */ scrollbar-width: none; } .fespsp-topbar .wp-block-buttons::-webkit-scrollbar { display: none; } .fespsp-topbar .wp-block-button { flex: 0 0 auto; } /* Só o que encolhe. Os 44px de alvo de toque já vêm da regra de acessibilidade mais abaixo (`min-height: 44px !important`), e é ela que impede o texto menor levar a área de toque junto. */ .fespsp-topbar .wp-block-button .wp-block-button__link, .fespsp-topbar a.wp-block-button__link.wp-element-button { padding: 4px 10px !important; font-size: 11px !important; white-space: nowrap; } /* CABEÇALHO — versão compacta grudada no topo. O menu fica sempre ao alcance sem voltar ao topo da página; o custo são ~60px permanentes, e é por isso que o logo cai de 205px para 150px em vez de o cabeçalho manter a altura de desktop. O `z-index: 100` da regra base já põe o header acima da `.fespsp-page-nav` (50). O `display: contents` no wrapper não é enfeite: `position: sticky` só gruda dentro da caixa do pai, e o `.wp-block-template-part` que envolve topbar + cabeçalho mede 112px. Com ele no fluxo o cabeçalho "grudava" por 112px e sumia — medido, depois de rolar 2000px o topo estava em -1948. Sem a caixa, o contentor vira o `.wp-site-blocks` e o sticky vale a página inteira. */ .wp-block-template-part:has(> .fespsp-header) { display: contents; } .fespsp-header { position: sticky; top: 0; padding: 8px 0; box-shadow: 0 1px 3px rgb(0 0 0 / 8%); } .fespsp-header__logo, .fespsp-header .wp-block-image, .fespsp-header__logo img, .fespsp-header .wp-block-image img { max-width: 150px !important; } /* MENU — 44px por item. O core entrega 41,7px, que vem da altura da linha do texto; faltam 2,3px para o alvo mínimo confortável, e num menu de duas camadas o item de segundo nível é justamente o mais fácil de errar com o polegar. */ .fespsp-main-nav .is-menu-open .wp-block-navigation-item__content { display: flex; align-items: center; /* `border-box` junto: o item já tem `padding: 10px 15px`, e sem isto o `min-height` soma por cima e entrega 64px — treze itens de 64px é o painel inteiro, que é o problema oposto ao que esta regra resolve. */ box-sizing: border-box; min-height: 44px; } /* RODAPÉ — 40px, e não os 44px do menu. São mais de vinte links: a 44px o rodapé ganharia meia tela de rolagem, e 40px já está muito acima do mínimo de 24px sem transformar o fim da página numa lista infinita. */ .fespsp-footer li a { display: inline-flex; align-items: center; min-height: 40px; } } /* Estilos do bloco fespsp/carousel vivem em blocks/carousel/style.css — evitando duplicação e conflito de especificidade. */ /* ============================================================= MOSAICO — medido na section 2 da Home (Nicepage u-section-2) Xadrez de células de texto e de foto. Aquela seção, que é a de cursos, tem 4 colunas × 2 linhas (sheet 1140px, célula 270px, gutter 20px, linha 326/333px); `--fespsp-mosaico-cols` é o que o bloco fespsp/mosaic escreve, e o valor de fallback é o do export. Abaixo de 992px a grade vira uma coluna. ============================================================= */ .fespsp-mosaico { width: 1140px; max-width: 100%; margin: 0 auto; padding: 0; } /* O `:root` isola a margem vertical porque o WordPress declara `margin-block: 0` em todo filho direto de container de layout — `:root :where(.is-layout-flow) > *` e a irmã `is-layout-constrained`. O `:where()` zera o peso da classe, então aquele seletor vale (0,1,0), o mesmo de `.fespsp-x`. Empatados, decide a ordem da folha, e ela é oposta nos dois lados: no site o style.css é enfileirado depois e ganha, no canvas do editor ele é injetado antes e perde — e a seção aparece grudada na de cima. `:root` desempata em (0,2,0) sem tocar no valor computado. Vive numa regra à parte, e não como prefixo da regra inteira, porque o prefixo subiria junto todas as outras propriedades e elas passariam a vencer as media queries que as sobrepõem. */ :root .fespsp-mosaico { margin-top: 45px; margin-bottom: 20px; } .fespsp-mosaico__grid { display: grid; grid-template-columns: repeat(var(--fespsp-mosaico-cols, 4), 1fr); grid-auto-rows: 330px; gap: 20px; } .fespsp-mosaico__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; box-sizing: border-box; } .fespsp-mosaico__cell--text { background: #f2f2f2; text-decoration: none; transition: background-color 0.2s ease; } .fespsp-mosaico__cell--text:hover { background: #e5e5e5; } .fespsp-mosaico__cell--image { background-size: cover; background-position: center; min-height: 330px; } /* Célula de foto ainda vazia, só no canvas do editor. */ .fespsp-mosaico__placeholder { color: #53565a; font-family: "Open Sans", sans-serif; font-size: 0.875rem; border: 1px dashed #b5b5b5; padding: 8px 14px; } .fespsp-mosaico__title { font-family: Roboto, sans-serif; font-weight: 700; font-size: 1.875rem; color: #111; margin: 0 auto; line-height: 1.2; } /* A largura de quebra é da descrição, não do card: no export cada uma das quatro células tem a sua (152, 171, 144 e 238px, nudge a nudge do Nicepage, entre padding do container e margem do parágrafo). 176px é o valor único que reproduz a quebra de três das quatro — o bloco não carrega quatro números mágicos para reproduzir o desalinho de origem. */ .fespsp-mosaico__desc { margin: 19px auto 0; max-width: 176px; color: #111; font-family: "Open Sans", sans-serif; font-size: 1.125rem; line-height: 1.6; } /* Círculo cinza com seta branca — o .u-icon-circle do Nicepage, cuja cor computada nas quatro células do export é #53565a (não o vermelho da versão anterior). */ .fespsp-mosaico__icon { width: 37px; height: 37px; background: #53565a; color: #fff; border-radius: 50%; margin: 16px auto 0; padding: 7px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: none; } .fespsp-mosaico__icon svg { width: 100%; height: 100%; display: block; } @media (max-width: 1140px) { .fespsp-mosaico__grid { grid-auto-rows: 285px; } .fespsp-mosaico__cell--image { min-height: 285px; } } @media (max-width: 980px) { .fespsp-mosaico__grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; } .fespsp-mosaico__cell--text { min-height: 200px; } .fespsp-mosaico__cell--image { min-height: 200px; } } /* ============================================================= NEWSLETTER + FEED ACONTECE — section 3 Estrutura idêntica ao Nicepage: header com h3 + form lado-a-lado, abaixo o grid de posts em 3 colunas. ============================================================= */ .fespsp-newsletter-acontece { width: 1140px; max-width: 100%; margin: 0 auto; padding: 0; background: #fff; } /* `:root` só para a margem vertical — ver a nota em `.fespsp-mosaico`. */ :root .fespsp-newsletter-acontece { margin-top: 45px; margin-bottom: 60px; } /* Linha superior: h3 esquerda + form direita */ .fespsp-acontece__header { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 30px; } /* `:root` só para a margem vertical — ver a nota em `.fespsp-mosaico`. */ :root .fespsp-acontece__header { margin-bottom: 25px; } .fespsp-acontece__title { font-family: Montserrat, sans-serif !important; font-weight: 700 !important; font-size: 1.875rem !important; color: #111 !important; margin: 0 !important; line-height: 1.2; } /* A newsletter da Home tem medidas próprias, medidas no Nicepage (u-section-4): rótulo de 18px em negrito, campo de 268×48 e botão de 98×42. O mesmo bloco de formulário também compõe a faixa vermelha das páginas internas (.fespsp-newsletter-cta), que segue com as medidas do DS — daí o escopo. */ .fespsp-newsletter-acontece .fespsp-form--inline .fespsp-field__label { font-family: Montserrat, sans-serif !important; font-size: 1.125rem !important; font-weight: 700 !important; line-height: 1.6 !important; } /* O campo continua `required` — o asterisco é que não existe no export, e o navegador cobra o preenchimento do mesmo jeito. */ .fespsp-newsletter-acontece .fespsp-form--inline .fespsp-field__required { display: none; } .fespsp-newsletter-acontece .fespsp-form--inline .fespsp-field__input { width: 268px; max-width: 100%; font-size: 1rem !important; line-height: 1.6 !important; padding: 10px 12px !important; border-radius: 0 !important; } .fespsp-newsletter-acontece .fespsp-form--inline .fespsp-field__input::placeholder { font-style: italic; } .fespsp-newsletter-acontece .fespsp-form--inline .fespsp-form__submit { font-family: Montserrat, sans-serif !important; font-size: 1rem !important; line-height: 1.4 !important; padding: 9px 24px 11px !important; } /* Quebra por CONTEÚDO e não por breakpoint: rótulo (233) + campo (268) + botão (98) somam mais de 600px, e entre 576 e 760 — onde nenhuma media query pegava — o formulário empurrava a página para 623px numa viewport de 600. Com `wrap` e `min-width: 0` ele desce de linha exatamente quando não cabe, em qualquer largura, e continua numa linha só onde há espaço. */ .fespsp-newsletter-acontece .fespsp-form--inline, .fespsp-newsletter-acontece .fespsp-form--inline form { flex-wrap: wrap !important; min-width: 0; } .fespsp-newsletter-acontece .fespsp-form--inline .fespsp-form__fields, .fespsp-newsletter-acontece .fespsp-form--inline .fespsp-field { min-width: 0; flex-wrap: wrap; /* `min-width: 0` sozinho não bastava: o `flex: 0 0 auto` da regra base zera o shrink, então o grupo continuava travado em 450px e o botão saía da tela abaixo de 575. Era esse o motivo de existir um corte em 575px (FB6) — sem ele, a página media 533px de largura numa viewport de 500. */ flex-shrink: 1; } /* Form inline newsletter — label, input e botão na mesma linha */ .fespsp-form--inline { display: flex !important; align-items: center; gap: 14px; margin: 0 !important; flex-wrap: nowrap; } .fespsp-form--inline .fespsp-form__fields { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; margin: 0; } .fespsp-form--inline .fespsp-field { margin: 0; flex-direction: row; align-items: center; gap: 12px; } .fespsp-form--inline .fespsp-field__label { font-family: "Open Sans", sans-serif !important; color: #53565a !important; font-weight: 400 !important; font-size: 14px !important; margin: 0 !important; white-space: nowrap; } .fespsp-form--inline .fespsp-field__input { width: 220px; min-width: 0; border: 1px solid #d0d3d4 !important; border-radius: 3px !important; padding: 8px 12px !important; } /* IMPORTANTE: o display:block (não none) garante o submit visível — o style.css do bloco form historicamente escondia ".fespsp-form--inline .fespsp-form__actions { display: none }". */ .fespsp-form--inline .fespsp-form__actions { display: block !important; margin: 0 !important; flex: 0 0 auto; } .fespsp-form--inline .fespsp-form__submit { background: #53565a !important; color: #fff !important; border-radius: 0 !important; padding: 8px 18px !important; font-family: "Open Sans", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: normal !important; } /* ============================================================= NEWSLETTER CTA — faixa vermelha no fim das páginas internas (page-institucional → pattern fespsp/cta-newsletter). Escopo próprio: NÃO herda o layout do form inline branco da home (.fespsp-newsletter-acontece). Texto explícito em branco porque o preset has-white-color não gera CSS neste tema. ============================================================= */ .fespsp-newsletter-cta { text-align: center; } /* A supressão condicional do FI63 saiu com a faixa: o template não emite mais a newsletter em página nenhuma, então não há segunda faixa para esconder. Os estilos abaixo ficam porque o pattern segue registrado e inserível pelo editor. */ .fespsp-newsletter-cta__title { font-family: Roboto, sans-serif !important; font-weight: 700 !important; font-size: 2rem !important; line-height: 1.2 !important; color: #fff !important; margin: 0 auto 12px !important; } /* acento decorativo: filete branco curto sob o título */ .fespsp-newsletter-cta__title::after { content: ""; display: block; width: 56px; height: 3px; margin: 16px auto 0; background: rgba(255, 255, 255, 0.55); border-radius: 2px; } .fespsp-newsletter-cta__subtitle { font-family: "Open Sans", sans-serif !important; font-size: 1.05rem !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.9) !important; max-width: 32rem; margin: 0 auto 28px !important; } /* Form — sobrepõe as regras globais .fespsp-form--inline (maior especificidade que aquelas, então vence mesmo com !important). Desktop: input + botão dentro de UMA pílula branca (o
é a pílula; o botão escuro fica embutido à direita, com 5px de respiro). */ .fespsp-newsletter-cta .fespsp-form, .fespsp-newsletter-cta .fespsp-form--inline { display: block !important; max-width: 540px; width: 100%; margin: 0 auto !important; } .fespsp-newsletter-cta .fespsp-form--inline > form { display: flex; align-items: stretch; gap: 0; background: #fff; border-radius: 999px; padding: 5px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); } .fespsp-newsletter-cta .fespsp-form--inline > form:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6), 0 8px 24px rgba(0, 0, 0, 0.16); } .fespsp-newsletter-cta .fespsp-form__fields { display: block; flex: 1 1 auto; min-width: 0; margin: 0; } .fespsp-newsletter-cta .fespsp-field { flex: 1; margin: 0; flex-direction: column; } .fespsp-newsletter-cta .fespsp-field__input { width: 100% !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; padding: 12px 32px !important; font-family: "Open Sans", sans-serif !important; font-size: 1rem !important; color: #333 !important; box-shadow: none !important; } .fespsp-newsletter-cta .fespsp-field__input::placeholder { color: #8a8d91; } .fespsp-newsletter-cta .fespsp-field__input:focus { outline: none; box-shadow: none !important; } .fespsp-newsletter-cta .fespsp-form__actions { display: block !important; flex: 0 0 auto; margin: 0 !important; } .fespsp-newsletter-cta .fespsp-form__submit { background: #111 !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 12px 30px !important; font-family: Montserrat, sans-serif !important; font-weight: 600 !important; font-size: 0.95rem !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; cursor: pointer; transition: background 0.18s ease; } .fespsp-newsletter-cta .fespsp-form__submit:hover { background: #bc2f2c !important; } /* Mobile: desfaz a pílula única — input e botão empilhados em largura total */ @media (max-width: 760px) { .fespsp-newsletter-cta__title { font-size: 1.6rem !important; } .fespsp-newsletter-cta .fespsp-form--inline > form { background: transparent; padding: 0; box-shadow: none; flex-wrap: wrap; gap: 12px; } .fespsp-newsletter-cta .fespsp-form--inline > form:focus-within { box-shadow: none; } .fespsp-newsletter-cta .fespsp-form__fields { flex: 1 1 100%; } .fespsp-newsletter-cta .fespsp-field__input { background: #fff !important; padding: 14px 20px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); } .fespsp-newsletter-cta .fespsp-form__actions { flex: 1 1 100%; } .fespsp-newsletter-cta .fespsp-form__submit { width: 100%; padding: 14px 30px !important; } } /* Acontece — grid 3 colunas com cards estilo Nicepage: bg grey-5, image 198px, title bold 14px Open Sans, text 14px, botão "Ler mais" pequeno vermelho 8px padding. */ .fespsp-acontece .wp-block-post-template { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 22px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Card do export (u-repeater-item): 365 de largura, padding de 30 em volta de tudo — inclusive da imagem, que NÃO é full-bleed —, e min-height de 459 para as três colunas terminarem juntas mesmo com título de uma ou duas linhas. */ .fespsp-acontece .wp-block-post { background: #f2f2f2; display: flex; flex-direction: column; padding: 30px; margin: 0; min-height: 459px; box-sizing: border-box; } .fespsp-acontece .wp-block-post-featured-image { margin: 0; display: block; } .fespsp-acontece .wp-block-post-featured-image img { width: 100%; height: 198px; object-fit: cover; display: block; } .fespsp-acontece .wp-block-post-title { font-family: Montserrat, sans-serif !important; font-weight: 700 !important; font-size: 1.125rem !important; color: #111 !important; line-height: 1.2 !important; padding: 0 !important; margin: 17px 0 0 !important; } .fespsp-acontece .wp-block-post-title a { color: #111 !important; text-decoration: none !important; } .fespsp-acontece .wp-block-post-title a:hover { color: #bc2f2c !important; } .fespsp-acontece .wp-block-post-excerpt { display: flex; flex-direction: column; flex: 1; padding: 0 !important; color: #111 !important; font-family: "Open Sans", sans-serif !important; font-size: 1rem !important; line-height: 1.6 !important; margin: 11px 0 0 !important; } /* Duas linhas e para: no export o resumo tem 51px (2 × 25,6) em todos os cards, e é o que faz as três colunas terminarem no mesmo lugar com texto real, que varia. */ .fespsp-acontece .wp-block-post-excerpt__excerpt { margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Com `showMoreOnNewLine` o core envolve o link num

, e é ESSE parágrafo o filho flex do resumo — o `margin-top: auto` posto no não empurrava nada. */ .fespsp-acontece .wp-block-post-excerpt__more-text { margin: auto 0 0 !important; } /* "Ler mais" — botão contornado cinza do export (u-btn-2). O auto acima no lugar dos 47px fixos do Nicepage: com título de duas ou três linhas os 47 empurrariam o botão para fora do card, e o auto o mantém rente ao fundo nas três colunas. */ .fespsp-acontece .wp-block-post-excerpt__more-link { display: inline-block !important; margin: 0 !important; padding: 10px 30px !important; background: transparent !important; color: #404040 !important; border-radius: 0 !important; border: 1px solid #404040 !important; font-family: "Open Sans", sans-serif !important; font-weight: 400 !important; font-size: 1rem !important; text-transform: none !important; text-decoration: none !important; letter-spacing: normal !important; line-height: 1.4 !important; } .fespsp-acontece .wp-block-post-excerpt__more-link:hover { background: #bc2f2c !important; border-color: #bc2f2c !important; color: #fff !important; } /* `!important` também aqui: a regra de três colunas acima já é !important (precisa vencer o layout do core/query), e sem isso estas empatavam em especificidade e perdiam — a grade ficava em três colunas até em 390px, estourando a viewport. */ @media (max-width: 980px) { /* Duas colunas enquanto couberem, uma quando não couberem — e não um segundo ponto de corte para dizer "agora uma" (FB6). Com container de 980 e 720 dá duas, como antes; com 510 e 460 dá uma, como o antigo corte em 575px dava. O `min()` evita que um container mais estreito que o mínimo estoure. */ .fespsp-acontece .wp-block-post-template { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)) !important; } .fespsp-acontece__header { flex-wrap: wrap !important; gap: 16px; } } /* Este bloco era um `max-width: 575px` só, herdado do Bootstrap do Nicepage (FB6). O que ele fazia hoje é feito sem ponto de corte: a coluna única saiu do `auto-fit` da grade acima, e o formulário deixou de travar a largura. Sobrou o que é mesmo decisão de smartphone. */ @media (max-width: 460px) { .fespsp-acontece .wp-block-post { min-height: 0; padding: 20px; } } @media (max-width: 460px) { /* No smartphone o encolhimento não basta: empilha de vez. */ .fespsp-newsletter-acontece .fespsp-form--inline .fespsp-form__fields, .fespsp-newsletter-acontece .fespsp-form--inline .fespsp-field { flex: 1 1 100%; flex-wrap: wrap; } .fespsp-newsletter-acontece .fespsp-form--inline .fespsp-field__input { width: 100%; } } /* ============================================================= "A HISTÓRIA CONTADA POR QUEM VIVE" — painel claro + vídeo sobreposto. Replica .u-section-5 do Nicepage: painel #f2f2f2 de 796×495 encostado à esquerda do sheet de 1140, vídeo de 570×319 encostado à direita e subindo por cima dele, texto dentro do painel a 80px da borda e 79px do topo. Mesma família da variante overlap do fespsp/feature-split, e ainda assim CSS de seção e não bloco: aqui o conteúdo é core (heading, parágrafo, core/embed), e o que a faixa acrescenta é posição — como o .fespsp-hero. Abaixo de 992px empilha: vídeo em cima, painel embaixo. ============================================================= */ .fespsp-historia { background: #fff; } .fespsp-historia__inner { position: relative; width: 1140px; max-width: 100%; height: 715px; margin: 0 auto; box-sizing: border-box; } /* Seletor descendente, e não a classe sozinha: no canvas do editor o Gutenberg declara `position: relative` em `.block-editor-block-list__block`, que empata em especificidade com uma classe só e vence por vir depois. Com 0,2,0 a composição é a mesma no editor e no site — que é o ponto de a seção ser blocos core. */ .fespsp-historia__inner .fespsp-historia__panel { position: absolute; left: 0; top: 110px; width: 796px; max-width: 100%; min-height: 495px; box-sizing: border-box; padding: 79px 294px 40px 80px; background: #f2f2f2; } .fespsp-historia__inner .fespsp-historia__video { position: absolute; right: 0; top: 198px; width: 570px; max-width: 100%; margin: 0; } .fespsp-historia__video .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; background: #000; } .fespsp-historia__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .fespsp-historia__title { font-family: Montserrat, sans-serif; font-size: 1.875rem; font-weight: 700; color: #1a1a1a; line-height: 1.2; margin: 0; } .fespsp-historia__body { font-family: "Open Sans", sans-serif; font-size: 1.125rem; line-height: 1.6; color: #1a1a1a; } /* `:root` só para a margem vertical — ver a nota em `.fespsp-mosaico`. */ :root .fespsp-historia__body { margin-top: 19px; } /* CTA em link com seta, como o .u-btn-1 do Nicepage. A seta é máscara CSS e não SVG no markup: o parágrafo é core/paragraph e recebe só um . */ .fespsp-historia__cta { font-family: Montserrat, sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.4; } /* `:root` só para a margem vertical — ver a nota em `.fespsp-mosaico`. */ :root .fespsp-historia__cta { margin-top: 18px; } .fespsp-historia__cta a { display: inline-flex; align-items: center; gap: 14px; color: #111; text-decoration: none; } .fespsp-historia__cta a::after { content: ""; width: 22px; height: 22px; flex: none; background-color: currentcolor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain; } .fespsp-historia__cta a:hover { text-decoration: underline; } @media (max-width: 980px) { .fespsp-historia__inner { height: auto; display: flex; flex-direction: column; } .fespsp-historia__inner .fespsp-historia__panel { position: static; width: 100%; padding: 32px 24px; } .fespsp-historia__inner .fespsp-historia__video { position: static; width: 100%; order: -1; } } /* ============================================================= BOTÕES — o botão default (tipografia, cor, padding e os estados :hover / :focus / :focus-visible / :active) vive em element.button no theme.json (WP 7.0, pseudo-elementos nativos = fonte única, sem CSS ad-hoc). Aqui ficam só as VARIAÇÕES de estilo (outline, pill). ============================================================= */ .wp-block-button.is-style-outline .wp-block-button__link { background: transparent !important; color: #bc2f2c; border: 1px solid #bc2f2c; } .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #bc2f2c !important; color: #fff; } /* Botões round (telefone/whatsapp do footer) */ .wp-block-button.is-style-pill .wp-block-button__link { border-radius: 50px; padding: 11px 25px 12px 23px; } /* ============================================================= FOOTER — bg grey-80 (#333333), valores extraídos do Nicepage original: padding 0 (sheet interno tem margem), min-height 740px, base 16px ============================================================= */ .fespsp-footer { background: #333; color: #fff; padding: 0; font-size: 16px; font-family: "Open Sans", sans-serif; line-height: 1.55; min-height: 740px; } /* Wrapper de conteúdo interno do footer — sheet 1140 centralizado */ .fespsp-footer > .wp-block-columns { width: 1140px !important; max-width: 100% !important; margin: 0 auto !important; padding: 43px 0 58px; } .fespsp-footer, .fespsp-footer p, .fespsp-footer li, .fespsp-footer h1, .fespsp-footer h2, .fespsp-footer h3, .fespsp-footer h4, .fespsp-footer h5, .fespsp-footer h6 { color: #fff; } .fespsp-footer a { color: #fff; text-decoration: none; } .fespsp-footer a:hover { color: #bc2f2c; } /* Logo branco do FESPSP — 253px exato (medido via Playwright) */ .fespsp-footer .wp-block-image.fespsp-footer__logo, .fespsp-footer .wp-block-image.fespsp-footer__logo img, .fespsp-footer__logo, .fespsp-footer__logo img { max-width: 253px !important; width: 100%; height: auto; margin: 30px 0 20px !important; display: block; } /* Endereço — original: Roboto 12px, line-height ~1.6 (height 38.4 com 2 linhas) */ .fespsp-footer p { font-family: Roboto, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.6; margin: 20px 0 0; max-width: 405px; } /* Colunas de links — original computa Open Sans (apesar da classe u-heading-font, o seletor .u-text-4 override pra Open Sans). Font 12px peso 400. = peso 800 igual ao do original. */ .fespsp-footer__col { font-family: "Open Sans", sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #fff !important; margin: 0 0 16px !important; } .fespsp-footer__col strong { font-weight: 800 !important; font-size: 12px; color: #fff; display: inline-block; margin-bottom: 0; } .fespsp-footer__col a { color: #fff; text-decoration: none; } .fespsp-footer__col a:hover { color: #bc2f2c; } /* Grupos de links do rodapé como blocos core (FI47): o título é um core/heading e a lista um core/list. Sem marcador e sem recuo — é coluna de navegação, não enumeração — e com a mesma tipografia compacta que o `wp:html` anterior tinha. */ /* A classe, e não o elemento: os títulos do rodapé são h2 desde o FI67 (nível é posição no documento, não tamanho) e o tamanho vive aqui. Continua vencendo a regra do SIGA-NOS abaixo porque é mais específica que ela e usa !important — os títulos dos grupos sairiam em caixa alta, que não é o do export. */ .fespsp-footer .wp-block-heading.fespsp-footer__col-title { font-family: "Open Sans", sans-serif !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.6 !important; color: #fff !important; text-transform: none !important; letter-spacing: normal !important; margin: 0 0 2px !important; } .fespsp-footer__col-list { list-style: none !important; margin: 0 0 16px !important; padding: 0 !important; font-family: "Open Sans", sans-serif !important; font-size: 12px !important; line-height: 1.6 !important; color: #fff !important; } .fespsp-footer__col-list li { margin: 0; } .fespsp-footer__col-list a { color: #fff; text-decoration: none; } .fespsp-footer__col-list a:hover { color: #bc2f2c; } /* Títulos de coluna do rodapé — caixa alta com espaçamento. */ .fespsp-footer .fespsp-footer__col-title, .fespsp-footer .fespsp-footer__siga { text-transform: uppercase !important; letter-spacing: 0.05em; font-size: 0.8125rem !important; /* 13px */ margin: 18px 0 8px !important; } /* Botões pill outline branco (telefone + whatsapp). Original Nicepage: Open Sans 14px 700, letter-spacing 1px, color #f2f2f2, padding 11px 25px 12px 23px, border 2px solid #f2f2f2, uppercase, radius 50px */ .fespsp-footer .wp-block-buttons { gap: 12px !important; margin: 23px 0 0 !important; flex-wrap: wrap; } .fespsp-footer .wp-block-button.is-style-outline .wp-block-button__link, .fespsp-footer .fespsp-btn-pill .wp-block-button__link { background: transparent !important; color: #f2f2f2 !important; border: 2px solid #f2f2f2 !important; border-radius: 50px !important; padding: 11px 25px 12px 23px !important; font-family: "Open Sans", sans-serif !important; font-weight: 700 !important; font-size: 14px !important; line-height: 1.45 !important; letter-spacing: 1px !important; text-transform: uppercase !important; display: inline-flex !important; align-items: center !important; gap: 8px; } .fespsp-footer .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #bc2f2c !important; border-color: #bc2f2c !important; color: #fff !important; } /* Ícone do WhatsApp dentro do botão (SVG inline via mask) */ .fespsp-whats-icon { display: inline-block; width: 18px; height: 18px; background-color: #fff; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } /* Ícones sociais — SVGs próprios do Nicepage (substituem wp:social-links). Cada link é um quadrado com o SVG completo (círculo vermelho + ícone branco). */ .fespsp-footer__social { display: flex; gap: 10px; margin: 10px 0 28px; } .fespsp-footer__social a { display: inline-block; width: 36px; height: 36px; transition: opacity 0.15s ease; } .fespsp-footer__social a:hover { opacity: 0.82; } .fespsp-footer__social svg { display: block; width: 100%; height: 100%; } /* SIGA-NOS — original: Roboto 16px 700 (heading font), sem letter-spacing nem text-transform (texto já é "SIGA-NOS" maiúsculo no HTML) */ .fespsp-footer .wp-block-heading.fespsp-footer__siga { font-family: Roboto, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: normal !important; color: #fff !important; margin: 30px 0 12px !important; display: inline-block !important; width: auto !important; } /* QR + e-MEC — layout horizontal igual Nicepage: QR Code à esquerda, e-MEC (logo em cima + texto embaixo) à direita */ .fespsp-emec { display: flex; flex-direction: row; gap: 18px; margin-top: 30px; align-items: flex-start; } .fespsp-emec__qr { width: 160px; height: 160px; background: #fff; padding: 5px; flex-shrink: 0; } .fespsp-emec__qr img { width: 100%; height: 100%; display: block; } .fespsp-emec__text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 220px; padding-top: 10px; } .fespsp-emec__text img { max-width: 90px; height: auto; } .fespsp-emec__text p { font-size: 0.85rem !important; line-height: 1.4; margin: 0 !important; } /* ============================================================= FOOTER — responsivo (Bloco H/H13) No canon md (≤760) as colunas do footer institucional já empilham (core), mas os blocos que ficam à esquerda no desktop precisam centralizar: logo, endereço, botões (telefone/whats), ícones sociais e o bloco QR + e-MEC. (No microsite Projetos o footer é um override mínimo — só o crédito centralizado —, então estas regras servem o footer institucional do site principal, que herda o mesmo DS.) ============================================================= */ @media (max-width: 760px) { .fespsp-footer > .wp-block-columns > .wp-block-column, .fespsp-footer .wp-block-columns .wp-block-column { text-align: center; } .fespsp-footer .wp-block-buttons, .fespsp-footer__social { justify-content: center; } .fespsp-footer__logo img, .fespsp-footer .wp-block-site-logo img { margin-left: auto; margin-right: auto; } /* QR + e-MEC lado a lado centralizados; o endereço/parágrafo perde o max-width que o prendia à esquerda. */ .fespsp-emec { justify-content: center; } .fespsp-footer p { max-width: none; } } /* ============================================================= ACABAMENTO MOBILE — o que o empilhamento automático não resolve (FI73). O portão de estouro horizontal já passava: nada aqui é largura demais. São as três coisas que sobram depois que a coluna única se forma — texto encostado na borda, alvo de toque pequeno demais para o dedo, e bloco de duas colunas que não sabe virar uma. ============================================================= */ @media (max-width: 760px) { /* A faixa "Acontece na FESPSP" não tem respiro lateral próprio: ela nasce com 1140px e `max-width:100%`, então em 390px o título, o campo e o botão encostam nos dois lados da tela. As outras faixas herdam o padding global do tema; esta é filha direta do post-content e não herda nada. */ .fespsp-newsletter-acontece { padding-left: 20px; padding-right: 20px; box-sizing: border-box; } /* O corpo da página institucional tinha o mesmo problema, e por um motivo que só aparece medindo: o layout `constrained` do WordPress dá `max-width: 1140px` mais margem automática, e abaixo de 1140px não sobra margem nenhuma. O tema não declara padding raiz, então em 390px TODO texto — títulos de faixa, linha de apoio, itens de acordeão, cards de equipe — encostava nas duas bordas, nas cinco páginas redesenhadas. Uma regra aqui, e não cinco correções de página. As faixas full-bleed continuam sangrando sozinhas: o `calc(50% - 50vw)` que elas já usam mede a partir da caixa de conteúdo, então ele encolhe junto e devolve exatamente os 20px de volta. */ .fespsp-page-body .wp-block-post-content { padding-left: 20px; padding-right: 20px; } /* E o mesmo um nível abaixo: uma faixa full-bleed que é ela própria `constrained` (a de contato do Espaço Cultural, por exemplo) repete o problema para o conteúdo dela. Vinte pixels em todas, inclusive nas que já tinham trinta — no celular a sarjeta constante vale mais que o valor original de cada faixa. */ .fespsp-page-body .wp-block-post-content > .alignfull.is-layout-constrained { padding-left: 20px; padding-right: 20px; } /* QR e texto do e-MEC lado a lado não cabem em 390px: o QR de 160px encosta na borda esquerda e o texto sai pela direita. Empilhados e centralizados, como o resto do rodapé já está. Empilhado, ele também passa a encostar no primeiro título de coluna ("A FESPSP"), que tem `margin-top: 0`: no desktop a folga vem da coluna ao lado, aqui tem de sair do próprio e-MEC. */ .fespsp-emec { flex-direction: column; align-items: center; padding-bottom: 34px; text-align: center; } .fespsp-emec__text { align-items: center; } /* Alvo de toque de 44px — a medida que a mão pede, não a que o ícone tem. O ícone continua do tamanho desenhado; quem cresce é a área clicável. */ .fespsp-main-nav .wp-block-navigation__responsive-container-open, .fespsp-main-nav .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .fespsp-footer__social a { width: 44px; height: 44px; } /* `!important` casando o `min-height: 0 !important` da regra de desktop, que existe para desfazer o mínimo que o WordPress põe no `wp-element-button` e sem o qual a pílula não teria os 33px do export. Igualar a especificidade não bastaria: uma declaração normal nunca vence uma `!important`, por mais específica que seja. */ .fespsp-topbar a.wp-block-button__link.wp-element-button { min-height: 44px !important; display: inline-flex; align-items: center; } /* `box-sizing: border-box` junto: estes botões são `content-box`, então um `min-height: 44px` cru soma o padding por cima e entrega 64px — alvo maior que o necessário e botão mais alto do que foi desenhado. Com border-box, 44 é o total. */ .fespsp-newsletter-acontece .fespsp-form__submit, .fespsp-newsletter-cta .fespsp-form__submit, .fespsp-page-body .wp-block-button__link, .fespsp-values__cta { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; } .fespsp-pager__seta { width: 44px; height: 44px; } /* As duas chamadas de texto do corpo da Home ("Conheça a FESPSP Projetos", "Conheça nossa história") têm 22px de altura. São CTA principal de faixa, não link no meio de uma frase — a exceção de link em bloco de texto não vale para elas. Ganham altura pelo padding, sem mudar a tipografia. */ .fespsp-historia__cta a, .fespsp-feature__cta { display: inline-flex; align-items: center; min-height: 44px; } } /* Os links das colunas do rodapé ficam com a altura da linha, e é deliberado: são vinte e quatro, e 44px em cada acrescentaria mais de 600px de rodapé no celular. São lista de navegação em bloco de texto, onde a própria WCAG abre exceção (2.5.8, "inline"). Se um dia virarem lista com separador visível, revisar. */ /* ============================================================= FORMULÁRIOS (Contato, Newsletter, Ouvidoria, Trabalhe Conosco) Padrão Nicepage: input sem borda, radius 3px, fundo transparente ============================================================= */ .fespsp-form { max-width: 720px; } .fespsp-form .fespsp-form__fields { display: grid; row-gap: 20px; } .fespsp-form__honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .fespsp-form__actions { margin-top: 20px; } .fespsp-form__submit { background: #bc2f2c; color: #fff; border: 0; border-radius: 0; padding: 10px 30px; font-family: Montserrat, sans-serif; font-weight: 600; font-size: 1rem; text-transform: none; letter-spacing: 1px; cursor: pointer; } .fespsp-form__submit:hover { background: #a92a28; } .fespsp-form__flash { padding: 14px 16px; margin-bottom: 20px; border-radius: 3px; font-family: Montserrat, sans-serif; } .fespsp-form__flash--success { background: #e6f7e6; color: #1f6e1f; } .fespsp-form__flash--error { background: #fdecec; color: #8a2222; } /* Campos */ .fespsp-field { display: flex; flex-direction: column; } .fespsp-field__label { font-family: Montserrat, sans-serif; font-weight: 500; font-size: 0.875rem; color: #53565a; margin-bottom: 8px; } .fespsp-field__required { color: #bc2f2c; margin-left: 3px; } .fespsp-field__input, .fespsp-field__textarea, .fespsp-field__select { border: 1px solid #d0d3d4; background: transparent; border-radius: 3px; padding: 10px 12px; font: inherit; color: #111; width: 100%; /* border-box: sem isso, width:100% + padding(24) + borda(2) = 26px além do container → overflow horizontal da página em telas estreitas (Bloco H). */ box-sizing: border-box; } .fespsp-field__input:focus, .fespsp-field__textarea:focus, .fespsp-field__select:focus { outline: none; border-color: #bc2f2c; box-shadow: 0 0 0 3px rgba(188, 47, 44, 0.15); } .fespsp-field__textarea { min-height: 130px; resize: vertical; } .fespsp-field__help { font-size: 0.85rem; color: #4d4d4d; margin-top: 4px; } /* ============================================================= TEAM GRID — cards para "Conselho Superior", "Diretoria", etc. ============================================================= */ .fespsp-team-grid { gap: 24px !important; margin: 24px 0 !important; } .fespsp-team-grid .wp-block-column { padding: 0; } .fespsp-team-card { background: #f2f2f2; padding: 24px 22px; height: 100%; box-sizing: border-box; border-left: 3px solid #bc2f2c; } .fespsp-team-card__name { font-family: Roboto, sans-serif !important; font-size: 1rem !important; font-weight: 700 !important; color: #111 !important; margin: 0 0 10px !important; line-height: 1.3 !important; } .fespsp-team-card__bio { font-family: "Open Sans", sans-serif !important; font-size: 13px !important; line-height: 1.55 !important; color: #53565a !important; margin: 0 !important; } /* ============================================================= TEAM GRID (bloco custom) — wrapper do bloco fespsp/team-grid Mesmas regras visuais do .fespsp-team-grid antigo, mas grid CSS próprio. ============================================================= */ .fespsp-team-grid-block { width: 1140px; max-width: 100%; margin: 0 auto; box-sizing: border-box; } /* `:root` só para a margem vertical — ver a nota em `.fespsp-mosaico`. */ :root .fespsp-team-grid-block { margin-top: 24px; margin-bottom: 24px; } .fespsp-team-grid-block__grid { display: grid; grid-template-columns: repeat(var(--fespsp-team-cols, 3), 1fr); gap: 24px; } /* ------------------------------------------------------------- Variante `portrait` — a faixa "Passaram pela FESPSP" do export: retrato circular de 213px centralizado, nome e função embaixo, sem caixa nem filete. Medidas do Nicepage (u-section-3): avatar 213, nome Montserrat 16/19,2 a 20px do retrato, função Roboto 14/22,4 logo abaixo, colunas com 70px de gutter. ------------------------------------------------------------- */ .fespsp-team-grid-block--portrait .fespsp-team-grid-block__grid { gap: 70px; } .fespsp-team-grid-block--portrait .fespsp-team-card { background: none; border: 0; padding: 0; text-align: center; } /* `aspect-ratio` e não `height: 213px`: o `max-width: 100%` encolhe a largura numa coluna estreita, e uma altura fixa transformaria o retrato em elipse (FB8). Onde há espaço, 213×213 continua sendo 213×213. */ .fespsp-team-grid-block--portrait .fespsp-team-card__photo { width: 213px; height: auto; aspect-ratio: 1; max-width: 100%; margin: 0 auto 20px; background: #d3dee7; } /* Retrato ainda sem foto: o círculo continua ali para a linha não desabar. O export mostra a silhueta padrão do Nicepage no mesmo lugar. */ .fespsp-team-grid-block--portrait .fespsp-team-card:not(:has(.fespsp-team-card__photo))::before { content: ""; display: block; width: 213px; height: auto; aspect-ratio: 1; max-width: 100%; margin: 0 auto 20px; border-radius: 50%; background: #d3dee7; } .fespsp-team-grid-block--portrait .fespsp-team-card__name { font-family: Montserrat, sans-serif !important; font-size: 1rem !important; line-height: 1.2 !important; margin: 0 !important; } .fespsp-team-grid-block--portrait .fespsp-team-card__role { font-family: Roboto, sans-serif; font-size: 0.875rem; line-height: 1.6; color: #111; margin-top: 6px; } @media (max-width: 980px) { .fespsp-team-grid-block__grid { grid-template-columns: 1fr; } .fespsp-team-grid-block--portrait .fespsp-team-grid-block__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } } @media (max-width: 460px) { /* Duas colunas enquanto o nome couber em duas linhas, uma quando não couber (FB8). Em coluna única, quatro nomes sem foto eram 1 105px — quatro silhuetas cinzas iguais, uma embaixo da outra, por mais de uma tela de rolagem para ler quatro nomes. Os 140px são o mínimo medido em que "Fernando Henrique Cardoso" ainda cabe em duas linhas: abaixo disso o `auto-fit` volta sozinho para uma coluna, o que acontece em telas de 320px. */ .fespsp-team-grid-block--portrait .fespsp-team-grid-block__grid { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 24px; } /* O retrato de 213px é medida do export para uma coluna de 250px. Numa de 160 ele já vinha clamped pelo `max-width`; o teto explícito é para o caso de uma coluna só, em telas de 320px, onde sem ele voltam os quatro círculos grandes. */ .fespsp-team-grid-block--portrait .fespsp-team-card__photo, .fespsp-team-grid-block--portrait .fespsp-team-card:not(:has(.fespsp-team-card__photo))::before { width: 160px; } /* 14px e não 16: em 360px a coluna tem 148px, e a 16px "Fernando Henrique Cardoso" quebrava em três linhas — medido. A 14px cabe em duas, que é o limite que a tarefa pede para o nome continuar legível. */ .fespsp-team-grid-block--portrait .fespsp-team-card__name { font-size: 0.875rem !important; } } /* ============================================================= TÍTULO E LINHA DE APOIO DE SEÇÃO NO PADRÃO DO EXPORT — Montserrat 30/33 em negrito, sem o marcador vermelho do .fespsp-section-title, que é a variante editorial deste tema. As páginas redesenhadas usam esta. ============================================================= */ .fespsp-band-title { font-family: Montserrat, sans-serif !important; font-size: 1.875rem !important; font-weight: 700 !important; color: #111 !important; line-height: 1.1 !important; /* `auto` nas laterais e não 0: o layout constrained do WordPress centraliza os filhos com margem automática, e um `margin: … 0 …` !important a anula — o título ia para a borda esquerda enquanto o resto da página ficava centrado. */ margin: 64px auto 0 !important; } .fespsp-section-lead { font-family: Roboto, sans-serif; font-size: 1rem; line-height: 1.6; color: #111; max-width: 980px; margin: 0 auto; } /* `:root` só para a margem vertical — ver a nota em `.fespsp-mosaico`. */ :root .fespsp-section-lead { margin-top: 20px; } /* ============================================================= ACORDEÃO (core/accordion, WP 7.0) — o "Corpo diretivo" do export: linhas de 93px com filete embaixo, título Montserrat 20 em negrito e chevron à direita que gira ao abrir. O core entrega comportamento e nenhum desenho. ============================================================= */ /* `:root` só para a margem vertical — ver a nota em `.fespsp-mosaico`. */ :root .wp-block-accordion { margin-top: 34px; } .wp-block-accordion-item { border-bottom: 1px solid #e5e5e5; } .wp-block-accordion-heading { margin: 0 !important; } .wp-block-accordion-heading__toggle { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 30px; border: 0; background: none; color: #111; font-family: Montserrat, sans-serif; font-size: 1.25rem; font-weight: 700; line-height: 1.2; text-align: left; cursor: pointer; } /* O core serializa o ícone como um "+" de texto num . Aqui ele vira o chevron do export: o texto some no font-size 0 e a máscara desenha a seta, que gira quando o item abre. */ .wp-block-accordion-heading__toggle-icon { width: 20px; height: 20px; flex: none; font-size: 0; background-color: currentcolor; transition: transform 0.2s ease; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; } .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle { color: #53565a; } .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon { transform: rotate(180deg); } .wp-block-accordion-panel { padding: 0 30px 30px; } .wp-block-accordion-panel .wp-block-list { margin: 0; padding-left: 20px; font-family: "Open Sans", sans-serif; font-size: 1.125rem; line-height: 1.8; color: #111; } /* ------------------------------------------------------------- VARIANTE preenchida — as listas de "Informações ao usuário" e "Produtos e serviços" do export de Biblioteca e CEDOC: cada linha é uma barra, cinza quando fechada e vermelha de marca quando aberta, com 15px entre elas. ------------------------------------------------------------- */ .fespsp-accordion--filled .wp-block-accordion-item { border: 0; margin-bottom: 15px; } .fespsp-accordion--filled .wp-block-accordion-heading__toggle { padding: 15px 20px; background: #f5f7fa; color: #53565a; font-weight: 600; } .fespsp-accordion--filled .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle { background: #bc2f2c; color: #fff; } .fespsp-accordion--filled .wp-block-accordion-panel { padding: 15px 30px 25px; } .fespsp-accordion--filled .wp-block-accordion-panel p { font-family: Roboto, sans-serif; font-size: 1rem; line-height: 1.6; color: #111; margin: 0 0 12px; } .fespsp-accordion--filled .wp-block-accordion-panel p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------- WP 7.1 — o painel fechado ainda ocupa o próprio padding. Até o 7.0 o core fechava o painel com `display: none`, e ele saía do layout inteiro. O 7.1 passou a fechar com `hidden="until-found"` (para o localizar do navegador achar texto dentro de painel fechado), que o UA resolve como `content-visibility: hidden`: esconde o CONTEÚDO, mas o painel continua sendo uma caixa — e o padding vertical dele continua ocupando altura. Sobrava uma faixa branca embaixo de cada linha fechada: 30px na variante base e 40px na `--filled`, exatamente os paddings declarados acima. Medido em 26 alvos da regressão do institucional (FI99). Zera só o eixo vertical: o horizontal não entra na altura, e mexer nele faria o conteúdo pular ao abrir. E vem DEPOIS da `--filled` de propósito — as duas têm especificidade 0,2,0, então quem decide é a ordem de fonte. ------------------------------------------------------------- */ .wp-block-accordion-panel[hidden] { padding-block: 0; } /* ============================================================= POST INDIVIDUAL — o topo do export `Postagens.html`: categoria em pílula de marca, título à esquerda, data e a imagem destacada no fluxo com legenda. ============================================================= */ .fespsp-post__cat { margin: 0 auto 22px; } .fespsp-post__cat a { display: inline-block; padding: 7px 16px; background: #bc2f2c; color: #fff; font-family: Montserrat, sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; } .fespsp-post__cat a:hover { background: #a92a28; color: #fff; } .fespsp-post__title { font-family: Montserrat, sans-serif !important; font-size: 2.25rem !important; font-weight: 700 !important; line-height: 1.2 !important; color: #111 !important; margin: 0 auto 18px !important; text-align: left !important; } .fespsp-post__date { font-family: Roboto, sans-serif; font-size: 0.875rem; color: #53565a; margin: 0 auto 30px; } .fespsp-post__cover { margin: 0 auto 30px; } .fespsp-post__cover img { width: 100%; height: auto; display: block; } .fespsp-post__cover figcaption { font-family: Roboto, sans-serif; font-size: 0.875rem; color: #53565a; text-align: center; margin-top: 12px; } /* ============================================================= FAIXA DE ABERTURA — parágrafo de apoio sobre fundo claro, logo abaixo do hero (o `block-10` da Secretaria Acadêmica no export). Sem título: é a linha que explica o setor antes de a página começar. ============================================================= */ .fespsp-intro-band { padding: 60px 30px; } .fespsp-intro-band p { font-family: Roboto, sans-serif; font-size: 1rem; line-height: 1.6; color: #111; margin: 0; } /* ============================================================= FAIXA DE CONTATO — banda de marca com o e-mail de um lado e o formulário do outro (o `block-13` da Cátedra Celso Furtado no export). ============================================================= */ .fespsp-contato-band { padding: 60px 30px; } .fespsp-contato-band__title { font-family: Montserrat, sans-serif !important; font-size: 1.875rem !important; font-weight: 700 !important; line-height: 1.1 !important; margin: 0 0 18px !important; } .fespsp-contato-band a { color: #fff; } .fespsp-contato-band .fespsp-field__label { color: #fff !important; } /* O asterisco de obrigatório é vermelho de marca e desaparecia sobre a faixa. */ .fespsp-contato-band .fespsp-field__required { color: #fff; } .fespsp-contato-band .fespsp-field__input, .fespsp-contato-band .fespsp-field__textarea { background: transparent !important; border: 1px solid rgb(255 255 255 / 60%) !important; border-radius: 0 !important; color: #fff !important; } .fespsp-contato-band .fespsp-field__input::placeholder, .fespsp-contato-band .fespsp-field__textarea::placeholder { color: rgb(255 255 255 / 70%); } /* Botão claro sobre o vermelho: o submit padrão do tema é vermelho e sumiria. */ .fespsp-contato-band .fespsp-form__submit { background: #fff !important; color: #bc2f2c !important; border: 2px solid #fff !important; border-radius: 0 !important; } .fespsp-contato-band .fespsp-form__submit:hover { background: transparent !important; color: #fff !important; } /* Botão escuro fora de faixa — o "Acesse a página da revista" do export. Medidas do `u-btn-1` de Cátedra Celso Furtado, u-section-5: 14px, 1px de entreletra e 10/30 de padding, o que dá 314×40. Os 12px/0.02em/12-26 daqui antes eram estimados e entregavam 251×43. */ .fespsp-button--dark .wp-block-button__link { background-color: #53565a !important; border-radius: 0 !important; color: #fff !important; font-family: Montserrat, sans-serif !important; font-size: 0.875rem !important; font-weight: 700 !important; letter-spacing: 1px; line-height: 1.4 !important; padding: 10px 30px !important; text-transform: uppercase; } .fespsp-button--dark .wp-block-button__link:hover { background-color: #bc2f2c !important; } /* ============================================================= MEIA FOLHA — a seção do export cujo conteúdo ocupa só a metade ESQUERDA do sheet de 1140px, com a metade direita vazia (Cátedra Celso Furtado, u-section-5: "Cadernos de Economia e Política"). Full-width com o texto esticado nos 1140 é o que denuncia a conversão: no export ele nunca passa dos 510 da célula. Não é o feature-split sem imagem: aqui o conteúdo são blocos core — título, parágrafo e botão que a equipe da FESPSP reescreve no editor sem tocar num bloco custom. Medidas do export: célula 570×413 com 30 de padding e 40 de respiro embaixo; título com 154 de margem à direita — é ela que o quebra em duas linhas —, corpo de 510 a 13 do título e botão a 22 do corpo. ============================================================= */ /* `:root` só para a margem vertical — ver a nota em `.fespsp-mosaico`. O `!important` é pelas laterais: o layout constrained centraliza os filhos com `margin-left/right: auto !important`, e sem isso a meia folha ia parar no meio do sheet em vez de encostar na esquerda. */ :root .fespsp-sheet-half { box-sizing: border-box; width: 570px; max-width: 100%; min-height: 413px; margin: 0 auto 40px 0 !important; padding: 30px; } .fespsp-sheet-half > .fespsp-band-title { line-height: 1.2 !important; margin: 28px 154px 0 0 !important; } .fespsp-sheet-half__body { font-family: "Open Sans", sans-serif; font-size: 1rem; line-height: 1.6; color: #111; } :root .fespsp-sheet-half__body { margin: 13px 0 0; } :root .fespsp-sheet-half > .wp-block-buttons { margin-top: 22px; } /* Empilhado não há metade: a célula vira a largura toda, o padding cai para os 10 do export e a altura mínima da célula perde o sentido. */ @media (max-width: 760px) { :root .fespsp-sheet-half { width: 100%; min-height: 0; padding: 30px 10px; } .fespsp-sheet-half > .fespsp-band-title { margin-right: 0 !important; } } /* Duas colunas com título de um lado e texto do outro (a Tesouraria do export). `:root` só para a margem vertical — ver a nota em `.fespsp-mosaico`. */ :root .fespsp-two-col { margin-top: 34px; } /* A calha. O `theme.json` zera o `blockGap` do tema inteiro, então duas colunas core encostam uma na outra — o que só aparece quando as duas chegam à borda, como no Parcerias do Espaço Cultural, onde o parágrafo passava por baixo do primeiro card. Os 60px deixam a coluna da direita com 540, que é exatamente a largura que o export dá ao bloco de cards (`u-section-7 .u-list-1`). Os dois eixos separados porque abaixo de 781px o core empilha as colunas e o mesmo valor vira calha vertical: 60px de calha lateral é a medida do export, 60px entre duas metades empilhadas é buraco. */ .fespsp-two-col { gap: 34px 60px; } .fespsp-two-col .fespsp-band-title { margin-top: 0 !important; } /* O WordPress zera `margin-block` em todo filho direto de container de layout, e a coluna é um deles — sem isto o parágrafo cola no título e um parágrafo cola no seguinte. `:root` pelo mesmo desempate explicado em `.fespsp-mosaico`. */ :root .fespsp-two-col .wp-block-column > * + * { margin-top: 24px; } /* Uma faixa que traz a margem vertical do editor a traz medida no export, ou seja numa folha de 1140px — os 165px que separam Publicações da faixa acima dela no Espaço Cultural são respiro lá e vão morto em 390. O seletor de atributo alcança só quem tem margem inline; as outras faixas seguem no `:root` acima, intactas. `!important` porque o que se sobrepõe aqui é style inline. */ @media (max-width: 760px) { .fespsp-two-col[style*="margin"] { margin-top: 34px !important; margin-bottom: 34px !important; } } /* ============================================================= CORPO DA PÁGINA INSTITUCIONAL — o wrapper entre o hero e o rodapé. O respiro no topo existe para as páginas de texto corrido; numa página que ABRE com faixa full-bleed (as do export) ele vira uma tira branca entre o hero e a faixa, então some quando o primeiro bloco é uma faixa dessas. ============================================================= */ .fespsp-page-body:has(> .wp-block-post-content > .alignfull:first-child) { padding-top: 0 !important; } /* E o mesmo no fim (FI63): página que FECHA em faixa full-bleed não quer o respiro depois dela — vira a mesma tira branca, agora entre a faixa e o que vem abaixo (a faixa de newsletter, ou o rodapé quando ela é suprimida). O gêmeo desta regra existia só para o topo desde que o wrapper foi escrito. */ .fespsp-page-body:has(> .wp-block-post-content > .alignfull:last-child) { padding-bottom: 0 !important; } /* Faixa full-bleed dentro do conteúdo da página. O `alignfull` do layout constrained só alcança a largura do CONTAINER, e aqui o container é o próprio conteúdo de 1140px — a faixa parava nele. As margens negativas resolvem sem depender das margens automáticas do layout, que uma regra de `p` do tema já anula. */ .fespsp-page-body .wp-block-post-content > .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none; width: auto; } /* ============================================================= MANIFESTO — faixa de destaque com título, texto e botão, centralizada sobre a cor `text` (#53565a). Replica o block-17 do export de Quem Somos. ============================================================= */ .fespsp-manifesto { padding: 142px 30px 130px; text-align: center; } .fespsp-manifesto__title { font-family: Montserrat, sans-serif !important; font-size: 1.875rem !important; font-weight: 700 !important; line-height: 1.1 !important; margin: 0 auto !important; } .fespsp-manifesto p { font-family: Roboto, sans-serif; font-size: 1rem; line-height: 1.6; margin: 26px 0 0; } /* Botão branco com texto grafite — o inverso do botão padrão do tema, que é vermelho e sumiria contra a faixa. */ .fespsp-manifesto .wp-block-buttons { margin-top: 26px; } .fespsp-manifesto__cta .wp-block-button__link { background-color: #fff !important; border: 2px solid #fff !important; border-radius: 0 !important; color: #53565a !important; font-family: Montserrat, sans-serif !important; font-size: 0.75rem !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: 0.02em; padding: 10px 30px !important; text-transform: uppercase; } .fespsp-manifesto__cta .wp-block-button__link:hover { background-color: transparent !important; color: #fff !important; } @media (max-width: 760px) { .fespsp-manifesto { padding: 64px 24px 60px; } } /* ============================================================= FAIXA "ENTRE EM CONTATO" CLARA — o block-15 do export das páginas de área (Espaço Cultural): faixa full-bleed cinza (#f2f2f2) com o título à esquerda, sublinhado por um filete vermelho, e os dados de contato à direita. Medidas do original (u-section-8 de Espaço-Cultural.css): as duas colunas começam 84px abaixo do topo da faixa (50+34 na esquerda, 20+64 na direita); título Montserrat 36/700; filete 120×5. ============================================================= */ .fespsp-contato-claro { padding: 84px 30px 70px; } /* Sem gap e alinhadas pelo topo: no original os dois textos partem da mesma linha, e o `align-items: center` padrão das colunas desencontraria os dois assim que um deles crescesse. */ .fespsp-contato-claro .wp-block-columns { align-items: flex-start; gap: 0; margin: 0; } .fespsp-contato-claro h2 { font-family: Montserrat, sans-serif; font-size: 2.25rem; font-weight: 700; color: #111; line-height: 1.1; margin: 0; } .fespsp-contato-claro h2::after { content: ""; display: block; width: 120px; height: 5px; background: #bc2f2c; margin-top: 13px; } .fespsp-contato-claro p { font-family: Roboto, sans-serif; font-size: 1rem; line-height: 1.6; color: #111; margin: 0; } .fespsp-contato-claro a { color: #bc2f2c; } @media (max-width: 760px) { .fespsp-contato-claro { padding: 48px 24px 44px; } .fespsp-contato-claro .wp-block-columns { gap: 24px; } } /* Foto do team-card (opcional) */ .fespsp-team-card__photo { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; margin-bottom: 14px; background: #ddd; } .fespsp-team-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Cargo (novo no bloco custom) */ .fespsp-team-card__role { font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 700; color: #bc2f2c; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px; } /* Cargo que virou frase — o `render.php` do bloco põe esta classe acima de 60 caracteres. Cor, peso e tamanho ficam: a hierarquia vem deles, não da caixa alta, e é ela que apagava a silhueta das palavras num texto de três a cinco linhas. O `line-height` entra junto porque o padrão foi escolhido para rótulo de uma linha. */ .fespsp-team-card__role--long { text-transform: none; letter-spacing: normal; line-height: 1.5; } /* ============================================================= ACCORDION — core/details com visual Nicepage ============================================================= */ .wp-block-details { background: #f2f2f2; border-left: 3px solid #bc2f2c; margin: 12px 0 !important; padding: 16px 22px; } .wp-block-details > summary { font-family: Roboto, sans-serif; font-weight: 700; font-size: 1rem; color: #111; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; } .wp-block-details > summary::-webkit-details-marker { display: none; } .wp-block-details > summary::after { content: "+"; font-size: 1.5rem; color: #bc2f2c; margin-left: 12px; transition: transform 0.2s ease; } .wp-block-details[open] > summary::after { content: "−"; } .wp-block-details[open] > summary { margin-bottom: 12px; } .wp-block-details p { font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 1.6; color: #53565a; margin: 0 0 10px; } /* ============================================================= PAGE HERO — hero institucional editorial bold Design: dark base + radial red glow + barra vermelha 60×4 + título XL Padrão de design moderno editorial (não centralizado, esquerda dominante, contraste alto com brand accent vermelho) ============================================================= */ .fespsp-page-hero { position: relative; overflow: hidden; /* Explícito porque o `min-height` acima é altura de borda, não de conteúdo: sem isso os 90px de padding somam por fora e a faixa vai a 520px. Antes do FI32 a faixa herdava border-box do `wp-block-group` que o markup cru carregava; o bloco não carrega, então a regra passa a morar aqui. */ box-sizing: border-box; min-height: 340px; padding: 90px 0; background-color: #1a1a1a; background-image: radial-gradient(ellipse at 100% 40%, rgba(188, 47, 44, 0.32) 0%, transparent 55%), linear-gradient(135deg, #1a1a1a 0%, #25292f 60%, #1a1a1a 100%); display: flex; align-items: center; } /* Forma diagonal decorativa vermelha no canto sup-direito */ .fespsp-page-hero::before { content: ""; position: absolute; top: -120px; right: -180px; width: 540px; height: 360px; background: #bc2f2c; transform: rotate(-18deg); opacity: 0.12; pointer-events: none; } /* Padrão de pontos sutis no fundo (textura) */ .fespsp-page-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; -webkit-mask-image: linear-gradient(135deg, transparent 0%, #000 50%, transparent 100%); mask-image: linear-gradient(135deg, transparent 0%, #000 50%, transparent 100%); } .fespsp-page-hero__inner { width: 1140px; max-width: 100%; margin: 0 auto; padding: 0 30px; position: relative; z-index: 2; box-sizing: border-box; } /* Barra vermelha como marker brand antes do título */ .fespsp-page-hero__bar { width: 64px; height: 4px; background: #bc2f2c; margin-bottom: 24px; border-radius: 2px; box-shadow: 0 0 24px rgba(188, 47, 44, 0.5); } /* TÍTULO XL com forte contraste */ .fespsp-page-hero .wp-block-post-title.fespsp-page-hero__title, .fespsp-page-hero__title { font-family: Roboto, sans-serif !important; font-size: clamp(2.25rem, 5.5vw, 4rem) !important; font-weight: 700 !important; color: #fff !important; line-height: 1.05 !important; letter-spacing: -0.02em; margin: 0 !important; text-align: left !important; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4); max-width: 880px; } /* Subtítulo opcional do hero (usado na home do blog) */ .fespsp-page-hero__lead { font-family: "Open Sans", sans-serif !important; font-size: clamp(1rem, 1.4vw, 1.125rem) !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.82) !important; margin: 18px 0 0 !important; max-width: 720px; text-align: left !important; } /* Variantes de fundo do bloco fespsp/page-hero (FI32). Sem token escolhido a faixa fica no dark em degradê acima, que é o padrão. Com um token, ela vira cor chapada — as faixas do export são assim —, e aí o degradê e a textura de pontos saem para a cor não ficar suja. */ .fespsp-page-hero--flat { background-image: none; } .fespsp-page-hero--flat::after { display: none; } /* Na variante chapada o hero é o do export: título centralizado com um filete curto embaixo, e não o título à esquerda com o marcador em cima do padrão. */ .fespsp-page-hero--flat .fespsp-page-hero__inner { display: flex; flex-direction: column; align-items: center; } .fespsp-page-hero--flat .fespsp-page-hero__bar { order: 2; width: 96px; height: 2px; margin: 24px 0 0; background: rgb(255 255 255 / 70%); box-shadow: none; } .fespsp-page-hero--flat .fespsp-page-hero__title, .fespsp-page-hero--flat .fespsp-page-hero__lead { text-align: center !important; } /* Fundo claro (token `card`): o título branco do padrão some, então inverte. */ .fespsp-page-hero--on-light .fespsp-page-hero__title { color: #333 !important; text-shadow: none; } .fespsp-page-hero--on-light .fespsp-page-hero__lead { color: rgb(51 51 51 / 78%) !important; } .fespsp-page-hero--on-light::before { opacity: 0.08; } /* Imagem de fundo: escurece para o título continuar legível sobre qualquer foto. */ .fespsp-page-hero--has-image { background-size: cover; background-position: center; } .fespsp-page-hero--has-image::after { background-image: linear-gradient(90deg, rgb(0 0 0 / 72%) 0%, rgb(0 0 0 / 35%) 100%); background-size: auto; -webkit-mask-image: none; mask-image: none; } /* Mobile: ajustes */ @media (max-width: 760px) { .fespsp-page-hero { min-height: 260px; padding: 60px 0; } .fespsp-page-hero::before { width: 320px; height: 220px; right: -100px; } } /* ============================================================= ACONTECE — barra de busca full-bleed abaixo do hero ============================================================= */ .fespsp-acontece-search { background: #f2f2f2; border-bottom: 1px solid #e5e5e5; padding: 22px 0; } .fespsp-acontece-search__inner { width: 1140px; max-width: 100%; margin: 0 auto; padding: 0 30px; box-sizing: border-box; } .fespsp-acontece-search .wp-block-search { margin: 0; max-width: 720px; } .fespsp-acontece-search .wp-block-search__inside-wrapper { background: #fff; border: 1px solid #d0d3d4; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); } .fespsp-acontece-search .wp-block-search__input { border: 0 !important; background: transparent !important; padding: 12px 16px !important; font-family: "Open Sans", sans-serif !important; font-size: 14px !important; color: #111 !important; flex: 1; } .fespsp-acontece-search .wp-block-search__input:focus { outline: none; box-shadow: none; } .fespsp-acontece-search .wp-block-search__button { background: #bc2f2c !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; padding: 12px 22px !important; font-family: Montserrat, sans-serif !important; font-weight: 700 !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; cursor: pointer; transition: background-color 0.15s ease; } .fespsp-acontece-search .wp-block-search__button:hover { background: #a92a28 !important; } /* ============================================================= STATS ROW — pattern fespsp/stats-row 4 colunas com número grande vermelho + label cinza ============================================================= */ .fespsp-stats { width: 1140px; max-width: 100%; margin: 45px auto; padding: 40px 30px; background: #f2f2f2; box-sizing: border-box; } .fespsp-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .fespsp-stats__cell { text-align: center; } .fespsp-stats__number { font-family: Roboto, sans-serif; font-size: 2.75rem; font-weight: 700; color: #bc2f2c; line-height: 1; margin: 0 0 8px; } .fespsp-stats__label { font-family: "Open Sans", sans-serif; font-size: 14px; color: #53565a; text-transform: uppercase; letter-spacing: 0.05em; } @media (max-width: 760px) { .fespsp-stats__grid { grid-template-columns: repeat(2, 1fr); } } /* Variante "cards" (Projetos "FESPSP em números"): fundo transparente, 3 cards com borda vermelha-clara, ícone no topo e número grande (4.5rem/900) com contador on-scroll (src/stat/view.js atua só nesta variante). O padrão (grey-5, sem ícone/borda) — do "FESPSP em números" do site principal — fica intacto. */ .fespsp-stats--cards { background: transparent; padding: 0; } .fespsp-stats--cards .fespsp-stats__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } .fespsp-stats--cards .fespsp-stats__cell { border: 1px solid rgba(188, 47, 44, 0.25); border-radius: 8px; padding: 40px 24px 34px; display: flex; flex-direction: column; align-items: center; } .fespsp-stats--cards .fespsp-stats__icon { width: 56px; height: 56px; object-fit: contain; margin-bottom: 18px; } .fespsp-stats--cards .fespsp-stats__number { font-size: 4.5rem; font-weight: 900; margin-bottom: 10px; } @media (max-width: 760px) { .fespsp-stats--cards .fespsp-stats__grid { grid-template-columns: 1fr; } .fespsp-stats--cards .fespsp-stats__number { font-size: 3.25rem; } } /* Reveal on-scroll: a linha inteira desliza da esquerda (-200px) + fade em 2s, replicando o customAnimationIn do Nicepage (u-section-2 .u-list-1, translate_x -200px / opacity 0 / duration 2000). A classe .is-revealed é adicionada pelo view.js ao entrar na viewport; desligado em prefers-reduced-motion. `overflow-x: clip` evita barra horizontal durante o deslize. Estado natural = visível (sem JS). */ @media (prefers-reduced-motion: no-preference) { .fespsp-stats--cards { overflow-x: clip; } .fespsp-stats--cards.is-revealed .fespsp-stats__grid { animation: fespsp-stats-in 2000ms ease both; } } @keyframes fespsp-stats-in { from { transform: translateX(-200px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ============================================================= LOGO STRIP — bloco fespsp/logo-strip (faixa de parceiros) Logos numa faixa rolável horizontal, com setas circulares (view.js). Espalha os logos quando cabem; rola quando passam da largura. ============================================================= */ .fespsp-logos { width: 100%; margin: 40px 0 0; display: flex; align-items: center; gap: 12px; } .fespsp-logos__track { display: flex; align-items: center; gap: 24px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .fespsp-logos__track::-webkit-scrollbar { display: none; } /* Cada logo ocupa uma COLUNA de 1/3 da faixa (3 por tela no desktop): as colunas preenchem exatamente a largura, sem sobra à direita → os logos ficam sempre distribuídos/centralizados a cada passo do scroll (o carrossel avança colunas inteiras). O logo, centrado na coluna, tem teto de tamanho (max-width/height) e contain: imagem maior reduz proporcionalmente até a MESMA caixa — nunca corta. */ .fespsp-logos__track .wp-block-image { flex: 0 0 calc((100% - 2 * 24px) / 3); height: 280px; margin: 0; display: flex; align-items: center; justify-content: center; } .fespsp-logos__track .wp-block-image img { max-width: 293px; max-height: 227px; width: auto; height: auto; object-fit: contain; object-position: center; } /* Quando tudo cabe, os logos se distribuem (sem rolagem, setas escondidas via .is-static). */ .fespsp-logos.is-static .fespsp-logos__track { justify-content: space-around; } .fespsp-logos__arrow { flex: 0 0 auto; width: 42px; height: 42px; border: none; border-radius: 50%; background: #e5e5e5; color: #53565a; font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.15s ease; } .fespsp-logos__arrow:hover { background: #d0d3d4; } /* Some as setas quando todos os logos cabem (view.js marca .is-static). */ .fespsp-logos.is-static .fespsp-logos__arrow { display: none; } /* Mobile (Bloco H/H8): encolhe o slot e o teto do logo no celular — mantendo o scroll horizontal (overflow-x:auto) + setas. Setas a 44px (alvo de toque). */ @media (max-width: 760px) { .fespsp-logos__track .wp-block-image { flex-basis: calc((100% - 2 * 24px) / 3); /* 3 por tela no tablet */ height: 160px; } .fespsp-logos__track .wp-block-image img { max-width: 180px; max-height: 130px; } .fespsp-logos__arrow { width: 44px; height: 44px; } } @media (max-width: 460px) { .fespsp-logos__track .wp-block-image { flex-basis: 100%; /* 1 por tela no smartphone — logo maior, ocupa a faixa toda */ height: 200px; } .fespsp-logos__track .wp-block-image img { max-width: 240px; max-height: 180px; } } /* ============================================================= TIMELINE — pattern fespsp/timeline Lista vertical com linha vertical vermelha e marcadores ============================================================= */ .fespsp-timeline { width: 1140px; max-width: 100%; margin: 45px auto; padding: 0 30px; box-sizing: border-box; } .fespsp-timeline__title { font-family: Roboto, sans-serif; font-size: 1.5rem; font-weight: 700; color: #111; margin: 0 0 30px; } .fespsp-timeline__list { list-style: none; padding: 0; margin: 0; position: relative; } .fespsp-timeline__list::before { content: ""; position: absolute; left: 100px; top: 0; bottom: 0; width: 2px; background: #bc2f2c; } .fespsp-timeline__item { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 30px; margin-bottom: 30px; } .fespsp-timeline__item::before { content: ""; position: absolute; left: 94px; top: 8px; width: 14px; height: 14px; background: #bc2f2c; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #bc2f2c; } .fespsp-timeline__date { font-family: Roboto, sans-serif; font-size: 1.25rem; font-weight: 700; color: #bc2f2c; text-align: right; padding-right: 30px; } .fespsp-timeline__heading { font-family: Roboto, sans-serif; font-size: 1.125rem; font-weight: 700; color: #111; margin: 0 0 6px; } .fespsp-timeline__content p { font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 1.55; color: #53565a; margin: 0; } /* ============================================================= IMAGE + TEXT SPLIT — pattern fespsp/img-text-split Layout 50/50 com imagem + texto. Adicione classe is-reverse para inverter ============================================================= */ .fespsp-imgtext { width: 1140px; max-width: 100%; margin: 45px auto; display: grid; grid-template-columns: 1fr 1fr; min-height: 380px; box-sizing: border-box; } .fespsp-imgtext.is-reverse { direction: rtl; } .fespsp-imgtext.is-reverse > * { direction: ltr; } .fespsp-imgtext__image { background-size: cover; background-position: center; } .fespsp-imgtext__text { background: #f2f2f2; padding: 50px 40px; display: flex; flex-direction: column; justify-content: center; } .fespsp-imgtext__title { font-family: Roboto, sans-serif; font-size: 1.75rem; font-weight: 700; color: #111; margin: 0 0 16px; } .fespsp-imgtext__body { font-family: "Open Sans", sans-serif; font-size: 15px; line-height: 1.65; color: #53565a; margin: 0 0 20px; } .fespsp-imgtext__cta { display: inline-block; padding: 10px 30px; background: #bc2f2c; color: #fff; text-decoration: none; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.02em; align-self: flex-start; } .fespsp-imgtext__cta:hover { background: #a92a28; color: #fff; } @media (max-width: 760px) { .fespsp-imgtext { grid-template-columns: 1fr; } .fespsp-imgtext__image { min-height: 240px; } } /* ============================================================= Parágrafo "large" — usado para meta/intro nas páginas internas ============================================================= */ .has-large-font-size { font-family: Roboto, sans-serif !important; font-size: 1.25rem !important; line-height: 1.5 !important; font-weight: 400 !important; color: #111 !important; margin: 0 0 30px !important; } /* ============================================================= SINGLE POST ============================================================= */ .fespsp-post-hero { min-height: 320px; background-size: cover; background-position: center; } /* ============================================================= SECTION TITLE — H2 institucional com barra brand acima Usado nas páginas internas para abrir cada seção. ============================================================= */ .fespsp-section-title { font-family: Roboto, sans-serif !important; font-size: clamp(1.5rem, 2.4vw, 2rem) !important; font-weight: 700 !important; color: #111 !important; line-height: 1.2 !important; margin: 56px 0 22px !important; position: relative; padding-top: 16px; } .fespsp-section-title::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 3px; background: #bc2f2c; border-radius: 2px; } /* ============================================================= PAGE NAV — pattern fespsp/page-nav Barra horizontal sticky de âncoras para seções dentro da página. Cole logo após o hero institucional. ============================================================= */ .fespsp-page-nav { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #e5e5e5; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); } .fespsp-page-nav__inner { width: 1140px; max-width: 100%; margin: 0 auto; padding: 0 30px; display: flex; flex-wrap: wrap; gap: 4px 6px; box-sizing: border-box; } .fespsp-page-nav__link { display: inline-flex; align-items: center; padding: 14px 18px; font-family: Montserrat, sans-serif; font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: #53565a; text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; white-space: nowrap; } .fespsp-page-nav__link:hover, .fespsp-page-nav__link:focus-visible { color: #bc2f2c; border-bottom-color: #bc2f2c; } /* Sections-alvo: oferece offset para o scroll considerar a sticky bar */ :where(#historia, #missao, #linha-do-tempo, #conselho, #diretoria, #relatorios) { scroll-margin-top: 72px; } @media (max-width: 760px) { .fespsp-page-nav__inner { flex-wrap: nowrap; overflow-x: auto; gap: 0; } .fespsp-page-nav__link { padding: 12px 14px; font-size: 12px; } } /* ============================================================= VALUES GRID — pattern fespsp/values-grid Três cards (Missão / Visão / Valores) com ícone, título e descrição. ============================================================= */ .fespsp-values { width: 1140px; max-width: 100%; margin: 0 auto; padding: 0 30px; box-sizing: border-box; } /* `:root` só para a margem vertical — ver a nota em `.fespsp-mosaico`. */ :root .fespsp-values { margin-top: 60px; margin-bottom: 60px; } .fespsp-values__grid { display: grid; grid-template-columns: repeat(var(--fespsp-values-cols, 3), 1fr); gap: 28px; } /* Dentro de uma coluna, a grade não pode insistir nos 1140px do sheet. */ .wp-block-column .fespsp-values { width: 100%; padding: 0; } /* `:root` só para a margem vertical — ver a nota em `.fespsp-mosaico`. */ :root .wp-block-column .fespsp-values { margin-top: 0; margin-bottom: 0; } .fespsp-values__card { background: #fff; border: 1px solid #ececec; border-top: 3px solid #bc2f2c; padding: 36px 28px 32px; display: flex; flex-direction: column; align-items: flex-start; transition: transform 0.2s ease, box-shadow 0.2s ease; } .fespsp-values__card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08); } /* ------------------------------------------------------------- VARIANTE panel — os três painéis grafite de Biblioteca e CEDOC: 343×428 com ícone grande, título e texto centralizados em branco, sem filete nem hover. ------------------------------------------------------------- */ .fespsp-values--panel .fespsp-values__grid { gap: 55px; } /* Sem `min-height`: a altura vem do texto e o grid iguala as colunas sozinho. Um mínimo fixo deixava os três cards da Secretaria Acadêmica — que só têm título e botão — com o dobro da altura que o export lhes dá. */ .fespsp-values--panel .fespsp-values__card { background: #53565a; border: 0; padding: 40px 30px; align-items: center; text-align: center; justify-content: center; } .fespsp-values--panel .fespsp-values__card:hover { transform: none; box-shadow: none; } .fespsp-values--panel .fespsp-values__icon { width: 64px; height: 64px; background: none; color: #fff; margin-bottom: 24px; } .fespsp-values--panel .fespsp-values__icon svg, .fespsp-values--panel .fespsp-values__icon img { width: 100%; height: 100%; } .fespsp-values--panel .fespsp-values__title { font-family: Montserrat, sans-serif; font-size: 1.875rem; color: #fff; margin-bottom: 22px; } .fespsp-values--panel .fespsp-values__body { font-size: 1.125rem; line-height: 1.6; color: #fff; max-width: 282px; } /* Um painel em vermelho de marca no meio dos grafite — o "Validação de Diplomas" da Secretaria Acadêmica, que é o card em destaque da linha. */ .fespsp-values--panel .fespsp-values__card--brand { background: #bc2f2c; } /* Botão branco dentro do painel: o card do export leva um "Validar"/"Acessar". */ .fespsp-values--panel .fespsp-values__cta { display: inline-block; margin-top: 22px; padding: 8px 24px; background: #fff; color: #53565a; font-family: Montserrat, sans-serif; font-size: 0.875rem; font-weight: 600; line-height: 1.4; text-decoration: none; border: 2px solid #fff; } .fespsp-values--panel .fespsp-values__cta:hover { background: transparent; color: #fff; } @media (max-width: 980px) { .fespsp-values--panel .fespsp-values__grid { grid-template-columns: 1fr; gap: 24px; } .fespsp-values--panel .fespsp-values__card { min-height: 0; } } .fespsp-values__icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: rgba(188, 47, 44, 0.08); color: var(--wp--preset--color--brand, #bc2f2c); border-radius: 50%; margin-bottom: 20px; } .fespsp-values__icon svg, .fespsp-values__icon img { width: 28px; height: 28px; object-fit: contain; display: block; } .fespsp-values__title { font-family: Roboto, sans-serif; font-size: 1.25rem; font-weight: 700; color: #111; margin: 0 0 12px; line-height: 1.2; } .fespsp-values__body { font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 1.65; color: #53565a; margin: 0; } @media (max-width: 980px) { .fespsp-values__grid { grid-template-columns: 1fr; gap: 18px; } } /* Variante "boxed" (Projetos "Áreas de atuação"): card com borda completa arredondada, ícone sem círculo (maior) e conteúdo centralizado, sem corpo. O padrão (Missão/Visão/Valores do site principal) segue com borda-topo vermelha + ícone em círculo, à esquerda. Fluida p/ caber numa coluna (o `.fespsp-values` base é 1140px fixo). */ .fespsp-values--boxed { width: 100%; padding: 0; } /* `:root` só para a margem vertical — ver a nota em `.fespsp-mosaico`. */ :root .fespsp-values--boxed { margin-top: 0; margin-bottom: 0; } .fespsp-values--boxed .fespsp-values__grid { gap: 24px; } .fespsp-values--boxed .fespsp-values__card { border: 1px solid #d9d9d9; border-radius: 14px; align-items: center; text-align: center; padding: 30px 20px; } .fespsp-values--boxed .fespsp-values__icon { background: transparent; border-radius: 0; width: auto; height: auto; margin-bottom: 16px; } .fespsp-values--boxed .fespsp-values__icon img, .fespsp-values--boxed .fespsp-values__icon svg { width: 48px; height: 48px; } .fespsp-values--boxed .fespsp-values__title { margin-bottom: 0; } /* Áreas (--boxed) — grade responsiva 3 → 2 → 1 (Bloco H/H6). Sobrepõe o colapso 3→1 do `.fespsp-values` base (que serve os 3 cards Missão/Visão/ Valores do site principal). Casa o Nicepage: 3 col no md (intro empilha por cima via composição), 2 col no sm, 1 col no smartphone. */ @media (max-width: 980px) { .fespsp-values--boxed .fespsp-values__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .fespsp-values--boxed .fespsp-values__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .fespsp-values--boxed .fespsp-values__grid { grid-template-columns: 1fr; } } /* Card com modal (Áreas de atuação): o card inteiro é um gatilho (button reset) que abre um

nativo — replica os popups do Nicepage. O botão herda o layout do card boxed (coluna centrada); o card guarda o hover. */ .fespsp-values__card--modal { padding: 0; } .fespsp-values__trigger { appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0; font: inherit; color: inherit; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 20px; cursor: pointer; } /*