/* ========================================== LAYOUT — BARRA DE SERVIÇOS, CABEÇALHO, NAVEGAÇÃO, HERO E RODAPÉ Estrutura repetida em toda página (via bloco_mastro()/bloco_rodape() no painel PHP e replicada manualmente no HTML estático). Depende de: tokens.css MUDANÇA NESTA VERSÃO (padrão portal UFPR) - Nova barra de serviços azul acima do mastro (atalhos de acessibilidade + link para o rodapé/skip-links), gerada em bloco_mastro() e replicada nas páginas estáticas. - Mastro deixa de ser branco e passa a azul institucional, com navegação em branco. Sem campo de busca — o site não tem busca.php nem qualquer backend de busca. - Hero deixa de ser gradiente e passa a faixa fotográfica escura em escala de cinza, com sobreposição azul. Todos os nomes de classe anteriores foram preservados. ========================================== */ /* ========================================== BARRA DE SERVIÇOS (topo institucional) ========================================== */ .barra-servicos{ background:var(--color-primary); border-bottom:1px solid rgba(255,255,255,.12); font-family:var(--font-condensada); font-size:var(--text-xs); letter-spacing:.2px; } .barra-servicos-interna{ max-width:var(--container-max); margin:0 auto; padding:var(--space-1) 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-2) var(--space-4); } .barra-servicos a{ color:rgba(255,255,255,.8); text-decoration:none; } .barra-servicos a:hover{ color:#fff; text-decoration:underline; } .barra-servicos a.servico{ color:var(--color-highlight); font-weight:700; } /* ========================================== CABEÇALHO E MASTRO ========================================== */ .cabecalho{ position:sticky; top:0; z-index:var(--z-header); background:var(--color-primary); } .mastro{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-5); max-width:var(--container-max); margin:0 auto; padding:var(--space-3) 20px; background:var(--color-primary); border-bottom:1px solid rgba(255,255,255,.12); } /* O logotipo do GPDCF é um arquivo de fundo branco opaco com texto em azul-marinho escuro: sobre o novo mastro azul ele ficaria ilegível (texto escuro sobre fundo escuro). Em vez de depender de um arquivo monocromático que não existe, a marca ganha uma "plaquinha" branca — mesmo recurso já usado em restrito/painel-topo.php — garantindo contraste e legibilidade sem exigir um novo arquivo de imagem. */ .marca{ display:flex; align-items:center; line-height:0; flex-shrink:0; background:#fff; padding:8px 18px; border-radius:var(--radius-sm); } .logo-elegante{ height:84px; width:auto; display:block; } /* ---- Botão do menu móvel (hambúrguer acessível) ---- Escondido por padrão: só aparece depois que o JavaScript confirma que pode controlar a navegação (classe .js-nav em ), evitando um botão "morto" para quem navega sem JavaScript — nesse caso o menu permanece sempre visível e utilizável, como antes. */ .menu-toggle{ display:none; align-items:center; justify-content:center; flex-direction:column; gap:5px; width:44px; height:44px; padding:0; border:none; background:transparent; border-radius:var(--radius-sm); cursor:pointer; flex-shrink:0; } .menu-toggle:hover{ background:rgba(255,255,255,.12); } .menu-toggle-linha{ display:block; width:24px; height:2px; background:#fff; border-radius:var(--radius-full); transition:transform var(--transition-fast), opacity var(--transition-fast); } .menu-toggle[aria-expanded="true"] .menu-toggle-linha:nth-child(1){ transform:translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle-linha:nth-child(2){ opacity:0; } .menu-toggle[aria-expanded="true"] .menu-toggle-linha:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } body.js-nav .menu-toggle{ display:inline-flex; } /* ========================================== NAVEGAÇÃO PRINCIPAL ========================================== */ .nav-discreta{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--space-5); } .nav-discreta a{ color:rgba(255,255,255,.9); text-decoration:none; font-size:var(--text-sm); font-weight:600; font-family:var(--font-condensada); letter-spacing:.4px; padding:var(--space-2) 0 3px; border-bottom:2px solid transparent; transition:color var(--transition-fast), border-color var(--transition-fast); } .nav-discreta a:hover{ color:#fff; border-bottom-color:var(--color-highlight); } .nav-discreta a.ativo{ color:#fff; border-bottom-color:var(--color-highlight); } /* ========================================== ITEM DE MENU COM SUBMENU (ex.: Disciplinas → as 4 disciplinas) Sem JS: a lista de baixo fica sempre visível, indentada, logo abaixo do link — continua 100% navegável. Com JS (classe body.js-dropdown), vira um painel suspenso em telas largas. ========================================== */ .nav-item-dropdown{ position:relative; display:flex; align-items:center; flex-wrap:wrap; } .nav-dropdown-toggle{ display:none; background:none; border:none; color:inherit; padding:var(--space-1); margin-left:2px; cursor:pointer; align-items:center; } .seta-dropdown{ width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--transition-fast); } .submenu{ list-style:none; flex-basis:100%; padding:var(--space-1) 0 var(--space-2) var(--space-4); margin:0; } .nav-discreta .submenu a{ display:block; padding:var(--space-1) 0; color:rgba(255,255,255,.72); font-weight:400; font-size:var(--text-xs); border-bottom:0; } .nav-discreta .submenu a:hover{ color:#fff; } @media(min-width:901px){ .nav-dropdown-toggle{ display:flex; } body.js-dropdown .nav-dropdown-toggle[aria-expanded="true"] .seta-dropdown{ transform:rotate(180deg); } body.js-dropdown .submenu{ position:absolute; top:100%; left:0; flex-basis:auto; min-width:320px; background:#fff; border:1px solid var(--color-border); box-shadow:var(--shadow-lg); padding:var(--space-2) 0; margin-top:var(--space-3); display:none; z-index:var(--z-dropdown); } body.js-dropdown .submenu.aberto{ display:block; } body.js-dropdown .nav-discreta .submenu a{ padding:var(--space-2) var(--space-4); color:var(--color-text); font-size:var(--text-sm); } body.js-dropdown .nav-discreta .submenu a:hover{ background:var(--color-bg-alt); color:var(--color-accent-ink); } } /* Menu móvel: só colapsa quando o JS assume o controle (progressive enhancement — sem JS, o menu abaixo continua sempre visível). */ @media(max-width:900px){ body.js-nav .nav-discreta{ flex-basis:100%; flex-direction:column; align-items:stretch; gap:0; max-height:0; overflow:hidden; opacity:0; transition:max-height var(--transition-base), opacity var(--transition-base); } body.js-nav .nav-discreta.aberto{ max-height:32rem; opacity:1; margin-top:var(--space-2); } body.js-nav .nav-discreta a{ width:100%; padding:var(--space-3) var(--space-2); border-bottom:1px solid rgba(255,255,255,.15); border-left:3px solid transparent; text-align:left; } body.js-nav .nav-discreta a:hover{ border-bottom-color:rgba(255,255,255,.15); border-left-color:var(--color-highlight); background:rgba(255,255,255,.08); } body.js-nav .nav-discreta a.ativo{ border-bottom-color:rgba(255,255,255,.15); border-left-color:var(--color-highlight); background:rgba(255,255,255,.12); } } @media(min-width:901px){ .menu-toggle{ display:none !important; } } /* ========================================== HERO — FAIXA INSTITUCIONAL Para usar uma fotografia real (fachada, laboratório, campus), defina a imagem na própria página ou aqui: .hero{ background-image: linear-gradient(rgba(7,20,45,.62),rgba(7,20,45,.62)), url('img/fachada.jpg'); } A textura em gradiente abaixo é apenas o estado sem foto — o filtro em escala de cinza é o que dá o aspecto do portal. ========================================== */ .hero{ position:relative; color:#fff; text-align:center; padding:var(--space-9) 20px; background: linear-gradient(rgba(7,20,45,.62),rgba(7,20,45,.62)), radial-gradient(ellipse 55% 45% at 50% 60%, rgba(255,255,255,.28), transparent 70%), repeating-linear-gradient(101deg,#2b2b2b 0 26px,#161616 26px 34px,#3a3a3a 34px 38px), #1b1b1b; background-size:cover; background-position:center; border-bottom:3px solid var(--color-accent); } .subtitulo{ color:var(--color-highlight); font-family:var(--font-condensada); font-size:var(--text-sm); font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:var(--space-4); } .hero h1{ font-family:var(--font-titulos); font-size:var(--text-3xl); line-height:var(--leading-tight); font-weight:400; margin-bottom:var(--space-4); text-shadow:0 1px 12px rgba(0,0,0,.45); } .hero h1 span{ color:#fff; font-weight:700; } .hero h2{ color:rgba(255,255,255,.92); font-family:var(--font-titulos); font-size:var(--text-xl); font-weight:400; line-height:var(--leading-snug); margin-bottom:var(--space-5); } .hero p{ max-width:var(--container-prose); margin:auto; font-size:var(--text-md); line-height:var(--leading-relaxed); color:rgba(255,255,255,.9); } /* ========================================== RODAPÉ ========================================== */ .rodape{ background:var(--color-primary); color:rgba(255,255,255,.85); padding:var(--space-9) 20px var(--space-6); border-top:3px solid var(--color-accent); } .rodape-grid{ max-width:var(--container-max); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:var(--space-7); } .rodape-titulo{ color:#fff; font-family:var(--font-condensada); font-size:var(--text-sm); text-transform:uppercase; letter-spacing:.8px; margin-bottom:var(--space-4); padding-bottom:var(--space-2); border-bottom:1px solid rgba(255,255,255,.18); } .rodape-bloco p{ font-size:var(--text-sm); line-height:var(--leading-relaxed); color:rgba(255,255,255,.75); margin-bottom:var(--space-1); } .rodape-lista{ list-style:none; display:flex; flex-direction:column; gap:var(--space-2); } .rodape-lista a{ color:rgba(255,255,255,.75); text-decoration:none; font-size:var(--text-sm); transition:color var(--transition-fast); } .rodape-lista a:hover{ color:var(--color-highlight); text-decoration:underline; } /* Ícones de contato/redes sociais — SVG embutido (herda a cor do link via currentColor), sem depender de fonte de ícones externa. */ .link-rede{ display:inline-flex; align-items:center; gap:var(--space-2); } .icone-rede{ width:16px; height:16px; flex-shrink:0; fill:currentColor; } /* ========================================== FAIXA SOCIAL — logo + ícones redondos, no padrão do rodapé do Portal UFPR (faixa clara separada, entre o grid de conteúdo e a linha final de copyright). ========================================== */ .rodape-social{ /* Margem lateral negativa cancela o padding horizontal de 20px herdado de .rodape, para a faixa clara ir de ponta a ponta em vez de ficar "encaixotada" dentro do rodapé azul. */ background:var(--color-bg-alt); margin:var(--space-8) -20px 0 -20px; } .rodape-social-interna{ max-width:var(--container-max); margin:0 auto; padding:var(--space-5) 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4); } .rodape-social-marca{ display:flex; align-items:center; gap:var(--space-3); } .rodape-logo-mini{ height:38px; width:auto; display:block; } .rodape-social-marca span{ font-family:var(--font-condensada); font-weight:700; letter-spacing:.4px; text-transform:uppercase; font-size:var(--text-sm); color:var(--color-secondary); } .rodape-social-icones{ display:flex; gap:var(--space-3); } .icone-social{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-full); background:var(--color-primary); color:#fff; transition:background var(--transition-fast); } .icone-social svg{ width:18px; height:18px; fill:currentColor; } .icone-social:hover{ background:var(--color-accent); } .rodape-base{ max-width:var(--container-max); margin:0 auto; padding-top:var(--space-5); text-align:left; } .rodape-base p{ font-size:var(--text-xs); color:rgba(255,255,255,.65); margin:0 0 var(--space-1); } .rodape-nota{ max-width:var(--container-prose); } .footer-restrito{ display:inline-block; margin-top:var(--space-3); color:rgba(255,255,255,0.55); text-decoration:none; font-size:var(--text-xs); letter-spacing:.3px; border-bottom:1px solid transparent; } .footer-restrito:hover{ color:var(--color-highlight); border-bottom-color:var(--color-highlight); }