/* Interlink automático (Pagina/Categoria/Post) - ver app/Services/AutoLinkService.php pra como o link em si é gerado no save, e public/js/components/link-preview.js pro comportamento de hover/tap/scroll-preview. Funcionalidade própria do projeto (não é adaptação de componente React de terceiro) - por isso fica direto em css/components/, sem subpasta 21st/. Múltiplos links por página (qualquer parágrafo pode ter até 2) - por isso NÃO se autocarrega no Blade, é importado 1x no de cada template.blade.php (mesmo padrão de thumbnails.css/stacked.css). */ /* ==================== Texto do link ==================== */ .link-preview-auto { color: var(--thm-base, #f18535); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(241, 133, 53, 0.45); cursor: pointer; } .link-preview-auto:hover, .link-preview-auto:focus-visible { text-decoration-color: currentColor; } /* Quando o link cai dentro de um destaque de texto (destacar.css) já em view, o fundo vira var(--thm-base) - a MESMA cor que .link-preview-auto usa no texto, o que deixaria o link ilegível em cima do próprio fundo. Força branco (texto + sublinhado) só nesse caso específico. */ .text-destaque-highlight.is-inview .link-preview-auto { color: #ffffff; text-decoration-color: rgba(255, 255, 255, 0.6); } /* ==================== Tooltip flutuante ==================== */ .link-preview-tooltip { /* left/top exatos (canto superior-esquerdo) são calculados no JS (link-preview.js: posicionarTooltip) - já vem centralizado e com detecção de borda, o transform aqui é só o "respiro" da animação de entrada/saída, nunca posicionamento. */ position: fixed; top: 0; left: 0; z-index: 2000; display: flex; flex-direction: column; width: 220px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08); text-decoration: none; pointer-events: none; opacity: 0; transform: translateY(-6px) scale(0.94); transform-origin: bottom center; transition: opacity 0.2s ease, transform 0.2s ease; } /* Quando não cabe acima do link (perto do topo da viewport), JS troca pra aparecer abaixo - a origem/direção do "respiro" inverte junto. */ .link-preview-tooltip.vira-para-baixo { transform: translateY(6px) scale(0.94); transform-origin: top center; } .link-preview-tooltip.is-visivel { pointer-events: auto; opacity: 1; transform: translateY(0) scale(1); } .link-preview-tooltip-img { display: block; width: 100%; height: 130px; object-fit: cover; background: #eee; } .link-preview-tooltip-titulo { padding: 10px 12px; font-size: 13px; font-weight: 700; line-height: 1.3; color: #222; } /* Sem data-img no link (alvo sem imagem destaque) - tooltip só com título, sem espaço reservado de foto */ .link-preview-tooltip.sem-imagem .link-preview-tooltip-img { display: none; } @media (max-width: 480px) { .link-preview-tooltip { width: 180px; } .link-preview-tooltip-img { height: 100px; } } @media (prefers-reduced-motion: reduce) { .link-preview-tooltip, .link-preview-tooltip.vira-para-baixo { transition: opacity 0.15s ease; transform: none; } }