/* * SmartHub Aurora Pro — estilos do child theme. * Carregado depois do style.css do tema pai. Usa a mesma paleta: * fundo #09090f, texto #e0e0ff, primária #6366f1, secundária #059669, acento #06b6d4. */ :root { --sh-bg: #09090f; --sh-surface: rgba(20, 20, 30, 0.8); --sh-surface-solid: #141420; --sh-border: rgba(255, 255, 255, 0.08); --sh-border-strong: rgba(255, 255, 255, 0.16); --sh-text: #e0e0ff; --sh-muted: #a0afd9; --sh-dim: #8b92b4; --sh-primary: #6366f1; --sh-secondary: #059669; --sh-accent: #06b6d4; --sh-warn: #f97362; --sh-radius: 16px; --sh-maxw: 1200px; } /* ---------- Correções de bugs do tema pai ---------- * * O tema pai aplica `.page { animation: fadeIn .5s ease forwards }` e os * keyframes de fadeIn animam `transform`. Como `body` carrega a classe `page` * e o fill-mode é `forwards`, o body fica permanentemente com * `transform: matrix(1,0,0,1,0,0)`. * * Qualquer transform diferente de `none` transforma o elemento em bloco * contentor dos descendentes `position: fixed`. Resultado: as camadas .aurora-bg * e .aurora-effect, que usam width/height em porcentagem, passavam a medir a * PÁGINA inteira em vez da tela — 13.785 px de altura numa página de 6.892 px, * com scroll horizontal e vertical infinitos sobre fundo preto. * * A correção remove a animação do body e devolve o fade, só com opacidade, * ao conteúdo. Opacidade não cria bloco contentor. */ body.page, body.blog, body.home, body.archive, body.single, body.search, body.error404 { animation: none; opacity: 1; transform: none; } @keyframes sh-fade-in { from { opacity: 0; } to { opacity: 1; } } .sh-pro main { animation: sh-fade-in 0.4s ease both; } /* As camadas da aurora passam a ser ancoradas pelos quatro lados em vez de dimensionadas em porcentagem. Assim elas cobrem a tela sem depender de qual elemento é o bloco contentor, e sem o excesso de 100vw que a barra de rolagem introduz. */ .sh-pro .aurora-bg, .sh-pro .aurora-effect { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; max-width: 100%; max-height: 100%; overflow: hidden; } /* * O tema pai deixa `.reveal { opacity: 0 }` e conta com o IntersectionObserver * do main.js para adicionar `.active`. Se o script falhar, todo o conteudo do * site fica invisivel. Aqui o padrao passa a ser visivel, e a animacao so entra * quando o JavaScript confirma que esta rodando (classe sh-js no ). */ .reveal { opacity: 1; transform: none; } .sh-js .reveal:not(.active) { opacity: 0; transform: translateY(30px); } @media (prefers-reduced-motion: reduce) { .sh-js .reveal:not(.active) { opacity: 1; transform: none; } } /* ---------- Base e acessibilidade ---------- */ :focus-visible { outline: 3px solid var(--sh-accent); outline-offset: 3px; border-radius: 4px; } .sh-pro main { position: relative; z-index: 1; } .sh-pro section.container { margin-bottom: 4.5rem; } .sh-center { text-align: center; margin-top: 2.5rem; } .sh-eyebrow { text-transform: uppercase; letter-spacing: 1.4px; font-size: 0.78rem; font-weight: 700; color: var(--sh-accent); margin-bottom: 0.9rem; } .sh-lead { font-size: 1.15rem; line-height: 1.65; color: var(--sh-muted); max-width: 62ch; font-weight: 300; } .sh-lead-body { font-size: 1.08rem; line-height: 1.75; color: var(--sh-muted); margin-bottom: 2rem; } .sh-note { font-size: 0.95rem; color: var(--sh-dim); border-left: 3px solid var(--sh-primary); padding-left: 1rem; margin-top: 1.5rem; } /* ---------- Navegação ---------- */ .sh-pro .nav-menu { gap: 1.5rem; } .sh-pro .nav-menu > li > a { font-size: 0.95rem; font-weight: 500; color: var(--sh-muted); padding: 0.4rem 0; transition: color 0.2s ease; } .sh-pro .nav-menu > li > a:hover, .sh-pro .nav-menu > li.current-menu-item > a { color: #fff; } .sh-has-sub { position: relative; } .sh-has-sub > a::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.6; } /* * Os seletores abaixo são qualificados com `.nav-menu ul` de propósito. * O tema pai declara `.nav-menu ul { display: flex; gap: 2rem; padding: 0 }`, * com especificidade (0,1,1). Uma classe sozinha, (0,1,0), perde — e o * submenu virava uma linha flex de 11 itens, esticando 150 px além da tela em * todas as páginas. Qualquer regra de layout aqui precisa vencer aquela. */ .nav-menu ul.sh-submenu { position: absolute; top: 100%; left: -1rem; margin-top: 0.75rem; min-width: 260px; max-width: calc(100vw - 3rem); list-style: none; background: rgba(14, 14, 22, 0.98); backdrop-filter: blur(12px); border: 1px solid var(--sh-border-strong); border-radius: 12px; padding: 0.6rem; gap: 0; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 200; } .sh-has-sub:hover > .sh-submenu, .sh-has-sub:focus-within > .sh-submenu, .sh-has-sub.sh-open > .sh-submenu { opacity: 1; visibility: visible; transform: translateY(0); } /* `minmax(0, 1fr)` em vez de `minmax(200px, 1fr)`: com o mínimo em 200px as colunas cresciam até o max-content do texto e o submenu chegava a 1190 px. Um submenu invisível ainda ocupa layout — visibility: hidden não tira do fluxo —, então o estouro acontecia mesmo sem ninguém abrir o menu. */ .nav-menu ul.sh-submenu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem; width: min(560px, calc(100vw - 3rem)); left: auto; right: -1rem; } .nav-menu ul.sh-submenu li { width: auto; margin: 0; border: 0; } .nav-menu ul.sh-submenu a { display: block; padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.92rem; font-weight: 500; color: var(--sh-text); line-height: 1.35; transition: background 0.2s ease; } .nav-menu ul.sh-submenu a span { display: block; font-size: 0.76rem; font-weight: 400; color: var(--sh-dim); margin-top: 2px; } .nav-menu ul.sh-submenu a:hover { background: rgba(99, 102, 241, 0.16); } /* Especificidade acima de `.sh-pro .nav-menu > li > a`, que zera o padding horizontal dos itens de menu e cortaria o botão. */ .sh-pro .nav-menu > li.sh-nav-cta > a.btn-sm { padding: 0.55rem 1.15rem; font-size: 0.9rem; line-height: 1.2; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; width: auto; white-space: nowrap; flex-shrink: 0; box-shadow: none; } /* ---------- Migalhas ---------- */ /* * O tema pai estiliza o seletor de elemento `nav` (sticky, fundo escuro e * borda). Como as migalhas também são um