/* ========================================================================== Speakeasy Vaporium - Glossary Hover Preview (tooltip panel) Paired with /assets/glossary-tooltip.js ========================================================================== */ /* The auto-linked term itself: subtle dotted underline so users know it has a preview, without shouting. */ a.glossary-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; cursor: help; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } a.glossary-link:hover, a.glossary-link:focus { color: #b8860b; /* Speakeasy warm gold on hover */ border-bottom-color: #b8860b; background-color: rgba(184, 134, 11, 0.06); } /* The floating preview panel. Position:absolute on so it flows with the document while the user scrolls. */ .glossary-tooltip { position: absolute; z-index: 9999; width: max-content; max-width: 320px; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .glossary-tooltip.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Used internally by the JS to measure size before first paint. */ .glossary-tooltip.is-measuring { opacity: 0 !important; pointer-events: none !important; } .glossary-tooltip__inner { background: #1a1a1a; color: #f4f1ea; border: 1px solid rgba(184, 134, 11, 0.45); border-radius: 6px; padding: 12px 14px 10px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2); line-height: 1.45; } .glossary-tooltip__label { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #d4a437; margin-bottom: 6px; } .glossary-tooltip__summary { margin: 0 0 10px 0; font-size: 14px; color: #e8e4dc; text-align: justify; hyphens: auto; } .glossary-tooltip__more { display: inline-block; font-size: 13px; font-weight: 600; color: #d4a437; text-decoration: none; border-bottom: 1px solid rgba(212, 164, 55, 0.4); padding-bottom: 1px; } .glossary-tooltip__more:hover, .glossary-tooltip__more:focus { color: #f4c95b; border-bottom-color: #f4c95b; } /* The little arrow connecting the panel to the link. Default: panel above the link (arrow points down). */ .glossary-tooltip__arrow { position: absolute; bottom: -7px; width: 14px; height: 14px; background: #1a1a1a; border-right: 1px solid rgba(184, 134, 11, 0.45); border-bottom: 1px solid rgba(184, 134, 11, 0.45); transform: rotate(45deg); } /* Panel flipped BELOW the link: arrow swaps to the top edge. */ .glossary-tooltip--below .glossary-tooltip__arrow { bottom: auto; top: -7px; border-right: none; border-bottom: none; border-left: 1px solid rgba(184, 134, 11, 0.45); border-top: 1px solid rgba(184, 134, 11, 0.45); } /* Small screens: fill more of the viewport and use larger tap targets. */ @media (max-width: 480px) { .glossary-tooltip { max-width: calc(100vw - 24px); } .glossary-tooltip__inner { padding: 14px 16px 12px; } .glossary-tooltip__summary { font-size: 15px; } .glossary-tooltip__more { font-size: 14px; padding: 4px 0; } } /* Respect reduced-motion preference. */ @media (prefers-reduced-motion: reduce) { .glossary-tooltip { transition: none; transform: none; } }