/**
* paraderma-premium.css
* Drop into alongside your existing styles.
* The JS file (paraderma-premium.js) must also be included before .
*
* Google Font upgrade — add this to for best results:
*
*
*/
/* ══════════════════════════════════════════
DESIGN TOKENS — extend existing :root
══════════════════════════════════════════ */
:root {
--pdp-primary: #118499;
--pdp-primary-hsl: 191 79% 34%;
--pdp-glow: rgba(17, 132, 153, 0.22);
--pdp-shadow-sm: 0 4px 12px -2px rgba(0,0,0,.08);
--pdp-shadow-md: 0 12px 32px -8px rgba(0,0,0,.12);
--pdp-shadow-lg: 0 24px 64px -12px rgba(0,0,0,.16);
--pdp-shadow-teal: 0 16px 40px -8px rgba(17,132,153,.25);
--pdp-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
--pdp-ease-smooth: cubic-bezier(.23, 1, .32, 1);
--pdp-transition: .35s var(--pdp-ease-spring);
}
/* ══════════════════════════════════════════
TYPOGRAPHY UPGRADES
══════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', 'Inter', system-ui, sans-serif;
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.05;
}
/* Refined body text */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ══════════════════════════════════════════
HERO SECTION
══════════════════════════════════════════ */
section.relative.min-h-\[750px\] {
isolation: isolate;
}
/* Hero overlay — richer gradient */
section.relative.min-h-\[750px\] .absolute.inset-0.bg-gradient-to-r {
background: linear-gradient(
105deg,
rgba(17,132,153,.92) 0%,
rgba(17,132,153,.65) 40%,
rgba(17,132,153,.15) 70%,
transparent 100%
) !important;
}
/* Hero image — subtle scale on load */
section.relative.min-h-\[750px\] .absolute.inset-0 img {
transform: scale(1.05);
transition: transform 12s ease-out;
animation: heroImgZoom 12s ease-out forwards;
}
@keyframes heroImgZoom {
from { transform: scale(1.08); }
to { transform: scale(1.02); }
}
/* Stat cards — glassmorphism upgrade */
.bg-white\/10 {
background: rgba(255,255,255,.1) !important;
border: 1px solid rgba(255,255,255,.2) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform var(--pdp-transition), background .3s ease !important;
}
.bg-white\/10:hover {
background: rgba(255,255,255,.18) !important;
transform: translateY(-3px);
}
/* Badge pill */
.inline-flex.items-center.gap-x-2.bg-white\/20 {
border: 1px solid rgba(255,255,255,.25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* ══════════════════════════════════════════
TRUST BAR
══════════════════════════════════════════ */
.border-b.bg-white {
box-shadow: 0 1px 0 rgba(0,0,0,.04), inset 0 1px 0 rgba(0,0,0,.03);
}
.marquee-content .fas {
font-size: 14px;
opacity: .9;
}
/* ══════════════════════════════════════════
SECTION LAYOUT
══════════════════════════════════════════ */
section {
position: relative;
}
/* ══════════════════════════════════════════
PRODUCT CARDS — ELEVATION SYSTEM
══════════════════════════════════════════ */
.product-card {
border-radius: 20px !important;
border: 1px solid rgba(0,0,0,.06) !important;
box-shadow: var(--pdp-shadow-sm);
background: #fff;
overflow: visible !important; /* allow shadow to escape */
}
.product-card > * { border-radius: inherit; overflow: hidden; }
.product-card:hover {
box-shadow: var(--pdp-shadow-teal) !important;
}
/* Product image container */
.product-image {
border-radius: 20px 20px 0 0 !important;
overflow: hidden !important;
}
/* Price accent */
.text-\[#118499\].font-semibold.text-lg {
background: linear-gradient(135deg, #118499, #4ecdc4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Stars upgrade */
.flex.text-amber-400 { letter-spacing: 1px; }
/* Best seller badge */
.absolute.top-4.left-4.bg-white {
font-size: 9px !important;
letter-spacing: .06em;
box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
/* Discount badge */
.discount-badge {
font-size: .65rem !important;
padding: 3px 10px !important;
}
/* ══════════════════════════════════════════
CATEGORY CARDS
══════════════════════════════════════════ */
.category-card {
border-radius: 24px !important;
border: none !important;
box-shadow: var(--pdp-shadow-md);
}
.category-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
135deg,
rgba(255,255,255,.06) 0%,
transparent 50%
);
pointer-events: none;
z-index: 3;
}
.icon-wrapper {
box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
/* ══════════════════════════════════════════
PROMO / COUNTDOWN BANNER
══════════════════════════════════════════ */
.bg-gradient-to-r.from-\[\#118499\] {
position: relative;
background: linear-gradient(
118deg,
#0a6878 0%,
#118499 35%,
#1aaccc 65%,
#0d7a93 100%
) !important;
box-shadow: var(--pdp-shadow-teal) !important;
overflow: hidden;
}
/* Countdown digits */
#countdown-days,
#countdown-hours,
#countdown-minutes {
font-family: 'Poppins', monospace;
font-variant-numeric: tabular-nums;
text-shadow: 0 2px 8px rgba(0,0,0,.15);
}
/* ══════════════════════════════════════════
BRANDS SECTION
══════════════════════════════════════════ */
.grid.grid-cols-3.md\:grid-cols-5 > div {
position: relative;
}
.grid.grid-cols-3.md\:grid-cols-5 > div::after {
content: attr(data-brand);
}
/* ══════════════════════════════════════════
TESTIMONIALS
══════════════════════════════════════════ */
.review-card {
border-radius: 24px !important;
background: linear-gradient(135deg, #f8fafc, #f0f7fa) !important;
border: 1px solid rgba(17,132,153,.08) !important;
}
/* Review quote mark */
.review-card > p::before {
content: '\201C';
font-size: 4rem;
color: rgba(17,132,153,.12);
font-family: Georgia, serif;
line-height: 0;
vertical-align: -1.6rem;
margin-right: 4px;
}
/* Avatar circle for reviewers */
.review-card .flex.items-center.gap-x-3::before {
content: attr(data-initials, 'U');
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #118499, #4ecdc4);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: white;
flex-shrink: 0;
}
/* ══════════════════════════════════════════
FINAL CTA SECTION
══════════════════════════════════════════ */
section:last-of-type h2 {
background: linear-gradient(135deg, #0a4a56, #118499, #1aaccc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
section:last-of-type a[href="products.php"] {
background: linear-gradient(135deg, #118499, #0d7a93) !important;
box-shadow: var(--pdp-shadow-teal);
transition: transform .3s var(--pdp-ease-spring),
box-shadow .3s ease !important;
}
section:last-of-type a[href="products.php"]:hover {
transform: translateY(-3px) scale(1.02) !important;
box-shadow: 0 24px 48px -8px rgba(17,132,153,.4) !important;
}
/* ══════════════════════════════════════════
GLOBAL LINK HOVER — TEAL UNDERLINE
══════════════════════════════════════════ */
a.text-\[#118499\]:not(.category-card) {
text-underline-offset: 3px;
}
a.text-\[#118499\]:hover:not(.category-card) {
text-decoration: underline;
}
/* ══════════════════════════════════════════
SECTION LABEL UPGRADE
══════════════════════════════════════════ */
.uppercase.tracking-\[2px\],
.text-xs.uppercase.tracking-widest,
.text-xs.text-\[\#118499\] {
font-weight: 600 !important;
letter-spacing: .18em !important;
}
/* ══════════════════════════════════════════
SCROLLBAR (WEBKIT)
══════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, #118499, #4ecdc4);
border-radius: 10px;
}
/* ══════════════════════════════════════════
SELECTION COLOR
══════════════════════════════════════════ */
::selection {
background: rgba(17,132,153,.2);
color: #0a4a56;
}
/* ══════════════════════════════════════════
REDUCED MOTION — safety net
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
.pdp-reveal { opacity: 1 !important; transform: none !important; }
.hero-word { opacity: 1 !important; transform: none !important; }
}
/* ══════════════════════════════════════════
MOBILE REFINEMENTS
══════════════════════════════════════════ */
@media (max-width: 768px) {
.product-card { border-radius: 16px !important; }
.category-card { border-radius: 20px !important; }
.review-card { border-radius: 20px !important; }
}