/** * Wakasm Hover Popup — base styles. * * Popup is appended to by wakasm-hover-popup.js so it escapes any * clip-path / overflow:hidden ancestor. Position is fixed; JS sets * top/left via getBoundingClientRect(). * * Desktop: side-positioned with a speech-bubble arrow that tracks the * trigger's vertical center via --wakasm-hp-arrow-y. * Touch / narrow viewport (<=600px): centered horizontally, placed * above/below the trigger. No side arrow. */ .wakasm-hover-popup { position: fixed; top: 0; left: 0; z-index: 10001; /* Above site nav (9999) and modals (10000). */ width: 320px; padding: 10px; background: #1a1a1a; border: 1px solid #4da44b; border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.12s ease, transform 0.12s ease; } .wakasm-hover-popup.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; cursor: pointer; } .wakasm-hover-popup.is-measuring { opacity: 0; pointer-events: none; } .wakasm-hover-popup__image { display: block; width: 100%; max-height: 280px; object-fit: contain; border-radius: 4px; background: #0f0f0f; } .wakasm-hover-popup__body { margin-top: 8px; color: #e0e0e0; } .wakasm-hover-popup__title { font-size: 0.85rem; font-weight: 600; line-height: 1.35; /* Two-line clamp */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .wakasm-hover-popup__title:empty { display: none; } .wakasm-hover-popup__meta { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .wakasm-hover-popup__meta:empty { display: none; } .wakasm-hover-popup__meta .affiliate-price { background: rgba(77, 164, 75, 0.9); color: #fff; padding: 3px 10px; border-radius: 4px; font-size: 0.85rem; font-weight: 700; } .wakasm-hover-popup__meta .affiliate-condition { background: rgba(255, 255, 255, 0.12); color: #ccc; padding: 3px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 500; } /* Side-aware arrow for desktop. JS sets --wakasm-hp-arrow-y to the trigger's vertical center within the popup. Above/below variants render no arrow (the centered-card layout doesn't need one). */ .wakasm-hover-popup::before { content: ''; position: absolute; top: var(--wakasm-hp-arrow-y, 50%); width: 0; height: 0; transform: translateY(-50%); border: 7px solid transparent; pointer-events: none; } .wakasm-hover-popup--right::before { right: 100%; border-right-color: #4da44b; } .wakasm-hover-popup--left::before { left: 100%; border-left-color: #4da44b; } /* Narrow viewport (touch & small screens): full-width card style. */ @media (max-width: 600px) { .wakasm-hover-popup { width: calc(100vw - 24px); max-width: 360px; } .wakasm-hover-popup__image { max-height: 240px; } }