/* Ricioso Tema — estilos principais */ :root { --rs-accent: #0088ff; --rs-accent-dark: #006dcc; --rs-text: #2c2f34; --rs-text-muted: #666666; --rs-border: #e6e6e6; --rs-bg: #ffffff; --rs-bg-alt: #f7f7f7; --rs-radius: 8px; --rs-max-width: 1200px; --rs-heading-scale: 1; --rs-heading-font: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --rs-link-color: var(--rs-accent); --rs-link-color-hover: var(--rs-accent-dark); --rs-button-bg: var(--rs-accent); --rs-button-bg-hover: var(--rs-accent-dark); --rs-base-font-size: 16px; } body.rs-dark-skin { --rs-text: #e5e7eb; --rs-text-muted: #9ca3af; --rs-border: #2d3340; --rs-bg: #1a1d24; --rs-bg-alt: #12141a; } body.rs-dark-skin .rs-post-category { color: #fff !important; } body.rs-dark-skin .rs-single-categories a { background: #232733; color: var(--rs-text) !important; } /* Layout do tema (aba "Layout" no admin / Customizer) */ body.rs-layout-full-width .rs-container { max-width: 100% !important; } body.rs-layout-framed { /* usava uma cor cinza fixa aqui, ignorando a "Cor de fundo da pagina" escolhida em Estilo (essa regra tem mais especificidade que o :root, entao sempre vencia mesmo com a cor customizada aplicada) */ background: var(--rs-bg-alt); padding: 20px; } body.rs-layout-framed .rs-site-header, body.rs-layout-framed .rs-site-content, body.rs-layout-framed .rs-site-footer { max-width: var(--rs-max-width); margin: 0 auto; box-shadow: 0 4px 24px rgba(0,0,0,0.1); } body.rs-layout-framed .rs-site-header { border-radius: 8px 8px 0 0; } body.rs-layout-framed .rs-site-footer { border-radius: 0 0 8px 8px; } body.rs-layout-bordered { border: 10px solid #d9dce1; box-sizing: border-box; min-height: 100vh; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: var(--rs-base-font-size); color: var(--rs-text); background: var(--rs-bg-alt); line-height: 1.6; } a { color: var(--rs-link-color); text-decoration: none; } a:hover { color: var(--rs-link-color-hover); text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } .rs-container { max-width: var(--rs-max-width); margin: 0 auto; padding: 0 20px; } /* Header */ .rs-site-header { background: var(--rs-bg); border-bottom: 1px solid var(--rs-border); position: sticky; top: 0; z-index: 50; } .rs-header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 20px; row-gap: 10px; } /* Posicao da logo e posicao do menu (aba Cabecalho no admin / Customizer) sao independentes uma da outra - cada uma liga uma classe no . */ body.rs-logo-center .rs-header-inner { justify-content: center; } /* Menu abaixo da logo: manda o

pra uma nova linha (order + flex-basis 100%) sem mexer na posicao da logo, que continua controlada só pela classe rs-logo-center acima. */ body.rs-menu-below .rs-primary-nav { order: 3; flex-basis: 100%; width: 100%; } body.rs-menu-below .rs-menu { justify-content: center; flex-wrap: wrap; } .rs-site-title { font-size: 1.5rem; font-weight: 800; color: var(--rs-text) !important; text-decoration: none !important; letter-spacing: -0.02em; } .rs-site-logo { display: flex; align-items: center; } .rs-site-logo img { max-height: var(--rs-logo-height, 72px); width: auto; display: block; } .rs-menu { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; } .rs-menu a { color: var(--rs-text); font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; } .rs-menu-item-icon { font-size: 16px; width: 16px; height: 16px; margin-right: 4px; } .rs-menu-item-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; background: var(--rs-accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.6; border-radius: 999px; text-transform: uppercase; } .rs-menu-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 8px; } .rs-menu-toggle span { width: 22px; height: 2px; background: var(--rs-text); display: block; } /* Layout */ .rs-site-content { padding: 32px 0 48px; } .rs-layout-with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; } .rs-layout-single-col { max-width: 820px; } .rs-main-full { width: 100%; } /* Post list / cards */ .rs-post-list { display: flex; flex-direction: column; gap: 28px; } /* Layouts da listagem de posts (aba Layout no admin/Customizer, aplicado SO na listagem principal da Inicio/Arquivo/Busca - identificada pela classe .rs-main-post-list - pra nao vazar pros blocos de posts individuais de uma pagina, que tem seu proprio estilo escolhido na hora de montar a pagina (classe .rs-bl-* aplicada so naquele bloco). OU por bloco individual via [rs_posts style="..."]/Blocos por pagina, que aplica a classe rs-bl-* direto no .rs-post-list daquele bloco - por isso todo seletor abaixo tem as duas variantes. */ /* "Primeiro post em destaque": o 1o post do loop fica em largura total, os seguintes viram uma grade compacta com imagem em cima (mesmo truque de empilhar coluna que o card ja usa no mobile). */ body.rs-blog-layout-featured-first .rs-main-post-list, .rs-post-list.rs-bl-featured-first { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } body.rs-blog-layout-featured-first .rs-main-post-list > .rs-post-card:first-child, .rs-post-list.rs-bl-featured-first > .rs-post-card:first-child { grid-column: 1 / -1; } body.rs-blog-layout-featured-first .rs-main-post-list > .rs-post-card:not(:first-child), .rs-post-list.rs-bl-featured-first > .rs-post-card:not(:first-child) { grid-template-columns: 1fr; } body.rs-blog-layout-featured-first .rs-main-post-list > .rs-post-card:not(:first-child) .rs-post-thumb, .rs-post-list.rs-bl-featured-first > .rs-post-card:not(:first-child) .rs-post-thumb { aspect-ratio: 16/9; } body.rs-blog-layout-featured-first .rs-main-post-list > .rs-post-card:not(:first-child) .rs-post-body, .rs-post-list.rs-bl-featured-first > .rs-post-card:not(:first-child) .rs-post-body { /* empilhado (imagem em cima, texto embaixo) precisa de padding nos dois lados - o padding-left:0 padrao so faz sentido lado a lado */ padding: 16px 20px; } body.rs-blog-layout-featured-first .rs-main-post-list > .rs-post-card:first-child .rs-post-title, .rs-post-list.rs-bl-featured-first > .rs-post-card:first-child .rs-post-title { font-size: calc(1.7rem * var(--rs-heading-scale)); } /* "Grade de imagens": todos os posts em grade uniforme, imagem em cima do texto (mesmo truque de empilhar coluna do card no mobile). */ body.rs-blog-layout-grid .rs-main-post-list, .rs-post-list.rs-bl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } body.rs-blog-layout-grid .rs-main-post-list .rs-post-card, .rs-post-list.rs-bl-grid .rs-post-card { grid-template-columns: 1fr; } body.rs-blog-layout-grid .rs-main-post-list .rs-post-thumb, .rs-post-list.rs-bl-grid .rs-post-thumb { aspect-ratio: 16/9; } body.rs-blog-layout-grid .rs-main-post-list .rs-post-body, .rs-post-list.rs-bl-grid .rs-post-body { /* empilhado (imagem em cima, texto embaixo) precisa de padding nos dois lados - o padding-left:0 padrao so faz sentido lado a lado */ padding: 16px 20px; } @media (max-width: 700px) { body.rs-blog-layout-featured-first .rs-main-post-list, body.rs-blog-layout-grid .rs-main-post-list, .rs-post-list.rs-bl-featured-first, .rs-post-list.rs-bl-grid { grid-template-columns: 1fr; } } /* "Lista invertida": mesma estrutura do card, so que a imagem passa pra direita (grid-template-columns invertido). */ body.rs-blog-layout-inverted .rs-main-post-list .rs-post-card, .rs-post-list.rs-bl-inverted .rs-post-card { grid-template-columns: minmax(0, 1fr) 390px; } body.rs-blog-layout-inverted .rs-main-post-list .rs-post-media, .rs-post-list.rs-bl-inverted .rs-post-media { order: 2; } body.rs-blog-layout-inverted .rs-main-post-list .rs-post-body, .rs-post-list.rs-bl-inverted .rs-post-body { order: 1; padding: 16px 0 16px 20px; } @media (max-width: 880px) { body.rs-blog-layout-inverted .rs-main-post-list .rs-post-media, body.rs-blog-layout-inverted .rs-main-post-list .rs-post-body, .rs-post-list.rs-bl-inverted .rs-post-media, .rs-post-list.rs-bl-inverted .rs-post-body { order: initial; } } /* "Lista numerada": sem imagem, com numero grande ao lado do texto (estilo "posts-list-counter" do Jannah). */ body.rs-blog-layout-numbered .rs-main-post-list .rs-post-card, .rs-post-list.rs-bl-numbered .rs-post-card { grid-template-columns: 56px minmax(0, 1fr); } body.rs-blog-layout-numbered .rs-main-post-list .rs-post-media, .rs-post-list.rs-bl-numbered .rs-post-media { display: none; } body.rs-blog-layout-numbered .rs-main-post-list .rs-post-body, .rs-post-list.rs-bl-numbered .rs-post-body { padding: 16px 20px 16px 0; } body.rs-blog-layout-numbered .rs-main-post-list, .rs-post-list.rs-bl-numbered { counter-reset: rs-post-counter; } body.rs-blog-layout-numbered .rs-main-post-list .rs-post-card, .rs-post-list.rs-bl-numbered .rs-post-card { counter-increment: rs-post-counter; position: relative; } body.rs-blog-layout-numbered .rs-main-post-list .rs-post-card::before, .rs-post-list.rs-bl-numbered .rs-post-card::before { content: counter(rs-post-counter); grid-column: 1; grid-row: 1 / -1; align-self: center; justify-self: center; font-size: 1.8rem; font-weight: 800; color: var(--rs-border); } /* "Linha do tempo": sem imagem, cada post vira um item numa linha vertical com um pontinho ao lado da data (extraido do .timeline-widget do Jannah, framework/.../_inlined-widgets.scss). */ body.rs-blog-layout-timeline .rs-main-post-list, .rs-post-list.rs-bl-timeline { position: relative; gap: 0; padding-left: 22px; } body.rs-blog-layout-timeline .rs-main-post-list::before, .rs-post-list.rs-bl-timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--rs-border); } body.rs-blog-layout-timeline .rs-main-post-list .rs-post-card, .rs-post-list.rs-bl-timeline .rs-post-card { display: block; background: none; border: none; border-radius: 0; padding: 0 0 24px; position: relative; } body.rs-blog-layout-timeline .rs-main-post-list .rs-post-card::before, .rs-post-list.rs-bl-timeline .rs-post-card::before { content: ''; position: absolute; left: -22px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--rs-accent); border: 3px solid var(--rs-bg-alt); } body.rs-blog-layout-timeline .rs-main-post-list .rs-post-media, body.rs-blog-layout-timeline .rs-main-post-list .rs-post-excerpt, .rs-post-list.rs-bl-timeline .rs-post-media, .rs-post-list.rs-bl-timeline .rs-post-excerpt { display: none; } body.rs-blog-layout-timeline .rs-main-post-list .rs-post-body, .rs-post-list.rs-bl-timeline .rs-post-body { padding: 0; gap: 4px; } body.rs-blog-layout-timeline .rs-main-post-list .rs-post-title, .rs-post-list.rs-bl-timeline .rs-post-title { font-size: 1rem; min-height: 0; -webkit-line-clamp: 1; } body.rs-blog-layout-timeline .rs-main-post-list .rs-post-card-footer, .rs-post-list.rs-bl-timeline .rs-post-card-footer { margin-top: 2px; } /* "Miniatura circular": mesma estrutura lado-a-lado do card padrao, so que a imagem fica pequena e redonda (extraido de .posts-list-circle img.size-thumbnail do Jannah). */ body.rs-blog-layout-circular .rs-main-post-list .rs-post-card, .rs-post-list.rs-bl-circular .rs-post-card { grid-template-columns: 80px minmax(0, 1fr); align-items: center; background: none; border: none; } body.rs-blog-layout-circular .rs-main-post-list .rs-post-media, .rs-post-list.rs-bl-circular .rs-post-media { align-self: center; } body.rs-blog-layout-circular .rs-main-post-list .rs-post-thumb, .rs-post-list.rs-bl-circular .rs-post-thumb { width: 80px; height: 80px; aspect-ratio: 1; border-radius: 50%; } body.rs-blog-layout-circular .rs-main-post-list .rs-post-media .rs-post-meta-footer, .rs-post-list.rs-bl-circular .rs-post-media .rs-post-meta-footer { /* sem categoria embaixo da miniatura circular - so a foto pequena + texto ao lado */ display: none; } body.rs-blog-layout-circular .rs-main-post-list .rs-post-body, .rs-post-list.rs-bl-circular .rs-post-body { padding: 0 20px 0 0; } @media (max-width: 880px) { body.rs-blog-layout-circular .rs-main-post-list .rs-post-card, .rs-post-list.rs-bl-circular .rs-post-card { grid-template-columns: 80px minmax(0, 1fr); } body.rs-blog-layout-circular .rs-main-post-list .rs-post-body, .rs-post-list.rs-bl-circular .rs-post-body { padding: 0 0 0 16px; } } /* Bloco de posts inserido no conteudo via shortcode [rs_posts] - permite varios blocos de estilos diferentes numa unica pagina. Margem propria e reset pra nao herdar espacamento de paragrafo/figure do conteudo ao redor e nao "quebrar" o padrao visual dos cards. */ .rs-posts-block { margin: 32px 0; clear: both; } .rs-posts-block:first-child { margin-top: 0; } .rs-posts-block:last-child { margin-bottom: 0; } .rs-posts-block-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--rs-accent); } .rs-single-content .rs-posts-block .rs-post-list { margin: 0; } /* "Carrossel": setas pra avancar/voltar + bolinhas de paginacao (estilo do widget Slider do Jannah, so que sem depender de nenhuma biblioteca externa de JS - so scroll horizontal com snap + alguns botoes). */ .rs-posts-block-carousel { background: var(--rs-bg); border: 1px solid var(--rs-border); border-radius: var(--rs-radius); padding: 20px; } .rs-posts-block-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 3px solid var(--rs-accent); } .rs-posts-block-title-carousel { margin: 0; padding: 0; border: none; font-size: 1.1rem; } .rs-carousel-nav { display: flex; gap: 8px; flex-shrink: 0; } .rs-carousel-prev, .rs-carousel-next { width: 28px; height: 28px; border: 1px solid var(--rs-border); background: var(--rs-bg); border-radius: 4px; color: var(--rs-text-muted); font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .rs-carousel-prev:hover, .rs-carousel-next:hover { background: var(--rs-accent); color: #fff; border-color: var(--rs-accent); } .rs-carousel-track.rs-post-list { display: flex; flex-direction: row; /* a regra base .rs-post-list usa flex-direction:column - sem sobrescrever aqui, os cards ficavam empilhados verticalmente mesmo com display:flex, porque cada propriedade CSS cascateia separada (a maior especificidade so vale pra quem redeclara) */ flex-wrap: nowrap; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: 4px; /* esconde a barra de rolagem nativa, a navegacao e pelas setas/bolinhas */ scrollbar-width: none; } .rs-carousel-track.rs-post-list::-webkit-scrollbar { display: none; } .rs-carousel-track.rs-post-list { cursor: grab; } .rs-carousel-track.rs-post-list.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } .rs-carousel-track .rs-post-card { flex: 0 0 calc(33.333% - 14px); width: calc(33.333% - 14px); /* reforca a largura - alguns navegadores deixam o item crescer alem do flex-basis quando o conteudo (imagem) e maior */ max-width: calc(33.333% - 14px); min-width: 0; /* o padrao do flex e min-width:auto, que ignora flex-shrink:0 nao mas pode inflar o tamanho minimo pelo conteudo interno (a imagem) */ scroll-snap-align: start; grid-template-columns: 1fr; /* imagem em cima, texto embaixo (igual ao card de grade) */ /* sem borda/fundo proprios - o cartao inteiro do carrossel (.rs-posts-block-carousel) ja tem a borda branca; cada item soltinho dentro, igual ao exemplo de referencia */ background: none; border: none; border-radius: 0; } .rs-carousel-track .rs-post-thumb { aspect-ratio: 16/9; width: 100%; border-radius: var(--rs-radius); } .rs-carousel-track .rs-post-body { padding: 12px 0 0; gap: 6px; } .rs-carousel-track .rs-post-excerpt, .rs-carousel-track .rs-post-card-footer, .rs-carousel-track .rs-post-media .rs-post-meta-footer { /* card compacto de carrossel - so imagem, data/comentarios/vistos e titulo, sem categoria/resumo/"Leia mais" (igual ao exemplo) */ display: none; } .rs-carousel-track .rs-post-title { -webkit-line-clamp: 2; } .rs-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; } .rs-carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rs-border); border: none; padding: 0; cursor: pointer; } .rs-carousel-dot.is-active { background: var(--rs-accent); width: 10px; height: 10px; } @media (max-width: 880px) { .rs-carousel-track .rs-post-card { flex: 0 0 calc(50% - 10px); width: calc(50% - 10px); max-width: calc(50% - 10px); } } @media (max-width: 560px) { .rs-carousel-track .rs-post-card { flex: 0 0 85%; width: 85%; max-width: 85%; } } .rs-post-card { display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: 20px; background: var(--rs-bg); border: 1px solid var(--rs-border); border-radius: var(--rs-radius); overflow: hidden; } .rs-post-media { display: flex; flex-direction: column; } .rs-post-thumb { display: block; aspect-ratio: 390 / 220; /* mesma proporcao que o loop-default.php do Jannah usava (jannah-image-large) */ overflow: hidden; } .rs-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .rs-post-media .rs-post-meta-footer { margin-top: 0; /* cola logo abaixo da imagem, em vez de descer ate o rodape da coluna */ padding: 10px 12px 4px 20px; } .rs-post-author { display: inline-flex; align-items: center; gap: 5px; } .rs-author-icon { flex-shrink: 0; color: var(--rs-text-muted); } .rs-post-body { padding: 16px 20px 16px 0; display: flex; flex-direction: column; gap: 8px; } .rs-post-card:not(:has(.rs-post-thumb)) .rs-post-body { padding-left: 20px; } .rs-post-meta { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--rs-text-muted); flex-wrap: wrap; } .rs-post-category { background: var(--rs-accent); color: #fff !important; text-decoration: none !important; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; } .rs-post-comments, .rs-post-views { display: inline-flex; align-items: center; gap: 4px; } .rs-post-views { margin-left: auto; } /* Icone de fogo (SVG, cor controlada via CSS "color" - nao depende de filtro, que nao funciona de forma confiavel em emoji colorido). O icone herda a cor do span pai, entao muda junto com a faixa de visualizacao. */ .rs-fire-icon, .rs-comment-icon { vertical-align: -2px; } .rs-fire-icon { margin-right: 6px; } .rs-post-comments, .rs-post-views { color: var(--rs-text-muted); } .rs-post-views.warm { color: #f47512; font-weight: 700; } .rs-post-views.hot { color: #f3502a; font-weight: 700; } .rs-post-views.very-hot { color: #f11e1e; font-weight: 700; } .rs-post-title, .rs-single-title, .rs-archive-title, .widget-title, .rs-site-title { font-family: var(--rs-heading-font); } .rs-post-title { margin: 0; font-size: calc(1.25rem * var(--rs-heading-scale)); line-height: 1.3; font-weight: 600; /* trava em 2 linhas e reserva a altura de 2 linhas mesmo quando o titulo e curto, pra todo card ficar com a mesma altura na listagem */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.3em * 2); } .rs-post-title a { color: var(--rs-text); } .rs-post-excerpt { color: var(--rs-text-muted); font-size: 0.95rem; line-height: 1.5; /* mesma logica do titulo: trava em 3 linhas e reserva essa altura, pra igualar a altura dos cards mesmo com resumos bem diferentes */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.5em * 3); } .rs-post-readmore { font-weight: 700; font-size: 0.85rem; white-space: nowrap; } .rs-post-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; /* empurra pro final da coluna de texto, alinhado com a categoria na coluna da imagem */ padding-top: 4px; } .rs-post-meta-footer { gap: 8px; font-size: 0.78rem; } /* Sidebar */ .rs-sidebar { display: flex; flex-direction: column; gap: 24px; } .widget { background: var(--rs-bg); border: 1px solid var(--rs-border); border-radius: var(--rs-radius); padding: 20px; } .widget-title { margin: 0 0 14px; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 2px solid var(--rs-accent); padding-bottom: 8px; } /* Estilo de blocos (aba "Blocos" no admin / Customizer) */ body.rs-block-style-rounded .widget { border-radius: 18px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); } body.rs-block-style-clean .widget { border: none; border-radius: 0; padding: 20px 0; box-shadow: none; } body.rs-block-style-clean .widget:not(:last-child) { border-bottom: 1px solid var(--rs-border); } /* Estilo do titulo do bloco */ body.rs-title-style-side-bar .widget-title { border-bottom: none; border-left: 3px solid var(--rs-accent); padding: 2px 0 2px 12px; } body.rs-title-style-fill .widget-title { border-bottom: none; background: var(--rs-accent); color: #fff; padding: 8px 14px; margin: -20px -20px 14px; border-radius: var(--rs-radius) var(--rs-radius) 0 0; } body.rs-block-style-clean.rs-title-style-fill .widget-title { margin: 0 0 14px; border-radius: 4px; } body.rs-title-style-plain .widget-title { border-bottom: none; text-transform: none; letter-spacing: normal; padding-bottom: 0; } .widget ul { list-style: none; margin: 0; padding: 0; } .widget li { padding: 8px 0; border-bottom: 1px solid var(--rs-border); } .widget li:last-child { border-bottom: none; } .rs-compact-list { display: flex; flex-direction: column; gap: 4px; } .rs-compact-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--rs-border); } .rs-compact-item:last-child { border-bottom: none; padding-bottom: 0; } .rs-compact-item:first-child { padding-top: 0; } .rs-compact-thumb { flex: 0 0 auto; width: 60px; height: 60px; border-radius: var(--rs-radius); overflow: hidden; display: block; background: var(--rs-bg-alt); } .rs-compact-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .rs-compact-thumb-placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--rs-bg-alt), var(--rs-border)); } .rs-compact-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .rs-compact-title { display: block; font-weight: 600; color: var(--rs-text); font-size: 0.85rem; line-height: 1.35; } .rs-compact-date { color: var(--rs-text-muted); font-size: 0.72rem; } /* Estilos de exibicao do widget "Mais Vistos" (extraidos dos estilos reais que o widget de lista de posts do Jannah oferecia: sem imagem, numerada, circular, grade) */ .rs-compact-list-no-image .rs-compact-item { gap: 0; } .rs-compact-list-numbered .rs-compact-item { gap: 12px; align-items: center; } .rs-compact-number { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--rs-bg-alt); color: var(--rs-accent); font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; } .rs-compact-list-circle .rs-compact-thumb { border-radius: 50%; } /* A mesma lista compacta, so que usada como listagem principal (Inicio/ Arquivo/Busca) ou bloco de posts, em vez de dentro de uma sidebar estreita - um pouco maior pra nao ficar perdida numa coluna larga. */ .rs-main-post-list.rs-compact-list-circle, .rs-posts-block .rs-compact-list-circle { background: var(--rs-bg); border: 1px solid var(--rs-border); border-radius: var(--rs-radius); padding: 4px 20px; } .rs-main-post-list.rs-compact-list-circle .rs-compact-thumb, .rs-posts-block .rs-compact-list-circle .rs-compact-thumb { width: 76px; height: 76px; } .rs-main-post-list.rs-compact-list-circle .rs-compact-item, .rs-posts-block .rs-compact-list-circle .rs-compact-item { padding: 16px 0; gap: 16px; } .rs-main-post-list.rs-compact-list-circle .rs-compact-title, .rs-posts-block .rs-compact-list-circle .rs-compact-title { font-size: 1rem; } .rs-main-post-list.rs-compact-list-circle .rs-compact-date, .rs-posts-block .rs-compact-list-circle .rs-compact-date { font-size: 0.8rem; } .rs-compact-list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .rs-compact-list-grid .rs-compact-item { flex-direction: column; border-bottom: none; padding: 0; } .rs-compact-list-grid .rs-compact-thumb { width: 100%; height: auto; aspect-ratio: 4/3; } .rs-compact-list-grid .rs-compact-info { gap: 6px; } /* Search form - cobre tanto o nosso template (searchform.php) quanto o widget nativo de busca do WordPress, que renderiza suas proprias classes (.search-form/.search-field/.search-submit) em vez das nossas. */ .rs-search-form, .widget .search-form { display: flex; gap: 8px; width: 100%; } .rs-search-field, .widget .search-form .search-field { flex: 1; min-width: 0; /* evita que o input estoure o card em flexbox */ width: 100%; padding: 10px 12px; border: 1px solid var(--rs-border); border-radius: var(--rs-radius); font-size: 0.9rem; } .rs-search-submit, .widget .search-form .search-submit { flex: 0 0 auto; background: var(--rs-button-bg); color: #fff; border: none; border-radius: var(--rs-radius); padding: 10px 16px; font-weight: 700; font-size: 0.85rem; cursor: pointer; white-space: nowrap; } .rs-search-submit:hover, .widget .search-form .search-submit:hover { background: var(--rs-button-bg-hover); } .widget .search-form label { display: flex; flex: 1; min-width: 0; } /* Single post */ .rs-single-post, .rs-single-page { background: var(--rs-bg); border: 1px solid var(--rs-border); border-radius: var(--rs-radius); padding: 32px; } .rs-breadcrumbs { margin-bottom: 16px; font-size: 0.85rem; color: var(--rs-text-muted); } .rs-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; } .rs-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--rs-border); } .rs-breadcrumbs a { color: var(--rs-text-muted); } .rs-single-title { font-size: calc(2rem * var(--rs-heading-scale)); line-height: 1.25; margin: 0 0 12px; font-weight: 600; } .rs-single-thumb { margin: 20px -32px; } .rs-single-thumb img { width: 100%; } .rs-single-content { font-size: 1.05rem; margin-top: 20px; } .rs-single-content p { margin: 0 0 20px; } .rs-single-content h2 { margin: 32px 0 14px; font-size: 1.5rem; } .rs-single-content h3 { margin: 26px 0 12px; font-size: 1.2rem; } .rs-single-content a { text-decoration: underline; } .rs-single-content figure { margin: 24px 0; } /* Padroniza altura das imagens do post individual (mantem a largura total da coluna, corta a altura pela metade via object-fit:cover em vez de esticar/achatar a imagem) */ .rs-single-thumb img, .rs-single-content .wp-block-image img, .rs-single-content > img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--rs-radius); } .rs-single-content figcaption { color: var(--rs-text-muted); font-size: 0.85rem; text-align: center; margin-top: 6px; } .rs-single-categories { margin-top: 28px; display: flex; gap: 8px; flex-wrap: wrap; } .rs-single-categories a { background: var(--rs-bg-alt); border: 1px solid var(--rs-border); padding: 4px 12px; border-radius: 999px; font-size: 0.8rem; color: var(--rs-text) !important; text-decoration: none !important; } /* Modelo de pagina "Mapa do Site" */ .rs-sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; margin-top: 24px; } .rs-sitemap-col h2 { font-size: 1rem; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--rs-accent); } .rs-sitemap-col ul { list-style: none; margin: 0; padding: 0; } .rs-sitemap-col li { padding: 6px 0; } .rs-sitemap-col a { color: var(--rs-text); } .rs-sitemap-col a:hover { color: var(--rs-accent); } /* Modelo de pagina "Lista de Autores" */ .rs-authors-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; } .rs-author-card { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--rs-border); } .rs-author-card:last-child { border-bottom: none; padding-bottom: 0; } .rs-author-avatar img { border-radius: 50%; display: block; } .rs-author-info { flex: 1; min-width: 0; } .rs-author-name { display: block; font-size: 1.05rem; font-weight: 700; color: var(--rs-text); margin-bottom: 4px; } .rs-author-bio { color: var(--rs-text-muted); margin: 0 0 6px; font-size: 0.92rem; } .rs-author-count { color: var(--rs-text-muted); font-size: 0.8rem; } /* Comments */ .rs-comments-wrap { margin-top: 28px; background: var(--rs-bg); border: 1px solid var(--rs-border); border-radius: var(--rs-radius); padding: 32px; } .rs-comment-list { list-style: none; margin: 0; padding: 0; } .rs-comment-list .comment-body { padding: 16px 0; border-bottom: 1px solid var(--rs-border); } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--rs-border); border-radius: var(--rs-radius); font-family: inherit; margin-bottom: 12px; } .comment-form .form-submit input { background: var(--rs-button-bg); color: #fff; border: none; border-radius: var(--rs-radius); padding: 10px 20px; font-weight: 700; cursor: pointer; } /* Pagination */ .pagination, .navigation.pagination { display: flex; gap: 8px; margin-top: 28px; justify-content: center; } .pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--rs-border); border-radius: var(--rs-radius); background: var(--rs-bg); color: var(--rs-text); } .pagination .page-numbers.current { background: var(--rs-button-bg); color: #fff; border-color: var(--rs-button-bg); } .rs-archive-title { font-size: 1.6rem; margin-bottom: 20px; } .rs-404 { text-align: center; padding: 60px 0; } .rs-404 h1 { font-size: 4rem; margin: 0; color: var(--rs-accent); } /* Footer */ .rs-site-footer { background: #111827; color: #d1d5db; margin-top: 48px; padding: 32px 0; } .rs-footer-menu { list-style: none; display: flex; gap: 20px; padding: 0; margin: 0 0 16px; } .rs-footer-menu a { color: #d1d5db; } .rs-footer-copy { font-size: 0.85rem; color: #9ca3af; margin: 16px 0 0; } .rs-footer-extra { font-size: 0.8rem; color: #6b7280; margin: 4px 0 0; } .rs-footer-widgets { display: grid; gap: 24px; margin-bottom: 20px; } .rs-footer-widgets.rs-footer-cols-1 { grid-template-columns: 1fr; } .rs-footer-widgets.rs-footer-cols-2 { grid-template-columns: repeat(2, 1fr); } .rs-footer-widgets.rs-footer-cols-3 { grid-template-columns: repeat(3, 1fr); } .rs-footer-widgets.rs-footer-cols-4 { grid-template-columns: repeat(4, 1fr); } .rs-footer-widgets .widget { background: transparent; border-color: #374151; } .rs-footer-widgets .widget-title { color: #fff; } .rs-footer-widgets a { color: #d1d5db; } .rs-social-icons { list-style: none; display: flex; gap: 14px; margin: 0 0 20px; padding: 0; } .rs-social-icons a { color: #fff; background: #374151; border-radius: 999px; padding: 6px 14px; font-size: 0.8rem; font-weight: 600; text-decoration: none; } .rs-social-icons a:hover { background: var(--rs-button-bg); } .rs-back-to-top { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--rs-button-bg); color: #fff; border: none; font-size: 1.2rem; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 60; } .rs-back-to-top.is-visible { display: flex; } @media (max-width: 700px) { .rs-footer-widgets.rs-footer-cols-2, .rs-footer-widgets.rs-footer-cols-3, .rs-footer-widgets.rs-footer-cols-4 { grid-template-columns: 1fr; } } /* Responsive */ @media (max-width: 880px) { .rs-layout-with-sidebar { grid-template-columns: 1fr; } .rs-post-card { grid-template-columns: 1fr; } .rs-post-thumb { aspect-ratio: 16/9; } .rs-post-body { padding: 16px 20px; } /* no desktop o gap entre colunas ja da o espaco; empilhado no mobile precisa de padding nos dois lados */ .rs-post-media .rs-post-meta-footer { margin-top: 0; padding: 12px 20px 4px; } .rs-post-card-footer { margin-top: 12px; } .rs-menu-toggle { display: flex; } .rs-primary-nav { display: none; width: 100%; } .rs-primary-nav.is-open { display: block; } .rs-header-inner { flex-wrap: wrap; } .rs-menu { flex-direction: column; gap: 4px; padding: 12px 0; } .rs-single-post, .rs-single-page, .rs-comments-wrap { padding: 20px; } .rs-single-thumb { margin: 20px -20px; } } /* ===== Anúncios (pontos de inserção estilo Jannah) ===== */ .rs-ad { text-align: center; margin: 20px auto; } .rs-ad-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--rs-text-muted); margin-bottom: 8px; } .rs-ad-code, .rs-ad img { margin: 0 auto; max-width: 100%; } .rs-ad-code:empty { display: none; } /* Anúncios que ficam soltos fora do .rs-container (topo/rodapé/cabeçalho) precisam do próprio respiro horizontal */ .rs-ad-header-top, .rs-ad-below-header, .rs-ad-above-footer { padding: 16px 20px 0; } /* Ao lado da logo, dentro do cabeçalho - não empurra o menu pra baixo */ .rs-ad-header-side { margin: 0 0 0 auto; } @media (max-width: 900px) { .rs-ad-header-side { display: none; } } /* Dentro do artigo/listagem (já estão dentro de um container com padding) */ .rs-ad-post-above, .rs-ad-post-after-title, .rs-ad-post-above-content, .rs-ad-post-below-content, .rs-ad-post-below, .rs-ad-post-below-comments, .rs-ad-archive-above-title, .rs-ad-archive-below-title, .rs-ad-archive-below-posts, .rs-ad-between-posts { margin: 24px 0; } .rs-ad-inline { margin: 24px 0; } .rs-ad-inline.alignleft { float: left; margin: 6px 20px 12px 0; } .rs-ad-inline.alignright { float: right; margin: 6px 0 12px 20px; } @media (max-width: 782px) { .rs-ad-side { display: none !important; } }