/* ICR Side Contacts – injected into */ /* Theme-aware colors */ .icr-side-contacts{ --icr-primary: var(--icr-blue, #173472); --icr-primary-hover: color-mix(in srgb, var(--icr-primary) 92%, black); --icr-primary-press: color-mix(in srgb, var(--icr-primary) 86%, black); --icr-shadow: color-mix(in srgb, var(--icr-primary) 30%, transparent); position: fixed; right: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 2147483000; pointer-events: none; } /* Icon: solid blue, white glyph, white ring so it never disappears on white bg */ .icr-side-contacts .icr-icon{ position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--icr-primary); display: grid; place-items: center; text-decoration: none !important; pointer-events: auto; outline: none; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; /* white ring + soft blue shadow */ box-shadow: 0 8px 24px var(--icr-shadow), 0 0 0 2px rgba(255,255,255,.95); } .icr-side-contacts .icr-icon svg{ width: 24px; height: 24px; fill: #fff; } .icr-side-contacts .icr-icon:hover{ background: var(--icr-primary-hover); transform: translateY(-2px); box-shadow: 0 12px 30px var(--icr-shadow), 0 0 0 2px rgba(255,255,255,1); } .icr-side-contacts .icr-icon:active{ background: var(--icr-primary-press); transform: translateY(0); } /* Tooltip in theme tone */ .icr-side-contacts .icr-icon::after{ content: attr(data-tip); position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(4px); background: var(--icr-primary-press); color: #fff; padding: 6px 10px; border-radius: 10px; font-size: 13px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .18s ease, transform .18s ease; box-shadow: 0 8px 20px var(--icr-shadow); } .icr-side-contacts .icr-icon::before{ content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: var(--icr-primary-press); opacity: 0; transition: opacity .18s ease; } .icr-side-contacts .icr-icon:hover::after, .icr-side-contacts .icr-icon:focus-visible::after, .icr-side-contacts .icr-icon.icr-tip-show::after{ opacity:1; transform:translateY(-50%) translateX(0); } .icr-side-contacts .icr-icon:hover::before, .icr-side-contacts .icr-icon:focus-visible::before, .icr-side-contacts .icr-icon.icr-tip-show::before{ opacity:1; } /* Keyboard focus ring */ .icr-side-contacts .icr-icon:focus-visible{ box-shadow: 0 8px 24px var(--icr-shadow), 0 0 0 3px color-mix(in srgb, var(--icr-primary) 35%, white 0%), 0 0 0 6px rgba(255,255,255,.95); } /* Admin bar compensation */ .admin-bar .icr-side-contacts{ top: calc(50% + 16px); } /* Mobile (keep middle-right vertical) */ @media (max-width: 768px){ .icr-side-contacts{ right: 10px; top: 50%; transform: translateY(-50%); gap: 10px; } .icr-side-contacts .icr-icon{ width: 48px; height: 48px; } .icr-side-contacts .icr-icon svg{ width: 22px; height: 22px; } }