/* css/support-entry.css THE single support-entry affordance, reused identically on every surface (landing, Trilha friction points, legal/policy pages, extrator). Self-contained: its own `psup-` namespace and hardcoded brand colors (teal #14b8a6) so it looks the SAME regardless of which design system the host page uses. Theme via [data-theme] on (every PensoIA page sets it) with a prefers-color-scheme fallback. It is always a link to /suporte (the one hub with channels + FAQ), never inline channels — consistency over per-page variants (Élder 2026-07-08). */ .psup-entry { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid #d7dde5; background: #ffffff; color: #0f172a; font: 600 .9rem/1 'Inter', system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: border-color .2s, color .2s, transform .15s; } .psup-entry:hover { transform: translateY(-1px); border-color: #14b8a6; color: #0d9488; } .psup-entry svg { width: 18px; height: 18px; flex-shrink: 0; } /* Centering wrapper used wherever the pill is dropped (footer, friction points). */ .psup-slot { display: flex; justify-content: center; margin-top: 1.1rem; } [data-theme="dark"] .psup-entry { background: #1e293b; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .psup-entry:hover { border-color: #2dd4bf; color: #5eead4; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .psup-entry { background: #1e293b; border-color: #334155; color: #e2e8f0; } :root:not([data-theme="light"]) .psup-entry:hover { border-color: #2dd4bf; color: #5eead4; } }