/* ================================================================== MODELOS DEZ — Estilo "tech editorial" Branco, preto, tons de cinza, azul-petróleo (marca) e azul elétrico (links e detalhes). Linhas finas no lugar de sombras. Raio 2–4px. As cores vêm de variáveis CSS definidas no a partir do config. ================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.65; color: var(--cor-texto); background: var(--cor-fundo); } img { max-width: 100%; height: auto; display: block; } a { color: var(--cor-destaque); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: 1140px; margin: 0 auto; padding: 0 20px; } .container-estreito { max-width: 820px; } h1, h2, h3, h4 { font-weight: 800; line-height: 1.15; color: var(--cor-texto); letter-spacing: -0.01em; } /* ------------------------------------------------------------------ Botões (texto direto, sem ícones) ------------------------------------------------------------------ */ .btn { display: inline-block; padding: 10px 18px; border: 1px solid transparent; border-radius: 3px; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; text-align: center; } .btn:hover { text-decoration: none; } .btn-primario { background: var(--cor-marca); color: var(--cor-branco); border-color: var(--cor-marca); } .btn-primario:hover { background: var(--cor-destaque); border-color: var(--cor-destaque); color: var(--cor-branco); } .btn-secundario { background: var(--cor-branco); color: var(--cor-marca); border-color: var(--cor-borda); } .btn-secundario:hover { border-color: var(--cor-destaque); color: var(--cor-destaque); } /* ------------------------------------------------------------------ Header (sem fixed/sticky) ------------------------------------------------------------------ */ .site-header { background: var(--cor-branco); border-bottom: 1px solid var(--cor-borda); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; } .logo { width: 190px; height: auto; } .nav-desktop ul { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; } .nav-desktop a { color: var(--cor-texto); font-size: 15px; font-weight: 600; } .nav-desktop a:hover { color: var(--cor-destaque); text-decoration: none; } .btn-menu-mobile { display: none; background: var(--cor-marca); color: var(--cor-branco); border: 0; border-radius: 3px; padding: 10px 16px; font-size: 15px; font-weight: 700; cursor: pointer; } /* ------------------------------------------------------------------ Sidebar mobile ------------------------------------------------------------------ */ .sidebar-overlay { position: fixed; inset: 0; background: rgba(16, 20, 24, 0.55); z-index: 90; } .sidebar-mobile { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 85vw); background: var(--cor-branco); border-left: 1px solid var(--cor-borda); z-index: 100; overflow-y: auto; } .sidebar-topo { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--cor-borda); } .sidebar-titulo { font-weight: 800; color: var(--cor-marca); } .btn-fechar-menu { background: none; border: 1px solid var(--cor-borda); border-radius: 3px; padding: 6px 12px; font-size: 14px; font-weight: 700; color: var(--cor-texto); cursor: pointer; } .btn-fechar-menu:hover { border-color: var(--cor-destaque); color: var(--cor-destaque); } .sidebar-mobile nav ul { list-style: none; } .sidebar-mobile nav a { display: block; padding: 14px 20px; border-bottom: 1px solid var(--cor-borda); color: var(--cor-texto); font-weight: 600; } .sidebar-mobile nav a:hover { color: var(--cor-destaque); text-decoration: none; } /* ------------------------------------------------------------------ Hero e busca ------------------------------------------------------------------ */ .hero { background: var(--cor-marca); padding: 56px 0; border-bottom: 1px solid var(--cor-borda); } .hero-titulo { color: var(--cor-branco); font-size: 42px; max-width: 720px; } .hero-texto { color: var(--cor-branco); max-width: 680px; margin-top: 16px; font-size: 18px; } .hero-busca { display: flex; gap: 8px; max-width: 560px; margin-top: 28px; } .hero-busca input { flex: 1; padding: 11px 14px; border: 1px solid var(--cor-borda); border-radius: 3px; font-size: 16px; color: var(--cor-texto); background: var(--cor-branco); } .hero-busca input:focus { outline: 2px solid var(--cor-destaque); outline-offset: 1px; } .secao .hero-busca { margin-top: 8px; margin-bottom: 24px; } /* ------------------------------------------------------------------ Seções ------------------------------------------------------------------ */ .secao { padding: 44px 0; border-bottom: 1px solid var(--cor-borda); } .secao:last-child { border-bottom: 0; } .secao-titulo { font-size: 26px; margin-bottom: 20px; } .secao-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .link-mais { font-weight: 700; font-size: 15px; } /* ------------------------------------------------------------------ Seletor de categorias ------------------------------------------------------------------ */ .seletor-categorias { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; } .chip { display: inline-block; padding: 7px 14px; border: 1px solid var(--cor-borda); border-radius: 3px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cor-marca); background: var(--cor-branco); } .chip:hover { border-color: var(--cor-destaque); color: var(--cor-destaque); text-decoration: none; } .chip-ativa { background: var(--cor-marca); border-color: var(--cor-marca); color: var(--cor-branco); } .chip-ativa:hover { color: var(--cor-branco); border-color: var(--cor-marca); } /* ------------------------------------------------------------------ Grid de cards ------------------------------------------------------------------ */ .grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; } .card-doc { border: 1px solid var(--cor-borda); border-radius: 3px; padding: 22px; background: var(--cor-branco); display: flex; flex-direction: column; gap: 10px; } .card-doc:hover { border-color: var(--cor-destaque); } .card-categoria { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .card-categoria a { color: var(--cor-destaque); } .card-titulo { font-size: 19px; font-weight: 800; line-height: 1.25; } .card-titulo a { color: var(--cor-texto); } .card-titulo a:hover { color: var(--cor-destaque); text-decoration: none; } .card-descricao { font-size: 15px; color: var(--cor-texto-suave); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card-data { font-size: 13px; color: var(--cor-texto-suave); margin-top: auto; } /* ------------------------------------------------------------------ Breadcrumb, títulos de página, paginação ------------------------------------------------------------------ */ .breadcrumb { font-size: 14px; color: var(--cor-texto-suave); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px; } .pagina-titulo { font-size: 34px; margin-bottom: 12px; } .pagina-descricao { color: var(--cor-texto-suave); max-width: 780px; margin-bottom: 24px; } .paginacao { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--cor-borda); } .paginacao-info { font-size: 15px; font-weight: 600; color: var(--cor-texto-suave); } /* ------------------------------------------------------------------ Newsletter (apenas visual) ------------------------------------------------------------------ */ .secao-newsletter { background: var(--cor-fundo-suave); } .newsletter-box { max-width: 640px; } .newsletter-box p { color: var(--cor-texto-suave); } .newsletter-form { display: flex; gap: 8px; margin-top: 18px; max-width: 480px; } .newsletter-form input { flex: 1; padding: 11px 14px; border: 1px solid var(--cor-borda); border-radius: 3px; font-size: 16px; background: var(--cor-branco); color: var(--cor-texto); } .newsletter-form input:focus { outline: 2px solid var(--cor-destaque); outline-offset: 1px; } /* ------------------------------------------------------------------ FAQ (exibida expandida) ------------------------------------------------------------------ */ .faq-lista { max-width: 820px; } .faq-item { border-bottom: 1px solid var(--cor-borda); padding: 16px 0; } .faq-item summary { font-weight: 800; font-size: 18px; cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--cor-destaque); } .faq-item p { margin-top: 10px; color: var(--cor-texto-suave); } /* ------------------------------------------------------------------ Documento singular ------------------------------------------------------------------ */ .documento { padding: 44px 0; } .documento-cabecalho { border-bottom: 1px solid var(--cor-borda); padding-bottom: 24px; margin-bottom: 28px; } .documento-titulo { font-size: 38px; margin: 10px 0 14px; } .documento-datas { font-size: 14px; color: var(--cor-texto-suave); } .documento-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .documento-acoes .btn { font-size: 14px; padding: 9px 14px; } .documento-conteudo { font-size: 17px; } .documento-conteudo h2 { font-size: 26px; margin: 34px 0 14px; } .documento-conteudo h3 { font-size: 21px; margin: 28px 0 12px; } .documento-conteudo p { margin: 0 0 16px; } .documento-conteudo ul, .documento-conteudo ol { margin: 0 0 16px 24px; } .documento-conteudo li { margin-bottom: 6px; } .documento-conteudo blockquote { border-left: 3px solid var(--cor-marca); padding: 8px 0 8px 20px; margin: 0 0 16px; color: var(--cor-texto-suave); } .documento-conteudo table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15px; } .documento-conteudo th, .documento-conteudo td { border: 1px solid var(--cor-borda); padding: 10px 12px; text-align: left; } .documento-conteudo th { background: var(--cor-fundo-suave); font-weight: 700; } .documento-conteudo pre { background: var(--cor-fundo-suave); border: 1px solid var(--cor-borda); border-radius: 3px; padding: 16px; overflow-x: auto; font-size: 14px; margin: 0 0 16px; } .documento-conteudo code { font-family: Consolas, "Courier New", monospace; font-size: 0.92em; } .documento-tags { font-size: 14px; color: var(--cor-texto-suave); border-top: 1px solid var(--cor-borda); padding-top: 18px; margin-top: 28px; } /* Autor box */ .autor-box { border: 1px solid var(--cor-borda); border-radius: 3px; padding: 22px; margin-top: 28px; background: var(--cor-fundo-suave); } .autor-box-rotulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cor-texto-suave); margin-bottom: 6px; } .autor-box-nome { font-size: 19px; font-weight: 800; } .autor-box-nome a { color: var(--cor-marca); } .autor-box-cargo { font-size: 14px; color: var(--cor-texto-suave); margin-bottom: 8px; } .autor-box-bio { font-size: 15px; color: var(--cor-texto-suave); } /* Anterior / próximo */ .documento-vizinhos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; } .vizinho { border: 1px solid var(--cor-borda); border-radius: 3px; padding: 16px 18px; display: block; } .vizinho:hover { border-color: var(--cor-destaque); text-decoration: none; } .vizinho-proximo { text-align: right; } .vizinho-rotulo { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cor-texto-suave); margin-bottom: 4px; } .vizinho-titulo { font-weight: 700; color: var(--cor-marca); } /* ------------------------------------------------------------------ Footer ------------------------------------------------------------------ */ .site-footer { background: var(--cor-marca); color: var(--cor-branco); margin-top: 40px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-top: 44px; padding-bottom: 36px; } .footer-marca { font-size: 22px; font-weight: 800; margin-bottom: 10px; } .footer-descricao { font-size: 15px; margin-bottom: 12px; color: var(--cor-branco); } .footer-contato { font-size: 15px; } .footer-titulo { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 8px; } .site-footer a { color: var(--cor-branco); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); } .site-footer a:hover { text-decoration-color: var(--cor-branco); } .btn-topo { margin-top: 16px; background: transparent; color: var(--cor-branco); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 3px; padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer; } .btn-topo:hover { border-color: var(--cor-branco); } .footer-base { border-top: 1px solid rgba(255, 255, 255, 0.18); padding: 18px 0; font-size: 13px; } /* ------------------------------------------------------------------ Aviso de cookies ------------------------------------------------------------------ */ .aviso-cookies { position: fixed; left: 20px; right: 20px; bottom: 20px; max-width: 560px; margin: 0 auto; background: var(--cor-branco); border: 1px solid var(--cor-borda); border-radius: 3px; padding: 18px 20px; z-index: 120; font-size: 15px; } .aviso-cookies-botoes { display: flex; gap: 10px; margin-top: 14px; } .aviso-cookies-botoes .btn { font-size: 14px; padding: 8px 16px; } /* ------------------------------------------------------------------ Impressão ------------------------------------------------------------------ */ @media print { .site-header, .site-footer, .sidebar-mobile, .sidebar-overlay, .aviso-cookies, .breadcrumb, .nao-imprimir { display: none !important; } body { font-size: 12pt; } .documento { padding: 0; } .documento-titulo { font-size: 22pt; } a { color: var(--cor-texto); text-decoration: none; } } /* ------------------------------------------------------------------ Responsivo ------------------------------------------------------------------ */ @media (max-width: 960px) { .nav-desktop { display: none; } .btn-menu-mobile { display: inline-block; } .grid-cards { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .hero-titulo { font-size: 32px; } .documento-titulo { font-size: 30px; } } @media (max-width: 600px) { .grid-cards { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .hero { padding: 40px 0; } .hero-titulo { font-size: 27px; } .hero-busca, .newsletter-form { flex-direction: column; } .documento-vizinhos { grid-template-columns: 1fr; } .pagina-titulo { font-size: 27px; } .documento-titulo { font-size: 26px; } .paginacao { flex-wrap: wrap; } }