/* ==========================================================================
Sítio eletrônico da Emitente — Projeto Imobiliário 41
Folha de estilos única. Sem frameworks, sem dependências.
Fonte externa: Google Fonts (ver no ). Pode ser auto-hospedada
— nesse caso, substituir o por @font-face apontando para /fonts/.
========================================================================== */
:root {
--fundo: #F5F4F0;
--superficie: #FFFFFF;
--superficie-2: #FAFAF7;
--tinta: #17201C;
--texto: #3C4642;
--apoio: #59635E;
--linha: #E2E1DB;
--linha-suave: #EDECE7;
--acento: #23473C;
--acento-forte: #142E26;
--acento-fundo: #E9EEEA;
--acento-borda: #D7E0D9;
--largura: 1120px;
--raio: 4px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--fundo);
color: var(--texto);
font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-forte); text-decoration: underline; }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
h1, h2, h3 { color: var(--tinta); font-weight: 400; margin: 0; }
h1, h2 { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; line-height: 1.2; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 1rem; font-weight: 600; }
p { margin: 0; max-width: 72ch; }
.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 32px; }
/* Rótulo curto acima do título de seção ------------------------------------ */
.rotulo {
display: block;
font-size: 0.6875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--apoio);
}
/* Cabeçalho ---------------------------------------------------------------- */
.topo {
background: var(--superficie);
border-bottom: 1px solid var(--linha);
}
.topo__interno {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 20px;
padding-bottom: 20px;
}
.marca { display: flex; flex-direction: column; gap: 3px; color: var(--tinta); }
.marca:hover { text-decoration: none; }
.marca__nome { font-family: 'Newsreader', Georgia, serif; font-size: 1.3125rem; line-height: 1.1; }
.marca__razao { font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apoio); }
.menu { display: flex; align-items: center; gap: 30px; font-size: 0.875rem; }
.menu a { color: var(--texto); }
.menu a[aria-current="page"] { color: var(--acento); font-weight: 500; }
/* Abertura ----------------------------------------------------------------- */
.abertura {
background: var(--superficie);
border-bottom: 1px solid var(--linha);
padding: 64px 0 56px;
}
.abertura h1 { margin-top: 14px; max-width: 24ch; }
.abertura p { margin-top: 20px; }
.dados {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
margin-top: 36px;
}
.dado {
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px 20px;
background: var(--fundo);
border: 1px solid var(--linha);
border-radius: var(--raio);
}
.dado dt { font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apoio); }
.dado dd { margin: 0; font-size: 0.9375rem; color: var(--tinta); }
/* Seções ------------------------------------------------------------------- */
.secao { padding: 60px 0; }
.secao--clara { background: var(--superficie); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.secao__cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.secao h2 { margin-top: 8px; }
.nota { margin-top: 14px; font-size: 0.8125rem; color: var(--apoio); }
/* Lista de avisos ---------------------------------------------------------- */
.avisos {
margin-top: 24px;
background: var(--superficie);
border: 1px solid var(--linha);
border-radius: var(--raio);
}
.avisos__cabeca,
.aviso {
display: flex;
align-items: center;
gap: 24px;
padding: 18px 28px;
border-bottom: 1px solid var(--linha-suave);
}
.avisos__cabeca {
padding-top: 14px;
padding-bottom: 14px;
background: var(--superficie-2);
border-bottom-color: var(--linha);
font-size: 0.6875rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--apoio);
}
.avisos > :last-child { border-bottom: 0; }
.aviso__data { flex: 0 0 96px; font-size: 0.8125rem; color: var(--apoio); }
.aviso__titulo { flex: 1 1 auto; font-size: 0.9375rem; color: var(--tinta); }
.aviso__categoria { flex: 0 0 110px; font-size: 0.8125rem; }
.aviso__arquivo { flex: 0 0 64px; text-align: right; font-size: 0.8125rem; }
.etiqueta {
display: inline-block;
padding: 4px 10px;
font-size: 0.6875rem;
color: var(--acento);
background: var(--acento-fundo);
border-radius: 3px;
}
.mais { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; }
.mais svg { flex: none; }
/* Filtro por ano ----------------------------------------------------------- */
.filtro { display: flex; align-items: center; gap: 10px; }
.filtro a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 18px;
font-size: 0.875rem;
color: var(--texto);
background: var(--superficie);
border: 1px solid #D8D7D1;
border-radius: 3px;
}
.filtro a:hover { text-decoration: none; border-color: var(--acento); }
.filtro a[aria-current="true"] { color: #FFFFFF; background: var(--acento); border-color: var(--acento); }
/* Documentos --------------------------------------------------------------- */
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.cartao {
display: flex;
flex-direction: column;
gap: 14px;
padding: 28px;
background: var(--superficie);
border: 1px solid var(--linha);
border-radius: var(--raio);
}
.secao--clara .cartao { background: var(--fundo); }
.cartao ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 0.875rem; }
/* Ficha da Emitente -------------------------------------------------------- */
.duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; }
.ficha { margin: 0; border-top: 1px solid var(--linha); }
.ficha__linha { display: flex; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--linha-suave); }
.ficha dt { flex: 0 0 170px; font-size: 0.8125rem; color: var(--apoio); }
.ficha dd { margin: 0; font-size: 0.875rem; color: var(--tinta); }
/* Destaque ----------------------------------------------------------------- */
.destaque {
margin-top: 28px;
padding: 24px 28px;
background: var(--acento-fundo);
border: 1px solid var(--acento-borda);
border-radius: var(--raio);
}
.destaque h2 { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 0.9375rem; font-weight: 600; }
.destaque p { margin-top: 8px; font-size: 0.875rem; }
/* Rodapé ------------------------------------------------------------------- */
.rodape { background: var(--superficie); border-top: 1px solid var(--linha); padding: 40px 0 48px; }
.rodape p { font-size: 0.8125rem; color: var(--apoio); max-width: 90ch; }
.rodape__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--linha-suave);
font-size: 0.75rem;
color: var(--apoio);
}
/* Responsivo --------------------------------------------------------------- */
@media (max-width: 900px) {
.container { padding: 0 20px; }
.dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-2 { grid-template-columns: minmax(0, 1fr); }
.duas-colunas { grid-template-columns: minmax(0, 1fr); gap: 36px; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
}
@media (max-width: 640px) {
.menu { display: none; } /* ver README: menu recolhido no mobile */
.abertura { padding: 32px 0; }
.secao { padding: 32px 0; }
.dados { grid-template-columns: minmax(0, 1fr); }
.secao__cabeca { flex-direction: column; align-items: flex-start; }
.avisos__cabeca { display: none; }
.aviso {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 16px 18px;
}
.aviso__data,
.aviso__categoria,
.aviso__arquivo { flex: none; text-align: left; }
.rodape__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media print {
.topo, .filtro, .mais { display: none; }
body { background: #FFFFFF; }
}