/* =========================================================
HDPE QUOTE CARD
Self-contained styles for Elementor HTML widget
========================================================= */
.neoloy-quote-card {
--nq-red: #b71936;
--nq-red-soft: rgba(183, 25, 54, 0.10);
--nq-navy: #172b4d;
--nq-text: #667085;
--nq-border: #e7e9ee;
--mouse-x: 50%;
--mouse-y: 50%;
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
gap: 24px;
width: 100%;
padding: 30px 32px;
background:
linear-gradient(
135deg,
rgba(255,255,255,1) 0%,
rgba(252,252,253,1) 100%
);
border: 1px solid var(--nq-border);
border-radius: 16px;
box-shadow:
0 4px 12px rgba(16, 24, 40, 0.035),
0 1px 2px rgba(16, 24, 40, 0.025);
box-sizing: border-box;
transition:
transform 0.45s cubic-bezier(.2,.8,.2,1),
box-shadow 0.45s cubic-bezier(.2,.8,.2,1),
border-color 0.45s ease;
opacity: 0;
transform: translateY(18px);
}
/* -----------------------------------------
Scroll entrance
----------------------------------------- */
.neoloy-quote-card.nq-visible {
opacity: 1;
transform: translateY(0);
transition:
opacity 0.7s ease,
transform 0.7s cubic-bezier(.2,.8,.2,1),
box-shadow 0.45s cubic-bezier(.2,.8,.2,1),
border-color 0.45s ease;
}
/* -----------------------------------------
Pointer-follow soft light
----------------------------------------- */
.neoloy-quote-card::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background:
radial-gradient(
380px circle at var(--mouse-x) var(--mouse-y),
rgba(183, 25, 54, 0.075),
rgba(183, 25, 54, 0.025) 35%,
transparent 68%
);
opacity: 0;
transition: opacity 0.45s ease;
pointer-events: none;
}
.neoloy-quote-card:hover::before {
opacity: 1;
}
/* -----------------------------------------
Animated technical accent line
----------------------------------------- */
.neoloy-quote-card .nq-accent-line {
position: absolute;
top: 0;
left: 28px;
right: 28px;
height: 2px;
overflow: hidden;
opacity: 0.30;
border-radius: 0 0 4px 4px;
}
.neoloy-quote-card .nq-accent-line::before {
content: "";
position: absolute;
width: 34%;
height: 100%;
left: -40%;
background:
linear-gradient(
90deg,
transparent 0%,
var(--nq-red) 45%,
#d74a61 55%,
transparent 100%
);
transition: left 0s;
}
.neoloy-quote-card:hover .nq-accent-line {
opacity: 0.9;
}
.neoloy-quote-card:hover .nq-accent-line::before {
animation: nq-line-scan 1.55s cubic-bezier(.4,0,.2,1);
}
@keyframes nq-line-scan {
0% {
left: -40%;
}
100% {
left: 110%;
}
}
/* -----------------------------------------
Hover card motion
----------------------------------------- */
.neoloy-quote-card.nq-visible:hover {
transform: translateY(-5px);
border-color: rgba(183, 25, 54, 0.22);
box-shadow:
0 18px 38px rgba(16, 24, 40, 0.075),
0 5px 12px rgba(16, 24, 40, 0.035);
}
/* =========================================================
ICON
========================================================= */
.nq-icon-wrap {
position: relative;
flex: 0 0 68px;
display: flex;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
border-radius: 16px;
background:
linear-gradient(
145deg,
rgba(183,25,54,0.075),
rgba(183,25,54,0.025)
);
transition:
transform 0.45s cubic-bezier(.2,.8,.2,1),
background 0.45s ease;
}
/* subtle ring behind icon */
.nq-icon-wrap::before {
content: "";
position: absolute;
inset: 7px;
border-radius: 12px;
border: 1px solid rgba(183,25,54,0.12);
transition:
inset 0.45s cubic-bezier(.2,.8,.2,1),
opacity 0.45s ease;
opacity: 0;
}
.neoloy-quote-card:hover .nq-icon-wrap {
transform: translateY(-2px) scale(1.04);
background:
linear-gradient(
145deg,
rgba(183,25,54,0.11),
rgba(183,25,54,0.035)
);
}
.neoloy-quote-card:hover .nq-icon-wrap::before {
inset: 3px;
opacity: 1;
}
.nq-icon {
position: relative;
z-index: 2;
width: 43px;
height: 43px;
color: var(--nq-red);
transition:
transform 0.45s cubic-bezier(.2,.8,.2,1),
filter 0.45s ease;
}
.neoloy-quote-card:hover .nq-icon {
transform: scale(1.045);
filter:
drop-shadow(
0 5px 7px rgba(183,25,54,0.14)
);
}
/* -----------------------------------------
Small animated currency mark
----------------------------------------- */
.nq-price-circle {
transform-origin: center;
}
.neoloy-quote-card:hover .nq-price-circle {
animation: nq-price-pulse 0.75s ease;
}
@keyframes nq-price-pulse {
0% {
transform: scale(1);
}
45% {
transform: scale(1.09);
}
100% {
transform: scale(1);
}
}
/* =========================================================
CONTENT
========================================================= */
.nq-content {
position: relative;
z-index: 2;
flex: 1;
min-width: 0;
}
.nq-title {
margin: 0 0 8px 0;
color: var(--nq-navy);
font-size: 20px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.015em;
transition:
color 0.35s ease,
transform 0.35s ease;
}
.neoloy-quote-card:hover .nq-title {
color: #102542;
transform: translateX(2px);
}
.nq-text {
margin: 0;
max-width: 440px;
color: var(--nq-text);
font-size: 15px;
line-height: 1.6;
font-weight: 400;
}
/* =========================================================
SMALL DECORATIVE PROJECT / DATA MARK
========================================================= */
.nq-detail {
position: absolute;
right: 24px;
bottom: 17px;
display: flex;
align-items: center;
gap: 5px;
opacity: 0.18;
transition:
opacity 0.4s ease,
transform 0.4s ease;
}
.nq-detail span {
display: block;
width: 4px;
height: 4px;
background: var(--nq-red);
border-radius: 50%;
}
.nq-detail span:nth-child(2) {
width: 16px;
height: 1px;
border-radius: 1px;
}
.neoloy-quote-card:hover .nq-detail {
opacity: 0.55;
transform: translateX(3px);
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.neoloy-quote-card {
gap: 18px;
padding: 24px 22px;
border-radius: 14px;
align-items: flex-start;
}
.nq-icon-wrap {
flex-basis: 56px;
width: 56px;
height: 56px;
border-radius: 13px;
}
.nq-icon {
width: 36px;
height: 36px;
}
.nq-title {
font-size: 18px;
}
.nq-text {
font-size: 14px;
line-height: 1.55;
}
.nq-detail {
display: none;
}
}
/* =========================================================
ACCESSIBILITY — REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.neoloy-quote-card,
.neoloy-quote-card *,
.neoloy-quote-card *::before,
.neoloy-quote-card *::after {
animation: none !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.neoloy-quote-card {
opacity: 1;
transform: none;
}
}
Request an HDPE Quote
Get pricing and product information based on your project requirements.
(function () {
const cards =
document.querySelectorAll('.neoloy-quote-card');
cards.forEach(function(card) {
/* ----------------------------
Scroll reveal
---------------------------- */
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver(
function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add('nq-visible');
observer.unobserve(entry.target);
}
});
},
{
threshold: 0.18
}
);
observer.observe(card);
} else {
card.classList.add('nq-visible');
}
/* ----------------------------
Pointer-follow illumination
---------------------------- */
card.addEventListener(
'pointermove',
function(e) {
const rect = card.getBoundingClientRect();
const x =
e.clientX - rect.left;
const y =
e.clientY - rect.top;
card.style.setProperty(
'--mouse-x',
x + 'px'
);
card.style.setProperty(
'--mouse-y',
y + 'px'
);
}
);
card.addEventListener(
'pointerleave',
function() {
card.style.setProperty(
'--mouse-x',
'50%'
);
card.style.setProperty(
'--mouse-y',
'50%'
);
}
);
});
})();
