/* Swiss Whale Intelligence — Glossary Frontend Styles * Sprint 4 (Clear Language Phases 2 + 3), 29.04.2026. * * Tokens come from /_shared/tokens.css (loaded separately by each page). * If tokens are missing the styles fall back to safe defaults. */ /* ---------- B: inline snippet labels ----------------------------------- */ /* Used when an element opts-in via data-glossary-snippet="". * The JS appends a with the snippet, * and (in mode="replace") prepends a .glossary-snippet-label with the * display name. */ [data-glossary-snippet] { display: inline-block; line-height: 1.35; } [data-glossary-snippet] .glossary-snippet-label { font-weight: 600; margin-right: 6px; color: var(--text-primary, #1C1C1E); } [data-glossary-snippet] .glossary-snippet-text { display: block; font-size: 12px; font-weight: 400; color: var(--text-secondary, #6B6560); line-height: 1.4; margin-top: 2px; letter-spacing: normal; text-transform: none; /* override sticky-uppercase from card-headers */ } /* ---------- D: hover-glossary terms inline ----------------------------- */ /* Each detected alias is wrapped in by the * decorator. Style is intentionally subtle — a dotted underline that is * recognisable but doesn't fight the surrounding prose. */ .glossary-term { border-bottom: 1px dotted var(--text-secondary, #6B6560); cursor: help; outline: none; text-underline-offset: 2px; transition: border-color 0.15s ease; } .glossary-term:hover, .glossary-term:focus { border-bottom-color: var(--accent-primary, #042C53); background-color: rgba(4, 44, 83, 0.05); /* very subtle highlight */ border-radius: 2px; } /* ---------- D: hover popover ------------------------------------------- */ /* Single popover element appended to . Positioned absolutely in * page-coordinates by the JS. */ .glossary-popover { position: absolute; z-index: 9999; max-width: 320px; padding: 10px 12px; background: var(--bg-primary, #FFFFFF); color: var(--text-primary, #1C1C1E); border: 1px solid var(--border-subtle, #E5E5E5); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 13px; line-height: 1.45; pointer-events: auto; opacity: 0; visibility: hidden; transform: translateY(-2px); transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s 0.12s; } .glossary-popover.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s; } .glossary-popover-title { font-weight: 600; margin-bottom: 4px; color: var(--text-primary, #1C1C1E); font-size: 13px; } .glossary-popover-def { color: var(--text-primary, #1C1C1E); font-size: 13px; } .glossary-popover-anchor { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-subtle, #E5E5E5); color: var(--text-secondary, #6B6560); font-size: 12px; font-style: italic; } /* ---------- accessibility / motion ------------------------------------ */ @media (prefers-reduced-motion: reduce) { .glossary-popover { transition: opacity 0.01s linear, visibility 0s; transform: none !important; } .glossary-term { transition: none; } } /* ---------- print ----------------------------------------------------- */ @media print { .glossary-popover { display: none !important; } .glossary-term { border-bottom: none; background: none; } }