@charset "utf-8"; /* * Componentes de portal institucional (Prefeitura/Câmara) — construído sobre * os tokens já definidos em legado-os.css (cores, radius, sombra, fontes * Space Grotesk/DM Sans). Carregar SEMPRE depois de legado-os.css. * * Tema por município: o recebe uma classe (tema-prefeitura ou * tema-camara) que só troca a variável --pp-accent* — todo o resto do * componente é compartilhado entre os dois portais, pra manter consistência * visual e reduzir CSS duplicado. */ body.tema-prefeitura{ --pp-accent:var(--teal-600); --pp-accent-dark:var(--teal-700); --pp-accent-bg:var(--teal-50); --pp-accent-100:var(--teal-100); --pp-accent-contrast:#ffffff; } body.tema-camara{ --pp-accent:var(--purple-600); --pp-accent-dark:#5b21b6; --pp-accent-bg:var(--purple-50); --pp-accent-100:var(--purple-100); --pp-accent-contrast:#ffffff; --pp-gold:#b7791f; --pp-gold-bg:#fef3c7; } /* Foco visível consistente em todo componente interativo do portal — requisito de acessibilidade (WCAG 2.4.7), não depende do outline padrão do navegador. */ .portal-topbar a:focus-visible, .portal-nav a:focus-visible, .portal-actions button:focus-visible, .portal-actions a:focus-visible, .portal-mobile-toggle:focus-visible, .portal-mobile-menu a:focus-visible, .portal-hero-search button:focus-visible, .portal-hero-tags a:focus-visible, .portal-quick-card:focus-visible, .portal-list-link:focus-visible, .portal-news-card a:focus-visible, .portal-side-link:focus-visible, .portal-side-cta:focus-visible, .portal-mini-card:focus-visible, .portal-transp-card:focus-visible, .portal-alert-btn:focus-visible, .portal-footer-col a:focus-visible, .portal-footer-social a:focus-visible, .portal-footer-bottom a:focus-visible, .portal-agenda-cta:focus-visible{ outline:2px solid var(--pp-accent); outline-offset:2px; border-radius:4px; } /* Barra utilitária (topo) */ .portal-topbar{ background:var(--text-900); color:#fff; font-size:.82rem; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 24px; flex-wrap:wrap; } .portal-topbar-group{display:flex; align-items:center; gap:16px; flex-wrap:wrap} .portal-topbar a{color:#e2e8f0; text-decoration:none; display:inline-flex; align-items:center; gap:6px} .portal-topbar a:hover{color:#fff} .portal-topbar-divider{border-left:1px solid #334155; padding-left:16px} /* Cabeçalho */ .portal-header{background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:40; box-shadow:var(--shadow-sm)} .portal-header-inner{ max-width:1180px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .portal-brand{display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0} .portal-brasao{ width:52px; height:52px; border-radius:999px; flex-shrink:0; background:var(--pp-accent-bg); border:2px solid var(--pp-accent-100); display:flex; align-items:center; justify-content:center; color:var(--pp-accent-dark); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.2rem; } .portal-brand-name{font-size:1.2rem; margin:0; color:var(--text-900); line-height:1.2} .portal-brand-sub{font-size:.76rem; color:var(--text-500); text-transform:uppercase; letter-spacing:.06em; font-weight:600} .portal-nav{display:flex; align-items:center; gap:4px} .portal-nav a{ padding:9px 14px; border-radius:var(--radius-sm); color:var(--text-700); text-decoration:none; font-weight:500; font-size:.92rem; transition:background .15s ease, color .15s ease; } .portal-nav a:hover{background:var(--pp-accent-bg); color:var(--pp-accent-dark)} .portal-actions{display:flex; align-items:center; gap:10px} .portal-actions button, .portal-actions > a:not(.btn-primary){ background:none; border:none; color:var(--text-500); width:38px; height:38px; border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease, color .15s ease; text-decoration:none; } .portal-actions button:hover, .portal-actions > a:not(.btn-primary):hover{background:var(--bg); color:var(--pp-accent-dark)} .portal-actions .btn-primary{padding:9px 16px; font-size:.88rem; display:inline-flex; align-items:center; gap:8px; text-decoration:none; background:var(--pp-accent-dark); border-radius:var(--radius-sm)} .portal-actions .btn-primary:hover{background:var(--pp-accent)} .portal-mobile-toggle{ display:none; background:none; border:none; font-size:1.6rem; color:var(--text-700); cursor:pointer; width:42px; height:42px; align-items:center; justify-content:center; border-radius:var(--radius-sm); } .portal-mobile-toggle:hover{background:var(--bg)} .portal-mobile-menu{display:none; border-top:1px solid var(--border); padding:10px 20px 18px; background:var(--surface)} .portal-mobile-menu.is-open{display:block} .portal-mobile-menu a{ display:block; padding:11px 6px; color:var(--text-700); text-decoration:none; font-weight:500; border-bottom:1px solid var(--border); } .portal-mobile-menu a:last-of-type{border-bottom:none} .portal-mobile-menu a:hover{color:var(--pp-accent-dark)} .portal-mobile-search{position:relative; margin-top:12px} .portal-mobile-search input{ width:100%; padding:11px 40px 11px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); font:inherit; box-sizing:border-box; } .portal-mobile-search button{ position:absolute; right:6px; top:6px; bottom:6px; width:32px; background:none; border:none; color:var(--text-500); display:flex; align-items:center; justify-content:center; cursor:pointer; } @media (max-width:900px){ .portal-nav, .portal-header .portal-actions{display:none} .portal-mobile-toggle{display:flex} .portal-topbar-group.hide-mobile{display:none} } /* Hero */ .portal-hero{ background:linear-gradient(160deg, var(--pp-accent-dark), var(--text-900)); color:#fff; padding:56px 24px; text-align:center; } .portal-hero-inner{max-width:760px; margin:0 auto} .portal-hero h2{color:#fff; font-size:2.1rem; margin:0 0 12px} .portal-hero p{color:rgba(255,255,255,.82); font-size:1.05rem; margin:0 0 28px} .portal-hero-search{position:relative; max-width:560px; margin:0 auto} .portal-hero-search input{ width:100%; padding:16px 60px 16px 20px; border-radius:var(--radius); border:none; font:inherit; font-size:1rem; box-sizing:border-box; box-shadow:var(--shadow-md); } .portal-hero-search button{ position:absolute; right:8px; top:8px; bottom:8px; width:44px; border:none; border-radius:var(--radius-sm); background:var(--pp-accent-dark); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; } .portal-hero-search button:hover{background:var(--pp-accent)} .portal-hero-tags{margin-top:20px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; align-items:center; font-size:.86rem} .portal-hero-tags span{color:rgba(255,255,255,.7)} .portal-hero-tags a{ background:rgba(255,255,255,.14); color:#fff; text-decoration:none; padding:5px 14px; border-radius:999px; transition:background .15s ease; } .portal-hero-tags a:hover{background:rgba(255,255,255,.26)} /* Acesso rápido — grade de ícones */ .portal-section{padding:48px 24px} .portal-section-inner{max-width:1180px; margin:0 auto} .portal-section h3{font-size:1.5rem; text-align:center; margin:0 0 32px} .portal-quick-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px} .portal-quick-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:18px 12px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .portal-quick-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--pp-accent-100)} .portal-quick-icon{ width:52px; height:52px; border-radius:999px; background:var(--pp-accent-bg); color:var(--pp-accent-dark); display:flex; align-items:center; justify-content:center; font-size:1.5rem; transition:background .15s ease, color .15s ease; } .portal-quick-card:hover .portal-quick-icon{background:var(--pp-accent-dark); color:#fff} .portal-quick-card span{font-weight:600; font-size:.9rem; color:var(--text-900)} .portal-quick-card.destaque{background:var(--pp-accent-bg); border-color:var(--pp-accent-100)} .portal-quick-card.destaque .portal-quick-icon{background:#fff; border:1px solid var(--pp-accent-100)} .portal-quick-card.destaque span{color:var(--pp-accent-dark); font-weight:700} @media (max-width:900px){ .portal-quick-grid{grid-template-columns:repeat(3,1fr)} } @media (max-width:520px){ .portal-quick-grid{grid-template-columns:repeat(2,1fr)} } /* Notícias + transparência (grid 2/3 + 1/3) */ .portal-split{display:grid; grid-template-columns:2fr 1fr; gap:32px} @media (max-width:900px){ .portal-split{grid-template-columns:1fr} } .portal-col-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap} .portal-col-head h3{margin:0; font-size:1.4rem; text-align:left} .portal-col-head a{color:var(--pp-accent-dark); text-decoration:none; font-weight:600; font-size:.88rem; display:inline-flex; align-items:center; gap:6px} .portal-col-head a:hover{text-decoration:underline} .portal-news-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px} @media (max-width:640px){ .portal-news-grid{grid-template-columns:1fr} } .portal-news-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:box-shadow .15s ease; } .portal-news-card:hover{box-shadow:var(--shadow)} .portal-news-img{width:100%; height:170px; object-fit:cover; display:block; background:var(--bg)} .portal-news-body{padding:18px} .portal-news-tag{display:flex; align-items:center; gap:8px; font-size:.76rem; color:var(--text-500); margin-bottom:10px} .portal-news-tag span{background:var(--pp-accent-100); color:var(--pp-accent-dark); padding:3px 9px; border-radius:6px; font-weight:700} .portal-news-card h4{font-size:1.05rem; margin:0 0 8px; line-height:1.35} .portal-news-card h4 a{color:var(--text-900); text-decoration:none} .portal-news-card h4 a:hover{color:var(--pp-accent-dark)} .portal-news-card p{font-size:.88rem; color:var(--text-500); margin:0} .portal-side-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; margin-bottom:20px} .portal-side-card-head{display:flex; align-items:flex-start; gap:14px; margin-bottom:16px} .portal-side-card-icon{width:46px; height:46px; border-radius:var(--radius-sm); background:var(--pp-accent-bg); color:var(--pp-accent-dark); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0} .portal-side-card-head h4{margin:0 0 4px; font-size:1.05rem} .portal-side-card-head p{margin:0; font-size:.86rem; color:var(--text-500)} .portal-side-links{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px} .portal-side-link{ text-align:center; padding:9px 10px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); text-decoration:none; color:var(--text-700); font-size:.86rem; font-weight:500; } .portal-side-link:hover{background:var(--pp-accent-bg); border-color:var(--pp-accent-100); color:var(--pp-accent-dark)} .portal-side-cta{ display:block; text-align:center; background:var(--pp-accent-dark); color:#fff; text-decoration:none; font-weight:600; padding:11px; border-radius:var(--radius-sm); transition:background .15s ease; } .portal-side-cta:hover{background:var(--pp-accent)} .portal-mini-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px} .portal-mini-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 12px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; text-decoration:none; } .portal-mini-card:hover{border-color:var(--pp-accent-100); box-shadow:var(--shadow-sm)} .portal-mini-card i{font-size:1.5rem; color:var(--pp-accent-dark)} .portal-mini-card strong{color:var(--text-900); font-size:.88rem} .portal-mini-card span{font-size:.74rem; color:var(--text-500)} /* Alerta */ .portal-alert{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--amber-100); border-left:4px solid var(--amber-500); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:18px 22px; } .portal-alert-inner{display:flex; align-items:center; gap:16px} .portal-alert-icon{width:46px; height:46px; border-radius:999px; background:#fff; color:#92400e; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0} .portal-alert h4{margin:0 0 4px; font-size:1.05rem} .portal-alert p{margin:0; font-size:.88rem; color:var(--text-700)} .portal-alert-btn{ flex-shrink:0; background:var(--amber-500); color:#78350f; border:none; font-weight:700; padding:11px 22px; border-radius:var(--radius-sm); cursor:pointer; text-decoration:none; display:inline-block; } .portal-alert-btn:hover{background:#e08e0b} /* Rodapé */ .portal-footer{background:var(--text-900); color:#cbd5e1; padding:48px 24px 24px} .portal-footer-inner{max-width:1180px; margin:0 auto} .portal-footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px} @media (max-width:900px){ .portal-footer-grid{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .portal-footer-grid{grid-template-columns:1fr} } .portal-footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px} .portal-footer-brand span{color:#fff; font-weight:700; font-size:1.05rem} .portal-footer address{font-style:normal; font-size:.86rem; display:grid; gap:8px} .portal-footer address p{margin:0; display:flex; align-items:flex-start; gap:8px} .portal-footer address i{color:var(--pp-accent); margin-top:3px; flex-shrink:0} .portal-footer-col h4{color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; margin:0 0 14px} .portal-footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:9px} .portal-footer-col a{color:#cbd5e1; text-decoration:none; font-size:.88rem} .portal-footer-col a:hover{color:#fff; text-decoration:underline} .portal-footer-social{display:flex; gap:10px; margin-bottom:16px} .portal-footer-social a{ width:36px; height:36px; border-radius:999px; background:#1e293b; color:#cbd5e1; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background .15s ease, color .15s ease; } .portal-footer-social a:hover{background:var(--pp-accent-dark); color:#fff} .portal-footer-note{background:#1e293b; border:1px solid #334155; border-radius:var(--radius-sm); padding:12px 14px; font-size:.78rem} .portal-footer-note p{margin:0 0 4px} .portal-footer-note strong{color:#fff; display:flex; align-items:center; gap:6px} .portal-footer-bottom{ border-top:1px solid #334155; padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.78rem; color:#94a3b8; } .portal-footer-bottom-links{display:flex; gap:16px; flex-wrap:wrap} .portal-footer-bottom a{color:#94a3b8; text-decoration:none} .portal-footer-bottom a:hover{color:#fff} /* ---- Componentes específicos da Câmara (hero com mídia + painel) ---- */ .portal-hero-split{background:var(--bg); border-bottom:1px solid var(--border)} .portal-hero-split-inner{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr} @media (max-width:900px){ .portal-hero-split-inner{grid-template-columns:1fr} } .portal-hero-media{position:relative; min-height:340px; overflow:hidden} .portal-hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover} .portal-hero-media-overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,23,42,.92), rgba(15,23,42,.1) 65%); display:flex; flex-direction:column; justify-content:flex-end; padding:28px 32px; color:#fff; } .portal-live-badge{ display:inline-flex; align-items:center; gap:6px; background:#dc2626; color:#fff; font-size:.72rem; font-weight:700; text-transform:uppercase; padding:5px 10px; border-radius:5px; align-self:flex-start; margin-bottom:12px; } .portal-hero-media-overlay h2{color:#fff; font-size:1.7rem; margin:0 0 8px; text-align:left} .portal-hero-media-overlay p{color:#e2e8f0; margin:0 0 16px; text-align:left} .portal-hero-media-cta{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; background:var(--pp-gold,var(--amber-500)); color:#3f1a06; text-decoration:none; font-weight:700; padding:11px 22px; border-radius:var(--radius-sm); } .portal-hero-media-cta:hover{filter:brightness(1.08)} .portal-hero-panel{background:var(--surface); padding:32px; border-left:1px solid var(--border)} .portal-hero-panel h3{font-size:1.15rem; padding-bottom:10px; border-bottom:2px solid var(--pp-accent); display:inline-block; margin-bottom:20px} .portal-list-link{ display:flex; align-items:center; gap:14px; padding:12px; border-radius:var(--radius-sm); text-decoration:none; border:1px solid transparent; transition:background .15s ease, border-color .15s ease; margin-bottom:8px; } .portal-list-link:hover{background:var(--pp-accent-bg); border-color:var(--pp-accent-100)} .portal-list-link-icon{ width:44px; height:44px; border-radius:var(--radius-sm); background:var(--pp-accent-100); color:var(--pp-accent-dark); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; } .portal-list-link h4{margin:0 0 2px; font-size:.95rem; color:var(--text-900)} .portal-list-link p{margin:0; font-size:.8rem; color:var(--text-500)} .portal-transp-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px} @media (max-width:900px){ .portal-transp-grid{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .portal-transp-grid{grid-template-columns:1fr} } .portal-transp-card{ border:1px solid var(--border); border-radius:var(--radius); padding:26px 18px; text-align:center; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:6px; transition:box-shadow .15s ease, border-color .15s ease; } .portal-transp-card:hover{box-shadow:var(--shadow); border-color:var(--pp-accent-100)} .portal-transp-card.info{background:var(--bg)} .portal-transp-card i{font-size:2.2rem; color:var(--pp-accent-dark); margin-bottom:6px} .portal-transp-card.info i{color:var(--blue-600)} .portal-transp-card h4{margin:0; font-size:1.05rem; color:var(--text-900)} .portal-transp-card p{margin:0; font-size:.84rem; color:var(--text-500)} .portal-transp-card .marcador{margin-top:10px; font-size:.84rem; font-weight:700; color:var(--blue-600); text-decoration:underline} .portal-featured-grid{display:grid; grid-template-columns:2fr 1fr; gap:24px} @media (max-width:900px){ .portal-featured-grid{grid-template-columns:1fr} } .portal-news-featured{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden} .portal-news-featured img{width:100%; height:280px; object-fit:cover; display:block} .portal-news-featured-body{padding:24px} .portal-news-featured-body h3{font-size:1.5rem; margin:0 0 10px} .portal-news-featured-body p{color:var(--text-500); margin:0 0 10px} .portal-news-featured-body time{font-size:.78rem; color:var(--text-400)} .portal-news-small{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; margin-bottom:16px} .portal-news-small .portal-news-tag{margin-bottom:6px} .portal-news-small h4{margin:0 0 6px; font-size:.95rem; line-height:1.35} .portal-news-small h4 a{color:var(--text-900); text-decoration:none} .portal-news-small h4 a:hover{color:var(--pp-accent-dark)} .portal-news-small time{font-size:.76rem; color:var(--text-400)} .portal-agenda-box{background:var(--text-900); color:#fff; padding:22px; border-radius:var(--radius)} .portal-agenda-box h4{display:flex; align-items:center; gap:8px; border-bottom:1px solid #334155; padding-bottom:10px; margin:0 0 12px; color:#fff; font-size:1rem} .portal-agenda-date{font-size:1.9rem; font-family:'Space Grotesk',sans-serif; font-weight:300; margin-bottom:2px} .portal-agenda-date span{font-size:.8rem; font-weight:600; text-transform:uppercase; margin-left:4px} .portal-agenda-box p{margin:0 0 2px; font-size:.9rem; color:#e2e8f0} .portal-agenda-box p.hora{font-size:.82rem; color:#94a3b8; display:flex; align-items:center; gap:6px} .portal-agenda-cta{ display:block; text-align:center; margin-top:14px; background:#fff; color:var(--text-900); text-decoration:none; font-weight:700; padding:10px; border-radius:var(--radius-sm); font-size:.88rem; } .portal-agenda-cta:hover{background:#e2e8f0}