/* Diário de Notícia ES — layout novo (capa e leitura) * * Vem do par de maquetes em layout/diario-es-desktop e layout/diario-es-mobile * (16/09/2026): agência de notícias, mastro central, chapéu versalete, foto * grande cortada e uma "corrida" em cartão sem moldura. Duas adaptações para * caber neste site, e não da maquete: * * 1. TEMA: a maquete tinha um script próprio, lendo localStorage e * escrevendo [data-theme] depois da página carregar — o "susto branco" * do erro nº 14 do manual. Aqui quem decide o tema é o SERVIDOR, lendo o * cookie e escrevendo data-tema (não data-theme) em antes de * qualquer byte de tela chegar. tema.js é o mesmo arquivo do layout * anterior, sem alteração nenhuma — só o botão ganhou ícone novo. * * 2. SEM style= NO HTML: a CSP daqui é style-src 'self', que barra style * embutido (a maquete usava style="aspect-ratio:…" e uma variável CSS * inline por seção). As proporções de foto viraram classes .ar-* e o * acento de cor de cada seção virou classe .accent-*. * * Esta folha cuida da capa, da leitura e das páginas de listagem (categoria, * busca). O painel, as telas de entrada e as páginas de erro continuam em * assets/css/base.css, que esta folha carrega ao lado sem conflito — nenhuma * classe daqui começa sem o prefixo "dn-" (ou é dn- + coisa específica). */ /* 1. Cores e medidas -------------------------------------------------- */ :root { --paper: #ffffff; --paper-alt: #f5f2ea; --ink: #121212; --ink-muted: #595959; --rule: #121212; --rule-soft: #d9d6ce; --brand: #1b3f94; --brand-deep: #0c1f4f; --on-deep: #ffffff; --on-brand: #ffffff; --rosa: #c2185b; --rosa-soft: #fbe3ec; --urgente: #c8102e; --on-urgente: #ffffff; --focus: #1b3f94; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --radius-sm: 2px; --radius-pill: 999px; --page-max: 1200px; --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --font-sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif; /* A marca: condensada, só maiúscula, uma letra que não é "mais uma serifada elegante de portal genérico". Fica em mastro, rodapé e rótulo de seção — nunca em título de matéria, porque ali o texto é frase comum e Bebas Neue não tem minúscula de verdade para segurar isso. */ --font-brand: "Bebas Neue", Impact, "Arial Narrow", sans-serif; } /* Três estados, igual ao resto do site: "auto" segue o aparelho, e só data-tema="escuro" ou "claro" (escrito pelo servidor) força um lado. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --paper: #111214; --paper-alt: #1b1c20; --ink: #f2f0eb; --ink-muted: #a9a7a1; --rule: #f2f0eb; --rule-soft: #34353b; --brand: #8fb0ff; --brand-deep: #16234a; --on-deep: #ffffff; --on-brand: #0c1f4f; --rosa: #ff8fb8; --rosa-soft: #3a1f2b; --urgente: #ff5c70; --on-urgente: #111214; --focus: #ffd166; } } :root[data-tema="escuro"] { --paper: #111214; --paper-alt: #1b1c20; --ink: #f2f0eb; --ink-muted: #a9a7a1; --rule: #f2f0eb; --rule-soft: #34353b; --brand: #8fb0ff; --brand-deep: #16234a; --on-deep: #ffffff; --on-brand: #0c1f4f; --rosa: #ff8fb8; --rosa-soft: #3a1f2b; --urgente: #ff5c70; --on-urgente: #111214; --focus: #ffd166; } /* 2. Base --------------------------------------------------------------- */ .dn, .dn * { box-sizing: border-box; } .dn { background: var(--paper); color: var(--ink); font-family: var(--font-serif); -webkit-font-smoothing: antialiased; } .dn a { color: inherit; text-decoration: none; } .dn a:hover .dn-title, .dn a.dn-title:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .dn :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .dn img { max-width: 100%; } .dn .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Proporções de foto — em vez de style="aspect-ratio" (a CSP barra style embutido). */ .ar-16x9 { aspect-ratio: 16 / 9; } .ar-3x2 { aspect-ratio: 3 / 2; } .ar-1x1 { aspect-ratio: 1 / 1; } .ar-4x3 { aspect-ratio: 4 / 3; } .ar-2x1 { aspect-ratio: 2 / 1; } /* Masthead */ .dn-mast { text-align: center; padding: var(--space-3) var(--space-4) 0; } .dn-mast-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-sans); font-size: 12px; line-height: 16px; color: var(--ink-muted); } .dn-mast-date { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .dn-mast-date strong { color: var(--ink); font-weight: 700; } .dn-mast-actions { display: flex; gap: var(--space-2); align-items: center; } .dn-mast-name { display: block; font-family: var(--font-brand); font-weight: 400; font-size: 84px; line-height: 0.9; letter-spacing: 0.01em; text-transform: uppercase; margin: var(--space-2) 0 var(--space-1); color: var(--ink); } .dn-mast-name em { font-style: normal; color: var(--brand); } .dn-mast-tag { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); padding-bottom: var(--space-3); } .dn-icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--rule-soft); background: var(--paper); color: var(--ink); border-radius: var(--radius-sm); cursor: pointer; } .dn-icon-btn svg { width: 16px; height: 16px; } .dn-icon-btn[hidden] { display: none; } /* Nav */ .dn-nav { border-top: 4px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 0; position: relative; } .dn-nav::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 1px solid var(--paper); } .dn-nav ul { list-style: none; margin: 0; padding: 0 var(--space-4); display: flex; justify-content: center; flex-wrap: wrap; } .dn-nav a { display: block; padding: var(--space-3) var(--space-4); font-family: var(--font-brand); font-size: 20px; line-height: 20px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); border-bottom: 3px solid transparent; margin-bottom: -1px; } .dn-nav a:hover { color: var(--brand); } /* Busca — visível por padrão (funciona sem JavaScript). O JS de assets/js/busca.js é que a esconde e liga o botão de alternância; sem ele o campo fica onde está, sempre alcançável. */ .dn-search { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule-soft); } .dn-search[hidden] { display: none; } .dn-search form { max-width: 600px; margin: 0 auto; display: flex; gap: var(--space-2); } .dn-search input { flex: 1; font: 16px var(--font-sans); padding: 9px 12px; border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); } .dn-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } /* Kicker */ .dn-kicker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); } .dn-kicker.t-rosa { color: var(--rosa); } .dn-kicker.t-inverse { color: var(--on-deep); } a.dn-kicker:hover { text-decoration: underline; } /* Foto */ .dn-photo { margin: 0; } .dn-photo-frame { position: relative; overflow: hidden; background: var(--paper-alt); } .dn-photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; } .dn-photo figcaption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; color: var(--ink-muted); margin-top: 6px; } /* Story */ .dn-story { display: flex; flex-direction: column; gap: var(--space-2); } .dn-story .dn-kicker { margin-bottom: -4px; } .dn-title { margin: 0; color: var(--ink); font-family: var(--font-serif); font-weight: 700; font-size: 21px; line-height: 27px; } .dn-dek { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 23px; color: var(--ink-muted); } .dn-meta { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; } .dn-meta b { color: var(--ink); font-weight: 700; } .dn-story.v-lead .dn-title { font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 50px; letter-spacing: -0.01em; } .dn-story.v-lead .dn-dek { font-size: 18px; line-height: 26px; } .dn-story.v-lead { gap: var(--space-3); } .dn-story.v-compact .dn-title { font-size: 17px; line-height: 22px; font-weight: 600; } .dn-story.v-compact { flex-direction: row; gap: var(--space-3); align-items: flex-start; } .dn-story.v-compact .dn-story-body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .dn-story.v-compact .dn-photo { width: 96px; flex: none; } .dn-story-body { display: flex; flex-direction: column; gap: var(--space-2); } /* Lista de matérias (usada na capa, na editoria, na busca e em "leia também") — filete entre itens, sem cartão. */ .dn-story-lista { list-style: none; margin: 0; padding: 0; } /* Cabeçalho de seção */ .dn-sec { display: flex; align-items: baseline; justify-content: space-between; border-top: 2px solid var(--rule); padding-top: var(--space-2); margin-bottom: var(--space-4); } .dn-sec h2 { margin: 0; font-family: var(--font-brand); font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); } .dn-sec h2::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px; background: var(--sec-accent, var(--brand)); vertical-align: baseline; } .dn-sec a { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--brand); } .dn-sec a:hover { text-decoration: underline; } .dn-sec.accent-rosa h2::after { background: var(--rosa); } .dn-sec.accent-urgente h2::after { background: var(--urgente); } /* Botão */ .dn-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: 700; font-size: 14px; line-height: 20px; padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap; } .dn-btn.s-sm { font-size: 12px; line-height: 16px; padding: 7px 12px; } .dn-btn.v-primary { background: var(--brand); color: var(--on-brand); } .dn-btn.v-primary:hover { background: var(--brand-deep); color: var(--on-deep); } /* Rodapé */ .dn-foot { background: var(--brand-deep); color: var(--on-deep); padding: var(--space-7) var(--space-5) var(--space-5); font-family: var(--font-sans); } .dn-foot-name { font-family: var(--font-brand); font-weight: 400; font-size: 48px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; } .dn-foot-grid { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); margin: var(--space-5) 0; padding: var(--space-5) 0; border-top: 1px solid var(--on-deep); border-bottom: 1px solid var(--on-deep); } .dn-foot-grid a { color: var(--on-deep); font-size: 14px; font-weight: 600; } .dn-foot-grid a:hover { text-decoration: underline; } .dn-foot-note { font-size: 12px; line-height: 18px; color: var(--on-deep); } /* Grade da página */ .dn-wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-5); } .dn-cols { display: grid; gap: var(--space-5); } .dn-cols > * { position: relative; } .dn-ruled > * + *::before { content: ""; position: absolute; left: calc(var(--space-5) / -2); top: 0; bottom: 0; border-left: 1px solid var(--rule-soft); } .stack { display: grid; gap: var(--space-5); align-content: start; } .stack > * + * { border-top: 1px solid var(--rule-soft); padding-top: var(--space-5); } .sec { margin-top: var(--space-7); } .two-col { grid-template-columns: 2fr 1fr; gap: var(--space-7); } .one { grid-template-columns: 1fr; } .two { grid-template-columns: repeat(2, 1fr); } .three { grid-template-columns: repeat(3, 1fr); } .four { grid-template-columns: repeat(4, 1fr); } .aside-box { background: var(--paper-alt); padding: var(--space-5); } .aside-box h2 { font-family: var(--font-sans); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: 2px solid var(--rule); } .aside-box h2 a:hover { text-decoration: underline; } /* Lista de títulos só-texto (bloco de editoria no pé da capa) */ .dn-lista-titulos { list-style: none; margin: 0; padding: 0; } .dn-lista-titulos li { padding-block: var(--space-2); border-top: 1px solid var(--rule-soft); } .dn-lista-titulos li:first-child { border-top: 0; padding-top: 0; } .dn-lista-titulos a { font-family: var(--font-serif); font-weight: 600; font-size: 15px; line-height: 20px; color: var(--ink); } .dn-lista-titulos a:hover { text-decoration: underline; text-underline-offset: 3px; } .newsletter { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); border: 2px solid var(--rule); padding: var(--space-5); margin: var(--space-7) 0; flex-wrap: wrap; } .newsletter p { margin: 4px 0 0; font-size: 16px; color: var(--ink-muted); } .newsletter strong { font-family: var(--font-display); font-size: 26px; } .newsletter form { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } .newsletter input[type="email"] { font: 16px var(--font-sans); padding: 9px 12px; border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); min-width: 14rem; } /* Armadilha anti-robô: fora da tela por posição, nunca por display:none — robô procura justamente display:none para saber o que pular. */ .newsletter .armadilha { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Espaço de anúncio — some inteiro quando não há anúncio cadastrado; a parcial nem chega a imprimir a etiqueta (erro nº 16 do manual). */ .dn-ad { text-align: center; padding-block: var(--space-4); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); margin-block: var(--space-6); } .dn-ad-rotulo { margin: 0 0 var(--space-2); font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); } .dn-ad img { display: block; max-width: 100%; height: auto; margin-inline: auto; } /* Estado vazio (portal recém-instalado) */ .dn-vazio { padding-block: var(--space-8) var(--space-6); } .dn-vazio .dn-title { font-family: var(--font-display); font-size: 32px; line-height: 38px; } /* --- Página de leitura (matéria) --------------------------------------- */ .dn-article { max-width: 44rem; margin: 0 auto; padding-block: var(--space-6) var(--space-7); } .dn-article-header { padding-bottom: var(--space-4); } .dn-article-title { margin: var(--space-2) 0 var(--space-3); font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4.6vw, 44px); line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); } .dn-article-dek { margin: 0 0 var(--space-3); font-family: var(--font-serif); font-size: 19px; line-height: 27px; color: var(--ink-muted); } .dn-article-meta { padding-block: var(--space-2); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); font-family: var(--font-sans); font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; } .dn-article-meta b { color: var(--ink); } .dn-article-capa { margin: var(--space-5) 0; } .dn-article-capa img { display: block; width: 100%; height: auto; } .dn-article-capa figcaption { margin-top: var(--space-2); font-family: var(--font-sans); font-size: 12px; color: var(--ink-muted); } .dn-article-corpo { font-family: var(--font-serif); font-size: 19px; line-height: 1.7; color: var(--ink); } .dn-article-corpo p { margin: 0 0 var(--space-4); } .dn-article-corpo h2, .dn-article-corpo h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; margin: var(--space-6) 0 var(--space-3); color: var(--ink); } .dn-article-corpo h2 { font-size: 26px; } .dn-article-corpo h3 { font-size: 21px; } .dn-article-corpo a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rosa); text-underline-offset: 3px; text-decoration-thickness: 2px; } .dn-article-corpo a:hover { color: var(--rosa); } .dn-article-corpo img { max-width: 100%; height: auto; } .dn-article-corpo figure { margin: var(--space-5) 0; } .dn-article-corpo figcaption { margin-top: var(--space-2); font-family: var(--font-sans); font-size: 13px; color: var(--ink-muted); } .dn-article-corpo blockquote { margin: var(--space-5) 0; padding-left: var(--space-4); border-left: 3px solid var(--rosa); font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.4; } .dn-article-corpo blockquote p { margin: 0; } .dn-article-corpo ul, .dn-article-corpo ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); } .dn-article-corpo li { margin-bottom: var(--space-2); } .dn-compartilhar { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4); margin-top: var(--space-6); padding-block: var(--space-3); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); font-family: var(--font-sans); } .dn-compartilhar-rotulo { margin: 0; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); } .dn-compartilhar a { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); } .dn-compartilhar a:hover { color: var(--brand); } /* --- Cabeçalho de editoria / busca -------------------------------------- */ .dn-cabecalho { padding-block: var(--space-6) var(--space-5); border-bottom: 2px solid var(--rule); margin-bottom: var(--space-2); } .dn-cabecalho .dn-title { font-family: var(--font-display); font-size: clamp(28px, 4.4vw, 40px); line-height: 1.08; margin-top: var(--space-2); } .dn-cabecalho .dn-dek { margin-top: var(--space-3); font-size: 18px; } /* 3. Capa ---------------------------------------------------------------- */ .top-grid { grid-template-columns: 2fr 1fr; margin-top: var(--space-5); } .dn-band { background: var(--paper-alt); padding: var(--space-7) 0; } /* 4. Celular ------------------------------------------------------------- Um único ponto de quebra: abaixo dele a capa empilha em uma coluna, o menu de editorias vira uma fita horizontal e as listas em grade viram linhas com foto pequena à direita — o mesmo desenho da maquete mobile, ativado por media query em vez de um arquivo à parte. */ @media (max-width: 760px) { .dn-wrap { padding: 0 var(--space-4); } .dn-mast-name { font-size: 40px; } .dn-mast-tag { font-size: 10px; } .dn-nav ul { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 0; scrollbar-width: none; } .dn-nav ul::-webkit-scrollbar { display: none; } .dn-nav a { padding: var(--space-3); white-space: nowrap; } .top-grid, .two-col, .two, .three, .four { grid-template-columns: 1fr; } .dn-ruled > * + *::before { display: none !important; } .dn-cols.dn-ruled > * + * { border-top: 1px solid var(--rule-soft); padding-top: var(--space-5); } .dn-story.v-lead .dn-title { font-size: 30px; line-height: 36px; } .newsletter { flex-direction: column; align-items: flex-start; } .dn-foot-name { font-size: 30px; } .dn-foot-grid { gap: var(--space-3) var(--space-5); } /* Grades de quatro/três/duas colunas viram linhas com foto pequena à direita — mesmo card, só reorganizado por CSS Grid (nada de trocar classe no PHP). */ :is(.four, .three, .two) .dn-story:not(.v-compact) { display: grid; grid-template-columns: 1fr 104px; column-gap: var(--space-3); row-gap: 6px; align-items: start; } :is(.four, .three, .two) .dn-story:not(.v-compact) > .dn-photo { grid-column: 2; grid-row: 1 / span 3; width: auto; } :is(.four, .three, .two) .dn-story:not(.v-compact) > .dn-photo .dn-photo-frame { aspect-ratio: 1 / 1 !important; } :is(.four, .three, .two) .dn-story:not(.v-compact) > :not(.dn-photo) { grid-column: 1; } :is(.four, .three, .two) .dn-story .dn-title { font-size: 17px; line-height: 22px; } .dn-article-corpo { font-size: 17px; } }