/* ===================================================================== NewsPlugn v2.0 — CSS leve (sem frameworks) Conteúdo: 1. Estilo de destaque para imagens dos artigos (3 estilos) 2. Limite de tamanho das imagens (não ocupam o ecrã todo) 3. Layouts das listas/grelhas de artigos (shortcodes) 4. 3 estilos de item de lista ===================================================================== */ /* Variáveis (também definidas via PHP no , mas com fallback aqui) */ :root { --np-hl-color: #c0392b; --np-img-radius: 10px; --np-img-max-width: 600px; } /* ===================================================================== 1. ESTILO DE DESTAQUE — 3 ESTILOS ===================================================================== */ /* --- Estilo 1: Borda — moldura elegante com borda branca e contorno --- */ .newsplugn-highlight.newsplugn-hl-border, .newsplugn-highlight.newsplugn-hl-border img { border: 4px solid #fff !important; outline: 1px solid rgba(0, 0, 0, 0.08) !important; outline-offset: 1px; box-shadow: 0 0 0 2px var(--np-hl-color) !important; border-radius: var(--np-img-radius) !important; margin: 0 auto 1.4em !important; display: block; transition: box-shadow 0.25s ease, transform 0.25s ease; } .newsplugn-highlight.newsplugn-hl-border:hover, .newsplugn-highlight.newsplugn-hl-border img:hover { box-shadow: 0 0 0 3px var(--np-hl-color), 0 6px 20px rgba(0, 0, 0, 0.15) !important; transform: translateY(-3px); } /* --- Estilo 2: Sombra — sombra suave e cantos arredondados --- */ .newsplugn-highlight.newsplugn-hl-shadow, .newsplugn-highlight.newsplugn-hl-shadow img { border: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important; border-radius: var(--np-img-radius) !important; margin: 0 auto 1.4em !important; display: block; transition: box-shadow 0.25s ease, transform 0.25s ease; } .newsplugn-highlight.newsplugn-hl-shadow:hover, .newsplugn-highlight.newsplugn-hl-shadow img:hover { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24) !important; transform: translateY(-4px); } /* --- Estilo 3: Cartão — bloco com fundo, padding e sombra marcada --- */ .newsplugn-highlight.newsplugn-hl-card, .newsplugn-highlight.newsplugn-hl-card img { background: #fafafa !important; padding: 14px !important; border: 1px solid #e8e8e8 !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important; border-radius: var(--np-img-radius) !important; margin: 0 auto 1.4em !important; display: block; transition: box-shadow 0.25s ease, transform 0.25s ease; } .newsplugn-highlight.newsplugn-hl-card:hover, .newsplugn-highlight.newsplugn-hl-card img:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.20) !important; transform: translateY(-4px); border-color: var(--np-hl-color) !important; } /* ===================================================================== 2. LIMITE DE TAMANHO DAS IMAGENS NO CONTEÚDO Garante que as imagens não ocupam o ecrã todo. (max-width também é injetado via PHP com a opção configurável) ===================================================================== */ .single-post .entry-content img, .single .entry-content img, .entry-content .newsplugn-highlight, .entry-content .newsplugn-highlight img, article img.newsplugn-highlight { max-width: var(--np-img-max-width, 600px) !important; width: 100% !important; height: auto !important; margin-left: auto !important; margin-right: auto !important; display: block; } /* Garantir que figuras também respeitam o limite */ .single-post .entry-content figure, .single .entry-content figure { max-width: var(--np-img-max-width, 600px) !important; margin-left: auto !important; margin-right: auto !important; } /* ===================================================================== 3. LISTAS / GRELHAS DE ARTIGOS (SHORTCODES) ===================================================================== */ .newsplugn-articles { list-style: none; margin: 0 0 1.5em; padding: 0; } /* Layout em colunas (grelha) */ .newsplugn-articles.newsplugn-grid { display: grid; grid-template-columns: 1fr; gap: 1.2em; } .newsplugn-articles.newsplugn-grid.newsplugn-col-2 { grid-template-columns: repeat(2, 1fr); } .newsplugn-articles.newsplugn-grid.newsplugn-col-3 { grid-template-columns: repeat(3, 1fr); } .newsplugn-articles.newsplugn-grid.newsplugn-col-4 { grid-template-columns: repeat(4, 1fr); } /* Item individual — base */ .newsplugn-item { display: flex; flex-direction: column; overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; } /* Miniatura */ .newsplugn-item-thumb { display: block; width: 100%; overflow: hidden; background: #f0f0f0; } .newsplugn-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .newsplugn-item:hover .newsplugn-item-thumb img { transform: scale(1.05); } /* Corpo do item */ .newsplugn-item-body { padding: 0.8em 1em 1em; } .newsplugn-item-title { margin: 0 0 0.3em; font-size: 1.05rem; line-height: 1.3; font-weight: 700; } .newsplugn-item-title a { text-decoration: none; color: #1a1a1a; transition: color 0.2s ease; } .newsplugn-item-title a:hover { color: var(--np-hl-color, #c0392b); } .newsplugn-item-date { display: block; font-size: 0.8rem; color: #888; margin-bottom: 0.5em; } .newsplugn-item-excerpt { margin: 0; font-size: 0.9rem; color: #555; line-height: 1.5; } /* ===================================================================== 4. 3 ESTILOS DE ITEM DE LISTA ===================================================================== */ /* --- Estilo 1: Cartão — caixa branca com sombra e bordas --- */ .newsplugn-item.newsplugn-item-style-1 { background: #fff; border: 1px solid #eaeaea; border-radius: 10px; } .newsplugn-item.newsplugn-item-style-1:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); transform: translateY(-3px); } /* --- Estilo 2: Simples — apenas texto, sem caixa --- */ .newsplugn-item.newsplugn-item-style-2 { background: transparent; border: none; border-bottom: 1px solid #eee; border-radius: 0; flex-direction: row; align-items: flex-start; gap: 1em; padding-bottom: 1em; } .newsplugn-item.newsplugn-item-style-2:hover { box-shadow: none; transform: none; } .newsplugn-item.newsplugn-item-style-2 .newsplugn-item-thumb { width: 130px; flex-shrink: 0; border-radius: 6px; } .newsplugn-item.newsplugn-item-style-2 .newsplugn-item-body { padding: 0; } /* --- Estilo 3: Bordas coloridas — faixa de cor à esquerda --- */ .newsplugn-item.newsplugn-item-style-3 { background: #fff; border: 1px solid #eaeaea; border-left: 5px solid var(--np-hl-color, #c0392b); border-radius: 6px; } .newsplugn-item.newsplugn-item-style-3:hover { box-shadow: 0 5px 16px rgba(0, 0, 0, 0.10); transform: translateY(-3px); border-left-width: 7px; } /* Em grelha, o estilo 2 volta a coluna (layout horizontal só faz sentido em lista) */ .newsplugn-grid .newsplugn-item.newsplugn-item-style-2 { flex-direction: column; border-bottom: none; } .newsplugn-grid .newsplugn-item.newsplugn-item-style-2 .newsplugn-item-thumb { width: 100%; } /* Lista vertical (1 coluna) com miniatura à esquerda para estilo 1 e 3 */ .newsplugn-list .newsplugn-item.newsplugn-item-style-1, .newsplugn-list .newsplugn-item.newsplugn-item-style-3 { flex-direction: row; align-items: stretch; } .newsplugn-list .newsplugn-item.newsplugn-item-style-1 .newsplugn-item-thumb, .newsplugn-list .newsplugn-item.newsplugn-item-style-3 .newsplugn-item-thumb { width: 200px; flex-shrink: 0; } /* Mensagem quando não há artigos */ .newsplugn-empty { padding: 1.2em; text-align: center; color: #777; background: #f9f9f9; border-radius: 8px; border: 1px dashed #ddd; font-size: 0.9rem; } .newsplugn-empty p { margin: 0; } /* ===================================================================== RESPONSIVO ===================================================================== */ @media (max-width: 768px) { .newsplugn-articles.newsplugn-grid.newsplugn-col-2, .newsplugn-articles.newsplugn-grid.newsplugn-col-3, .newsplugn-articles.newsplugn-grid.newsplugn-col-4 { grid-template-columns: 1fr; } .newsplugn-list .newsplugn-item, .newsplugn-item.newsplugn-item-style-2 { flex-direction: column !important; } .newsplugn-list .newsplugn-item.newsplugn-item-style-1 .newsplugn-item-thumb, .newsplugn-list .newsplugn-item.newsplugn-item-style-3 .newsplugn-item-thumb, .newsplugn-item.newsplugn-item-style-2 .newsplugn-item-thumb { width: 100% !important; } }