/* Theme Name: Hyper Theme URI: https://glunfy.com Author: Glunfy Author URI: https://glunfy.com Description: Tema WordPress gratuito, moderno e profissional, criado para sites focados em monetização e aprovação no Google AdSense. Possui design responsivo, alta velocidade, personalização completa de cores, menus com ícones, sliders interativos, além de suporte para logo, favicon e meta descrições personalizadas. Version: 2.0.0 Requires at least: 6.0 Tested up to: 6.9 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: hyper Tags: blog, notícias, editorial, performance, seo, adsense, responsivo, velocidade, monetização, gratuito */ /* ============================================ FONT: HELVETICA LT STD BOLD ============================================ */ @font-face { font-family: 'Helvetica Std'; src: url('assets/fonts/HelveticaLTStd-Bold.woff2') format('woff2'), url('assets/fonts/HelveticaLTStd-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } /* ============================================ CSS CUSTOM PROPERTIES — Design Tokens Todas as cores do site vêm daqui. O customizer sobrescreve via :root no . ============================================ */ :root { /* === Cor Principal === */ --hp-primary: #5B21F7; --hp-primary-hover: #4316C7; --hp-primary-light: #f0eafe; --hp-primary-rgb: 91, 33, 247; /* === Superfícies === */ --hp-bg: #f1f5f9; --hp-surface: #ffffff; --hp-border: #e2e8f0; /* === Texto === */ --hp-text: #0f172a; --hp-text-muted: #475569; --hp-text-light: #94a3b8; /* === Header === */ --hp-header-bg: #ffffff; --hp-header-border: #e8edf2; --hp-header-text: #0f172a; --hp-header-muted: #64748b; --hp-nav-text: #374151; /* === Footer === */ --hp-footer-bg: #000000; --hp-footer-text: rgba(255,255,255,0.75); --hp-footer-muted: rgba(255,255,255,0.45); /* === Mobile Menu Painel === */ --hp-mobile-bg: #000000; --hp-mobile-text: #ffffff; --hp-mobile-sub: rgba(255,255,255,0.72); --hp-mobile-muted: rgba(255,255,255,0.38); --hp-mobile-divider: rgba(255,255,255,0.07); --hp-mobile-hover: rgba(255,255,255,0.06); --hp-mobile-sub-bg: rgba(0,0,0,0.18); /* === Formas === */ --hp-radius: 8px; --hp-radius-lg: 12px; --hp-radius-xl: 16px; /* === Sombras === */ --hp-shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); --hp-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04); --hp-shadow-md: 0 8px 24px rgba(0,0,0,0.11), 0 2px 6px rgba(0,0,0,0.05); --hp-shadow-lg: 0 16px 40px rgba(0,0,0,0.14); /* === Transições === */ --hp-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1); /* === Fontes === */ --hp-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --hp-font-heading: 'Helvetica Std', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ============================================ RESET & BASE ============================================ */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dt, dd, blockquote, figure, figcaption, fieldset, legend, pre, hr { margin: 0; padding: 0; } html { font-family: var(--hp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; scroll-behavior: smooth; } body { background-color: var(--hp-bg); color: var(--hp-text); line-height: 1.75; font-size: 16px; overflow-x: hidden; } /* ============================================ LAYOUT ============================================ */ .container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .container { padding: 0 1.5rem; } } @media (min-width: 1024px) { .container { padding: 0 2rem; } } /* ============================================ HEADER ============================================ */ .site-header { background-color: var(--hp-header-bg); border-bottom: 1px solid var(--hp-header-border); min-height: 68px; position: sticky; top: 0; z-index: 200; box-shadow: var(--hp-shadow-sm); } .site-header > .container { min-height: inherit; } .header-content { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; position: relative; min-height: inherit; padding: 0.5rem 0; } body.no-header-menu .header-content { justify-content: center; } .site-branding { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .site-logo { display: flex; align-items: center; } .site-logo-link { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; } .site-logo-link img { max-height: 60px; width: auto; height: auto; display: block; object-fit: contain; } .site-logo-link h1 { margin: 0; padding: 0; line-height: 1; display: flex; align-items: center; font-size: inherit; } .site-logo-link h1 img { max-height: 60px; } .site-header h1.site-logo-link { margin: 0; padding: 0; } .site-title { font-size: 1.375rem; font-weight: 700; color: var(--hp-header-text); text-decoration: none; margin: 0; line-height: 1.2; font-family: var(--hp-font-heading); letter-spacing: -0.02em; transition: color var(--hp-transition); } .site-title a { color: var(--hp-header-text); text-decoration: none; } .site-title a:hover, .site-title:hover { color: var(--hp-primary); } .site-description { font-size: 0.75rem; color: var(--hp-header-muted); margin: 0; line-height: 1.2; } /* ── Navegação Desktop ── */ .main-navigation { flex-shrink: 0; } .main-navigation ul { list-style: none; display: flex; gap: 0.125rem; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; } .main-navigation li { margin: 0; position: relative; } .main-navigation a { color: var(--hp-nav-text); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 0.45rem 0.875rem; display: flex; align-items: center; gap: 0.3rem; border-radius: 7px; transition: color 200ms ease, transform 220ms cubic-bezier(.22,.8,.27,1); white-space: nowrap; position: relative; } /* Hover: underline animado deslizando da esquerda + lift + cor primary */ .main-navigation a::before { content: ''; position: absolute; left: 0.875rem; right: 0.875rem; bottom: 0.2rem; height: 2px; background: var(--hp-primary); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform 280ms cubic-bezier(.22,.8,.27,1); pointer-events: none; } .main-navigation a:hover { color: var(--hp-primary); background: transparent; transform: translateY(-1px); } .main-navigation a:hover::before { transform: scaleX(1); } /* Item com home icon: underline um pouco diferente (centrado, pequeno) */ .main-navigation a:has(> .hp-home-icon)::before { left: 50%; right: auto; width: 16px; transform: translateX(-50%) scaleX(0); transform-origin: center; } .main-navigation a:has(> .hp-home-icon):hover::before { transform: translateX(-50%) scaleX(1); } @media (prefers-reduced-motion: reduce) { .main-navigation a:hover { transform: none; } .main-navigation a::before { transition: none; } } /* Estado ativo — design moderno: texto em primary + underline animado + dot pulsante */ .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a, .main-navigation .current-menu-ancestor > a { color: var(--hp-primary); background: transparent; font-weight: 700; position: relative; } .main-navigation .current-menu-item > a:hover, .main-navigation .current_page_item > a:hover { color: var(--hp-primary-hover); background: transparent; } /* Underline animado (cresce do centro) */ .main-navigation .current-menu-item > a:not(:has(.hp-home-icon))::before, .main-navigation .current_page_item > a:not(:has(.hp-home-icon))::before { content: ''; position: absolute; left: 50%; bottom: 4px; width: 60%; height: 2px; background: linear-gradient(90deg, transparent, var(--hp-primary), transparent); transform: translateX(-50%); border-radius: 2px; animation: hpUnderlineGrow 360ms cubic-bezier(.22,.8,.27,1) both; } @keyframes hpUnderlineGrow { from { width: 0; opacity: 0; } to { width: 60%; opacity: 1; } } /* Dot pulsante embaixo do texto */ .main-navigation .current-menu-item > a:not(:has(.hp-home-icon))::after, .main-navigation .current_page_item > a:not(:has(.hp-home-icon))::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 4px; height: 4px; border-radius: 50%; background: var(--hp-primary); transform: translateX(-50%); box-shadow: 0 0 10px color-mix(in srgb, var(--hp-primary) 70%, transparent); animation: hpDotPulse 2s ease-in-out infinite; } @keyframes hpDotPulse { 0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.3); } } @media (prefers-reduced-motion: reduce) { .main-navigation .current-menu-item > a::before, .main-navigation .current-menu-item > a::after { animation: none; } } /* Chevron nos itens com filhos */ .main-navigation .menu-item-has-children > a::after { content: ""; display: inline-block; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform var(--hp-transition); flex-shrink: 0; } .main-navigation .menu-item-has-children:hover > a::after, .main-navigation .menu-item-has-children:focus-within > a::after { transform: rotate(180deg); } .main-navigation .current-menu-item.menu-item-has-children > a::after, .main-navigation .current-menu-ancestor.menu-item-has-children > a::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } /* Dropdown desktop */ .main-navigation ul ul { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 9999; min-width: 210px; background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 10px; box-shadow: var(--hp-shadow-md); padding: 0.375rem; flex-direction: column; gap: 0.125rem; flex-wrap: nowrap; } .main-navigation ul ul li { width: 100%; } .main-navigation ul ul a { padding: 0.55rem 0.875rem; font-size: 0.875rem; font-weight: 500; border-radius: 6px; white-space: nowrap; color: var(--hp-text); display: block; gap: 0; } .main-navigation ul ul a::after { display: none; } .main-navigation ul ul a:hover { background: color-mix(in srgb, var(--hp-primary) 8%, transparent); color: var(--hp-primary); } .main-navigation li:hover > ul, .main-navigation li:focus-within > ul { display: flex; } /* Botão hamburguer */ .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 201; width: 44px; height: 44px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 8px; transition: background var(--hp-transition); } .menu-toggle:hover { background: rgba(0,0,0,0.06); } .menu-toggle-icon { display: flex; flex-direction: column; width: 20px; height: 14px; justify-content: space-between; } .menu-toggle-icon span { display: block; height: 2px; width: 100%; background-color: var(--hp-header-text); border-radius: 2px; transition: all 0.28s ease; } /* Overlay */ .menu-overlay { position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 198; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .menu-overlay.active { opacity: 1; visibility: visible; } /* ── Mobile Navigation ── */ @media (max-width: 767px) { .site-header { min-height: 60px; } .header-content { gap: 0; justify-content: center; position: relative; min-height: 60px; } /* Logo posicionada absoluta no centro real do header (não no centro do flex space) */ .site-branding { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex: none; justify-content: center; text-align: center; max-width: calc(100% - 180px); /* não invade hamburger nem ícones direita */ } .site-title { font-size: 1.0625rem; text-align: center; } .site-description { display: none; } .site-logo-link img { max-height: 44px; } .menu-toggle { display: flex; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 202; } /* Hamburguer → X quando menu aberto */ body.menu-open .menu-toggle { background: rgba(255,255,255,0.12); } body.menu-open .menu-toggle-icon span { background-color: #ffffff; } body.menu-open .menu-toggle-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.menu-open .menu-toggle-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); } body.menu-open .menu-toggle-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Painel full-screen — slide da esquerda */ .main-navigation { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; background-color: var(--hp-mobile-bg); z-index: 199; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .main-navigation.active { transform: translateX(0); } .main-navigation::before { display: none; } /* Lista — padding-top reserva espaço do header que fica por cima (z-index 200) */ .main-navigation ul { flex-direction: column; gap: 0; width: 100%; padding: 64px 0 2rem; margin: 0; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; } /* Itens com animação (sem divider — visual mais limpo, v1.9.6) */ .main-navigation > ul > li { width: 100%; opacity: 0; transform: translateX(-10px); transition: opacity 0.2s ease, transform 0.2s ease; position: relative; } .main-navigation.active > ul > li { opacity: 1; transform: translateX(0); } .main-navigation.active > ul > li:nth-child(1) { transition-delay: 0.03s; } .main-navigation.active > ul > li:nth-child(2) { transition-delay: 0.06s; } .main-navigation.active > ul > li:nth-child(3) { transition-delay: 0.09s; } .main-navigation.active > ul > li:nth-child(4) { transition-delay: 0.12s; } .main-navigation.active > ul > li:nth-child(5) { transition-delay: 0.15s; } .main-navigation.active > ul > li:nth-child(n+6) { transition-delay: 0.18s; } /* Links principais */ .main-navigation > ul > li > a { display: block; padding: 0.875rem 1.25rem; padding-right: 3.25rem; font-size: 0.9375rem; font-weight: 600; color: var(--hp-mobile-text); border-radius: 0; background: none; white-space: normal; } .main-navigation > ul > li > a:hover { background: var(--hp-mobile-hover); color: var(--hp-mobile-text); } .main-navigation > ul > li > a::after { display: none; } /* Ativo sem pill */ .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a, .main-navigation .current-menu-ancestor > a { color: var(--hp-mobile-text); background: rgba(255,255,255,0.09); font-weight: 700; } /* Toggle chevron */ .submenu-toggle { position: absolute; right: 0; top: 0; width: 52px; height: 100%; background: none; border: none; border-left: 1px solid var(--hp-mobile-divider); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 2; color: var(--hp-mobile-muted); transition: background var(--hp-transition), color var(--hp-transition); } .submenu-toggle:hover { background: var(--hp-mobile-hover); color: var(--hp-mobile-text); } .submenu-toggle svg { width: 16px; height: 16px; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); flex-shrink: 0; } .submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } /* Submenu mobile fechado via grid */ .main-navigation ul ul { position: static; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.26s cubic-bezier(0.4,0,0.2,1); background: var(--hp-mobile-sub-bg); box-shadow: none; border-radius: 0; padding: 0; min-width: 0; width: 100%; overflow: hidden; flex-direction: unset; flex-wrap: unset; align-items: unset; gap: 0; border: none; } .main-navigation ul ul.submenu-open { grid-template-rows: 1fr; } .submenu-inner-wrap { overflow: hidden; min-height: 0; width: 100%; } .main-navigation ul ul li { width: 100%; opacity: 1; transform: none; transition: none; } .main-navigation ul ul a { padding: 0.75rem 1.25rem 0.75rem 2rem; font-size: 0.875rem; font-weight: 500; color: var(--hp-mobile-sub); border-radius: 0; white-space: normal; background: none; display: block; } .main-navigation ul ul a::before, .main-navigation ul ul a::after { display: none; } .main-navigation ul ul a:hover { background: var(--hp-mobile-hover); color: var(--hp-mobile-text); } body.menu-open { overflow: hidden; } } /* ── Header Search ── */ .header-search-wrap { position: relative; flex-shrink: 0; } .header-search-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; background: none; cursor: pointer; border-radius: var(--hp-radius); color: var(--hp-nav-text); transition: background var(--hp-transition), color var(--hp-transition); } .header-search-toggle:hover, .header-search-wrap.open .header-search-toggle { background: color-mix(in srgb, var(--hp-primary) 8%, transparent); color: var(--hp-primary); } .header-search-toggle svg { width: 20px; height: 20px; display: block; } .header-search-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; width: 300px; background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); padding: 0.625rem; z-index: 9999; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease; } .header-search-wrap.open .header-search-panel { opacity: 1; visibility: visible; transform: translateY(0); } .header-search-form { display: flex; align-items: center; gap: 0; border-radius: 0.5rem; overflow: hidden; border: 1px solid var(--hp-border); background: var(--hp-bg); } .hs-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--hp-text-muted); display: block; margin-left: 0.625rem; } .hs-input { flex: 1; min-width: 0; border: none; background: none; padding: 0.5rem 0.5rem; font-size: 0.9rem; color: var(--hp-text); outline: none; box-shadow: none; appearance: none; -webkit-appearance: none; font-family: var(--hp-font-sans); } .hs-input::-webkit-search-decoration, .hs-input::-webkit-search-cancel-button { display: none; } .hs-input:focus { outline: none !important; box-shadow: none !important; } .hs-input::placeholder { color: var(--hp-text-muted); } .hs-submit { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: none; background: var(--hp-primary); color: #fff; cursor: pointer; transition: background var(--hp-transition); border-radius: 0; outline: none; } .hs-submit:hover { background: var(--hp-primary-hover); } .hs-submit svg { width: 15px; height: 15px; display: block; } @media (max-width: 767px) { /* v1.9.3: search e dark-toggle absolute à direita (logo já é absolute no centro) */ .header-search-wrap { position: absolute !important; right: 4px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; z-index: 202; } .dark-toggle { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); margin: 0; z-index: 202; } body.menu-open .header-search-toggle { color: rgba(255, 255, 255, 0.75); } body.menu-open .header-search-toggle:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } /* v1.9.6 — esconde dark + search quando o menu lateral está aberto (sidebar sobrepõe tudo) */ body.menu-open .dark-toggle, body.menu-open .header-search-wrap { display: none !important; } body.menu-open .header-search-panel { display: none !important; } .header-search-panel { position: fixed; top: 60px; left: 0; right: 0; width: 100%; border-radius: 0; border-left: none; border-right: none; } .admin-bar .header-search-panel { top: 106px; } } @media (max-width: 600px) { .admin-bar .header-search-panel { top: 60px; } } @media (max-width: 380px) { .header-search-panel { top: 54px; } } /* ============================================ MAIN CONTENT ============================================ */ .site-main { min-height: calc(100vh - 200px); padding: 2rem 0; } .content-area { display: grid; grid-template-columns: 1fr; gap: 0; min-width: 0; } @media (min-width: 1024px) { .content-area { grid-template-columns: 1fr 300px; gap: 2.5rem; } } .main-content { max-width: 100%; padding: 2rem 0; min-width: 0; overflow: hidden; } @media (min-width: 768px) { .main-content { padding: 2.5rem 0; } } /* ============================================ TYPOGRAPHY ============================================ */ h1, h2, h3, h4, h5, h6, .site-title, .post-title, .post-card-title, .featured-post-title, .page-title, .entry-title { font-family: var(--hp-font-heading); font-weight: 700; letter-spacing: -0.015em; } h1 { font-size: 2.25rem; line-height: 1.2; margin: 2rem 0 1rem; color: var(--hp-text); } h2 { font-size: 1.75rem; line-height: 1.25; margin: 1.75rem 0 0.875rem; color: var(--hp-text); } h3 { font-size: 1.375rem; line-height: 1.3; margin: 1.5rem 0 0.75rem; color: var(--hp-text); } h4 { font-size: 1.125rem; line-height: 1.4; margin: 1.25rem 0 0.5rem; color: var(--hp-text); } p { margin: 1.25rem 0; font-size: 1.0625rem; line-height: 1.8; color: var(--hp-text); } a { color: var(--hp-primary); text-decoration: underline; font-weight: 500; transition: color var(--hp-transition); } a:hover { color: var(--hp-primary-hover); } /* ============================================ SINGLE POST ============================================ */ .post { margin-bottom: 4rem; max-width: 780px; width: 100%; margin-left: auto; margin-right: auto; min-width: 0; } .post-cats { margin-bottom: 0.625rem; display: flex; flex-wrap: wrap; gap: 0.375rem; } .post-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--hp-border); } .post-title { font-size: 2.25rem; line-height: 1.2; margin-bottom: 1rem; color: var(--hp-text); } .post-title a { color: var(--hp-text); text-decoration: none; } .post-title a:hover { color: var(--hp-primary); } .post-meta { color: var(--hp-text-muted); font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; } .post-meta a { color: inherit; text-decoration: none; font-weight: 500; } .post-meta a:hover { color: var(--hp-primary); } .post-meta .post-meta-cat { color: var(--hp-primary); font-weight: 600; } .post-meta .post-meta-cat:hover { color: var(--hp-primary-hover); } .post-content { line-height: 1.85; font-size: 1.0625rem; color: var(--hp-text); } .post-content img { max-width: 100%; height: auto; border-radius: var(--hp-radius); } /* Alinhamento de imagens */ .post-content .alignleft, .entry-content .alignleft { float: left; margin: 0.5rem 1.5rem 1rem 0; } .post-content .alignright, .entry-content .alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; } .post-content .aligncenter, .entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; } .post-content .alignnone, .entry-content .alignnone { display: inline; } .post-content .wp-caption, .entry-content .wp-caption { max-width: 100%; margin-bottom: 1rem; } .post-content .wp-caption.alignleft { float: left; margin: 0.5rem 1.5rem 1rem 0; } .post-content .wp-caption.alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; } .post-content .wp-caption.aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; } .post-content .wp-caption-text, .entry-content .wp-caption-text { font-size: 0.875rem; color: var(--hp-text-light); text-align: center; margin-top: 0.375rem; } .post-content::after, .entry-content::after { content: ""; display: table; clear: both; } /* Tabelas */ .post-content table, .entry-content table { width: 100%; margin: 2rem 0; border-collapse: collapse; font-size: 1rem; border-radius: var(--hp-radius); overflow: hidden; box-shadow: var(--hp-shadow-sm); } .post-content thead, .entry-content thead { background: var(--hp-bg); } .post-content th, .entry-content th { padding: 0.875rem 1rem; text-align: left; font-weight: 600; color: var(--hp-text); border: 1px solid var(--hp-border); } .post-content td, .entry-content td { padding: 0.75rem 1rem; border: 1px solid var(--hp-border); color: var(--hp-text); } .post-content tbody tr:nth-child(even), .entry-content tbody tr:nth-child(even) { background: var(--hp-surface); } .post-content tbody tr:hover, .entry-content tbody tr:hover { background: var(--hp-primary-light); } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 2rem 0; border-radius: var(--hp-radius); } .table-responsive table { margin: 0; min-width: 480px; } .table-scroll-hint { text-align: center; font-size: 0.8125rem; color: var(--hp-text-light); padding: 0.375rem 0; display: none; } @media (max-width: 767px) { .table-scroll-hint { display: block; } } .page-links { margin: 2rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .page-links .page-links-title { margin-right: 0.25rem; font-weight: 600; color: var(--hp-text-muted); font-size: 0.875rem; } .page-links > a, .page-links > span:not(.page-links-title) { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 0.5rem; border-radius: var(--hp-radius); font-size: 0.875rem; font-weight: 500; border: 1px solid var(--hp-border); text-decoration: none; } .page-links > a { color: var(--hp-primary); transition: all var(--hp-transition); } .page-links > a:hover { background: var(--hp-primary); color: #fff; border-color: var(--hp-primary); } .page-links > span:not(.page-links-title) { background: var(--hp-primary); color: #fff; border-color: var(--hp-primary); } .post-footer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--hp-border); } .post-tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .post-tags strong { margin-right: 0.25rem; font-weight: 600; color: var(--hp-text-muted); } .post-tags a { display: inline-block; padding: 0.3rem 0.875rem; font-size: 0.8125rem; font-weight: 500; color: var(--hp-primary); background: var(--hp-primary-light); border-radius: 100px; text-decoration: none; transition: all var(--hp-transition); border: 1px solid transparent; } .post-tags a:hover { background: var(--hp-primary); color: #fff; } /* ============================================ FEATURED POSTS ============================================ */ @media (min-width: 768px) { .post-card.post-card-grid[data-featured="true"] { display: none; } } .featured-posts { display: grid; grid-template-columns: 1fr; gap: 0.625rem; margin-bottom: 2.5rem; border-radius: var(--hp-radius-xl); overflow: hidden; } @media (min-width: 768px) { .featured-posts { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, 1fr); height: 440px; } } @media (min-width: 1024px) { .featured-posts { height: 500px; } } .featured-post { position: relative; overflow: hidden; min-height: 260px; } @media (min-width: 768px) { .featured-post-large { grid-row: 1 / 3; min-height: 100%; } .featured-post-small { min-height: 0; } } .featured-post-link { display: block; width: 100%; height: 100%; text-decoration: none; color: #fff; } .featured-post-image { width: 100%; height: 100%; background-size: cover; background-position: center; background-color: #ffffff; position: relative; transition: transform 0.4s ease; will-change: transform; } .featured-post:hover .featured-post-image { transform: scale(1.03); } .featured-post-image.no-image { background: #ffffff; } .featured-post-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.22) 40%, rgba(0,0,0,0.78) 100%); z-index: 1; } .featured-post-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.25rem 1.5rem; z-index: 2; } .featured-post-category { display: inline-block; background-color: var(--hp-primary); color: #fff; padding: 0.25rem 0.75rem; border-radius: 100px; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.625rem; letter-spacing: 0.02em; text-decoration: none; } .featured-post-title { color: #fff; font-weight: 700; line-height: 1.3; margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,0.4); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.0625rem; } .featured-post-meta { display: flex; align-items: center; gap: 0; flex-wrap: wrap; font-size: 0.75rem; color: rgba(255,255,255,0.75); margin-top: 0.375rem; text-shadow: 0 1px 3px rgba(0,0,0,0.4); } .featured-post-meta-sep { margin: 0 0.25rem; } @media (min-width: 768px) { .featured-post-large .featured-post-title { font-size: 1.5rem; } .featured-post-small .featured-post-title { font-size: 0.9375rem; } .featured-post-small .featured-post-content { padding: 1rem 1.25rem; } .featured-post-small .featured-post-meta { font-size: 0.6875rem; } } @media (max-width: 767px) { .featured-posts { display: none; } .post-card.post-card-grid[data-featured="true"] { display: flex; } } /* ============================================ POST CARDS ============================================ */ .posts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.5rem; } @media (max-width: 767px) { .posts-grid { grid-template-columns: 1fr; gap: 1rem; } } @media (min-width: 1200px) { .posts-grid { gap: 1.5rem; } } .post-card.post-card-grid { display: flex; flex-direction: column; border: none; padding: 0; margin: 0; border-radius: var(--hp-radius-lg); overflow: hidden; background: var(--hp-surface); box-shadow: var(--hp-shadow-sm); transition: box-shadow var(--hp-transition), transform var(--hp-transition); min-width: 0; } .post-card.post-card-grid:hover { box-shadow: var(--hp-shadow-md); transform: translateY(-2px); } @media (max-width: 767px) { .post-card.post-card-grid { transform: none; } } a.post-card-thumbnail-full { display: block; width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: #ffffff; position: relative; overflow: hidden; text-decoration: none; flex-shrink: 0; } a.post-card-thumbnail-full:hover .post-card-overlay { background: linear-gradient(to bottom, rgba(0,0,0,0) 10%, rgba(0,0,0,0.82) 100%); } .post-card-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.68) 100%); z-index: 1; transition: background 0.28s ease; } .post-card-title-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 1.125rem; z-index: 2; } .post-card-title { font-weight: 700; line-height: 1.3; margin: 0; } .post-card-title-image span { color: #fff; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem; line-height: 1.35; text-shadow: 0 1px 6px rgba(0,0,0,0.6); } @media (min-width: 1024px) { .post-card-title-image span { font-size: 1.125rem; } } .post-card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.125rem 1.25rem; } .post-card-category { display: inline-block; font-size: 0.6875rem; font-weight: 700; color: var(--hp-primary); text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; } .post-card-category:hover { color: var(--hp-primary-hover); } .post-card-title-below { font-size: 1rem; line-height: 1.35; margin: 0; } .post-card-title-below a { color: var(--hp-text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--hp-transition); } .post-card-title-below a:hover { color: var(--hp-primary); } @media (min-width: 1024px) { .post-card-title-below { font-size: 1.0625rem; } } .post-card-excerpt { color: var(--hp-text-muted); font-size: 0.875rem; line-height: 1.65; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-card-meta { color: var(--hp-text-light); font-size: 0.8125rem; display: flex; gap: 0.375rem; align-items: center; flex-wrap: wrap; margin-top: 0.25rem; } .post-card-meta a { color: var(--hp-text-muted); text-decoration: none; font-weight: 500; } .post-card-meta a:hover { color: var(--hp-primary); } .post-card-meta-sep { color: var(--hp-border); } .post-card-reading-time { color: var(--hp-text-light); } /* ============================================ AD UNITS — Anti-CLS otimizado ============================================ */ .hp-ad-wrap { display: block; text-align: center; overflow: hidden; background: transparent; clear: both; } .hp-ad-label { display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hp-text-light); text-align: center; margin-bottom: 0.25rem; } /* Leaderboard 728×90 */ .hp-ad-leaderboard { min-height: 90px; } @media (max-width: 767px) { .hp-ad-leaderboard { min-height: 50px; } } /* Below header */ .hp-ad-below-header { width: 100%; margin: 0; padding: 0.625rem 0; border-bottom: 1px solid var(--hp-border); background: var(--hp-surface); } /* In-content */ .hp-ad-incontent { margin: 2.5rem auto; min-height: 250px; max-width: 100%; } /* Sidebar */ .hp-ad-sidebar { min-height: 250px; margin: 1rem 0; width: 100%; } /* Responsive */ .hp-ad-responsive { min-height: 100px; width: 100%; margin: 1.5rem 0; } .adsbygoogle { display: block; } ins.adsbygoogle { background: transparent; } /* ============================================ SIDEBAR ============================================ */ .sidebar { padding: 1.5rem 0 1.5rem 1.5rem; border-left: 1px solid var(--hp-border); } .widget { margin-bottom: 2rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--hp-border); } .widget:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .widget-title { font-size: 0.75rem; font-weight: 800; margin-bottom: 1rem; color: var(--hp-text); text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.375rem; } .widget-title::before { content: ''; display: inline-block; width: 3px; height: 13px; background: var(--hp-primary); border-radius: 2px; flex-shrink: 0; } .sidebar form[role="search"], .sidebar .search-form { display: flex; gap: 0.375rem; } .sidebar form[role="search"] label, .sidebar .search-form label { flex: 1; min-width: 0; font-size: 0; overflow: hidden; } .sidebar input[type="search"], .sidebar .search-field { width: 100%; padding: 0.5rem 0.875rem; font-size: 0.9375rem; border: 1px solid var(--hp-border); border-radius: 6px; background: var(--hp-surface); color: var(--hp-text); transition: border-color var(--hp-transition), box-shadow var(--hp-transition); } .sidebar input[type="search"]:focus, .sidebar .search-field:focus { outline: none; border-color: var(--hp-primary); box-shadow: 0 0 0 3px rgba(var(--hp-primary-rgb), 0.14); } .sidebar button[type="submit"], .sidebar input[type="submit"], .sidebar .search-submit { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: #fff; background: var(--hp-primary); border: none; border-radius: 6px; cursor: pointer; flex-shrink: 0; transition: background var(--hp-transition); } .sidebar button[type="submit"]:hover, .sidebar .search-submit:hover { background: var(--hp-primary-hover); } .wp-block-search__label { display: none; } .wp-block-search__inside-wrapper { display: flex; gap: 0.375rem; } .wp-block-search__input { flex: 1; min-width: 0; padding: 0.5rem 0.875rem; font-size: 0.9375rem; border: 1px solid var(--hp-border); border-radius: 6px; background: var(--hp-surface); color: var(--hp-text); font-family: inherit; } .wp-block-search__input:focus { outline: none; border-color: var(--hp-primary); box-shadow: 0 0 0 3px rgba(var(--hp-primary-rgb), 0.14); } .wp-block-search__button { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; background: var(--hp-primary); color: #fff; border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background var(--hp-transition); } .wp-block-search__button:hover { background: var(--hp-primary-hover); } .sidebar .widget ul { list-style: none; margin: 0; padding: 0; } .sidebar .widget li { margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--hp-border); } .sidebar .widget li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .sidebar .widget a { display: block; padding: 0.125rem 0; text-decoration: none; color: var(--hp-text); font-size: 0.9375rem; line-height: 1.5; transition: color var(--hp-transition), padding-left var(--hp-transition); } .sidebar .widget a:hover { color: var(--hp-primary); padding-left: 0.25rem; } @media (max-width: 1023px) { .sidebar { border-left: none; border-top: 1px solid var(--hp-border); padding: 1.75rem 0 0; margin-top: 2rem; } } @media (max-width: 639px) { .sidebar { padding: 1.25rem 0 0; margin-top: 1.25rem; } .widget { margin-bottom: 1.25rem; padding-bottom: 1rem; } .sidebar form[role="search"], .sidebar .search-form, .wp-block-search__inside-wrapper { flex-direction: column; } .sidebar button[type="submit"], .sidebar input[type="submit"], .sidebar .search-submit, .wp-block-search__button { width: 100%; } } /* ============================================ FOOTER ============================================ */ .site-footer { margin-top: 3rem; } .footer-simple { width: 100%; padding: 2rem 1.5rem; text-align: center; background: var(--hp-footer-bg); } .footer-navigation { margin-bottom: 1rem; } .footer-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.25rem; } .footer-navigation li { margin: 0; } .footer-navigation a { color: var(--hp-footer-text); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: color var(--hp-transition); } .footer-navigation a:hover { color: #ffffff; } .footer-copyright { margin: 0; color: var(--hp-footer-muted); font-size: 0.8125rem; } .footer-credit { margin: 0.375rem 0 0; color: var(--hp-footer-muted); font-size: 0.75rem; } .footer-credit a { color: var(--hp-footer-text); text-decoration: none; font-weight: 600; } .footer-credit a:hover { color: #ffffff; } /* ============================================ BACK TO TOP ============================================ */ #back-to-top.back-to-top { position: fixed; bottom: 1.75rem; right: 1.75rem; width: 44px; height: 44px; background: var(--hp-primary); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(var(--hp-primary-rgb), 0.4); transition: background var(--hp-transition), box-shadow var(--hp-transition), transform 0.15s ease; z-index: 9999; padding: 0; margin: 0; } .back-to-top:hover { background: var(--hp-primary-hover); box-shadow: 0 4px 20px rgba(var(--hp-primary-rgb), 0.5); transform: translateY(-2px); } .back-to-top:active { transform: translateY(0) scale(0.95); } .back-to-top svg { width: 20px; height: 20px; flex-shrink: 0; } /* ============================================ POST CONTENT RICH STYLES ============================================ */ .post-content blockquote, .entry-content blockquote { border-left: 4px solid var(--hp-primary); margin: 2rem 0; padding: 1rem 1.5rem; background: var(--hp-primary-light); border-radius: 0 var(--hp-radius) var(--hp-radius) 0; font-style: italic; color: var(--hp-text); } .post-content blockquote p, .entry-content blockquote p { margin: 0.5rem 0; } .post-content pre, .entry-content pre { overflow-x: auto; max-width: 100%; padding: 1.25rem; background: var(--hp-text); color: var(--hp-bg); border-radius: var(--hp-radius); font-size: 0.875rem; line-height: 1.65; } .post-content code, .entry-content code { font-size: 0.875em; background: var(--hp-bg); padding: 0.125rem 0.375rem; border-radius: 4px; color: var(--hp-primary); } .post-content pre code, .entry-content pre code { background: transparent; padding: 0; color: inherit; } .post-content ul, .post-content ol, .entry-content ul, .entry-content ol { margin: 1rem 0; padding-left: 1.5rem; } .post-content li, .entry-content li { margin-bottom: 0.375rem; line-height: 1.75; } .post-content hr, .entry-content hr { border: none; border-top: 1px solid var(--hp-border); margin: 2rem 0; } /* ============================================ EMBEDS & RESPONSIVE ============================================ */ .post-content *, .entry-content * { max-width: 100%; } .table-responsive table, .table-responsive table *, .wp-block-table table, .wp-block-table table * { max-width: none; } .post-content img, .entry-content img { max-width: 100%; height: auto; } .post-content iframe, .post-content video, .entry-content iframe, .entry-content video { max-width: 100%; } .wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .wp-block-embed__wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .post-content, .entry-content { overflow-wrap: break-word; word-break: break-word; min-width: 0; } .post-content a, .entry-content a { overflow-wrap: break-word; word-break: break-word; } /* ============================================ PAGINATION ============================================ */ .pagination-wrap { margin: 3rem 0; } .pagination, .navigation.pagination, .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.375rem; margin: 2.5rem 0; padding: 0; } .navigation.pagination { border: none; flex-direction: column; } .navigation.pagination .nav-links { margin: 0; padding: 0; } .navigation.pagination h2 { position: absolute; clip: rect(1px,1px,1px,1px); overflow: hidden; } .pagination .page-numbers, .pagination a.page-numbers, .navigation.pagination .page-numbers, .nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.75rem; font-size: 0.9375rem; font-weight: 600; text-decoration: none; color: var(--hp-text-muted); background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 6px; transition: all var(--hp-transition); } .pagination a.page-numbers:hover, .nav-links a.page-numbers:hover { color: #fff; background: var(--hp-primary); border-color: var(--hp-primary); } .pagination .page-numbers.current, .nav-links .page-numbers.current { color: #fff; background: var(--hp-primary); border-color: var(--hp-primary); cursor: default; } .pagination .page-numbers.dots, .nav-links .page-numbers.dots { border: none; background: transparent; color: var(--hp-text-light); min-width: auto; } .pagination .prev, .pagination .next, .nav-links .prev, .nav-links .next { padding: 0 1.125rem; font-weight: 600; } /* ============================================ POST NAVIGATION ============================================ */ .post-navigation { margin: 2.5rem 0; border-top: 1px solid var(--hp-border); border-bottom: 1px solid var(--hp-border); padding: 1.25rem 0; } .post-navigation .nav-links { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: 0; } .post-navigation .nav-previous, .post-navigation .nav-next { flex: 1; min-width: 0; } .post-navigation .nav-next { text-align: right; } .post-navigation .nav-subtitle { display: block; font-size: 0.6875rem; color: var(--hp-text-light); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.25rem; } .post-navigation .nav-title { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; } .post-navigation a { text-decoration: none; color: var(--hp-text); } .post-navigation a:hover { color: var(--hp-primary); } /* ============================================ COMMENTS ============================================ */ .comments-area { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--hp-border); } .comments-title { font-size: 1.25rem; margin-bottom: 1.5rem; } .comment-list { list-style: none; margin: 0; padding: 0; } .comment-list .comment { padding: 1.25rem 0; border-bottom: 1px solid var(--hp-border); } .comment-list .children { list-style: none; margin-left: 2rem; padding: 0; } .comment-author { font-weight: 600; font-size: 0.9375rem; } .comment-metadata { font-size: 0.8125rem; color: var(--hp-text-light); margin-bottom: 0.5rem; } .comment-metadata a { color: inherit; text-decoration: none; } .comment-content { font-size: 1rem; line-height: 1.75; } .comment-content p { margin: 0.5rem 0; font-size: 1rem; color: var(--hp-text); } .reply a { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hp-primary); } .no-comments { color: var(--hp-text-muted); font-style: italic; } .comment-author img, .comment .avatar { max-width: 40px; height: auto; border-radius: 50%; vertical-align: middle; margin-right: 0.5rem; } .comment-respond { margin-top: 2.5rem; } .comment-reply-title { font-size: 1.25rem; margin-bottom: 1rem; } .comment-form label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; color: var(--hp-text); } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 0.625rem 1rem; font-size: 1rem; border: 1px solid var(--hp-border); border-radius: var(--hp-radius); background: var(--hp-surface); color: var(--hp-text); font-family: inherit; transition: border-color var(--hp-transition), box-shadow var(--hp-transition); } .comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--hp-primary); box-shadow: 0 0 0 3px rgba(var(--hp-primary-rgb), 0.14); } .comment-form textarea { min-height: 140px; resize: vertical; } .comment-form p { margin: 0 0 1rem; } .comment-form .form-submit input[type="submit"] { padding: 0.75rem 2rem; font-size: 1rem; font-weight: 600; color: #fff; background: var(--hp-primary); border: none; border-radius: var(--hp-radius); cursor: pointer; transition: background var(--hp-transition); } .comment-form .form-submit input[type="submit"]:hover { background: var(--hp-primary-hover); } /* ============================================ ACCESSIBILITY ============================================ */ .screen-reader-text { clip: rect(1px,1px,1px,1px); clip-path: inset(50%); position: absolute !important; height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important; } .skip-link { position: absolute; top: -9999px; left: 0; z-index: 999999; padding: 0.875rem 1.25rem; background: var(--hp-text); color: var(--hp-surface); border-radius: 0 0 var(--hp-radius) 0; } .skip-link:focus { top: 0; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--hp-primary); outline-offset: 2px; } /* ============================================ 404 / EMPTY STATE ============================================ */ .error-404 .page-header .page-title { font-size: clamp(3.5rem, 10vw, 6rem); line-height: 1; margin-bottom: 0.5rem; } .error-404 .page-header .error-subtitle { font-size: 1.25rem; color: var(--hp-text-muted); margin: 0 0 1rem; } .error-404 .page-content { max-width: 600px; margin: 0 auto; } .error-404 .search-form { display: flex; gap: 0.5rem; margin: 1.5rem 0; } .error-404 .search-form label { flex: 1; min-width: 0; font-size: 0; } .error-404 .search-field, .no-posts .search-field { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; border: 1px solid var(--hp-border); border-radius: var(--hp-radius); background: var(--hp-surface); color: var(--hp-text); } .error-404 .search-field:focus, .no-posts .search-field:focus { outline: none; border-color: var(--hp-primary); } .error-404 .search-submit, .no-posts .search-submit { padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; background: var(--hp-primary); color: #fff; border: none; border-radius: var(--hp-radius); cursor: pointer; transition: background var(--hp-transition); white-space: nowrap; } .error-404 .search-submit:hover, .no-posts .search-submit:hover { background: var(--hp-primary-hover); } .no-posts { padding: 3rem 1rem; text-align: center; } .no-posts .search-form { display: flex; gap: 0.5rem; max-width: 480px; margin: 1.5rem auto 0; } .no-posts .search-form label { flex: 1; min-width: 0; font-size: 0; } /* ============================================ ARCHIVE / ENTRY / PAGE ============================================ */ .entry-header { margin-bottom: 1.5rem; } .entry-title { font-size: 1.375rem; line-height: 1.3; margin: 0 0 0.5rem; color: var(--hp-text); } .entry-title a { color: var(--hp-text); text-decoration: none; } .entry-title a:hover { color: var(--hp-primary); } .entry-summary { font-size: 1rem; line-height: 1.75; color: var(--hp-text-muted); display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .page-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--hp-border); } .page-title { font-size: 1.875rem; color: var(--hp-text); margin: 0 0 0.5rem; } .archive-description { color: var(--hp-text-muted); font-size: 1rem; margin: 0; } .post-thumbnail { margin-bottom: 1.75rem; } .post-thumbnail img { width: 100%; height: auto; border-radius: var(--hp-radius-lg); } /* ============================================ TIPOGRAFIA RESPONSIVA ============================================ */ @media (max-width: 767px) { h1 { font-size: 1.625rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1.175rem; } p { font-size: 1rem; } .post-title { font-size: 1.625rem; } .page-title { font-size: 1.375rem; } .site-main { padding: 1rem 0; } .main-content { padding: 1rem 0; } .post-content blockquote, .entry-content blockquote { margin: 1rem 0; padding: 0.75rem 1rem; } .post-content pre, .entry-content pre { font-size: 0.8125rem; padding: 0.875rem; } .post-content .wp-block-columns, .entry-content .wp-block-columns { flex-direction: column !important; gap: 1rem; } .post-content .wp-block-column, .entry-content .wp-block-column { flex-basis: 100% !important; flex-grow: 1; } .post-navigation .nav-links { flex-direction: column; gap: 0; } .post-navigation .nav-next { text-align: left; } .comment-list .children { margin-left: 0.875rem; } .no-posts .search-form { flex-direction: column; } } @media (max-width: 479px) { h1 { font-size: 1.375rem; } h2 { font-size: 1.25rem; } .post-title { font-size: 1.375rem; } } @media (max-width: 380px) { h1 { font-size: 1.25rem; } h2 { font-size: 1.125rem; } .post-title { font-size: 1.25rem; } .site-header { min-height: 54px; } } /* ============================================ ADMIN BAR / SAFE AREA / PRINT ============================================ */ .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } @media (max-width: 600px) { .admin-bar .site-header { top: 0; } } @supports (padding: env(safe-area-inset-bottom)) { .footer-simple { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); } @media (max-width: 767px) { .main-navigation { padding-bottom: env(safe-area-inset-bottom); } } #back-to-top.back-to-top { bottom: calc(1.75rem + env(safe-area-inset-bottom)); right: calc(1.75rem + env(safe-area-inset-right)); } } @media print { .site-header, .site-footer, .sidebar, .menu-toggle, .menu-overlay, .post-navigation, .pagination-wrap, .comments-area .comment-respond, .skip-link, #back-to-top, .hp-ad-wrap, .header-search-wrap { display: none !important; } .content-area { grid-template-columns: 1fr; } body { font-size: 12pt; color: #000; background: #fff; } a { color: #000; } .post-content img { max-width: 100%; } } /* ============================================ CONTACT FORM 7 ============================================ */ .wpcf7 { margin: 2rem 0; } .wpcf7-form p { margin-bottom: 1.25rem; } .wpcf7-form label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--hp-text); } .wpcf7-form-control-wrap { display: block; } .wpcf7-form-control { display: block; width: 100%; padding: 0.625rem 0.875rem; font-size: 0.9375rem; font-family: inherit; color: var(--hp-text); background: var(--hp-surface); border: 1.5px solid var(--hp-border); border-radius: var(--hp-radius); transition: border-color var(--hp-transition), box-shadow var(--hp-transition); box-sizing: border-box; outline: none; } .wpcf7-form-control:focus { border-color: var(--hp-primary); box-shadow: 0 0 0 3px rgba(var(--hp-primary-rgb), 0.15); } .wpcf7-textarea { min-height: 140px; resize: vertical; } .wpcf7-submit { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6875rem 1.75rem; font-size: 0.9375rem; font-weight: 600; font-family: inherit; color: #fff; background: var(--hp-primary); border: none; border-radius: var(--hp-radius); cursor: pointer; transition: background var(--hp-transition), opacity var(--hp-transition); } .wpcf7-submit:hover { background: var(--hp-primary-hover); } .wpcf7-submit:disabled { opacity: 0.6; cursor: not-allowed; } /* Spinner (CF7 built-in) */ .wpcf7-submit.has-spinner .wpcf7-spinner { margin-left: 0.5rem; } /* Validation error state */ .wpcf7-not-valid { border-color: #e53e3e !important; box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.12) !important; } .wpcf7-not-valid-tip { display: block; margin-top: 0.3rem; font-size: 0.8125rem; color: #e53e3e; } /* Form-level response message */ .wpcf7-response-output { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: var(--hp-radius); font-size: 0.9rem; border: 1.5px solid transparent; } .wpcf7-form.sent .wpcf7-response-output { background: #f0fff4; border-color: #38a169; color: #276749; } .wpcf7-form.invalid .wpcf7-response-output, .wpcf7-form.failed .wpcf7-response-output, .wpcf7-form.spam .wpcf7-response-output { background: #fff5f5; border-color: #e53e3e; color: #9b2c2c; } /* Screen reader only (accessibility) */ .screen-reader-response { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } #wpadminbar { display: block !important; } /* ============================================ PREFERS REDUCED MOTION ============================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .main-navigation { transition: none !important; } #hp-preloader { display: none !important; } } /* ============================================ Placeholder pra cards sem imagem destacada v1.6.2 — branco simples, sem cor extra ============================================ */ .featured-post-image.no-image, a.post-card-thumbnail-full.no-thumb { background: #ffffff !important; } .featured-post-image.no-image::before, .featured-post-image.no-image::after, a.post-card-thumbnail-full.no-thumb::before, a.post-card-thumbnail-full.no-thumb::after { content: none !important; } /* Garante que overlay/título não polui o branco */ .featured-post-image.no-image .featured-post-overlay { background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.4) 100%); } .post-card-thumbnail-full.no-thumb .post-card-overlay { background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.35) 100%); } /* ═══════════════════════════════════════════════════════════════════ v1.6.7 — FIX: search ativo empurrando menu pro meio ═══════════════════════════════════════════════════════════════════ */ /* Quando o header tem 4 itens (toggle + branding + nav + search), space-between distribui igualmente. Empurra nav+search pra direita com margin-left auto na nav. */ .main-navigation { margin-left: auto; } .header-search-wrap { margin-left: 0.5rem; } /* Em mobile (nav vira overlay), garantir que dark+search ficam à direita */ @media (max-width: 960px) { .main-navigation { margin-left: 0; } .dark-toggle { margin-left: auto; } .header-search-wrap { margin-left: 0.25rem; } } /* ═══════════════════════════════════════════════════════════════════ v1.6.7 — DARK MODE Ativado via .theme-dark no (toggle no botão do header) ═══════════════════════════════════════════════════════════════════ */ html { color-scheme: light; transition: background-color 0.25s ease, color 0.25s ease; } html.theme-dark { color-scheme: dark; } html.theme-dark { /* v1.9.10 — Pure Black total: bg = surface = header = #000. Cor primary destaca cards "ativos" (ToC, breadcrumb). */ --hp-primary-light: #160a22; --hp-bg: #000000; --hp-surface: #000000; --hp-border: #1c1c22; --hp-text: #f1f1f4; --hp-text-muted: #a8a8b0; --hp-text-light: #5a5a64; --hp-header-bg: #000000; --hp-header-border: #15151b; --hp-header-text: #f1f1f4; --hp-header-muted: #8e8e98; --hp-nav-text: #d4d4dc; --hp-shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --hp-shadow: 0 4px 16px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.4); --hp-shadow-md: 0 10px 28px rgba(0,0,0,0.8); --hp-shadow-lg: 0 20px 50px rgba(0,0,0,0.9); } /* Dark mode: ajustes específicos */ html.theme-dark body { background: var(--hp-bg); color: var(--hp-text); } html.theme-dark .site-header { background: var(--hp-header-bg); border-bottom-color: var(--hp-header-border); } html.theme-dark .site-title, html.theme-dark .site-title a { color: var(--hp-header-text); } html.theme-dark .main-navigation a { color: var(--hp-nav-text); } html.theme-dark .main-navigation a:hover { color: var(--hp-primary); } html.theme-dark .main-navigation ul ul { background: var(--hp-surface); border-color: var(--hp-border); } html.theme-dark .header-search-toggle, html.theme-dark .dark-toggle { color: var(--hp-header-text); border-color: var(--hp-border); } html.theme-dark input[type="text"], html.theme-dark input[type="search"], html.theme-dark input[type="email"], html.theme-dark input[type="url"], html.theme-dark textarea, html.theme-dark select { background: var(--hp-surface); border-color: var(--hp-border); color: var(--hp-text); } html.theme-dark .header-search-panel { background: var(--hp-surface); border-color: var(--hp-border); } html.theme-dark .hs-input { background: transparent; color: var(--hp-text); } /* v1.9.10 — cards no dark: bg preto puro (igual body), sem shadow no artigo do single. Posts cards do feed mantêm hover com glow primary. */ html.theme-dark article.post { background: transparent; border: none; box-shadow: none; } html.theme-dark .post-card { background: transparent; border: 1px solid var(--hp-border); box-shadow: none; } html.theme-dark .post-card:hover { border-color: color-mix(in srgb, var(--hp-primary) 40%, var(--hp-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hp-primary) 25%, transparent), var(--hp-shadow); } /* widget no dark: sem bg/borda — só o separador horizontal natural entre widgets */ html.theme-dark .widget { background: transparent; border: none; border-bottom: 1px solid var(--hp-border); } html.theme-dark .widget:last-child { border-bottom: none; } /* divisores entre itens da sidebar mais sutis (não tão "rede") */ html.theme-dark .sidebar .widget li { border-bottom-color: color-mix(in srgb, var(--hp-border) 60%, transparent); } /* article.post no single: sem padding extra (bg é o body preto puro, não tem card) */ body.single .main-content > article.post { padding: 0; border-radius: 0; } html.theme-dark .post-card-meta, html.theme-dark .entry-meta { color: var(--hp-text-muted); } html.theme-dark img:not(.no-dim) { filter: brightness(0.92); } html.theme-dark .menu-toggle-icon span { background: var(--hp-header-text); } /* ═══════════════════════════════════════════════════════════════════ Botão Dark Toggle (header) ═══════════════════════════════════════════════════════════════════ */ .dark-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--hp-border); background: transparent; border-radius: var(--hp-radius); color: var(--hp-header-text); cursor: pointer; transition: all var(--hp-transition); margin-left: 0.5rem; padding: 0; flex-shrink: 0; } .dark-toggle:hover { background: var(--hp-primary-light); color: var(--hp-primary); border-color: var(--hp-primary); } .dark-toggle svg { width: 18px; height: 18px; display: block; transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.27, 1); } .dark-toggle .icon-sun { display: none; } .dark-toggle .icon-moon { display: block; } html.theme-dark .dark-toggle .icon-sun { display: block; } html.theme-dark .dark-toggle .icon-moon { display: none; } .dark-toggle:hover svg { transform: rotate(15deg); } /* Pre-load: evita flash de tema claro antes do JS rodar */ html.theme-dark-loading * { transition: none !important; } /* ═══════════════════════════════════════════════════════════════════ v1.7.5 — Features pack (TOC + Breadcrumbs + Reading time + Home icon) ═══════════════════════════════════════════════════════════════════ */ /* ─────────── Home icon no menu ─────────── */ .hp-home-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; position: relative; } .hp-home-svg { transition: transform 220ms cubic-bezier(.22,.8,.27,1), opacity 200ms ease; color: inherit; } /* Outline aparece por padrão; filled escondido */ .hp-home-filled { display: none; } .hp-home-outline { display: block; } /* Texto: oculto em desktop (só o ícone aparece), visível em mobile (menu overlay vertical) */ .hp-home-text { display: none; } @media (max-width: 767px) { .hp-home-icon { gap: 0.65rem; justify-content: flex-start; } .hp-home-text { display: inline-block; font-size: 1rem; font-weight: 600; color: inherit; } } /* Hover/focus: lift suave (não muda cor) */ .main-navigation a:hover .hp-home-svg, .main-navigation a:focus .hp-home-svg { transform: translateY(-1px) scale(1.06); } /* Padding compacto pra ficar quadrado bonito */ .main-navigation a:has(> .hp-home-icon) { padding: 0.5rem 0.6rem; border-radius: var(--hp-radius); position: relative; } /* ESTADO ATIVO (home selecionada): SEM pill roxo, só ícone filled em primary + indicador dot abaixo */ .main-navigation .current-menu-item > a:has(> .hp-home-icon), .main-navigation .current_page_item > a:has(> .hp-home-icon), .main-navigation .current-menu-ancestor > a:has(> .hp-home-icon) { background: transparent !important; color: var(--hp-primary) !important; } .main-navigation .current-menu-item > a:has(> .hp-home-icon) .hp-home-outline, .main-navigation .current_page_item > a:has(> .hp-home-icon) .hp-home-outline { display: none; } .main-navigation .current-menu-item > a:has(> .hp-home-icon) .hp-home-filled, .main-navigation .current_page_item > a:has(> .hp-home-icon) .hp-home-filled { display: block; } /* Dot indicador embaixo do ícone ativo */ .main-navigation .current-menu-item > a:has(> .hp-home-icon)::after, .main-navigation .current_page_item > a:has(> .hp-home-icon)::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--hp-primary); transform: translateX(-50%); box-shadow: 0 0 8px color-mix(in srgb, var(--hp-primary) 60%, transparent); } /* Dark mode: cor segue var(--hp-primary) que já se adapta */ /* ─────────── Breadcrumbs v2 (estilizado) ─────────── */ .hp-breadcrumbs { background: linear-gradient(180deg, color-mix(in srgb, var(--hp-primary) 5%, transparent), transparent); border-bottom: 1px solid var(--hp-border); padding: 0.9rem 0; margin: 0 0 1.75rem; font-size: 0.875rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } /* Cola o breadcrumb direto no header (sem gap do padding-top do main) */ .site-main:has(> .hp-breadcrumbs:first-child) { padding-top: 0; } .site-main > .hp-breadcrumbs:first-child { margin-top: 0; } /* Fallback p/ browsers sem :has() (Firefox <121, Safari <15.4) */ @supports not selector(:has(*)) { .site-main { padding-top: 0; } .site-main > .container:first-child { padding-top: 2rem; } } .hp-breadcrumbs::-webkit-scrollbar { display: none; } html.theme-dark .hp-breadcrumbs { background: linear-gradient(180deg, color-mix(in srgb, var(--hp-primary) 10%, var(--hp-surface)), transparent); border-bottom-color: var(--hp-border); } .hp-breadcrumbs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 0; white-space: nowrap; } .hp-breadcrumbs-item { display: inline-flex; align-items: center; gap: 0; } /* Pills */ .hp-breadcrumbs-link, .hp-breadcrumbs-current { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 99px; transition: background 200ms ease, color 200ms ease, transform 200ms ease; line-height: 1.2; } .hp-breadcrumbs-link { color: var(--hp-text-muted); text-decoration: none; border: 1px solid transparent; } .hp-breadcrumbs-link:hover, .hp-breadcrumbs-link:focus { background: color-mix(in srgb, var(--hp-primary) 8%, transparent); color: var(--hp-primary); border-color: color-mix(in srgb, var(--hp-primary) 16%, transparent); transform: translateY(-1px); } /* Item atual (último) */ .hp-breadcrumbs-current { background: var(--hp-primary); color: #fff; font-weight: 600; box-shadow: 0 2px 8px color-mix(in srgb, var(--hp-primary) 25%, transparent); } html.theme-dark .hp-breadcrumbs-current { box-shadow: 0 2px 12px color-mix(in srgb, var(--hp-primary) 40%, transparent); } /* Item home — destaque sutil mesmo sem ser current */ .hp-breadcrumbs-item.is-home .hp-breadcrumbs-link { color: var(--hp-text); background: color-mix(in srgb, var(--hp-primary) 5%, transparent); border-color: color-mix(in srgb, var(--hp-primary) 12%, transparent); } .hp-breadcrumbs-item.is-home .hp-breadcrumbs-link:hover { background: color-mix(in srgb, var(--hp-primary) 12%, transparent); color: var(--hp-primary); } .hp-breadcrumbs-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .hp-breadcrumbs-icon svg { display: block; transition: transform 220ms cubic-bezier(.22,.8,.27,1); } .hp-breadcrumbs-link:hover .hp-breadcrumbs-icon svg { transform: translateY(-1px) scale(1.08); } .hp-breadcrumbs-label { overflow: hidden; text-overflow: ellipsis; max-width: 240px; display: inline-block; } .hp-breadcrumbs-current .hp-breadcrumbs-label { max-width: 320px; } /* Chevron separator */ .hp-breadcrumbs-sep { display: inline-flex; align-items: center; justify-content: center; padding: 0 0.15rem; color: var(--hp-text-light); opacity: 0.5; line-height: 1; } .hp-breadcrumbs-sep svg { display: block; } /* Mobile */ @media (max-width: 600px) { .hp-breadcrumbs { padding: 0.6rem 0; margin: 0 0 1.25rem; font-size: 0.78rem; } .hp-breadcrumbs-link, .hp-breadcrumbs-current { padding: 0.3rem 0.65rem; gap: 0.3rem; } .hp-breadcrumbs-label { max-width: 130px; } .hp-breadcrumbs-current .hp-breadcrumbs-label { max-width: 180px; } .hp-breadcrumbs-sep { padding: 0 0.08rem; } } /* Esconde breadcrumb gerado por Yoast/Rank Math (se ativos) — usamos o nosso */ .yoast-breadcrumbs, [class*="rank-math-breadcrumb"], nav.rank-math-breadcrumb { display: none !important; } /* ─────────── Reading time badge ─────────── */ .hp-reading-time { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--hp-text-muted); font-weight: 500; margin-top: 0.5rem; padding: 4px 10px 4px 8px; background: var(--hp-primary-light); border: 1px solid color-mix(in srgb, var(--hp-primary) 15%, transparent); border-radius: 99px; line-height: 1; } html.theme-dark .hp-reading-time { background: color-mix(in srgb, var(--hp-primary) 14%, var(--hp-surface)); border-color: color-mix(in srgb, var(--hp-primary) 28%, transparent); color: var(--hp-text); } .hp-reading-time svg { color: var(--hp-primary); } /* ─────────── Table of Contents ─────────── */ .hp-toc { background: var(--hp-primary-light); border: 1px solid color-mix(in srgb, var(--hp-primary) 14%, transparent); border-radius: var(--hp-radius-lg); padding: 1rem 1.25rem; margin: 1.5rem 0 2rem; overflow: hidden; } html.theme-dark .hp-toc { background: color-mix(in srgb, var(--hp-primary) 10%, var(--hp-surface)); border-color: color-mix(in srgb, var(--hp-primary) 22%, transparent); } .hp-toc-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; font-family: inherit; color: var(--hp-text); font-weight: 700; font-size: 0.95rem; } .hp-toc-title { display: inline-flex; align-items: center; gap: 0.5rem; } .hp-toc-title svg { color: var(--hp-primary); flex-shrink: 0; } .hp-toc-caret { color: var(--hp-text-muted); transition: transform 240ms cubic-bezier(.22,.8,.27,1); } .hp-toc.is-closed .hp-toc-caret { transform: rotate(-90deg); } .hp-toc-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.4rem; overflow: hidden; transition: max-height 320ms ease, opacity 200ms ease, margin 200ms ease; max-height: 1200px; opacity: 1; } .hp-toc.is-closed .hp-toc-list { max-height: 0; opacity: 0; margin-top: 0; pointer-events: none; } .hp-toc-item { font-size: 0.92rem; line-height: 1.5; } .hp-toc-item a { color: var(--hp-text-muted); text-decoration: none; transition: color var(--hp-transition); display: inline-block; padding: 2px 0; } .hp-toc-item a:hover, .hp-toc-item a:focus { color: var(--hp-primary); text-decoration: underline; text-underline-offset: 3px; } .hp-toc-level-2 { padding-left: 0; font-weight: 600; } .hp-toc-level-3 { padding-left: 1.25rem; } .hp-toc-level-4 { padding-left: 2.5rem; opacity: 0.85; font-size: 0.88rem; } /* Anchor scroll offset (compensa header sticky) */ .post-content h2[id], .post-content h3[id], .post-content h4[id] { scroll-margin-top: 90px; } .admin-bar .post-content h2[id], .admin-bar .post-content h3[id], .admin-bar .post-content h4[id] { scroll-margin-top: 122px; } @media (max-width: 600px) { .hp-toc { padding: 0.85rem 1rem; } .hp-toc-toggle { font-size: 0.9rem; } .hp-toc-item { font-size: 0.88rem; } } /* ═══════════════════════════════════════════════════════════════════ v1.7.8 — Performance + Acessibilidade ═══════════════════════════════════════════════════════════════════ */ /* Featured image como (não mais background-image) */ .post-card-thumbnail-full { position: relative; display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--hp-primary-light), #f5f3ff); overflow: hidden; } .post-card-thumbnail-full .post-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 480ms cubic-bezier(.22,.8,.27,1); } .post-card:hover .post-card-img, .post-card-thumbnail-full:hover .post-card-img { transform: scale(1.04); } html.theme-dark .post-card-thumbnail-full { background: linear-gradient(135deg, color-mix(in srgb, var(--hp-primary) 18%, var(--hp-surface)), var(--hp-surface)); } /* Contraste WCAG AA — meta, author, reading-time */ .post-card-meta { color: var(--hp-text-muted) !important; /* slate-600 ~ 7:1 contraste */ } .post-card-author, .post-card-reading-time, .post-card-meta time { color: var(--hp-text-muted) !important; } .post-card-meta-sep { color: var(--hp-text-light) !important; /* separador discreto mas visível */ opacity: 0.7; } html.theme-dark .post-card-meta, html.theme-dark .post-card-author, html.theme-dark .post-card-reading-time, html.theme-dark .post-card-meta time { color: var(--hp-text-soft) !important; } /* Footer copyright — também precisa de contraste OK */ .footer-copyright, .footer-credit { color: rgba(255,255,255,0.85) !important; } .footer-credit a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.5); } .footer-credit a:hover { text-decoration-color: #fff; } /* ═══════════════════════════════════════════════════════════════════ v1.7.9 — Performance hints (composited animations + content-visibility) ═══════════════════════════════════════════════════════════════════ */ /* will-change hints só nos elementos que realmente animam — reduz paint cost */ .post-card { contain: layout style paint; } .post-card:hover { will-change: transform; } .post-card-thumbnail-full .post-card-img { will-change: transform; } .back-to-top { will-change: transform, opacity; } .menu-overlay, .header-search-panel { will-change: opacity, transform; } /* content-visibility: auto pra cards abaixo da dobra — pula paint até virem perto do viewport */ .posts-grid > .post-card:nth-child(n+5) { content-visibility: auto; contain-intrinsic-size: 1px 380px; } /* Trocar transition: all por específicas onde possível pra evitar repaint inteiro */ .page-numbers, .page-numbers .current { transition: background var(--hp-transition), color var(--hp-transition), transform var(--hp-transition) !important; } /* ═══════════════════════════════════════════════════════════════════ v1.8.5 — Post footer (tags + author box + post navigation + comments) ═══════════════════════════════════════════════════════════════════ */ /* ─────────── TAGS ─────────── */ .post-tags { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hp-border); display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .post-tags-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 700; color: var(--hp-text-muted); letter-spacing: 0.1em; text-transform: uppercase; padding-top: 0.4rem; flex-shrink: 0; } .post-tags-label svg { opacity: 0.7; } .post-tags-list { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1; } .post-tag { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.35rem 0.85rem; background: color-mix(in srgb, var(--hp-primary) 6%, transparent); color: var(--hp-primary); border: 1px solid color-mix(in srgb, var(--hp-primary) 16%, transparent); border-radius: 99px; font-size: 0.825rem; font-weight: 600; text-decoration: none; transition: all 200ms ease; line-height: 1.2; } .post-tag span { opacity: 0.55; font-weight: 700; } .post-tag:hover { background: var(--hp-primary); color: #fff; border-color: var(--hp-primary); transform: translateY(-1px); } .post-tag:hover span { opacity: 0.7; } /* ─────────── AUTHOR BOX ─────────── */ .hp-author-box { margin: 3rem 0; padding: 1.75rem; background: linear-gradient(135deg, color-mix(in srgb, var(--hp-primary) 4%, var(--hp-surface)), var(--hp-surface)); border: 1px solid var(--hp-border); border-radius: var(--hp-radius-lg); display: grid; grid-template-columns: 96px 1fr; gap: 1.25rem; align-items: start; box-shadow: var(--hp-shadow-sm); position: relative; overflow: hidden; } .hp-author-box::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--hp-primary); border-radius: 4px 0 0 4px; } html.theme-dark .hp-author-box { background: linear-gradient(135deg, color-mix(in srgb, var(--hp-primary) 10%, var(--hp-surface)), var(--hp-surface)); } .hp-author-avatar { position: relative; flex-shrink: 0; } .hp-author-avatar a { display: block; line-height: 0; } .hp-author-avatar-img, .hp-author-avatar img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--hp-surface); box-shadow: 0 0 0 1px var(--hp-border), 0 4px 12px rgba(0,0,0,0.08); transition: transform 280ms cubic-bezier(.22,.8,.27,1); } .hp-author-avatar:hover .hp-author-avatar-img, .hp-author-avatar:hover img { transform: scale(1.05); } .hp-author-body { min-width: 0; } .hp-author-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .hp-author-eyebrow { display: block; font-size: 0.7rem; font-weight: 600; color: var(--hp-text-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.15rem; } .hp-author-name { font-size: 1.35rem; font-weight: 800; line-height: 1.2; margin: 0; letter-spacing: -0.01em; } .hp-author-name a { color: var(--hp-text); text-decoration: none; transition: color 200ms ease; } .hp-author-name a:hover { color: var(--hp-primary); } .hp-author-count { display: inline-flex; align-items: center; padding: 0.3rem 0.7rem; background: color-mix(in srgb, var(--hp-primary) 8%, transparent); color: var(--hp-primary); border-radius: 99px; font-size: 0.72rem; font-weight: 700; font-family: var(--hp-font-heading, var(--hp-font-sans)); letter-spacing: 0.02em; white-space: nowrap; margin-top: 0.6rem; } .hp-author-bio { font-size: 0.92rem; line-height: 1.65; color: var(--hp-text-muted); margin: 0.5rem 0 1rem; } .hp-author-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .hp-author-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 700; color: var(--hp-primary); text-decoration: none; padding: 0.4rem 0.9rem; background: color-mix(in srgb, var(--hp-primary) 7%, transparent); border: 1px solid color-mix(in srgb, var(--hp-primary) 18%, transparent); border-radius: 99px; transition: all 220ms ease; } .hp-author-link svg { transition: transform 220ms ease; } .hp-author-link:hover { background: var(--hp-primary); color: #fff; border-color: var(--hp-primary); transform: translateY(-1px); } .hp-author-link:hover svg { transform: translateX(3px); } .hp-author-socials { display: inline-flex; align-items: center; gap: 0.35rem; } .hp-author-social { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--hp-text-muted); background: var(--hp-bg); border: 1px solid var(--hp-border); border-radius: 50%; transition: all 200ms ease; text-decoration: none; } .hp-author-social:hover { background: var(--hp-primary); color: #fff; border-color: var(--hp-primary); transform: translateY(-2px); box-shadow: 0 6px 16px color-mix(in srgb, var(--hp-primary) 30%, transparent); } html.theme-dark .hp-author-social { background: var(--hp-surface); border-color: var(--hp-border); } @media (max-width: 600px) { .hp-author-box { grid-template-columns: 1fr; text-align: center; padding: 1.5rem 1.25rem; } .hp-author-avatar { justify-self: center; } .hp-author-head { justify-content: center; } .hp-author-foot { justify-content: center; } } /* ─────────── POST NAVIGATION ─────────── */ .hp-post-nav { margin: 3rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .hp-post-nav-item { display: grid; grid-template-columns: 80px 1fr; gap: 1rem; align-items: center; padding: 1rem; background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: var(--hp-radius-lg); text-decoration: none; color: inherit; transition: all 240ms cubic-bezier(.22,.8,.27,1); overflow: hidden; } .hp-post-nav-item:hover { border-color: var(--hp-primary); transform: translateY(-3px); box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--hp-primary) 25%, transparent); } .hp-post-nav-next { grid-template-columns: 1fr 80px; text-align: right; } .hp-post-nav-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: var(--hp-radius); background: color-mix(in srgb, var(--hp-primary) 8%, transparent); } .hp-post-nav-thumb-fallback { display: flex; align-items: center; justify-content: center; color: var(--hp-primary); } .hp-post-nav-body { min-width: 0; } .hp-post-nav-label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; color: var(--hp-text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.3rem; transition: color 200ms ease; } .hp-post-nav-next .hp-post-nav-label { justify-content: flex-end; } .hp-post-nav-item:hover .hp-post-nav-label { color: var(--hp-primary); } .hp-post-nav-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.95rem; font-weight: 700; line-height: 1.4; color: var(--hp-text); transition: color 200ms ease; } .hp-post-nav-item:hover .hp-post-nav-title { color: var(--hp-primary); } @media (max-width: 700px) { .hp-post-nav { grid-template-columns: 1fr; } .hp-post-nav-next { grid-template-columns: 80px 1fr; text-align: left; } .hp-post-nav-next .hp-post-nav-label { justify-content: flex-start; } .hp-post-nav-next .hp-post-nav-thumb { order: -1; } } /* ─────────── COMMENTS FORM ─────────── */ .comments-area { margin: 3rem 0 2rem; padding: 2rem; background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: var(--hp-radius-lg); } .comments-area .comments-title, .comments-area .comment-reply-title { font-size: 1.4rem; font-weight: 800; margin: 0 0 1.5rem; letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.6rem; } .comments-area .comment-reply-title::before { content: ''; width: 4px; height: 22px; background: var(--hp-primary); border-radius: 4px; } .comments-area .logged-in-as, .comments-area .comment-notes { font-size: 0.85rem; color: var(--hp-text-muted); margin-bottom: 1.25rem; } .comments-area .required-field-message { font-size: 0.78rem; color: var(--hp-text-light); margin-top: 0.3rem; } .comments-area p.comment-form-comment, .comments-area p.comment-form-author, .comments-area p.comment-form-email, .comments-area p.comment-form-url, .comments-area p.comment-form-cookies-consent { margin: 0 0 1rem; } .comments-area p.comment-form-author, .comments-area p.comment-form-email, .comments-area p.comment-form-url { display: inline-block; width: calc(33.333% - 0.667rem); margin-right: 1rem; vertical-align: top; } .comments-area p.comment-form-url { margin-right: 0; } @media (max-width: 700px) { .comments-area p.comment-form-author, .comments-area p.comment-form-email, .comments-area p.comment-form-url { display: block; width: 100%; margin-right: 0; } } .comments-area label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--hp-text); margin-bottom: 0.4rem; } .comments-area input[type="text"], .comments-area input[type="email"], .comments-area input[type="url"], .comments-area textarea { width: 100%; padding: 0.7rem 0.9rem; background: var(--hp-bg); border: 1.5px solid var(--hp-border); border-radius: var(--hp-radius); font-family: inherit; font-size: 0.92rem; color: var(--hp-text); transition: border-color 180ms ease, box-shadow 180ms ease; } .comments-area input:focus, .comments-area textarea:focus { outline: none; border-color: var(--hp-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-primary) 18%, transparent); } .comments-area textarea { resize: vertical; min-height: 140px; line-height: 1.55; } .comments-area .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.82rem; color: var(--hp-text-muted); } .comments-area .comment-form-cookies-consent input { width: auto; margin-top: 3px; accent-color: var(--hp-primary); } .comments-area .comment-form-cookies-consent label { margin-bottom: 0; } .comments-area .form-submit { margin: 1.5rem 0 0; } .comments-area .submit { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.8rem 1.8rem; background: var(--hp-primary); color: #fff; border: none; border-radius: var(--hp-radius); font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: all 220ms ease; box-shadow: 0 4px 12px color-mix(in srgb, var(--hp-primary) 25%, transparent); } .comments-area .submit:hover { background: var(--hp-primary-hover); transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--hp-primary) 35%, transparent); } @media (max-width: 600px) { .comments-area { padding: 1.5rem 1.25rem; } } /* ═══════════════════════════════════════════════════════════════════ v1.8.7 — Archive header (category/tag/author/date/search) ═══════════════════════════════════════════════════════════════════ */ .hp-archive-header { position: relative; margin: 0 0 2rem; padding: 2rem 1.75rem; background: linear-gradient(135deg, color-mix(in srgb, var(--hp-primary) 8%, var(--hp-surface)) 0%, var(--hp-surface) 60%); border: 1px solid var(--hp-border); border-radius: var(--hp-radius-lg); overflow: hidden; } .hp-archive-header::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--hp-primary), color-mix(in srgb, var(--hp-primary) 50%, transparent)); } .hp-archive-header::after { content: ''; position: absolute; top: -40%; right: -10%; width: 280px; height: 280px; background: radial-gradient(circle, color-mix(in srgb, var(--hp-primary) 14%, transparent), transparent 70%); pointer-events: none; z-index: 0; } html.theme-dark .hp-archive-header { background: linear-gradient(135deg, color-mix(in srgb, var(--hp-primary) 14%, var(--hp-surface)) 0%, var(--hp-surface) 60%); } .hp-archive-header > * { position: relative; z-index: 1; } .hp-archive-kind { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem 0.35rem 0.6rem; background: var(--hp-bg); border: 1px solid color-mix(in srgb, var(--hp-primary) 18%, transparent); border-radius: 99px; font-size: 0.72rem; font-weight: 700; color: var(--hp-primary); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.85rem; } .hp-archive-kind svg { width: 14px; height: 14px; } html.theme-dark .hp-archive-kind { background: color-mix(in srgb, var(--hp-primary) 10%, var(--hp-surface)); } .hp-archive-title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.15; margin: 0 0 0.5rem; letter-spacing: -0.02em; color: var(--hp-text); } .hp-archive-desc { font-size: 0.95rem; line-height: 1.65; color: var(--hp-text-muted); margin: 0.65rem 0 0; max-width: 680px; } .hp-archive-desc p { margin: 0 0 0.5rem; } .hp-archive-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; } .hp-archive-count { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem 0.35rem 0.65rem; background: var(--hp-bg); border: 1px solid var(--hp-border); border-radius: 99px; font-size: 0.78rem; font-weight: 600; color: var(--hp-text-muted); font-family: var(--hp-font-heading, var(--hp-font-sans)); } .hp-archive-count svg { opacity: 0.7; } html.theme-dark .hp-archive-count { background: color-mix(in srgb, var(--hp-primary) 8%, var(--hp-surface)); } @media (max-width: 600px) { .hp-archive-header { padding: 1.5rem 1.25rem; } .hp-archive-header::after { width: 180px; height: 180px; right: -25%; } } /* Esconde o page-header antigo se algum template ainda usar */ .page-header:not(.hp-archive-header) { margin-bottom: 1.5rem; } /* ═══════════════════════════════════════════════════════════════════ v1.9.4 — Estado ativo do menu MOBILE (overlay vertical) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* Esconde underline/dot do desktop (não fazem sentido no menu vertical) */ .main-navigation .current-menu-item > a::before, .main-navigation .current_page_item > a::before, .main-navigation .current-menu-item > a::after, .main-navigation .current_page_item > a::after, .main-navigation a::before { display: none !important; } /* Hover suave em mobile (sem transform que dá lag em touch) */ .main-navigation a:hover { transform: none; background: rgba(255, 255, 255, 0.04); } /* Estado ATIVO no menu mobile: barra lateral roxa + bg tinted + chevron à direita */ .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a, .main-navigation .current-menu-ancestor > a { position: relative; background: color-mix(in srgb, var(--hp-primary) 12%, transparent) !important; color: var(--hp-primary) !important; padding-left: 1.5rem !important; font-weight: 700 !important; } /* Barra lateral primary à esquerda do item ativo */ .main-navigation .current-menu-item > a::before, .main-navigation .current_page_item > a::before { content: '' !important; display: block !important; position: absolute !important; left: 0 !important; top: 12% !important; bottom: 12% !important; width: 3px !important; height: auto !important; background: var(--hp-primary) !important; border-radius: 0 3px 3px 0 !important; transform: none !important; animation: none !important; opacity: 1 !important; pointer-events: none; } /* Chevron pulsante à direita */ .main-navigation .current-menu-item > a::after, .main-navigation .current_page_item > a::after { content: '›' !important; display: inline-block !important; position: absolute !important; right: 1rem !important; left: auto !important; bottom: auto !important; top: 50% !important; width: auto !important; height: auto !important; background: transparent !important; color: var(--hp-primary) !important; font-size: 1.3rem !important; font-weight: 700 !important; line-height: 1 !important; border-radius: 0 !important; box-shadow: none !important; transform: translateY(-50%) !important; animation: hpMobChevPulse 1.8s ease-in-out infinite !important; opacity: 1 !important; } @keyframes hpMobChevPulse { 0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.7; } 50% { transform: translateY(-50%) translateX(3px); opacity: 1; } } /* Home icon ativo mobile: bg + bar lateral (sem chevron porque já tem o ícone) */ .main-navigation .current-menu-item > a:has(> .hp-home-icon), .main-navigation .current_page_item > a:has(> .hp-home-icon) { padding-left: 1.5rem !important; } .main-navigation .current-menu-item > a:has(> .hp-home-icon)::after, .main-navigation .current_page_item > a:has(> .hp-home-icon)::after { display: none !important; } /* Fix: tirar outline/border-radius residual do home no menu vertical mobile */ .main-navigation a:has(> .hp-home-icon) { padding: 0 1rem !important; border-radius: 0 !important; border: none !important; } /* Remove o outline azul/roxo do browser ao focar link no mobile */ .main-navigation a:focus, .main-navigation a:focus-visible { outline: none !important; box-shadow: none !important; } /* Indicador acessível custom no focus (não conflita com active state) */ .main-navigation a:focus-visible:not(.current-menu-item > a):not(.current_page_item > a) { background: rgba(255, 255, 255, 0.08) !important; } /* Home icon dentro do link: sem padding/border extra */ .hp-home-icon { padding: 0 !important; border: none !important; background: transparent !important; } @media (prefers-reduced-motion: reduce) { .main-navigation .current-menu-item > a::after, .main-navigation .current_page_item > a::after { animation: none !important; } } }