/* =====================================================
PRS FLOATING ADVISOR HUB
===================================================== */
.prs-advisor-hub {
--prs-red: #B91E39;
--prs-red-hover: #A91A34;
--prs-dark: #303A49;
--prs-grey: #65615C;
--prs-light-border: rgba(48, 58, 73, 0.12);
--prs-light-border-strong: rgba(185, 30, 57, 0.24);
--prs-panel-bg: rgba(255, 255, 255, 0.96);
position: fixed;
right: 24px;
bottom: 24px;
z-index: 9998;
display: flex;
flex-direction: column;
align-items: flex-end;
font-family: inherit;
}
/* =====================================================
FLOATING TRIGGER
===================================================== */
.prs-advisor-trigger {
position: relative;
display: flex;
align-items: center;
width: 56px;
height: 56px;
padding: 0 16px;
overflow: hidden;
border: 1px solid rgba(48, 58, 73, 0.12);
border-radius: 28px;
background:
linear-gradient(
135deg,
rgba(255,255,255,0.96) 0%,
rgba(255,255,255,0.92) 100%
);
color: var(--prs-dark);
box-sizing: border-box;
cursor: pointer;
box-shadow:
0 10px 30px rgba(48, 58, 73, 0.12);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition:
width 0.45s cubic-bezier(.2,.8,.2,1),
border-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s ease,
background-color 0.25s ease;
}
.prs-advisor-hub.prs-advisor-intro
.prs-advisor-trigger,
.prs-advisor-hub.prs-advisor-open
.prs-advisor-trigger {
width: 215px;
}
.prs-advisor-trigger:hover {
transform: translateY(-2px);
border-color:
rgba(185, 30, 57, 0.20);
box-shadow:
0 14px 34px rgba(48, 58, 73, 0.16),
0 0 0 4px rgba(185, 30, 57, 0.05);
}
.prs-advisor-trigger-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex: 0 0 24px;
color: var(--prs-red);
}
.prs-advisor-trigger-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.prs-advisor-trigger-text {
display: block;
min-width: 145px;
margin-left: 11px;
white-space: nowrap;
opacity: 0;
transform: translateX(7px);
font-size: 12.5px;
font-weight: 650;
line-height: 1;
color: var(--prs-dark);
transition:
opacity 0.25s ease 0.12s,
transform 0.25s ease 0.12s;
}
.prs-advisor-hub.prs-advisor-intro
.prs-advisor-trigger-text,
.prs-advisor-hub.prs-advisor-open
.prs-advisor-trigger-text {
opacity: 1;
transform: translateX(0);
}
/* =====================================================
STATUS DOT
===================================================== */
.prs-advisor-status {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
border: 2px solid #ffffff;
border-radius: 50%;
background: var(--prs-red);
}
/* =====================================================
CONTACT PANEL
===================================================== */
.prs-advisor-panel {
position: absolute;
right: 0;
bottom: 68px;
width: 360px;
padding: 22px;
box-sizing: border-box;
border: 1px solid rgba(48, 58, 73, 0.10);
border-radius: 18px;
background: var(--prs-panel-bg);
box-shadow:
0 18px 55px rgba(48, 58, 73, 0.16);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
visibility: hidden;
opacity: 0;
pointer-events: none;
transform:
translateY(10px)
scale(0.985);
transform-origin: bottom right;
transition:
opacity 0.25s ease,
transform 0.30s cubic-bezier(.2,.8,.2,1),
visibility 0.25s ease;
}
.prs-advisor-hub.prs-advisor-open
.prs-advisor-panel {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform:
translateY(0)
scale(1);
}
/* =====================================================
PANEL HEADER
===================================================== */
.prs-advisor-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 18px;
}
.prs-advisor-eyebrow {
display: block;
margin-bottom: 6px;
font-size: 8px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--prs-red);
}
.prs-advisor-heading h3 {
margin: 0 0 4px 0;
font-size: 17px;
font-weight: 650;
line-height: 1.2;
letter-spacing: -0.25px;
color: var(--prs-dark);
}
.prs-advisor-heading p {
margin: 0;
font-size: 12.5px;
line-height: 1.4;
color: var(--prs-grey);
}
/* =====================================================
CLOSE BUTTON
===================================================== */
.prs-advisor-close {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: 0 0 30px;
padding: 0;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--prs-grey);
cursor: pointer;
transition:
background-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
.prs-advisor-close:hover {
background:
rgba(185, 30, 57, 0.06);
color: var(--prs-red);
transform: scale(1.03);
}
.prs-advisor-close svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
}
/* =====================================================
ACTIONS
===================================================== */
.prs-advisor-action {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
width: 100%;
min-height: 60px;
margin: 0 0 10px 0;
padding: 12px 14px;
box-sizing: border-box;
border-radius: 14px;
font-family: inherit;
text-align: left;
text-decoration: none !important;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition:
transform 0.22s ease,
border-color 0.22s ease,
background-color 0.22s ease,
box-shadow 0.22s ease;
}
/* =====================================================
NEOLOY PRIMARY
Lighter / premium / hover highlight
===================================================== */
.prs-advisor-action-primary {
border:
1px solid rgba(185, 30, 57, 0.18);
background:
linear-gradient(
135deg,
rgba(185, 30, 57, 0.07) 0%,
rgba(185, 30, 57, 0.03) 100%
);
color:
var(--prs-dark) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.45);
}
.prs-advisor-action-primary::before {
content: "";
position: absolute;
left: 0;
top: 11px;
bottom: 11px;
width: 3px;
border-radius: 3px;
background: var(--prs-red);
}
.prs-advisor-action-primary:hover {
transform: translateY(-2px);
border-color:
rgba(185, 30, 57, 0.28);
background:
linear-gradient(
135deg,
rgba(185, 30, 57, 0.10) 0%,
rgba(185, 30, 57, 0.045) 100%
);
box-shadow:
0 10px 24px rgba(48, 58, 73, 0.08),
0 0 0 4px rgba(185, 30, 57, 0.05);
}
/* =====================================================
HDPE + EMAIL
===================================================== */
.prs-advisor-action-secondary,
.prs-advisor-action-email {
border:
1px solid rgba(48, 58, 73, 0.10);
background:
#ffffff;
color:
var(--prs-dark) !important;
}
.prs-advisor-action-secondary:hover,
.prs-advisor-action-email:hover {
transform: translateY(-2px);
border-color:
rgba(185, 30, 57, 0.18);
background:
linear-gradient(
135deg,
rgba(185, 30, 57, 0.025) 0%,
rgba(255,255,255,1) 100%
);
box-shadow:
0 10px 24px rgba(48, 58, 73, 0.07);
}
/* =====================================================
ACTION ICONS
===================================================== */
.prs-advisor-action-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: 0 0 32px;
border-radius: 10px;
}
.prs-advisor-action-primary
.prs-advisor-action-icon {
background:
rgba(185, 30, 57, 0.10);
color:
var(--prs-red);
}
.prs-advisor-action-secondary
.prs-advisor-action-icon,
.prs-advisor-action-email
.prs-advisor-action-icon {
background:
rgba(185, 30, 57, 0.06);
color:
var(--prs-red);
}
.prs-advisor-action-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.55;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =====================================================
ACTION COPY
===================================================== */
.prs-advisor-action-content {
display: flex;
flex-direction: column;
min-width: 0;
}
.prs-advisor-action-label {
display: block;
margin-bottom: 3px;
font-size: 7.5px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.75px;
text-transform: uppercase;
opacity: 0.72;
}
.prs-advisor-action-content strong {
display: block;
font-size: 12.8px;
font-weight: 650;
line-height: 1.25;
color: inherit;
}
.prs-advisor-arrow {
font-size: 15px;
line-height: 1;
color: inherit;
transition:
transform 0.2s ease,
color 0.2s ease;
}
.prs-advisor-action:hover
.prs-advisor-arrow {
transform: translateX(3px);
color: var(--prs-red);
}
/* =====================================================
SOCIAL AREA
===================================================== */
.prs-advisor-social {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-top: 18px;
padding-top: 16px;
border-top:
1px solid rgba(48, 58, 73, 0.09);
}
.prs-advisor-social-heading {
font-size: 10px;
font-weight: 600;
color: var(--prs-grey);
white-space: nowrap;
}
.prs-advisor-social-links {
display: flex;
align-items: center;
gap: 8px;
}
/* =====================================================
SOCIAL BUTTONS
===================================================== */
.prs-social-button {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border:
1px solid rgba(48, 58, 73, 0.10);
border-radius: 10px;
background:
#ffffff;
text-decoration:
none !important;
box-sizing: border-box;
transition:
transform 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease;
}
.prs-social-button:hover {
transform: translateY(-2px);
border-color:
rgba(48, 58, 73, 0.18);
box-shadow:
0 8px 18px rgba(48, 58, 73, 0.08);
}
.prs-social-button svg {
width: 18px;
height: 18px;
}
/* BRAND COLORS */
.prs-linkedin {
color: #0A66C2 !important;
}
.prs-instagram {
color: #E1306C !important;
}
/* =====================================================
FOCUS
===================================================== */
.prs-advisor-trigger:focus-visible,
.prs-advisor-action:focus-visible,
.prs-advisor-close:focus-visible,
.prs-social-button:focus-visible {
outline:
2px solid rgba(185, 30, 57, 0.30);
outline-offset:
2px;
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 1024px) {
.prs-advisor-hub {
right: 20px;
bottom: 20px;
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 767px) {
.prs-advisor-hub {
right: 15px;
bottom: 15px;
}
.prs-advisor-trigger,
.prs-advisor-hub.prs-advisor-intro
.prs-advisor-trigger,
.prs-advisor-hub.prs-advisor-open
.prs-advisor-trigger {
width: 54px;
height: 54px;
padding: 0 14px;
border-radius: 50%;
}
.prs-advisor-trigger-text {
display: none;
}
.prs-advisor-trigger-icon {
width: 21px;
height: 21px;
flex-basis: 21px;
}
.prs-advisor-trigger-icon svg {
width: 21px;
height: 21px;
}
.prs-advisor-panel {
position: fixed;
right: 14px;
left: 14px;
bottom: 76px;
width: auto;
padding: 19px;
border-radius: 18px;
}
.prs-advisor-heading h3 {
font-size: 17px;
}
.prs-advisor-action {
min-height: 58px;
padding: 11px 12px;
}
.prs-advisor-action-content strong {
font-size: 12px;
}
}
/* =====================================================
VERY SMALL MOBILE
===================================================== */
@media (max-width: 380px) {
.prs-advisor-panel {
right: 10px;
left: 10px;
padding: 17px;
}
.prs-advisor-action {
gap: 9px;
}
}
/* =====================================================
REDUCED MOTION
===================================================== */
@media (prefers-reduced-motion: reduce) {
.prs-advisor-hub *,
.prs-advisor-hub *::before,
.prs-advisor-hub *::after {
transition: none !important;
animation: none !important;
}
}
(function () {
/* =====================================================
ELEMENTS
===================================================== */
const hub =
document.getElementById(
'prsAdvisorHub'
);
const trigger =
document.getElementById(
'prsAdvisorTrigger'
);
const panel =
document.getElementById(
'prsAdvisorPanel'
);
const closeButton =
document.getElementById(
'prsAdvisorClose'
);
if (
!hub ||
!trigger ||
!panel
) {
return;
}
/* =====================================================
PANEL OPEN
===================================================== */
function openAdvisorHub() {
hub.classList.add(
'prs-advisor-open'
);
hub.classList.add(
'prs-advisor-intro'
);
trigger.setAttribute(
'aria-expanded',
'true'
);
panel.setAttribute(
'aria-hidden',
'false'
);
}
/* =====================================================
PANEL CLOSE
===================================================== */
function closeAdvisorHub() {
hub.classList.remove(
'prs-advisor-open'
);
trigger.setAttribute(
'aria-expanded',
'false'
);
panel.setAttribute(
'aria-hidden',
'true'
);
}
/* =====================================================
MAIN FLOATING BUTTON
===================================================== */
trigger.addEventListener(
'click',
function () {
if (
hub.classList.contains(
'prs-advisor-open'
)
) {
closeAdvisorHub();
}
else {
openAdvisorHub();
}
}
);
/* =====================================================
CLOSE BUTTON
===================================================== */
if (closeButton) {
closeButton.addEventListener(
'click',
closeAdvisorHub
);
}
/* =====================================================
FIND CLICKABLE ELEMENT INSIDE ELEMENTOR BUTTON
===================================================== */
function getElementorNativeButton(cssId) {
const element =
document.getElementById(cssId);
if (!element) {
console.warn(
'PRS: Elementor trigger not found: #' + cssId
);
return null;
}
if (
element.matches(
'a.elementor-button, a[href], button'
)
) {
return element;
}
const clickable =
element.querySelector(
'a.elementor-button, a[href], button'
);
if (!clickable) {
console.warn(
'PRS: No clickable Elementor button found inside #' + cssId
);
return null;
}
return clickable;
}
/* =====================================================
ACTIVATE NATIVE ELEMENTOR POPUP
===================================================== */
function activateNativePopup(cssId) {
const nativeButton =
getElementorNativeButton(cssId);
if (!nativeButton) {
return;
}
closeAdvisorHub();
window.setTimeout(
function () {
nativeButton.click();
},
80
);
}
/* =====================================================
NEOLOY
===================================================== */
const neoloyButton =
document.getElementById(
'prsNeoloyRequest'
);
if (neoloyButton) {
neoloyButton.addEventListener(
'click',
function () {
activateNativePopup(
'prs-neoloy-native-trigger'
);
}
);
}
/* =====================================================
HDPE
===================================================== */
const hdpeButton =
document.getElementById(
'prsHdpeRequest'
);
if (hdpeButton) {
hdpeButton.addEventListener(
'click',
function () {
activateNativePopup(
'prs-hdpe-native-trigger'
);
}
);
}
/* =====================================================
CLICK OUTSIDE PANEL
===================================================== */
document.addEventListener(
'click',
function (event) {
if (
!hub.contains(event.target) &&
hub.classList.contains(
'prs-advisor-open'
)
) {
closeAdvisorHub();
}
}
);
/* =====================================================
ESCAPE KEY
===================================================== */
document.addEventListener(
'keydown',
function (event) {
if (
event.key === 'Escape' &&
hub.classList.contains(
'prs-advisor-open'
)
) {
closeAdvisorHub();
trigger.focus();
}
}
);
/* =====================================================
GENTLE INTRO
===================================================== */
window.setTimeout(
function () {
hub.classList.add(
'prs-advisor-intro'
);
},
2800
);
/* =====================================================
RETURN TO SMALL ICON
===================================================== */
window.setTimeout(
function () {
if (
!hub.classList.contains(
'prs-advisor-open'
)
) {
hub.classList.remove(
'prs-advisor-intro'
);
}
},
9500
);
})();
