.sc_hotspot_content { position: relative; max-width: fit-content; } .sc_hotspot_image_link { display: block; position: absolute; z-index: 0; top: 0; left: 0; right: 0; bottom: 0; } .sc_hotspot_item { --sc-hotspot-content-item-size: 20px; --sc-hotspot-content-item-size-half: calc( var(--sc-hotspot-content-item-size) / 2 ); --sc-hotspot-content-item-size-half-: calc( var(--sc-hotspot-content-item-size) / -2 ); --sc-hotspot-content-item-popup-z-index: 10; --sc-hotspot-content-item-popup-offset: 10px; --sc-hotspot-content-item-popup-offset-x: calc( var(--sc-hotspot-content-item-size) + var(--sc-hotspot-content-item-popup-offset) ); --sc-hotspot-content-item-popup-offset-y: calc( var(--sc-hotspot-content-item-size) + var(--sc-hotspot-content-item-popup-offset) ); position: absolute; min-width: var(--sc-hotspot-content-item-size); min-height: var(--sc-hotspot-content-item-size); margin: var(--sc-hotspot-content-item-size-half-) 0 0 var(--sc-hotspot-content-item-size-half-); -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); -ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); opacity: 0; -webkit-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .sc_hotspot_image_loaded ~ .sc_hotspot_item_visible_always, .sc_hotspot_image_loaded:hover ~ .sc_hotspot_item_visible_hover, .sc_hotspot_image_loaded ~ .sc_hotspot_image_link:hover ~ .sc_hotspot_item_visible_hover, .sc_hotspot_image_loaded ~ .sc_hotspot_item_visible_hover.sc_hotspot_item_hovered { opacity: 1; } .sc_hotspot_item_sonar { display: block; background-color: #fff; position: absolute; z-index: 1; top: -8px; right: -8px; bottom: -8px; left: -8px; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 800px; -ms-perspective: 800px; perspective: 800px; -webkit-animation: sc-hotspot-sonar 2s ease infinite; -ms-animation: sc-hotspot-sonar 2s ease infinite; animation: sc-hotspot-sonar 2s ease infinite; } .sc_hotspot_item_icon:not(.sc_hotspot_item_icon_type_custom) { position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; line-height: var(--sc-hotspot-content-item-size); } .sc_hotspot_item_icon_type_custom { position: relative; z-index: 2; display: block; text-align: center; line-height: 1; min-width: var(--sc-hotspot-content-item-size); min-height: var(--sc-hotspot-content-item-size); padding: 4px 6px; } .sc_hotspot_item_icon { background-color: #f0f0f0; -webkit-border-radius: var(--sc-hotspot-content-item-size); -ms-border-radius: var(--sc-hotspot-content-item-size); border-radius: var(--sc-hotspot-content-item-size); -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .sc_hotspot_item_icon:before { display: none !important; } .sc_hotspot_item_icon.sc_hotspot_item_icon_type_svg svg, .sc_hotspot_item_icon.sc_hotspot_item_icon_type_svg object { width: var(--sc-hotspot-content-item-size); height: var(--sc-hotspot-content-item-size); line-height: var(--sc-hotspot-content-item-size); text-align: center; overflow: hidden; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .sc_hotspot_item_icon.sc_hotspot_item_icon_type_images img { max-width: var(--sc-hotspot-content-item-size); height: auto; overflow: hidden; -webkit-border-radius: var(--sc-hotspot-content-item-size); -ms-border-radius: var(--sc-hotspot-content-item-size); border-radius: var(--sc-hotspot-content-item-size); } .sc_hotspot_item_icon span { color: #000; } .sc_hotspot_item_icon span.sc_icon_type_, .sc_hotspot_item_icon span.sc_icon_type_icons, .sc_hotspot_item_icon span.sc_icon_type_custom, .sc_hotspot_item_icon span.sc_icon_type_number { font-size: calc( var(--sc-hotspot-content-item-size) / 2 ); } .sc_hotspot_item_icon span.sc_icon_type_icons svg { width: calc( var(--sc-hotspot-content-item-size) / 2 ); height: calc( var(--sc-hotspot-content-item-size) / 2 ); line-height: 1; fill: currentColor; } .sc_hotspot_item_open_hover span.sc_hotspot_item_icon { cursor: default; } .sc_hotspot_item_open_click .sc_hotspot_item_icon { cursor: pointer; } .sc_hotspot_item_popup { z-index: -1; padding: 1.5em; width: 250px; background: #fff; text-align: center; opacity: 0; -webkit-transition: opacity 0.3s ease, transform 0.3s ease; -ms-transition: opacity 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); -ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); } .sc_hotspot_item_popup_tl { --sc-hotspot-content-item-popup-offset-y: 0; position: absolute; z-index: var(--sc-hotspot-content-item-popup-z-index); bottom: var(--sc-hotspot-content-item-popup-offset-y); right: var(--sc-hotspot-content-item-popup-offset-x); } .sc_hotspot_item_popup_tc { position: absolute; z-index: var(--sc-hotspot-content-item-popup-z-index); bottom: var(--sc-hotspot-content-item-popup-offset-y); left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .sc_hotspot_item_popup_tr { --sc-hotspot-content-item-popup-offset-y: 0; position: absolute; z-index: var(--sc-hotspot-content-item-popup-z-index); bottom: var(--sc-hotspot-content-item-popup-offset-y); left: var(--sc-hotspot-content-item-popup-offset-x); } .sc_hotspot_item_popup_ml { position: absolute; z-index: var(--sc-hotspot-content-item-popup-z-index); top: 50%; right: var(--sc-hotspot-content-item-popup-offset-x); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .sc_hotspot_item_popup_mc { position: absolute; z-index: var(--sc-hotspot-content-item-popup-z-index); top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .sc_hotspot_item_popup_mr { position: absolute; z-index: var(--sc-hotspot-content-item-popup-z-index); top: 50%; left: var(--sc-hotspot-content-item-popup-offset-x); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .sc_hotspot_item_popup_bl { --sc-hotspot-content-item-popup-offset-y: 0; position: absolute; z-index: var(--sc-hotspot-content-item-popup-z-index); top: var(--sc-hotspot-content-item-popup-offset-y); right: var(--sc-hotspot-content-item-popup-offset-x); } .sc_hotspot_item_popup_bc { position: absolute; z-index: var(--sc-hotspot-content-item-popup-z-index); top: var(--sc-hotspot-content-item-popup-offset-y); left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .sc_hotspot_item_popup_br { --sc-hotspot-content-item-popup-offset-y: 0; position: absolute; z-index: var(--sc-hotspot-content-item-popup-z-index); top: var(--sc-hotspot-content-item-popup-offset-y); left: var(--sc-hotspot-content-item-popup-offset-x); } .sc_hotspot_item_popup_ca { --sc-hotspot-content-item-popup-offset-x: 0; --sc-hotspot-content-item-popup-offset-y: 0; position: absolute; z-index: var(--sc-hotspot-content-item-popup-z-index); top: var(--sc-hotspot-content-item-popup-offset-y); right: var(--sc-hotspot-content-item-popup-offset-x); } .sc_hotspot_item_popup_align_left { text-align: left; } .sc_hotspot_item_popup_align_center { text-align: center; } .sc_hotspot_item_popup_align_right { text-align: right; } .sc_hotspot_item_open_hover .sc_hotspot_item_popup:before { content: ' '; display: block; position: absolute; } .sc_hotspot_item_open_hover .sc_hotspot_item_popup_tc:before, .sc_hotspot_item_open_hover .sc_hotspot_item_popup_bc:before { left: 0; width: 100%; height: var(--sc-hotspot-content-item-size); } .sc_hotspot_item_open_hover .sc_hotspot_item_popup_tc:before { top: 100%; } .sc_hotspot_item_open_hover .sc_hotspot_item_popup_bc:before { bottom: 100%; } .sc_hotspot_item_open_hover .sc_hotspot_item_popup_tl:before, .sc_hotspot_item_open_hover .sc_hotspot_item_popup_tr:before, .sc_hotspot_item_open_hover .sc_hotspot_item_popup_ml:before, .sc_hotspot_item_open_hover .sc_hotspot_item_popup_mr:before, .sc_hotspot_item_open_hover .sc_hotspot_item_popup_bl:before, .sc_hotspot_item_open_hover .sc_hotspot_item_popup_br:before { top: 0; height: 100%; width: var(--sc-hotspot-content-item-size); } .sc_hotspot_item_open_hover .sc_hotspot_item_popup_tl:before, .sc_hotspot_item_open_hover .sc_hotspot_item_popup_ml:before, .sc_hotspot_item_open_hover .sc_hotspot_item_popup_bl:before { left: 100%; } .sc_hotspot_item_open_hover .sc_hotspot_item_popup_tr:before, .sc_hotspot_item_open_hover .sc_hotspot_item_popup_mr:before, .sc_hotspot_item_open_hover .sc_hotspot_item_popup_br:before { right: 100%; } .sc_hotspot_item_popup { pointer-events: none; } .sc_hotspot_item_opened .sc_hotspot_item_popup, .sc_hotspot_item_open_hover:hover .sc_hotspot_item_popup, .sc_hotspot_item_open_hover:focus .sc_hotspot_item_popup { pointer-events: visible; z-index: var(--sc-hotspot-content-item-popup-z-index); opacity: 1; } .sc_hotspot_item_popup_close { position: absolute; z-index: 10; top: 0; right: 0; width: 1.75em; height: 1.75em; line-height: 1.75em; text-align: center; cursor: pointer; } .sc_hotspot_item_popup_close.trx_addons_button_close { width: 1.75em; height: 1.75em; line-height: 1.75em; text-align: center; z-index: 10; } .sc_hotspot_item_popup_close.trx_addons_button_close .trx_addons_button_close_icon:before, .sc_hotspot_item_popup_close.trx_addons_button_close .trx_addons_button_close_icon:after { border-color: #000; -webkit-transition: border-color 0.3s ease; -ms-transition: border-color 0.3s ease; transition: border-color 0.3s ease; } .sc_hotspot_item_popup_close.trx-addons-icon i, .sc_hotspot_item_popup_close.trx-addons-icon:before { -webkit-transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; -ms-transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; } :where(body:not(.trx_addons_customizable_theme)) .sc_hotspot_item_subtitle { font-size: 1.15em; } :where(body:not(.trx_addons_customizable_theme)) .sc_hotspot_item_price { font-size: 1.25em; } .sc_hotspot_item_subtitle { margin: 1em 0 0; } .sc_hotspot_item_subtitle .post_meta { margin: 0; } .sc_hotspot_item_title { margin: 0.2em 0 0; } .sc_hotspot_item_price { margin: 0.5em 0 0; } .sc_hotspot_item_description { margin: 1em 0 0; } .sc_hotspot_item_description span { display: block; } .sc_hotspot_item_description span + span { margin-top: 0.25em; } .sc_hotspot_item_link { margin: 1.5em 0 0; } .sc_hotspot_item_popup > [class*="sc_hotspot_item_"]:first-child { margin-top: 0; } .sc_hotspot_item_link_cover { display: block; position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; } @-webkit-keyframes sc-hotspot-sonar { 0% { opacity: 0; -webkit-transform: scale(0.2, 0.2); -ms-transform: scale(0.2, 0.2); transform: scale(0.2, 0.2); } 50% { opacity: .8; } 100% { opacity: 0; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes sc-hotspot-sonar { 0% { opacity: 0; -webkit-transform: scale(0.2, 0.2); -ms-transform: scale(0.2, 0.2); transform: scale(0.2, 0.2); } 50% { opacity: .8; } 100% { opacity: 0; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } }