/* =========================================================================== Nextside Performance — overrides de integração com o tema Hextra (vendored) Busca, TOC/scroll-to-top, Chroma e ajuste de margem mobile. Carregado por ULTIMO (custom/head-end.html) p/ vencer o main.css do Hextra no cascade. =========================================================================== */ /* === Hextra search — Nextside token overrides === */ /* Wrapper integrado ao header */ .ns-search-wrapper { position: relative; } /* Oculta a Hextra search em mobile (ícone de busca reservado para fase futura) */ @media (max-width: 720px) { .ns-search-wrapper { display: none; } } /* Input principal */ .hextra-search-input { background: var(--bg-surface) !important; color: var(--fg) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; padding: 7px 40px 7px 12px !important; font-family: var(--font-ui) !important; font-size: 14px !important; transition: border-color 150ms ease, box-shadow 150ms ease !important; width: 100% !important; } .hextra-search-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent) !important; outline: none !important; } .hextra-search-input::placeholder { color: var(--fg-muted) !important; } /* Kbd hint (Ctrl K / ⌘K) */ .hextra-search-wrapper kbd { background: var(--bg-elevated) !important; border: 1px solid var(--border) !important; color: var(--fg-muted) !important; font-family: var(--font-ui) !important; } /* Dropdown de resultados */ .hextra-search-results { background: var(--bg) !important; border: 1px solid var(--border-strong) !important; border-radius: 10px !important; box-shadow: 0 16px 48px -8px var(--shadow) !important; color: var(--fg) !important; } .hextra-search-results li a { color: var(--fg) !important; transition: background 120ms ease !important; } .hextra-search-results li a:hover { background: var(--bg-elevated) !important; color: var(--accent) !important; } /* Título do resultado */ .hextra-search-results li .excerpt { color: var(--fg-muted) !important; font-size: 13px !important; } /* === Ask AI button (post hero) === Vive dentro de .ns-post-hero-footer ao lado do byline. margin-top removido: o wrapper pai já espaça o bloco inteiro. */ .ns-ask-ai-wrap { display: flex; } .ns-ask-ai { font-size: 13px; padding: 10px 16px; display: inline-flex; align-items: center; gap: 6px; } .ns-ask-ai svg { opacity: 0.7; } /* Mobile: empilha byline em cima, ask-ai ocupa linha cheia em baixo. Mantém a régua (border-top) mas vira coluna pra dar respiro em 360px. */ @media (max-width: 720px) { .ns-post-hero-footer { flex-direction: column; align-items: stretch; gap: 1rem; } .ns-ask-ai-wrap { width: 100%; } .ns-ask-ai { font-size: 12px; padding: 8px 14px; width: 100%; justify-content: center; } } /* === Fix: Hextra prose headings em dark mode === * O Hextra (main.css) define .content :where(hN) { color: var(--hx-color-slate-900) } * e só troca pra slate-100 quando tem a classe .dark. * Nosso sistema usa data-theme="dark" (não a classe .dark), então os H2-H6 * do corpo do post ficam quase-pretos sobre fundo escuro — ilegíveis. * Este bloco no final do cascade ganha por ordem e corrige todos os níveis. * Cobre: data-theme="dark" (toggle manual) e prefers-color-scheme: dark (sistema). */ :root[data-theme="dark"] .content h1, :root[data-theme="dark"] .content h2, :root[data-theme="dark"] .content h3, :root[data-theme="dark"] .content h4, :root[data-theme="dark"] .content h5, :root[data-theme="dark"] .content h6 { color: var(--fg); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .content h1, :root:not([data-theme]) .content h2, :root:not([data-theme]) .content h3, :root:not([data-theme]) .content h4, :root:not([data-theme]) .content h5, :root:not([data-theme]) .content h6 { color: var(--fg); } } /* === Fix: Hextra TOC sidebar — Nextside overrides * Hextra hardcodes hx:bg-white + hx:shadow-[0_-12px_16px_white] no wrapper * do scroll-to-top. O dark override do Hextra usa hx:dark:bg-dark (#111) mas * o bg do Nextside dark é #10131A — gera leakage do branco nas bordas. * Solução: forçar bg e shadow a usar o token --bg do Nextside em modo dark. * Os seletores `.dark` funcionam porque Hextra adiciona a classe .dark ao . */ /* Links do TOC — usa tokens Nextside em vez dos cinzas hardcoded do Hextra */ .hextra-toc a { color: var(--fg-muted); transition: color 150ms ease; } .hextra-toc a:hover { color: var(--fg); } /* Wrapper do scroll-to-top: substitui bg-white + shadow white pelo token --bg */ .dark .hextra-toc .hextra-scrollbar > div:last-child { background-color: var(--bg) !important; box-shadow: 0 -12px 16px var(--bg) !important; } /* Fallback via data-theme (Nextside toggle) */ :root[data-theme="dark"] .hextra-toc .hextra-scrollbar > div:last-child { background-color: var(--bg) !important; box-shadow: 0 -12px 16px var(--bg) !important; } /* Fallback via prefers-color-scheme (modo sistema sem data-theme definido) */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .hextra-toc .hextra-scrollbar > div:last-child { background-color: var(--bg) !important; box-shadow: 0 -12px 16px var(--bg) !important; } } /* === Scroll-to-top override em LIGHT mode (Hextra default branco vs nosso creme) === */ /* O agente anterior cobriu dark; aqui cobre light explicitamente */ :root .hextra-scrollbar [class*="hx:bg-white"], :root .hextra-scrollbar [class*="hx-bg-white"], :root [class*="hx:bg-white"]:has(a[href*="#top"]), :root [class*="hx:bg-white"]:has([aria-label*="topo" i]) { background-color: var(--bg) !important; box-shadow: 0 -12px 16px var(--bg) !important; } /* Caso genérico: qualquer container que tenha "from-white" ou "to-white" do Tailwind */ [class*="from-white"], [class*="hx:from-white"] { --tw-gradient-from: var(--bg) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; } [class*="shadow-[0_-12px_16px_white]"], [class*="hx:shadow-[0_-12px_16px_white]"] { box-shadow: 0 -12px 16px var(--bg) !important; } /* Defensivo: cor do texto do blockquote em dark mode (Hextra override) — preserva gradient */ :root[data-theme="dark"] .content blockquote, :root.dark .content blockquote { color: var(--fg) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .content blockquote { color: var(--fg) !important; } } /* === Search input — kbd indicator: Hextra já posiciona absolute dentro do input === * O do Hextra usa hx:absolute com hx:bg-white / hx:dark:bg-dark/50. * Aqui sobrescrevemos só as cores pra usar tokens Nextside. * O posicionamento já é correto no markup do Hextra (absolute right-1.5). */ .hextra-search-wrapper kbd, [class*="hextra-search"] kbd { background: var(--bg-elevated) !important; color: var(--fg-muted) !important; border-color: var(--border) !important; font-family: var(--font-ui) !important; } /* === Mobile: margem lateral de 16px (spec) via token — alinha .prose, card de autor e CTAs no mesmo eixo (antes .prose ficava a 8px e "vazava"). === */ @media (max-width: 720px) { :root { --content-padding: 16px; } } /* === Chroma syntax highlight: fundo e borda casam com tokens Nextside === * O tema Chroma (tango/nord) hardcoda background no .chroma. * Este bloco garante que o container usa --code-bg do tema ativo, * independentemente do que o Hextra ou o Chroma CSS injetou antes. * border-radius e overflow ficam aqui pra não depender do tema upstream. */ .chroma, .highlight, .highlight pre { background: var(--code-bg) !important; border-radius: 8px; overflow-x: auto; } /* Texto não-tokenizado dentro do bloco precisa ser legível em ambos os temas. * .err no Chroma é "token de erro" (lexer não reconheceu) — em Gherkin isso * acontece com keywords em PT. Sobrescrevemos pro fg padrão evitar vermelho #a40000 * sobre fundo escuro. .x é "token genérico" sem classe específica. */ :root[data-theme="dark"] .chroma .err, :root[data-theme="dark"] .chroma .x { color: var(--fg) !important; background: transparent !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .chroma .err, :root:not([data-theme]) .chroma .x { color: var(--fg) !important; background: transparent !important; } }