/* ============================================================ style.css — Estilos visuais do portal ============================================================ Contém TODOS os estilos visuais: cores, tipografia, componentes (topbar, header, menu, portlets, footer). O layout de colunas está em grid.css (separado por clareza). Breakpoints mobile estão em responsive.css. VARIÁVEIS CSS (Custom Properties) ---------------------------------- Usamos variáveis para centralizar as cores do portal. Para alterar a cor principal do portal, basta mudar --cor-primaria no :root. Todos os componentes que usam var(--cor-primaria) se atualizam automaticamente. COMPATIBILIDADE COM PLONE 4 ---------------------------- Plone 4 usa jQuery 1.x e pode ter CSS herdado do Sunburst. Este arquivo sobrescreve estilos do Sunburst onde necessário. Os seletores com !important são necessários nesses casos. COMPATIBILIDADE COM BROWSERS ---------------------------- Plone 4 era comum em ambientes com IE 8-11. As regras aqui usam CSS3 moderno (Flexbox, transições, variáveis). Se precisar suportar IE 8/9, não use variáveis CSS — substitua por valores diretos. ============================================================ */ /* =================================== VARIÁVEIS GLOBAIS (CSS Custom Properties) =================================== :root → aplica ao elemento raiz (), tornando as variáveis disponíveis em todo o documento. Como usar: color: var(--cor-primaria); Se a variável não existir, o segundo argumento é o fallback: color: var(--cor-primaria, #1e3a8a); =================================== */ :root { /* Cores principais */ --cor-primaria: #1e3a8a; /* azul escuro: header, nav, portlet-header */ --cor-primaria-hover: #2563eb; /* azul médio: hover de links e botões */ --cor-primaria-clara: #eff6ff; /* azul bem claro: hover de itens de menu lateral */ --cor-transparencia: #0f766e; /* verde-azul: botão "Transparência" no menu */ /* Cores de fundo */ --bg-pagina: #eef3f8; /* fundo geral da página */ --bg-branco: #ffffff; /* fundo de cards, conteúdo, header */ --bg-topbar: #0f172a; /* fundo da barra de acessibilidade */ /* Cores de texto */ --texto-principal: #1e293b; /* texto padrão */ --texto-secundario:#334155; /* texto de links de navegação interna */ --texto-rodape: #94a3b8; /* texto suave do rodapé */ /* Bordas */ --borda-clara: #e2e8f0; /* Sombras */ --sombra-card: 0 10px 30px rgba(0, 0, 0, 0.05); --sombra-header: 0 2px 20px rgba(0, 0, 0, 0.06); --sombra-menu: 0 18px 40px rgba(0, 0, 0, 0.12); /* Transição padrão */ --transicao: 0.2s ease; /* Bordas arredondadas */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 24px; } /* =================================== RESET BÁSICO =================================== Remove margens e paddings padrão do browser. box-sizing: border-box → faz padding e border serem incluídos na largura total do elemento, evitando cálculos confusos de layout. =================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* =================================== BASE — BODY E TIPOGRAFIA =================================== */ body { background: var(--bg-pagina); color: var(--texto-principal); font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; /* O JavaScript de acessibilidade altera o font-size do body para controlar o tamanho da fonte. */ } /* =================================== CLASSE UTILITÁRIA: OCULTO VISUALMENTE =================================== Esconde o elemento visualmente MAS mantém acessível para leitores de tela (screen readers). Usado nos labels do formulário de busca e em textos descritivos de botões icon-only. Não use display:none ou visibility:hidden — esses retiram o elemento da árvore de acessibilidade. =================================== */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* =================================== LINKS DE SALTO (SKIP LINKS) =================================== Ficam invisíveis até receber foco (via Tab). Essencial para navegação por teclado — permite pular diretamente para o conteúdo principal. Requisito do eMAG e das WCAG 2.1 (Critério 2.4.1). =================================== */ .skip-link { color: white; text-decoration: none; opacity: 0.92; transition: var(--transicao); /* Em telas normais ficam visíveis na topbar */ } .skip-link:focus { opacity: 1; text-decoration: underline; outline: 2px solid #ffff00; /* amarelo: alto contraste no fundo escuro */ outline-offset: 2px; } /* =================================== FOCO VISÍVEL — ACESSIBILIDADE =================================== Todo elemento interativo deve ter um indicador visual claro quando recebe foco por teclado. Requisito WCAG 2.1 — Critério 2.4.7. :focus-visible aplica apenas quando o foco vem do teclado (não do mouse), evitando o contorno "feio" em cliques normais. =================================== */ :focus-visible { outline: 3px solid var(--cor-primaria-hover); outline-offset: 2px; border-radius: 4px; } /* =================================== TOPBAR — BARRA DE ACESSIBILIDADE =================================== */ #topbar { background: var(--bg-topbar); color: white; font-size: 13px; } .topbar-container { max-width: 1400px; margin: 0 auto; padding: 8px 30px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; /* quebra linha no mobile */ } /* Lado esquerdo: links de salto */ .topbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Lado direito: botões + usuário */ .topbar-right { display: flex; align-items: center; gap: 14px; } /* =================================== BOTÕES DE ACESSIBILIDADE =================================== */ .topbar-icons { display: flex; align-items: center; gap: 6px; } /* Botões e links de ícone na topbar. width/height iguais → formato quadrado. border-radius: var(--radius-sm) → cantos arredondados. background semi-transparente sobre o fundo escuro. */ .topbar-icons a, .topbar-icons button { width: 34px; height: 34px; border: none; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.08); color: white; cursor: pointer; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background var(--transicao), transform var(--transicao); } .topbar-icons a:hover, .topbar-icons button:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); } /* Área de usuário na topbar */ #user ul { list-style: none; display: flex; gap: 8px; } #user a { color: white; text-decoration: none; font-size: 13px; opacity: 0.9; transition: var(--transicao); } #user a:hover { opacity: 1; text-decoration: underline; } /* =================================== HEADER =================================== */ #topo { background: var(--bg-branco); box-shadow: var(--sombra-header); } .header-container { max-width: 1400px; margin: 0 auto; padding: 10px 30px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } /* =================================== LOGO =================================== */ #portal-logo { display: block; text-decoration: none; flex-shrink: 0; /* não deixa o logo encolher */ } #portal-logo img { height: 110px; width: auto; max-width: 100%; display: block; /* transition suave caso queira animação no hover */ transition: transform var(--transicao); } #portal-logo:hover img { transform: scale(1.02); } /* =================================== HEADER ACTIONS (busca + login) =================================== */ .header-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* =================================== FORMULÁRIO DE BUSCA =================================== ID #portal-searchbox é NATIVO DO PLONE. O input usa name="SearchableText" — obrigatório para o ZCatalog do Plone processar a busca. =================================== */ #portal-searchbox { position: relative; width: 340px; max-width: 100%; } #portal-searchbox input { width: 100%; height: 48px; border: none; outline: none; background: #f1f5f9; border-radius: var(--radius-md); padding: 0 56px 0 18px; font-size: 14px; font-family: 'Inter', sans-serif; color: var(--texto-principal); transition: box-shadow var(--transicao), background var(--transicao); } #portal-searchbox input:focus { background: #e8eef7; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); } /* Botão de submit dentro do input */ #portal-searchbox button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: none; border-radius: var(--radius-sm); background: var(--cor-primaria-hover); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transicao), transform var(--transicao); } #portal-searchbox button:hover { background: #1d4ed8; transform: translateY(-50%) scale(1.05); } /* =================================== BOTÃO DE LOGIN =================================== */ .login-button { height: 48px; padding: 0 20px; border-radius: var(--radius-md); background: var(--cor-primaria); color: white; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; white-space: nowrap; transition: background var(--transicao), transform var(--transicao); } .login-button:hover { background: var(--cor-primaria-hover); transform: translateY(-1px); } .login-button i { font-size: 14px; } /* =================================== MENU PRINCIPAL — MEGA MENU =================================== ID #main-navigation é NATIVO DO PLONE. O JavaScript do main.js gerencia o estado .active. =================================== */ #main-navigation { background: var(--cor-primaria); } /* Lista raiz: flex horizontal */ .menu-root { max-width: 1400px; margin: 0 auto; padding: 0 30px; display: flex; align-items: center; list-style: none; } /* Cada item do menu raiz */ .menu-root > li { position: relative; /* âncora para o submenu absoluto */ } /* Links e botões do nível raiz */ .menu-root > li > a, .submenu-toggle { height: 58px; padding: 0 22px; border: none; background: none; color: white; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: 14px; font-family: 'Inter', sans-serif; text-decoration: none; white-space: nowrap; transition: background var(--transicao); } /* Hover no item raiz */ .menu-root > li > a:hover, .menu-root > li:hover > .submenu-toggle, .menu-root > li.active > .submenu-toggle { background: rgba(255, 255, 255, 0.1); } /* =================================== SETA DO DROPDOWN =================================== A seta (.fa-chevron-down) é um ícone Font Awesome. Ela rotaciona 180° via CSS quando o pai (.has-submenu) recebe a classe .active (adicionada pelo JavaScript). transition: transform → animação suave da rotação. display: inline-block → necessário para o transform funcionar em elementos inline como . =================================== */ .submenu-arrow { font-size: 11px; display: inline-block; transition: transform 0.25s ease; } /* Quando .has-submenu tem .active, a seta do botão dentro dele gira 180° (fica de cabeça para baixo). */ .has-submenu.active > .submenu-toggle .submenu-arrow { transform: rotate(180deg); } /* =================================== ITEM TRANSPARÊNCIA Destaque visual diferente para o item de transparência. O botão fica com fundo verde-azul para chamar atenção. =================================== */ .transparencia { margin-left: auto; /* empurra para o lado direito do menu */ } .transparencia > .submenu-toggle { background: var(--cor-transparencia); border-radius: 6px; margin: 0 4px; } .transparencia > .submenu-toggle:hover { background: #0d6b63; } /* =================================== PAINEL DO SUBMENU (DROPDOWN) =================================== position: absolute → o painel sai do fluxo normal e se posiciona abaixo do item pai. display: none / block → controlado pelo JavaScript via adição/remoção da classe .active no pai. OPÇÃO: Poderia usar max-height + overflow para animação de "abrir" sem JavaScript, mas o JS permite aria-expanded correto para acessibilidade. =================================== */ .submenu-panel { display: none; /* escondido por padrão */ position: absolute; top: 100%; /* logo abaixo do item pai */ left: 0; min-width: 280px; background: white; padding: 24px; border-radius: 0 0 16px 16px; box-shadow: var(--sombra-menu); z-index: 9999; /* acima de todo o conteúdo */ /* Animação de entrada */ animation: fadeSlideDown 0.18s ease; } /* O painel fica visível quando o pai tem .active */ .has-submenu.active > .submenu-panel { display: block; } /* Animação keyframe do submenu */ @keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Título dentro do submenu */ .submenu-column h3 { color: var(--cor-primaria); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--borda-clara); } /* Links dentro do submenu */ .submenu-column a { display: block; padding: 8px 10px; margin-bottom: 4px; text-decoration: none; color: var(--texto-secundario); border-radius: 8px; font-size: 14px; transition: background var(--transicao), color var(--transicao), padding-left var(--transicao); } .submenu-column a:hover { background: var(--cor-primaria-clara); color: var(--cor-primaria-hover); padding-left: 16px; /* efeito de "indent" no hover */ } /* =================================== MIGALHA DE PÃO (BREADCRUMBS) =================================== ID #portal-breadcrumbs é NATIVO DO PLONE. =================================== */ #portal-breadcrumbs { max-width: 1400px; margin: 0 auto; padding: 16px 30px; font-size: 13px; color: var(--texto-secundario); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #portal-breadcrumbs a { color: var(--cor-primaria-hover); text-decoration: none; transition: var(--transicao); } #portal-breadcrumbs a:hover { text-decoration: underline; } #portal-breadcrumbs span { color: #94a3b8; } /* =================================== HERO BANNER =================================== */ .hero { position: relative; border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 30px; } .hero img { width: 100%; height: 350px; object-fit: cover; display: block; } /* Gradiente sobre a imagem para legibilidade do texto */ .hero-overlay { position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0 */ background: linear-gradient( to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.6) ); display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; color: white; } .hero-overlay h1 { font-size: clamp(28px, 5vw, 48px); /* tamanho fluido */ font-weight: 700; margin-bottom: 10px; color: white; /* sobrescreve herança do Sunburst */ } .hero-overlay p { font-size: 16px; opacity: 0.9; } /* =================================== CARDS DE ACESSO RÁPIDO =================================== */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 30px; } .card { background: var(--bg-branco); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--sombra-card); transition: transform var(--transicao), box-shadow var(--transicao); display: flex; flex-direction: column; gap: 12px; } .card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); } .card i { font-size: 36px; color: var(--cor-primaria-hover); } .card h3 { font-size: 18px; color: var(--cor-primaria); } .card p { font-size: 14px; color: var(--texto-secundario); line-height: 1.5; flex: 1; } /* Link "Acessar" no card */ .card a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cor-primaria-hover); text-decoration: none; margin-top: auto; transition: var(--transicao); } .card a:hover { color: var(--cor-primaria); gap: 10px; /* pequena animação no gap */ } /* =================================== ÁREA DE CONTEÚDO PRINCIPAL =================================== */ #main-content { background: var(--bg-branco); border-radius: var(--radius-xl); padding: 40px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05); } /* =================================== PORTLETS (SIDEBARS) =================================== Classes .portlet e .portletNavigationTree são NATIVAS DO PLONE — o sistema as usa para identificar e renderizar portlets. =================================== */ .portlet { background: var(--bg-branco); border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); margin-bottom: 24px; } /* Cabeçalho do portlet */ .portlet-header, .portletHeader { /* .portletHeader = classe nativa do Plone */ background: var(--cor-primaria); color: white; padding: 16px 18px; font-weight: 700; font-size: 14px; } /* Árvore de navegação nos portlets */ .nav-tree, .navTreeLevel0 { /* .navTreeLevel0 = classe nativa do Plone */ list-style: none; } .nav-tree a { display: block; padding: 13px 18px; text-decoration: none; color: var(--texto-secundario); border-bottom: 1px solid var(--borda-clara); font-size: 14px; transition: background var(--transicao), color var(--transicao), padding-left var(--transicao); } .nav-tree a:hover { background: var(--cor-primaria-clara); color: var(--cor-primaria-hover); padding-left: 24px; } /* Remove a borda do último item */ .nav-tree li:last-child a { border-bottom: none; } /* =================================== FOTOS DE PARLAMENTARES =================================== Efeito de zoom nas fotos ao passar o mouse. Herdado do function.js legado, mas aqui em CSS puro (mais performático — GPU handling via transform). position: relative + z-index: alto → impede que a imagem ampliada fique por baixo de elementos adjacentes. =================================== */ #content img { transition: transform 0.25s ease, box-shadow 0.25s ease; } #content img:hover { transform: scale(1.12); z-index: 10; position: relative; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3); } /* =================================== RODAPÉ =================================== ID #portal-footer é NATIVO DO PLONE. role="contentinfo" é o ARIA landmark correto. =================================== */ footer#portal-footer { background: var(--bg-topbar); color: white; margin-top: 50px; padding: 50px 30px 30px; } .footer-container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; } .footer-col h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; margin-bottom: 14px; } .footer-col p, .footer-col li { font-size: 14px; color: #cbd5e1; line-height: 1.7; } .footer-col ul { list-style: none; } .footer-col a { color: #cbd5e1; text-decoration: none; transition: color var(--transicao); } .footer-col a:hover { color: white; } /* Ícones de redes sociais */ .social-links { display: flex; gap: 12px; margin-top: 4px; } .social-links a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; transition: background var(--transicao), transform var(--transicao); } .social-links a:hover { background: var(--cor-primaria-hover); transform: translateY(-2px); } /* Linha inferior do rodapé */ .footer-bottom { grid-column: 1 / -1; /* span full width */ border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 24px; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; } .footer-bottom p { font-size: 13px; color: #64748b; } .footer-bottom a { color: #94a3b8; } /* =================================== ALTO CONTRASTE =================================== A classe .high-contrast é adicionada ao pelo JavaScript de acessibilidade (main.js) quando o usuário clica no botão de contraste. Todas as regras aqui usam !important para sobrescrever estilos inline e estilos do Sunburst/Plone. Paleta: - Fundo: preto (#000) - Texto: branco (#fff) - Links: amarelo (#ffff00) — máximo contraste sobre preto (ratio ~21:1 — supera os 7:1 do WCAG AAA) =================================== */ body.high-contrast, body.high-contrast #topo, body.high-contrast #main-content, body.high-contrast .card, body.high-contrast .portlet, body.high-contrast footer { background: #000 !important; color: #fff !important; } body.high-contrast * { color: #fff !important; border-color: #fff !important; } body.high-contrast a { color: #ffff00 !important; } body.high-contrast #main-navigation, body.high-contrast .submenu-panel { background: #000 !important; border: 1px solid #fff !important; } body.high-contrast #main-navigation a, body.high-contrast .submenu-toggle { color: #ffff00 !important; } body.high-contrast #portal-searchbox input { background: #111 !important; color: #fff !important; border: 2px solid #fff !important; } body.high-contrast .card { border: 1px solid #fff !important; } body.high-contrast .portlet-header, body.high-contrast .portletHeader { background: #111 !important; border-bottom: 2px solid #fff !important; } body.high-contrast .hero-overlay { background: rgba(0, 0, 0, 0.85) !important; }