/* ========================================================== Share menu ========================================================== Dropdown opened by the .icon-btn[data-ga-event="share"] buttons in the single-* templates and the sticky mini header. assets/js/share.js appends it to and sets top/left, so it sits outside the mini header's overflow and stacking context. ========================================================== */ .share-menu { position: absolute; z-index: 900; min-width: 200px; padding: var(--space-2); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, .04), 0 12px 28px rgba(0, 0, 0, .12); font-family: var(--font-ui); } /* Opens without movement for readers who ask for that. */ .share-menu.is-open { animation: share-menu-in .15s ease; } @keyframes share-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .share-menu.is-open { animation: none; } } /* ---------- Items ---------- */ .share-menu__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border: 0; border-radius: 5px; background: transparent; color: var(--ink-soft); font-family: inherit; font-size: var(--text-md); line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer; transition: background var(--ease-quick), color var(--ease-quick); } .share-menu__item:hover, .share-menu__item:focus-visible { background: var(--bg-soft); color: var(--ink); } .share-menu__item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .share-menu__icon { display: inline-flex; flex: 0 0 16px; align-items: center; justify-content: center; color: var(--muted); } .share-menu__icon svg { width: 16px; height: 16px; display: block; } .share-menu__item:hover .share-menu__icon, .share-menu__item:focus-visible .share-menu__icon { color: var(--brand); } .share-menu__label { white-space: nowrap; } /* Copy confirmation — the label swaps to "Copied" for ~1.8s. */ .share-menu__item.is-copied, .share-menu__item.is-copied .share-menu__icon { color: var(--brand); } /* ---------- Dark mode ---------- */ [data-theme="dark"] .share-menu { background: var(--bg-soft); border-color: rgba(255, 255, 255, .12); box-shadow: 0 12px 28px rgba(0, 0, 0, .5); } [data-theme="dark"] .share-menu__item:hover, [data-theme="dark"] .share-menu__item:focus-visible { background: rgba(255, 255, 255, .07); color: var(--ink); } /* ---------- Narrow screens ---------- */ @media (max-width: 480px) { .share-menu { min-width: 0; width: calc(100vw - 32px); max-width: 280px; } .share-menu__item { padding: var(--space-3); } } /* Never print the menu. */ @media print { .share-menu { display: none !important; } }