/* =================================================================== 1. VARIÁVEIS DE COR (O CÉREBRO DO DESIGN) =================================================================== */ :root { /* Cor de Destaque (Botões, links ativos) */ --bs-primary: #6B21A8; --bs-primary-rgb: 107, 33, 168; /* RGB correto para #6B21A8 */ /* Cores de Fundo */ --bs-body-bg: #120321; /* O fundo principal (roxo bem escuro) */ --bs-tertiary-bg: #1F1133; /* Fundo do Navbar, Footer e Cards (um pouco mais claro) */ /* Cores dos Cards (Sidebar e Posts) */ --bs-card-bg: var(--bs-tertiary-bg); /* Reusa a cor acima */ --bs-card-border-color: #44186C; --bs-card-border-radius: .5rem; /* Um leve arredondamento */ /* Cores do Texto */ --bs-body-color: #FFFFFF; /* Cor do texto principal (branco) */ --bs-heading-color: #E7E5E8; /* Cor dos Títulos (branco) */ /* Links do Menu (Navbar) */ --bs-nav-link-color: #ffffff; --bs-nav-link-hover-color: #ffffff; --bs-navbar-brand-color: #ffffff; --bs-navbar-active-color: #ffffff; /* Cor do link "Início" */ /* Bordas (Ex: caixa de pesquisa) */ --bs-border-color: #44475a; /* Cor do texto padrão para botões .btn-primary */ --bs-btn-color: #ffffff; /* Texto BRANCO para o botão roxo */ } /* =================================================================== 2. APLICAÇÕES GLOBAIS =================================================================== */ /* Aplica o fundo e a cor de texto padrão ao */ body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } /* Aplica a cor de título (branco) a todos os cabeçalhos */ h1, h2, h3, h4, h5, h6 { color: var(--bs-heading-color); } /* =================================================================== 3. CUSTOMIZAÇÃO DOS COMPONENTES =================================================================== */ /* Navbar e Footer */ .navbar, footer { background-color: var(--bs-tertiary-bg); } /* Caixa de Pesquisa (form-control) */ .form-control { background-color: #1c1c27; /* Fundo igual ao do site */ border: 1px solid var(--bs-border-color); color: var(--bs-body-color); } .form-control::placeholder { color: #a0a0c0; } .form-control:focus { background-color: #1c1c27; border-color: var(--bs-primary); color: var(--bs-body-color); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); } /* CORREÇÃO DE ESPECIFICIDADE DA NAVBAR */ header.navbar .navbar-brand { color: #ffffff !important; } header.navbar .navbar-brand:hover { color: #ffffff !important; } header.navbar .nav-link { color: #ffffff !important; } header.navbar .nav-link:hover { color: #ffffff !important; } header.navbar .nav-link.active, header.navbar .nav-link.show { color: #ffffff !important; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* =================================================================== 4. CAIXAS DE CONTEÚDO (Sidebar e Artigos) =================================================================== */ /* A NOVA CAIXA BASE PARA OS ARTIGOS */ .content-box { background-color: var(--bs-card-bg); border: 1px solid var(--bs-card-border-color); border-radius: var(--bs-card-border-radius); /* O padding (p-4) já foi adicionado no HTML */ } /* CARDS DA SIDEBAR (Trending, Menu) */ .card { background-color: var(--bs-card-bg); border-color: var(--bs-card-border-color); color: var(--bs-body-color); } .card-title { color: var(--bs-heading-color); } /* =================================================================== 5. DETALHES DO DESIGN (Posts e Ícones) =================================================================== */ /* Ajusta os cards DE POST (que estão dentro da .content-box) */ .post-card { background-color: transparent; /* Remove o fundo "card-dentro-do-card" */ border: 1px solid #3a3a50; /* Borda padrão, mais escura */ transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } /* EFEITO HOVER (POSTS) */ .post-card:hover { border-color: var(--bs-primary); /* Borda roxa brilhante */ box-shadow: 0 0 15px rgba(var(--bs-primary-rgb), 0.5); /* Sombra roxa */ } /* Garante que a imagem dentro do post-card tenha as bordas arredondadas */ .post-card .img-fluid { border-radius: var(--bs-card-border-radius) 0 0 var(--bs-card-border-radius); } /* Cor customizada para o ícone de fogo */ .trending-icon { color: #ff4757; /* Vermelho-fogo */ margin-right: 8px; } /* Ícone de chevron do menu da sidebar */ .card .bi-chevron-right { margin-right: 8px; font-size: 0.9em; } /* =================================================================== 7. SLIDER CUSTOMIZADO ("Hero Slider") =================================================================== */ .slider-loading { display: none; } #hero-slider { height: 400px; /* Altura do slider */ border-radius: var(--bs-card-border-radius); overflow: hidden; position: relative; } .slider-wrapper { width: 100%; height: 100%; position: relative; } .slide { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.5s ease-in-out; display: flex; flex-direction: column; justify-content: flex-end; } .slide.active { opacity: 1; } .slide-content { background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); color: #ffffff; padding: 2rem; width: 100%; } .slide-content h2 { color: #ffffff; font-size: 2.2rem; } .slide-content p { color: #e0e0e0; font-size: 1rem; } /* =================================================================== 8. NAVEGAÇÃO DO SLIDER (Barras no Topo) =================================================================== */ .slider-nav { position: absolute; top: 1rem; left: 1rem; right: 1rem; display: flex; gap: 0.5rem; z-index: 10; } .slider-nav-item { flex: 1; height: 5px; background-color: rgba(255, 255, 255, 0.3); border-radius: 5px; overflow: hidden; cursor: pointer; } .nav-progress { width: 0%; height: 100%; background-color: #ffffff; transition: width 5s linear; } .slider-nav-item.active .nav-progress { width: 100%; } .nav-progress-reset { transition: none !important; width: 0% !important; } /* =================================================================== 9. AJUSTES FINAIS (Posts Recentes) =================================================================== */ /* =================================================== */ /* AQUI ESTÁ A MUDANÇA: Truncamento de Texto */ /* =================================================== */ .card-text { /* Limita o texto a um número X de linhas */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* Mostra no máximo 3 linhas */ -webkit-box-orient: vertical; } /* Garante que a imagem do post (dinâmica) não fique distorcida e cubra o espaço */ .post-card .img-fluid { height: 100%; object-fit: cover; } /* =================================================================== 10. PÁGINA DE ARTIGOS (Paginação) =================================================================== */ /* Força a imagem do card vertical a ter uma altura fixa */ .article-card-img { height: 200px; object-fit: cover; } /* Ajustes no componente de paginação do Bootstrap para combinar com nosso tema escuro. */ .pagination { /* Variáveis do Bootstrap para paginação, adaptadas ao seu tema */ --bs-pagination-color: var(--bs-primary); --bs-pagination-bg: var(--bs-tertiary-bg); --bs-pagination-border-color: var(--bs-card-border-color); --bs-pagination-hover-color: #ffffff; --bs-pagination-hover-bg: var(--bs-primary); --bs-pagination-hover-border-color: var(--bs-primary); --bs-pagination-active-color: #ffffff; --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-disabled-color: #6c757d; --bs-pagination-disabled-bg: var(--bs-tertiary-bg); --bs-pagination-disabled-border-color: var(--bs-card-border-color); } /* =================================================================== 11. PÁGINA DE POST ÚNICO =================================================================== */ /* A Imagem de Destaque no topo do post */ .post-featured-image { width: 100%; height: auto; max-height: 500px; /* Define uma altura máxima */ object-fit: cover; border-radius: var(--bs-card-border-radius); } /* O container do conteúdo (parágrafos, etc.) */ .post-content { font-size: 1.1rem; line-height: 1.7; } /* Estiliza os parágrafos que vêm do WordPress */ .post-content p { color: var(--bs-body-color); margin-bottom: 1.5rem; } /* Estiliza os subtítulos que vêm do WordPress */ .post-content h2, .post-content h3, .post-content h4 { color: var(--bs-heading-color); margin-top: 2.5rem; margin-bottom: 1rem; font-weight: 700; } /* Garante que imagens DENTRO do post sejam responsivas */ .post-content img { max-width: 100%; height: auto; border-radius: var(--bs-card-border-radius); margin: 1.5rem 0; } /* Estiliza citações (blockquotes) */ .post-content blockquote { border-left: 4px solid var(--bs-primary); padding-left: 1.5rem; margin: 2rem 0; font-style: italic; color: #e0e0e0; } .post-content blockquote p { margin-bottom: 0; } /* =================================================================== 12. ESTILOS DE LINK (Homepage) =================================================================== */ /* Faz o link do card na homepage parecer um 'bloco' e não um link de texto padrão */ .post-card-link { text-decoration: none; /* Remove o sublinhado */ color: inherit; /* Faz o texto herdar a cor branca/roxa */ } /* Garante que o texto não mude de cor ao passar o mouse */ .post-card-link:hover { color: inherit; }