/* ============================================ Feature info tooltip — shared across platform pages Same look as the landing page comparison-table tooltip; the JS portal in /js/feature-tip-portal.js renders the actual tooltip in so it escapes any overflow container. Usage: Dark mode: tooltip background and text already work in both themes because the portal element uses fixed colors that read fine on both. ============================================ */ .feature-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; color: #2563eb; cursor: help; font-size: 0.8rem; margin-left: 0.35rem; opacity: 0.6; transition: opacity 0.2s; background: transparent; border: none; padding: 0; } .feature-tip:hover, .feature-tip:focus { opacity: 1; outline: none; } .feature-tip:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: var(--lr-r-sm, 4px); } body.dark-mode .feature-tip, html.dark-mode .feature-tip { color: #93c5fd; } body.dark-mode .feature-tip:focus-visible, html.dark-mode .feature-tip:focus-visible { outline-color: #93c5fd; } /* Pseudo-element fallback for when feature-tip-portal.js fails to load. Suppressed by the .js-feature-tip-portal guard on when the JS takes over. */ .feature-tip[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: #1a1a1a; color: #fff; font-size: 0.75rem; font-weight: 400; line-height: 1.4; padding: 0.5rem 0.75rem; border-radius: var(--lr-r-md, 6px); white-space: normal; width: max-content; max-width: 260px; text-align: left; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; z-index: 100; } .feature-tip[data-tip]::before { content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1a1a1a; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; z-index: 100; } .feature-tip[data-tip]:hover::after, .feature-tip[data-tip]:focus::after, .feature-tip[data-tip]:hover::before, .feature-tip[data-tip]:focus::before { opacity: 1; visibility: visible; } html.js-feature-tip-portal .feature-tip[data-tip]::after, html.js-feature-tip-portal .feature-tip[data-tip]::before { display: none !important; } /* JS portal tooltip — rendered by /js/feature-tip-portal.js into with position: fixed, so it escapes overflow:auto on any ancestor. */ .feature-tip-portal { position: fixed; top: -9999px; left: -9999px; background: #1a1a1a; color: #fff; font-size: 0.75rem; font-weight: 400; line-height: 1.4; padding: 0.5rem 0.75rem; border-radius: var(--lr-r-md, 6px); white-space: normal; width: max-content; max-width: 260px; text-align: left; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; z-index: 10000; } .feature-tip-portal.visible { opacity: 1; visibility: visible; } .feature-tip-portal-content { display: block; } .feature-tip-portal-arrow { position: absolute; width: 0; height: 0; border: 6px solid transparent; transform: translateX(-50%); pointer-events: none; } .feature-tip-portal.open-below .feature-tip-portal-arrow { top: -12px; border-bottom-color: #1a1a1a; } .feature-tip-portal.open-above .feature-tip-portal-arrow { bottom: -12px; border-top-color: #1a1a1a; } /* LAYOUT-SPECIFIC — not in source */ @media (max-width: 480px) { .feature-tip-portal { max-width: 220px; font-size: 0.7rem; } }