/* Share button component — THE single source (books, publish, blog). Pairs with /assets/share.js (behavior). Extracted 2026-07-20 from the books page per the single-source rule; page CSS keeps only placement overrides (e.g. books .bo-share-top, blog .r-share-top). Base = a round icon button pinned to a card cover's TOP-LEFT (item 8, Niko 2026-07-14); bar/pill variants reset position per page. */ .share-btn { position:absolute; top:10px; left:10px; z-index:4; width:30px; height:30px; padding:0; border:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; background:rgba(20,16,12,.5); color:#fff; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background .15s, transform .15s; } .share-btn svg { width:16px; height:16px; } .share-btn:hover { background:var(--orange); transform:scale(1.08); } .share-btn:focus-visible { outline:2px solid var(--orange); outline-offset:2px; } /* Fading "Link copied" tip, parented to by share.js. */ .share-tip { position:absolute; z-index:2200; transform:translate(-50%,-100%); padding:5px 10px; border-radius:8px; background:#222; color:#fff; font-size:.78rem; font-weight:600; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .16s ease; box-shadow:0 6px 18px rgba(0,0,0,.28); } .share-tip.show { opacity:1; } /* Optional dropdown menu under a share button (aria-haspopup="menu" + aria-controls). Wrap button + menu in .share-wrap for anchoring. */ .share-wrap { position:relative; display:inline-flex; } .share-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:2100; min-width:200px; padding:6px; border-radius:14px; border:1px solid var(--border, rgba(128,128,128,.3)); background:var(--bg-elevated, var(--bg-card, #fff)); box-shadow:0 14px 40px rgba(0,0,0,.24); } .share-menu[hidden] { display:none; } .share-menu button { display:flex; width:100%; align-items:center; gap:10px; padding:9px 12px; border:none; border-radius:9px; background:none; color:var(--text, inherit); font-family:inherit; font-size:.84rem; font-weight:600; text-align:left; cursor:pointer; transition:background .15s, color .15s; } .share-menu button:hover { background:var(--orange-subtle, rgba(247,147,26,.14)); color:var(--orange-text, var(--orange, #F7931A)); } .share-menu button:focus-visible { outline:2px solid var(--orange, #F7931A); outline-offset:-2px; } .share-menu button svg { width:16px; height:16px; flex:none; } .share-menu button[aria-busy="true"] { opacity:.55; pointer-events:none; }