/* ============================================================
DIABLO SUGAR FREE -- DESIGN SYSTEM
Palette B (Fresh and clean) + Font pairing 5 (Nunito Sans + DM Sans)
Animations adapted from Preview 1 (Golden Hour)
============================================================ */
/* ===== FONTS ===== */
/* Fonts loaded via tags in HTML for parallel loading */
@font-face {
font-family: 'Populaire';
src: url('../assets/fonts/populaire.woff2') format('woff2'),
url('../assets/fonts/populaire.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* ===== DESIGN TOKENS ===== */
:root {
/* Palette -- Blue primary + candy tints */
--color-primary: #4A90C4;
--color-primary-hover: #3A78A8;
--color-bg: #ffffff;
--color-surface: #FFFFFF;
--color-text: #1A1A2E;
--color-text-muted: #6B7280;
--color-secondary: #5BA4CF;
--color-accent: #E8803D;
--color-accent-hover: #D4702F;
--color-highlight: #F59E0B;
--color-success: #10B981;
--color-border: #E5E7EB;
--color-footer-bg: #111827;
--color-footer-text: #9CA3AF;
/* Candy section tints */
--candy-blue: #E8F4FD;
--candy-orange: #FFF3E8;
--candy-green: #E8F8EE;
--candy-yellow: #FFF8E1;
--candy-pink: #FDE8EF;
--candy-purple: #F0E8FD;
/* Vivid saturated candy colors (parallax, mosaic, carousel accents) */
--vivid-pink: #FF2D78;
--vivid-blue: #00B4FF;
--vivid-orange: #FF6B2B;
--vivid-lime: #7CFF01;
--vivid-purple: #8B00FF;
--vivid-yellow: #FFD600;
--vivid-magenta: #FF00AA;
--vivid-cyan: #00E5FF;
/* Fonts */
--font-display: 'Populaire', cursive;
--font-heading: 'Nunito Sans', sans-serif;
--font-body: 'DM Sans', sans-serif;
/* Shadows */
--shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
--shadow-md: 0 4px 16px rgba(0,0,0,0.06);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
--shadow-hover: 0 12px 32px rgba(74,144,196,0.12);
--shadow-hover-lg: 0 16px 40px rgba(74,144,196,0.15);
/* Spacing */
--max-width: 1340px;
--section-padding: 40px 0;
--card-radius: 18px;
--btn-radius: 10px;
}
/* CSS Houdini property for magic card gradient spin */
@property --rotate {
syntax: "";
initial-value: 132deg;
inherits: false;
}
/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
font-family: var(--font-body);
background: var(--color-bg);
color: var(--color-text);
font-size: 16px;
line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
/* Focus-visible for keyboard accessibility */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ===== ANIMATIONS ===== */
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes float1 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-12px) rotate(1.5deg); }
}
@keyframes float2 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-8px) rotate(-1deg); }
}
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 15px rgba(74, 144, 196, 0.1); }
50% { box-shadow: 0 0 30px rgba(74, 144, 196, 0.2); }
}
@keyframes slideIn {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-3deg); }
75% { transform: rotate(3deg); }
}
@keyframes popIn {
0% { opacity: 0; transform: scale(0.6) rotate(-8deg); }
60% { transform: scale(1.1) rotate(2deg); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes gentleRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.anim-fade-up { animation: fadeSlideUp 0.7s ease-out forwards; }
.anim-fade-up-d1 { animation: fadeSlideUp 0.7s ease-out 0.15s forwards; opacity: 0; }
.anim-fade-up-d2 { animation: fadeSlideUp 0.7s ease-out 0.3s forwards; opacity: 0; }
.anim-fade-up-d3 { animation: fadeSlideUp 0.7s ease-out 0.45s forwards; opacity: 0; }
.anim-float-1 { animation: float1 6s ease-in-out infinite; }
.anim-float-2 { animation: float2 5s ease-in-out infinite 0.5s; }
.anim-scale-in { animation: scaleIn 0.5s ease-out forwards; }
/* Scroll reveal */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* ===== LAYOUT ===== */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
.section { padding: var(--section-padding); }
.section-alt { background: var(--color-surface); }
/* ===== ANNOUNCEMENT BAR ===== */
.announcement-bar {
background: linear-gradient(90deg, #4A90C4, #5BA4CF, #4A90C4);
background-size: 200% 100%;
animation: shimmer 5s linear infinite;
color: #fff;
padding: 10px 24px;
text-align: center;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
position: relative;
overflow: hidden;
}
.announcement-bar a { color: #fff; text-decoration: none; font-weight: 600; background: rgba(255,255,255,0.2); padding: 3px 12px; border-radius: 100px; margin-left: 6px; transition: background 0.2s; }
.announcement-bar a:hover { background: rgba(255,255,255,0.3); }
.announcement-close {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: rgba(255,255,255,0.7);
font-size: 18px;
cursor: pointer;
padding: 4px;
line-height: 1;
}
.announcement-close:hover { color: #fff; }
/* Cloud animation for announcement bar */
@keyframes cloudDrift {
0% { transform: translateX(-20px); opacity: 0.25; }
50% { opacity: 0.35; }
100% { transform: translateX(20px); opacity: 0.25; }
}
.announcement-bar::before,
.announcement-bar::after {
content: '';
position: absolute;
top: -8px;
width: 120px;
height: 50px;
background: rgba(255,255,255,0.3);
border-radius: 50%;
filter: blur(5px);
box-shadow: 40px 18px 0 -6px rgba(255,255,255,0.22), -30px 14px 0 -4px rgba(255,255,255,0.18);
animation: cloudDrift 8s ease-in-out infinite;
pointer-events: none;
}
.announcement-bar::before { left: 10%; animation-delay: 0s; }
.announcement-bar::after { right: 15%; animation-delay: 4s; animation-direction: reverse; }
/* ===== HEADER ===== */
.site-header {
background: #FFFFFF;
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 100;
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.site-header.scrolled {
border-bottom-color: transparent;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.header-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
height: 68px;
}
.header-logo img {
height: 34px;
filter: brightness(0);
transition: opacity 0.2s, transform 0.3s;
}
.header-logo:hover img { opacity: 0.8; transform: scale(1.05); }
.header-logo-blue {
filter: brightness(0) saturate(100%) invert(45%) sepia(60%) saturate(400%) hue-rotate(175deg);
}
/* Populaire logo text fallback */
.logo-text {
font-family: var(--font-display);
font-size: 28px;
color: var(--color-text);
letter-spacing: -0.01em;
}
.header-nav {
display: flex;
align-items: center;
gap: 4px;
}
.header-nav a {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--color-text-muted);
padding: 8px 14px;
border-radius: 8px;
transition: all 0.2s;
}
.header-nav a:hover,
.header-nav a.active {
color: var(--color-primary);
background: rgba(74, 144, 196, 0.06);
}
.header-nav .nav-wholesale {
color: var(--color-primary);
font-weight: 600;
}
.header-nav .nav-wholesale:hover {
background: rgba(74, 144, 196, 0.10);
}
.header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.header-action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
border: none;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
transition: all 0.2s;
position: relative;
}
.header-action-btn:hover {
background: var(--color-bg);
color: var(--color-text);
}
.header-action-btn svg { width: 20px; height: 20px; }
.header-action-btn i { font-size: 18px; }
.cart-count {
position: absolute;
top: 4px;
right: 4px;
background: var(--color-primary);
color: #fff;
font-size: 10px;
font-weight: 700;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
}
/* ===== MEGA MENU ===== */
.nav-has-mega {
position: relative;
display: inline-flex;
}
.nav-has-mega > a {
cursor: pointer;
}
.nav-mega-trigger {
display: inline-flex;
align-items: center;
gap: 4px;
}
/* Panel */
.mega-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
width: 680px;
background: #FFFFFF;
border-top: 3px solid var(--color-primary);
border-radius: 0 0 18px 18px;
box-shadow: 0 12px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.04);
z-index: 99;
padding: 0;
opacity: 0;
pointer-events: none;
transition: opacity 250ms cubic-bezier(0.16, 1, 0.3, 1),
transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mega-menu.is-open {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
/* Inner layout */
.mega-menu__inner {
padding: 28px 32px;
display: flex;
gap: 0;
}
/* Zone shared */
.mega-menu__zone {
padding: 0 24px;
}
.mega-menu__zone:first-child { padding-left: 0; }
.mega-menu__zone:last-child { padding-right: 0; }
.mega-menu__zone-header {
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid #E5E7EB;
}
/* Zone dividers */
.mega-menu__divider {
width: 1px;
background: #E5E7EB;
flex-shrink: 0;
}
/* ── ZONE A: Categories ── */
.mega-menu__zone--categories {
flex: 0 0 62%;
min-width: 0;
}
.mega-menu__categories-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
}
.mega-menu__cat-col-header {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
color: var(--color-text-muted);
margin-bottom: 8px;
padding-left: 4px;
}
.mega-menu__category {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border-radius: 10px;
text-decoration: none;
transition: background 0.2s ease-out, transform 0.15s ease-out;
}
.mega-menu__category:hover {
background: #F0F7FF;
}
.mega-menu__category:hover .mega-menu__cat-thumb {
transform: scale(1.08);
}
.mega-menu__cat-thumb {
width: 48px;
height: 48px;
object-fit: contain;
border-radius: 12px;
flex-shrink: 0;
transition: transform 0.2s ease-out;
}
.mega-menu__cat-info {
min-width: 0;
}
.mega-menu__cat-name {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--color-text);
line-height: 1.3;
}
.mega-menu__cat-count {
font-size: 12px;
color: var(--color-text-muted);
font-weight: 400;
}
.mega-menu__view-all {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 16px;
padding: 8px 4px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
transition: color 0.2s, gap 0.2s;
}
.mega-menu__view-all:hover {
color: var(--color-accent);
gap: 10px;
}
.mega-menu__view-all svg {
width: 14px;
height: 14px;
transition: transform 0.2s;
}
.mega-menu__view-all:hover svg {
transform: translateX(3px);
}
/* ── ZONE B: Diet Filters ── */
.mega-menu__zone--diet {
flex: 1;
min-width: 0;
}
.mega-menu__diet-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
text-decoration: none;
transition: background 0.2s ease-out;
margin-bottom: 2px;
}
.mega-menu__diet-item:hover {
background: #FFF7ED;
}
.mega-menu__diet-item:hover .mega-menu__diet-icon {
color: var(--color-accent);
}
.mega-menu__diet-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--color-primary);
transition: color 0.2s;
}
.mega-menu__diet-icon svg {
width: 20px;
height: 20px;
}
.mega-menu__diet-icon i { font-size: 16px; }
.mega-menu__diet-label {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: #374151;
white-space: nowrap;
}
.mega-menu__diet-item:hover .mega-menu__diet-label {
font-weight: 600;
color: var(--color-text);
}
.mega-menu__diet-cta {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #E5E7EB;
}
.mega-menu__diet-cta p {
font-size: 13px;
color: #6B7280;
margin-bottom: 4px;
line-height: 1.5;
}
.mega-menu__diet-cta a {
font-size: 13px;
font-weight: 600;
color: var(--color-accent);
text-decoration: none;
transition: color 0.2s;
}
.mega-menu__diet-cta a:hover {
color: var(--color-primary);
text-decoration: underline;
}
/* ── MEGA MENU RESPONSIVE ── */
@media (max-width: 1279px) {
.mega-menu {
width: min(680px, 95vw);
}
.mega-menu__zone--categories {
flex: 0 0 58%;
}
.mega-menu__zone--diet {
flex: 1;
}
}
@media (max-width: 1023px) {
.mega-menu { display: none !important; }
}
/* ── MOBILE NAV: SHOP ACCORDION ── */
.mobile-nav-shop-toggle {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
background: none;
border: none;
cursor: pointer;
font-family: var(--font-heading);
font-size: 17px;
font-weight: 600;
color: var(--color-text);
padding: 14px 0;
border-bottom: 1px solid var(--color-border);
}
.mobile-nav-shop-toggle:hover { color: var(--color-primary); }
.mobile-nav-shop-chevron {
width: 18px;
height: 18px;
color: var(--color-text-muted);
transition: transform 0.3s ease;
}
.mobile-nav-shop-toggle.open .mobile-nav-shop-chevron {
transform: rotate(180deg);
}
.mobile-nav-shop-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
}
.mobile-nav-shop-section-title {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-primary);
padding: 14px 0 8px;
}
.mobile-nav-shop-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 8px;
text-decoration: none;
border-radius: 8px;
transition: background 0.2s;
}
.mobile-nav-shop-item:hover { background: #F0F7FF; }
.mobile-nav-shop-item img {
width: 36px;
height: 36px;
object-fit: contain;
border-radius: 8px;
flex-shrink: 0;
}
.mobile-nav-shop-item-name {
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
color: var(--color-text);
}
.mobile-nav-shop-item-count {
font-size: 12px;
color: var(--color-text-muted);
margin-left: auto;
}
.mobile-nav-diet-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 8px;
text-decoration: none;
border-radius: 8px;
transition: background 0.2s;
}
.mobile-nav-diet-item:hover { background: #FFF7ED; }
.mobile-nav-diet-item svg {
width: 18px;
height: 18px;
color: var(--color-primary);
flex-shrink: 0;
}
.mobile-nav-diet-item i {
font-size: 16px;
width: 18px;
text-align: center;
color: var(--color-primary);
flex-shrink: 0;
}
.mobile-nav-diet-item span {
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
color: var(--color-text);
}
.mobile-nav-promo {
display: flex;
align-items: center;
gap: 14px;
padding: 14px;
background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
border-radius: 14px;
margin: 12px 0;
text-decoration: none;
}
.mobile-nav-promo img {
width: 56px;
height: 56px;
object-fit: contain;
flex-shrink: 0;
}
.mobile-nav-promo-name {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 700;
color: var(--color-text);
line-height: 1.3;
}
.mobile-nav-promo-price {
font-size: 14px;
font-weight: 700;
color: var(--color-success);
}
.mobile-nav-shop-divider {
height: 1px;
background: var(--color-border);
margin: 8px 0;
}
/* ===== HERO BURST (Full-width product burst layout) ===== */
.hero-burst {
position: relative;
overflow: hidden;
min-height: 480px;
display: flex;
align-items: center;
justify-content: center;
background: #7CC0E8;
padding: 60px 24px;
}
/* Pink organic blob shapes */
.hero-burst-blob {
position: absolute;
pointer-events: none;
z-index: 0;
}
.hero-burst-blob--tl {
top: -60px;
left: -40px;
width: 340px;
height: 320px;
background: #F2A5BA;
border-radius: 40% 60% 65% 35% / 45% 50% 50% 55%;
animation: gentleRotate 30s linear infinite;
}
.hero-burst-blob--br {
bottom: -80px;
right: -30px;
width: 360px;
height: 300px;
background: #F2A5BA;
border-radius: 55% 45% 40% 60% / 50% 60% 40% 50%;
animation: gentleRotate 25s linear infinite reverse;
}
/* Center content */
.hero-burst-center {
position: relative;
z-index: 2;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.hero-burst-logo {
width: 200px;
height: auto;
margin-bottom: 12px;
filter: drop-shadow(0 2px 10px rgba(0,0,0,0.12));
}
.hero-burst-heading {
font-family: var(--font-display);
font-size: 64px;
font-weight: normal;
color: #fff;
line-height: 1.1;
letter-spacing: 0.02em;
-webkit-text-stroke: 2px #fff;
paint-order: stroke fill;
text-shadow:
1px 1px 0 #fff,
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
0 3px 16px rgba(0,0,0,0.1);
max-width: 620px;
margin-bottom: 22px;
}
.hero-burst-cta {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: 16px;
font-weight: 600;
padding: 14px 38px;
border-radius: var(--btn-radius);
border: 2.5px solid #fff;
background: transparent;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: all 0.25s ease;
letter-spacing: 0.02em;
}
.hero-burst-cta:hover {
background: #fff;
color: #4A90C4;
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}
/* Product images container */
.hero-burst-products {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
/* Product burst float keyframes (preserve rotation + add bob) */
@keyframes burstFloat1 {
0%, 100% { translate: 0 0; }
50% { translate: 0 -10px; }
}
@keyframes burstFloat2 {
0%, 100% { translate: 0 0; }
50% { translate: 0 -7px; }
}
@keyframes burstFloat3 {
0%, 100% { translate: 0 0; }
50% { translate: 0 -13px; }
}
/* Base product image styles */
.hero-burst-product {
position: absolute;
object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
pointer-events: none;
}
/* 1: ChocChipCookies (tall box) -- TOP LEFT */
.hero-burst-product--1 {
width: 195px;
top: 4%;
left: 5%;
transform: rotate(-15deg);
animation: burstFloat1 4.2s ease-in-out infinite;
z-index: 3;
}
/* 2: Dark Chocolate Bar (tall) -- TOP RIGHT */
.hero-burst-product--2 {
width: 150px;
top: 1%;
right: 12%;
transform: rotate(12deg);
animation: burstFloat3 4.8s ease-in-out infinite;
z-index: 3;
}
/* 3: Apricot Muesli Bar (wide) -- MID LEFT */
.hero-burst-product--3 {
width: 230px;
top: 42%;
left: 2%;
transform: rotate(-25deg);
animation: burstFloat2 5s ease-in-out infinite;
z-index: 2;
}
/* 4: Salted Caramel Sauce -- BOTTOM LEFT */
.hero-burst-product--4 {
width: 130px;
bottom: 5%;
left: 8%;
transform: rotate(10deg);
animation: burstFloat1 4.5s ease-in-out infinite;
z-index: 4;
}
/* 5: Strawberry Sauce -- TOP CENTER-RIGHT (away from other sauces) */
.hero-burst-product--5 {
width: 110px;
top: 0%;
right: 30%;
transform: rotate(-8deg);
animation: burstFloat3 5.2s ease-in-out infinite;
z-index: 2;
}
/* 6: Chocolate Sauce -- MID RIGHT (away from other sauces) */
.hero-burst-product--6 {
width: 120px;
top: 13%;
right: 1%;
transform: rotate(18deg);
animation: burstFloat2 4.6s ease-in-out infinite;
z-index: 3;
}
/* 7: Cherry Muesli Bar (wide) -- BOTTOM CENTER-RIGHT */
.hero-burst-product--7 {
width: 200px;
bottom: 8%;
right: 20%;
transform: rotate(15deg);
animation: burstFloat1 5.4s ease-in-out infinite;
z-index: 2;
}
/* 8: Vanilla Cookie Pack (wide flat) -- BOTTOM LEFT-CENTER (moved from behind CTA) */
.hero-burst-product--8 {
width: 210px;
bottom: 2%;
left: 18%;
transform: rotate(-5deg);
animation: burstFloat2 4.8s ease-in-out infinite;
z-index: 2;
}
/* 9: Coated Milk Buttons (squarish) -- TOP CENTER-LEFT */
.hero-burst-product--9 {
width: 170px;
top: 1%;
left: 20%;
transform: rotate(10deg);
animation: burstFloat3 4.3s ease-in-out infinite;
z-index: 3;
}
/* 10: Cranberry Cookies (tall box) -- BOTTOM RIGHT */
.hero-burst-product--10 {
width: 165px;
bottom: 2%;
right: 2%;
transform: rotate(-12deg);
animation: burstFloat1 5.1s ease-in-out infinite;
z-index: 4;
}
/* ===== HERO BANNER (unused, kept for reference) ===== */
.hero-banner {
position: relative;
overflow: hidden;
min-height: 520px;
display: flex;
align-items: center;
}
.hero-banner-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #E8F4FD 0%, #D4ECFB 40%, #FFF3E8 100%);
z-index: 0;
}
.hero-banner-bg::before {
content: '';
position: absolute;
top: -60px;
right: -40px;
width: 400px;
height: 400px;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
background: rgba(74,144,196,0.07);
animation: gentleRotate 25s linear infinite;
}
.hero-banner-bg::after {
content: '';
position: absolute;
bottom: -40px;
left: -60px;
width: 300px;
height: 300px;
border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
background: rgba(232,128,61,0.06);
animation: gentleRotate 20s linear infinite reverse;
}
.hero-banner > .container {
position: relative;
z-index: 1;
}
.hero-banner-content {
max-width: 540px;
padding: 48px 0;
}
.hero-sale-badge {
display: inline-block;
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
color: #fff;
background: var(--color-accent);
padding: 6px 18px;
border-radius: 100px;
margin-bottom: 20px;
letter-spacing: 0.02em;
}
.hero-banner h1 {
font-family: var(--font-heading);
font-size: 54px;
font-weight: 800;
line-height: 1.12;
color: var(--color-text);
margin-bottom: 16px;
}
.hero-banner h1 .pop {
font-family: var(--font-display);
font-weight: normal;
color: var(--color-primary);
font-size: 1.08em;
}
.hero-banner-desc {
font-size: 17px;
color: var(--color-text-muted);
line-height: 1.65;
margin-bottom: 28px;
}
.hero-banner-ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.hero-banner-image {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 48%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
pointer-events: none;
}
.hero-banner-image img {
max-height: 460px;
max-width: 100%;
object-fit: contain;
filter: drop-shadow(0 20px 50px rgba(74,144,196,0.18));
}
/* ===== PROMO TILES ===== */
.promo-tiles { padding: 32px 0; }
.promo-tiles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.promo-tile {
position: relative;
border-radius: var(--card-radius);
overflow: hidden;
height: 190px;
display: flex;
align-items: flex-end;
padding: 28px;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: var(--shadow-md);
}
.promo-tile:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-hover-lg);
}
.promo-tile-image {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
z-index: 0;
}
.promo-tile-image img {
max-height: 170px;
object-fit: contain;
transition: transform 0.4s ease;
}
.promo-tile:hover .promo-tile-image img {
transform: scale(1.08) rotate(-3deg);
}
.promo-tile-content { position: relative; z-index: 1; }
.promo-tile-name {
font-family: var(--font-display);
font-size: 26px;
color: var(--color-text);
margin-bottom: 4px;
}
.promo-tile-count {
font-size: 14px;
color: var(--color-text-muted);
display: block;
margin-bottom: 10px;
}
.promo-tile-link {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--color-primary);
}
/* ===== CATEGORY ICONS ===== */
.shop-categories {
background: linear-gradient(180deg, #ffffff 0%, #F5F9FC 10%, #F5F9FC 90%, #ffffff 100%);
}
.category-icons-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 16px;
text-align: center;
}
.category-icon-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-decoration: none;
transition: transform 0.3s ease;
opacity: 0;
transform: scale(0) rotate(-15deg);
}
.shop-categories.visible .category-icon-item {
animation: categoryPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.shop-categories.visible .category-icon-item:nth-child(1) { animation-delay: 0.24s; }
.shop-categories.visible .category-icon-item:nth-child(2) { animation-delay: 0.16s; }
.shop-categories.visible .category-icon-item:nth-child(3) { animation-delay: 0.08s; }
.shop-categories.visible .category-icon-item:nth-child(4) { animation-delay: 0s; }
.shop-categories.visible .category-icon-item:nth-child(5) { animation-delay: 0.08s; }
.shop-categories.visible .category-icon-item:nth-child(6) { animation-delay: 0.16s; }
.shop-categories.visible .category-icon-item:nth-child(7) { animation-delay: 0.24s; }
.shop-categories.visible .category-icon-item:nth-child(8) { animation-delay: 0.32s; }
@keyframes categoryPop {
from { opacity: 0; transform: scale(0) rotate(-15deg); }
to { opacity: 1; transform: scale(1) rotate(0deg); }
}
.category-icon-item:hover { transform: translateY(-6px); }
.category-icon-circle {
width: 100%;
aspect-ratio: 1;
border-radius: 50%;
background: var(--candy-blue);
border: none;
margin-bottom: 0;
box-shadow: var(--shadow-md);
transition: box-shadow 0.3s, transform 0.3s;
overflow: hidden;
}
.category-icon-item:hover .category-icon-circle {
box-shadow: 0 12px 32px rgba(74,144,196,0.15);
transform: scale(1.06);
}
.category-icon-circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
.category-icon-item:nth-child(1) .category-icon-circle { background: var(--candy-blue); }
.category-icon-item:nth-child(2) .category-icon-circle { background: var(--candy-orange); }
.category-icon-item:nth-child(3) .category-icon-circle { background: var(--candy-green); }
.category-icon-item:nth-child(4) .category-icon-circle { background: var(--candy-pink); }
.category-icon-item:nth-child(5) .category-icon-circle { background: var(--candy-yellow); }
.category-icon-item:nth-child(6) .category-icon-circle { background: var(--candy-purple); }
.category-icon-item:nth-child(7) .category-icon-circle { background: var(--candy-orange); }
.category-icon-item:nth-child(8) .category-icon-circle { background: var(--candy-pink); }
.category-icon-label {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 600;
color: var(--color-text);
transition: color 0.2s;
}
.category-icon-item:hover .category-icon-label { color: var(--color-primary); }
/* Floating animation on category circles after reveal */
.shop-categories.visible .category-icon-item:nth-child(1) .category-icon-circle { animation: catFloat1 3.2s ease-in-out 1s infinite alternate; }
.shop-categories.visible .category-icon-item:nth-child(2) .category-icon-circle { animation: catFloat2 2.8s ease-in-out 1.3s infinite alternate; }
.shop-categories.visible .category-icon-item:nth-child(3) .category-icon-circle { animation: catFloat3 3.5s ease-in-out 0.8s infinite alternate; }
.shop-categories.visible .category-icon-item:nth-child(4) .category-icon-circle { animation: catFloat1 3.0s ease-in-out 1.6s infinite alternate; }
.shop-categories.visible .category-icon-item:nth-child(5) .category-icon-circle { animation: catFloat2 3.3s ease-in-out 0.5s infinite alternate; }
.shop-categories.visible .category-icon-item:nth-child(6) .category-icon-circle { animation: catFloat3 2.9s ease-in-out 1.1s infinite alternate; }
.shop-categories.visible .category-icon-item:nth-child(7) .category-icon-circle { animation: catFloat1 3.4s ease-in-out 0.7s infinite alternate; }
.shop-categories.visible .category-icon-item:nth-child(8) .category-icon-circle { animation: catFloat2 3.1s ease-in-out 1.4s infinite alternate; }
@keyframes catFloat1 { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes catFloat2 { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes catFloat3 { from { transform: translateY(0); } to { transform: translateY(-5px); } }
/* ===== PRODUCT TABS ===== */
.product-tab-nav {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 24px;
}
.product-tab-btn {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 500;
color: var(--color-text-muted);
background: none;
border: none;
border-radius: 8px;
padding: 10px 24px;
cursor: pointer;
position: relative;
transition: color 0.3s, background 0.3s;
}
.product-tab-btn::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease, left 0.3s ease;
}
.product-tab-btn:hover {
background: rgba(74, 144, 196, 0.06);
color: var(--color-text);
}
.product-tab-btn.active {
color: var(--color-primary);
font-weight: 600;
}
.product-tab-btn.active::after {
width: 60%;
left: 20%;
}
.product-tab-panel { display: none; }
.product-tab-panel.active { display: block; animation: fadeSlideUp 0.4s ease-out; }
/* ===== TRUST REASONS ===== */
.trust-reasons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.trust-reason-card {
text-align: center;
padding: 32px 20px;
border-radius: var(--card-radius);
background: var(--color-surface);
box-shadow: var(--shadow-md);
transition: transform 0.3s, box-shadow 0.3s;
}
.trust-reason-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}
.trust-reason-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--candy-blue);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.trust-reason-card:nth-child(2) .trust-reason-icon { background: var(--candy-orange); }
.trust-reason-card:nth-child(3) .trust-reason-icon { background: var(--candy-green); }
.trust-reason-icon img { width: 32px; height: 32px; object-fit: contain; }
.trust-reason-title {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 10px;
}
.trust-reason-desc {
font-size: 15px;
color: var(--color-text-muted);
line-height: 1.65;
}
/* ===== CTA BANNER ===== */
.cta-banner {
position: relative;
overflow: hidden;
padding: 64px 0;
text-align: center;
}
.cta-banner-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #4A90C4 0%, #3A78A8 40%, #E8803D 100%);
z-index: 0;
}
.cta-banner-bg::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
top: -100px;
right: -80px;
}
.cta-banner-bg::after {
content: '';
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
bottom: -60px;
left: -40px;
}
.cta-banner-content {
position: relative;
z-index: 1;
max-width: 600px;
margin: 0 auto;
}
.cta-banner h2 {
font-family: var(--font-heading);
font-size: 48px;
font-weight: 800;
color: #fff;
margin-bottom: 16px;
line-height: 1.15;
}
.cta-banner h2 .pop {
font-family: var(--font-display);
font-weight: normal;
font-size: 1.08em;
}
.cta-banner p {
font-size: 17px;
color: rgba(255,255,255,0.85);
line-height: 1.6;
margin-bottom: 24px;
}
.cta-banner .btn-buy { font-size: 16px; padding: 16px 40px; }
/* ===== BENEFITS BAR ===== */
.benefits-bar {
padding: 28px 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
}
.benefits-bar-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.benefit-item {
display: flex;
align-items: center;
gap: 14px;
justify-content: center;
}
.benefit-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--candy-blue);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.benefit-icon svg { width: 22px; height: 22px; stroke: var(--color-primary); }
.benefit-icon i { font-size: 20px; color: var(--color-primary); }
.benefit-title {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 700;
color: var(--color-text);
}
.benefit-desc { font-size: 13px; color: var(--color-text-muted); }
/* ===== FAQ SECTION ===== */
.faq-section {
background: linear-gradient(180deg, #ffffff 0%, #FAFAF8 8%, #FAFAF8 92%, #ffffff 100%);
}
/* ===== BUTTONS ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
padding: 14px 32px;
border-radius: var(--btn-radius);
border: none;
cursor: pointer;
transition: all 0.25s ease;
text-decoration: none;
}
.btn-primary {
background: linear-gradient(135deg, #4A90C4, #5BA4CF);
color: #fff;
}
.btn-primary:hover {
background: linear-gradient(135deg, #3A78A8, #4A90C4);
transform: translateY(-2px) scale(1.02);
box-shadow: 0 6px 20px rgba(74, 144, 196, 0.3);
}
.btn-accent {
background: var(--color-accent);
color: #fff;
}
.btn-accent:hover {
background: var(--color-accent-hover);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(232, 128, 61, 0.25);
}
.btn-outline {
background: transparent;
color: var(--color-text);
border: 2.5px solid var(--color-border);
}
.btn-outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
background: rgba(74,144,196,0.06);
transform: translateY(-2px);
}
.btn-shimmer {
background: linear-gradient(90deg, var(--color-primary) 0%, #5BA0D4 50%, var(--color-primary) 100%);
background-size: 200% 100%;
animation: shimmer 3s linear infinite;
color: #fff;
}
.btn-sm {
font-size: 13px;
padding: 10px 20px;
}
/* Green buy / add-to-cart button */
.btn-buy {
background: var(--color-success);
color: #fff;
border: none;
font-weight: 700;
letter-spacing: 0.02em;
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-buy:hover {
background: #059669;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}
/* Buy-it-now -- accent orange for urgency, visually distinct from green add-to-basket */
.btn-buy-now {
background: var(--color-accent);
color: #fff;
border: none;
font-weight: 700;
letter-spacing: 0.02em;
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-buy-now:hover {
background: var(--color-accent-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(232, 128, 61, 0.3);
}
/* ===== BADGE ===== */
.badge {
display: inline-block;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
color: #fff;
padding: 5px 14px 5px 10px;
border-radius: 0 8px 8px 0;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.badge-primary { background: var(--color-primary); }
.badge-accent { background: #EF4444; }
.badge-highlight-soft { background: rgba(245,158,11,0.12); color: #B45309; }
.badge-green-soft { background: rgba(16,185,129,0.1); color: #047857; }
.badge-blue-soft { background: rgba(74,144,196,0.1); color: #2563AA; }
.badge-success { background: var(--color-success); color: #fff; }
.badge-highlight { background: var(--color-highlight); color: var(--color-text); }
.product-card-badges {
position: absolute;
top: 12px;
left: 0;
z-index: 2;
display: flex;
flex-direction: column;
gap: 4px;
}
/* ===== SECTION HEADINGS ===== */
.section-header {
text-align: center;
margin-bottom: 28px;
}
.section-header h2 {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 500;
color: var(--color-text);
margin-bottom: 8px;
line-height: 1.3;
}
.section-header p {
font-size: 16px;
color: var(--color-text-muted);
max-width: 520px;
margin: 0 auto;
}
/* ===== TRUST BAR ===== */
.trust-bar {
background: var(--color-surface);
border: none;
padding: 32px 40px;
max-width: 960px;
margin: -28px auto 0;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
position: relative;
z-index: 3;
}
.trust-bar-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 24px;
align-items: center;
}
.trust-stat {
text-align: center;
}
.trust-stat-value {
font-family: var(--font-display);
font-size: 36px;
font-weight: normal;
color: var(--color-primary);
}
.trust-stat:nth-child(3) .trust-stat-value { color: var(--color-accent); }
.trust-stat:nth-child(5) .trust-stat-value { color: var(--color-success); }
.trust-stat:nth-child(7) .trust-stat-value { color: var(--color-primary); }
.trust-stat-label {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 2px;
letter-spacing: 0.02em;
}
.trust-divider {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-primary);
opacity: 0.25;
}
/* ===== PRODUCT CARDS ===== */
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.product-card {
background: var(--color-surface);
border: none;
border-radius: var(--card-radius);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
position: relative;
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.product-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-hover-lg);
}
/* Staggered product card reveal */
.product-grid .product-card.reveal.visible { animation: slideUp 0.5s ease-out forwards; }
.product-grid .product-card:nth-child(2).reveal.visible { animation-delay: 0.1s; }
.product-grid .product-card:nth-child(3).reveal.visible { animation-delay: 0.2s; }
.product-grid .product-card:nth-child(4).reveal.visible { animation-delay: 0.3s; }
.product-grid .product-card:nth-child(5).reveal.visible { animation-delay: 0.15s; }
.product-grid .product-card:nth-child(6).reveal.visible { animation-delay: 0.25s; }
.product-grid .product-card:nth-child(7).reveal.visible { animation-delay: 0.35s; }
.product-grid .product-card:nth-child(8).reveal.visible { animation-delay: 0.4s; }
.product-card-image {
padding: 12px;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
height: 200px;
position: relative;
overflow: hidden;
border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.product-card-image img {
max-height: 170px;
object-fit: contain;
transition: transform 0.3s ease, opacity 0.35s ease;
}
.product-card-image img.hover-img {
position: absolute;
inset: 12px;
max-height: none;
width: calc(100% - 24px);
height: calc(100% - 24px);
object-fit: cover;
border-radius: 8px;
opacity: 0;
}
.product-card:hover .product-card-image img:not(.hover-img) {
opacity: 0;
}
.product-card:hover .product-card-image img.hover-img {
opacity: 1;
transform: scale(1.03);
}
.product-card-body {
padding: 14px 16px 16px;
background: #FFFFFF;
border-radius: 0 0 var(--card-radius) var(--card-radius);
display: flex;
flex-direction: column;
flex: 1;
}
.product-card-name {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 4px;
line-height: 1.3;
}
.product-card-desc {
font-size: 13px;
color: var(--color-text-muted);
margin-bottom: 12px;
line-height: 1.5;
flex: 1;
}
.product-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 4px;
}
.product-card-price {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 700;
color: var(--color-text);
}
.product-card-price .was {
font-size: 14px;
font-weight: 400;
color: var(--color-text-muted);
text-decoration: line-through;
margin-left: 6px;
}
/* Product card star ratings */
.product-card-rating {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
margin-bottom: 8px;
}
.product-card-rating .stars {
color: #F59E0B;
font-size: 14px;
letter-spacing: 2px;
}
.product-card-rating .rating-count {
font-size: 12px;
color: var(--color-text-muted);
font-weight: 600;
}
/* ===== MAGIC CARD HOVER EFFECT (Featured Treats only) ===== */
.featured-products .product-card {
padding: 2px;
}
.featured-products .product-card-image,
.featured-products .product-card-body {
position: relative;
z-index: 1;
}
@keyframes magicSpin {
0% { --rotate: 0deg; }
100% { --rotate: 360deg; }
}
/* Gradient fills the card; inner content sits on top, leaving 2px border visible */
.featured-products .product-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: var(--card-radius);
background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
z-index: 0;
opacity: 0;
transition: opacity 0.4s ease;
animation: magicSpin 2.5s linear infinite;
}
/* Hover: reveal gradient border + colored glow shadow */
.featured-products .product-card:hover::before {
opacity: 1;
}
.featured-products .product-card:hover {
box-shadow: 0 8px 32px rgba(93,220,255,0.35), 0 0 20px rgba(60,103,227,0.25);
}
/* ===== CATEGORY GRID ===== */
.category-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.category-grid-sm {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 16px;
}
.category-tile {
background: var(--color-surface);
border: none;
border-radius: 20px;
overflow: hidden;
position: relative;
display: flex;
align-items: flex-end;
padding: 24px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}
.category-tile:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}
.category-tile-lg { height: 220px; }
.category-tile-sm { height: 160px; padding: 18px; }
.category-tile img {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
max-height: 75%;
object-fit: contain;
opacity: 0.85;
transition: transform 0.4s ease, opacity 0.3s;
}
.category-tile:hover img {
opacity: 1;
transform: translateY(-50%) scale(1.1) rotate(-3deg);
}
.category-tile-content { position: relative; z-index: 1; }
.category-tile-name {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
color: var(--color-text);
}
.category-tile-sm .category-tile-name { font-size: 15px; font-weight: 600; }
.category-tile-count {
font-size: 13px;
color: var(--color-text-muted);
margin-top: 2px;
}
/* ===== USP / STORY SECTION ===== */
.story-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 520px;
}
.story-text {
padding: 64px 48px;
display: flex;
flex-direction: column;
justify-content: center;
}
.story-cards {
padding: 48px;
display: flex;
flex-direction: column;
gap: 16px;
justify-content: center;
background: var(--candy-blue);
}
.usp-card {
background: var(--color-surface);
border: none;
border-left: 3px solid var(--color-primary);
border-radius: 12px;
padding: 24px;
display: flex;
gap: 16px;
align-items: flex-start;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.usp-card:nth-child(2) { border-left-color: var(--color-accent); }
.usp-card:nth-child(3) { border-left-color: var(--color-success); }
.usp-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.usp-icon {
width: 48px;
height: 48px;
border-radius: 10px;
background: var(--color-bg);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.usp-icon img { width: 24px; height: 24px; opacity: 0.8; }
.usp-title {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 600;
color: var(--color-text);
margin-bottom: 4px;
}
.usp-desc {
font-size: 14px;
color: var(--color-text-muted);
line-height: 1.55;
}
/* ===== TESTIMONIALS ===== */
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.testimonial-card {
background: var(--color-surface);
border: none;
border-left: 4px solid var(--color-primary);
border-radius: var(--card-radius);
padding: 28px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: var(--shadow-md);
}
.testimonial-card:nth-child(2) { border-left-color: var(--color-accent); }
.testimonial-card:nth-child(3) { border-left-color: var(--color-success); }
.testimonial-stars {
color: var(--color-highlight);
font-size: 18px;
letter-spacing: 3px;
margin-bottom: 14px;
}
.testimonial-text {
font-size: 15px;
color: #4B5563;
line-height: 1.65;
margin-bottom: 18px;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 10px;
}
.testimonial-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(74,144,196,0.08);
border: none;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: 14px;
font-weight: 700;
color: var(--color-primary);
}
.testimonial-card:nth-child(2) .testimonial-avatar { background: rgba(232,128,61,0.08); color: var(--color-accent); }
.testimonial-card:nth-child(3) .testimonial-avatar { background: rgba(16,185,129,0.08); color: var(--color-success); }
.testimonial-name {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 600;
color: var(--color-text);
}
.testimonial-verified {
font-size: 12px;
color: var(--color-success);
}
/* ===== STOCKISTS ===== */
/* ===== STATS BAR ===== */
.ws-stats-bar {
position: relative;
overflow: hidden;
}
.ws-stats-bar::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.15) 100%);
pointer-events: none;
}
.ws-stats-inner {
display: flex;
flex-wrap: wrap;
max-width: var(--max-width);
margin: 0 auto;
}
.ws-stat-item {
flex: 1;
min-width: 150px;
padding: 12px 20px;
border-right: 1px solid rgba(255,255,255,0.12);
text-align: center;
position: relative;
}
.ws-stat-item:last-child { border-right: none; }
.ws-stat-number {
display: block;
font-family: var(--font-heading);
font-size: 48px;
font-weight: 800;
color: #fff;
line-height: 1.1;
margin-bottom: 4px;
}
.ws-stat-label {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.7);
}
/* ===== STOCKIST LOGOS MARQUEE ===== */
.logos-section {
padding: 32px 0;
text-align: center;
overflow: hidden;
}
.logos-label {
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text-muted);
letter-spacing: 0.04em;
margin-bottom: 2rem;
}
.logos-marquee {
overflow: hidden;
margin-bottom: 1rem;
}
.logos-track {
display: flex;
gap: 3rem;
align-items: center;
width: max-content;
}
.logos-track-1 {
animation: marquee 35s linear infinite;
}
.logos-track-2 {
animation: marquee-reverse 35s linear infinite;
}
@keyframes marquee-reverse {
0% { transform: translateX(0); }
100% { transform: translateX(50%); }
}
.logo-item {
flex-shrink: 0;
height: 40px;
opacity: 0.5;
filter: grayscale(100%);
transition: all 0.4s;
}
.logo-item:hover {
opacity: 1;
filter: grayscale(0%);
}
.logo-item img {
height: 100%;
width: auto;
object-fit: contain;
}
/* ===== NEWSLETTER ===== */
.newsletter {
background: linear-gradient(135deg, #4A90C4 0%, #3A78A8 50%, #E8803D 100%);
padding: 48px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.newsletter::before {
content: '';
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
top: -80px;
right: -60px;
pointer-events: none;
}
.newsletter::after {
content: '';
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
bottom: -40px;
left: -30px;
pointer-events: none;
}
.newsletter h2 {
font-family: var(--font-heading);
font-size: 32px;
font-weight: 700;
color: #fff;
margin-bottom: 8px;
}
.newsletter p {
font-size: 16px;
color: rgba(255,255,255,0.8);
max-width: 460px;
margin: 0 auto 28px;
line-height: 1.6;
}
.newsletter-form {
display: flex;
max-width: 460px;
margin: 0 auto;
border-radius: var(--btn-radius);
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.newsletter-input {
flex: 1;
padding: 16px 20px;
border: none;
font-family: var(--font-body);
font-size: 15px;
outline: none;
background: #fff;
color: var(--color-text);
}
.newsletter-input::placeholder { color: #9CA3AF; }
.newsletter-input:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px; }
.newsletter-submit {
padding: 16px 28px;
background: var(--color-accent);
color: #fff;
border: none;
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
white-space: nowrap;
}
.newsletter-submit:hover { background: var(--color-accent-hover); }
.newsletter-disclaimer {
font-size: 12px;
color: rgba(255,255,255,0.5);
margin-top: 14px;
}
/* ===== FOOTER ===== */
.site-footer {
background: var(--color-footer-bg);
color: var(--color-footer-text);
}
.footer-main {
max-width: var(--max-width);
margin: 0 auto;
padding: 56px 24px 40px;
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
gap: 40px;
}
.footer-brand img {
height: 32px;
filter: brightness(0) invert(1);
margin-bottom: 14px;
}
.footer-brand p {
font-size: 14px;
color: var(--color-footer-text);
line-height: 1.6;
margin-bottom: 16px;
}
.footer-social {
display: flex;
gap: 10px;
}
.footer-social a {
width: 34px;
height: 34px;
border-radius: 8px;
background: rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-footer-text);
font-size: 13px;
font-weight: 600;
transition: all 0.2s;
}
.footer-social a:hover {
background: var(--color-primary);
color: #fff;
}
.footer-col h4 {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 700;
color: #fff;
margin-bottom: 16px;
}
.footer-col a {
display: block;
font-size: 14px;
color: var(--color-footer-text);
padding: 4px 0;
transition: color 0.2s;
}
.footer-col a:hover { color: #fff; }
.footer-col p {
font-size: 14px;
color: var(--color-footer-text);
line-height: 1.6;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
padding: 20px 24px;
max-width: var(--max-width);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.footer-certs {
display: flex;
gap: 14px;
align-items: center;
}
.footer-certs img {
height: 22px;
opacity: 0.5;
filter: grayscale(1) brightness(1.5);
}
.footer-payments {
display: flex;
gap: 8px;
align-items: center;
}
.footer-payment-icon {
width: 42px;
height: 28px;
border-radius: 4px;
background: rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--color-footer-text);
font-weight: 600;
}
.footer-legal {
background: #0D1117;
padding: 14px 24px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.footer-legal span, .footer-legal a {
font-size: 12px;
color: #4B5563;
}
.footer-legal a:hover { color: #9CA3AF; }
/* ===== COLLECTION PAGE ===== */
.collection-hero {
background: linear-gradient(160deg, #E8F4FD 0%, #D4ECFB 40%, #FFF3E8 100%);
border-bottom: none;
padding: 48px 0;
text-align: center;
}
.collection-hero h1 {
font-family: var(--font-heading);
font-size: 40px;
font-weight: 800;
color: var(--color-text);
margin-bottom: 8px;
}
.collection-hero p {
font-size: 16px;
color: var(--color-text-muted);
}
.collection-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
margin-bottom: 24px;
border-bottom: 1px solid var(--color-border);
}
.collection-count {
font-size: 14px;
color: var(--color-text-muted);
}
.collection-sort {
font-family: var(--font-body);
font-size: 14px;
padding: 8px 16px;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
}
/* Collection filter bar */
.coll-filter-bar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 16px 0;
border-bottom: 1px solid var(--color-border);
margin-bottom: 24px;
}
.coll-filter-label {
font-size: 13px;
font-weight: 600;
color: var(--color-text-muted);
letter-spacing: 0.04em;
margin-right: 4px;
}
.coll-filter-btn {
font-family: var(--font-body);
font-size: 13px;
padding: 6px 14px;
border: 1px solid var(--color-border);
border-radius: 100px;
background: var(--color-bg);
color: var(--color-text-muted);
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.coll-filter-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.coll-filter-btn.active {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.coll-filter-sort {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
}
.coll-results-count {
font-size: 13px;
color: var(--color-text-muted);
}
/* Collection cert strip */
.coll-cert-strip {
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
padding: 14px 0;
}
.coll-cert-strip-inner {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.coll-cert-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--color-text-muted);
padding: 5px 14px;
border-radius: 100px;
background: var(--color-surface);
border: 1px solid var(--color-border);
white-space: nowrap;
}
.coll-cert-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.coll-cert-dot--nas { background: var(--color-accent); }
.coll-cert-dot--gf { background: var(--color-success); }
.coll-cert-dot--halal { background: var(--color-primary); }
.coll-cert-dot--kosher { background: #7C3AED; }
.coll-cert-dot--vegan { background: #059669; }
.coll-cert-dot--sw { background: #DC2626; }
/* Collection intro (2-column) */
.coll-intro {
padding: 24px 0;
background: var(--color-bg);
}
.coll-intro-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 28px;
align-items: start;
}
.coll-intro-label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 6px;
}
.coll-intro-text p {
font-size: 14px;
color: var(--color-text-muted);
line-height: 1.5;
margin-bottom: 8px;
}
.coll-intro-text p:last-child { margin-bottom: 0; }
.coll-intro-aside-title {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 10px;
}
.coll-intro-kp {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 6px;
font-size: 13px;
color: var(--color-text-muted);
line-height: 1.4;
}
.coll-intro-kp-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-primary);
flex-shrink: 0;
margin-top: 5px;
}
.coll-intro-kp:nth-child(even) .coll-intro-kp-dot { background: var(--color-accent); }
/* Product card cert chips */
.product-card-certs {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.product-cert-tag {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 4px;
white-space: nowrap;
}
.product-cert-tag--nas { background: rgba(232,128,61,0.12); color: #C46A2E; }
.product-cert-tag--stevia { background: rgba(16,185,129,0.12); color: #059669; }
.product-cert-tag--maltitol { background: rgba(245,158,11,0.12); color: #B45309; }
.product-cert-tag--gf { background: rgba(16,185,129,0.12); color: #059669; }
.product-cert-tag--halal { background: rgba(74,144,196,0.12); color: #3A78A8; }
.product-cert-tag--kosher { background: rgba(124,58,237,0.12); color: #6D28D9; }
.product-cert-tag--vegan { background: rgba(5,150,105,0.12); color: #047857; }
.product-cert-tag--isomalt { background: rgba(236,72,153,0.12); color: #BE185D; }
/* Collection SEO block */
.coll-seo-block {
padding: 48px 0;
background: var(--color-bg);
}
.coll-seo-inner {
max-width: 720px;
margin: 0 auto;
}
.coll-seo-inner h2 {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 20px;
}
.coll-seo-inner p {
font-size: 15px;
color: var(--color-text-muted);
line-height: 1.8;
margin-bottom: 16px;
}
.coll-seo-inner p:last-child { margin-bottom: 0; }
.coll-seo-inner a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.coll-seo-inner a:hover { color: var(--color-primary-hover); }
/* Collection FAQ */
.coll-faq {
padding: 56px 0;
background: var(--color-bg);
}
.coll-faq-list {
max-width: 720px;
margin: 0 auto;
}
.coll-faq-item {
border-bottom: 1px solid var(--color-border);
}
.coll-faq-item:last-child { border-bottom: none; }
.coll-faq-q {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
background: none;
border: none;
cursor: pointer;
padding: 20px 0;
text-align: left;
gap: 16px;
}
.coll-faq-q-text {
font-family: var(--font-heading);
font-size: 17px;
font-weight: 600;
color: var(--color-text);
}
.coll-faq-q:hover .coll-faq-q-text { color: var(--color-primary); }
.coll-faq-arrow {
transition: transform 0.3s;
color: var(--color-text-muted);
font-size: 20px;
flex-shrink: 0;
}
.coll-faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
}
.coll-faq-a p {
padding: 0 0 20px;
font-size: 15px;
color: var(--color-text-muted);
line-height: 1.7;
}
/* Related collections */
.coll-related {
padding: 48px 0;
background: var(--color-bg);
}
.coll-related-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
.coll-related-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px 12px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--card-radius);
text-decoration: none;
transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.coll-related-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
border-color: var(--color-primary);
}
.coll-related-icon {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
color: #fff;
}
.coll-related-name {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 600;
color: var(--color-text);
margin-bottom: 4px;
}
.coll-related-link {
font-size: 12px;
color: var(--color-primary);
font-weight: 600;
letter-spacing: 0.02em;
}
/* Collection page responsive */
@media (max-width: 1024px) {
.coll-related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.coll-intro-grid { grid-template-columns: 1fr; gap: 20px; }
.coll-related-grid { grid-template-columns: repeat(3, 1fr); }
.coll-cert-strip-inner { gap: 8px; }
.coll-cert-chip { font-size: 12px; padding: 4px 10px; }
.coll-filter-sort { width: 100%; justify-content: space-between; margin-left: 0; margin-top: 8px; }
}
@media (max-width: 480px) {
.coll-related-grid { grid-template-columns: repeat(2, 1fr); }
.coll-filter-bar { gap: 6px; }
.coll-filter-btn { font-size: 12px; padding: 5px 10px; }
}
/* ===== PRODUCT PAGE ===== */
.product-page {
padding: 48px 0 80px;
}
.product-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: start;
}
.product-gallery {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 16px;
overflow: hidden;
position: sticky;
top: 88px;
}
.product-gallery-main {
padding: 40px;
display: flex;
align-items: center;
justify-content: center;
min-height: 420px;
background: var(--color-bg);
}
.product-gallery-main img {
max-height: 360px;
object-fit: contain;
}
.product-gallery-thumbs {
padding: 12px;
display: flex;
gap: 8px;
}
.product-thumb {
width: 72px;
height: 72px;
border: 2px solid var(--color-border);
border-radius: 8px;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color 0.2s;
background: var(--color-surface);
}
.product-thumb.active,
.product-thumb:hover {
border-color: var(--color-primary);
}
.product-thumb img {
max-height: 48px;
object-fit: contain;
}
.product-info { padding-top: 8px; }
.product-breadcrumb {
font-size: 13px;
color: var(--color-text-muted);
margin-bottom: 16px;
}
.product-breadcrumb a { color: var(--color-text-muted); }
.product-breadcrumb a:hover { color: var(--color-primary); }
.product-title {
font-family: var(--font-heading);
font-size: 32px;
font-weight: 700;
color: var(--color-text);
line-height: 1.2;
margin-bottom: 12px;
}
.product-price-row {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 20px;
}
.product-price-main {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 800;
color: var(--color-text);
}
.product-price-was {
font-size: 18px;
color: var(--color-text-muted);
text-decoration: line-through;
}
.product-save {
font-size: 13px;
font-weight: 600;
color: #047857;
background: rgba(16,185,129,0.08);
padding: 4px 10px;
border-radius: 6px;
}
.product-description {
font-size: 16px;
color: #4B5563;
line-height: 1.7;
margin-bottom: 28px;
}
.product-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 28px;
}
.product-quantity {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 16px;
}
.qty-btn {
width: 44px;
height: 48px;
border: 1px solid var(--color-border);
background: var(--color-surface);
font-size: 18px;
color: var(--color-text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.qty-btn:hover { background: var(--color-bg); }
.qty-btn:first-child { border-radius: 8px 0 0 8px; }
.qty-btn:last-child { border-radius: 0 8px 8px 0; }
.qty-value {
width: 56px;
height: 48px;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: 16px;
font-weight: 600;
color: var(--color-text);
}
.product-actions {
display: flex;
gap: 12px;
margin-bottom: 28px;
}
.product-actions .btn { flex: 1; padding: 16px; font-size: 16px; }
.product-features {
border-top: 1px solid var(--color-border);
padding-top: 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.product-feature {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--color-text-muted);
}
.product-feature-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(16, 185, 129, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-success);
font-size: 14px;
}
/* ===== BREADCRUMB ===== */
.breadcrumb {
padding: 16px 0;
font-size: 13px;
color: var(--color-text-muted);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb span { margin: 0 8px; }
/* ===== ABOUT PAGE ===== */
.about-hero {
background: linear-gradient(160deg, #E8F4FD 0%, #D4ECFB 40%, #FFF3E8 100%);
padding: 80px 0;
text-align: center;
}
.about-hero h1 {
font-family: var(--font-heading);
font-size: 48px;
font-weight: 800;
color: var(--color-text);
margin-bottom: 16px;
}
.about-hero p {
font-size: 18px;
color: var(--color-text-muted);
max-width: 560px;
margin: 0 auto;
line-height: 1.65;
}
.about-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin: 56px 0;
}
.about-stat {
text-align: center;
padding: 32px;
background: var(--color-surface);
border: none;
border-radius: var(--card-radius);
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.about-stat-value {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 800;
color: var(--color-primary);
margin-bottom: 4px;
}
.about-stat-label {
font-size: 14px;
color: var(--color-text-muted);
}
.timeline {
position: relative;
padding: 40px 0;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: var(--color-border);
transform: translateX(-50%);
}
.timeline-item {
display: flex;
margin-bottom: 40px;
position: relative;
}
.timeline-item:nth-child(odd) { justify-content: flex-start; padding-right: 52%; }
.timeline-item:nth-child(even) { justify-content: flex-end; padding-left: 52%; }
.timeline-dot {
position: absolute;
left: 50%;
top: 24px;
width: 14px;
height: 14px;
background: var(--color-primary);
border: 3px solid var(--color-bg);
border-radius: 50%;
transform: translateX(-50%);
z-index: 1;
}
.timeline-content {
background: var(--color-surface);
border: none;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.timeline-year {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 800;
color: var(--color-primary);
margin-bottom: 6px;
}
.timeline-text {
font-size: 14px;
color: var(--color-text-muted);
line-height: 1.6;
}
/* ===== PLAYFUL UTILITIES ===== */
/* Populaire accent for headings - use sparingly */
.font-display { font-family: var(--font-display); font-weight: normal; }
.pop {
font-family: var(--font-display);
letter-spacing: 0.06em;
-webkit-text-stroke: 1px currentColor;
}
.section-header h2 .pop {
font-family: var(--font-display);
font-weight: 700;
color: var(--color-primary);
font-size: 28px;
letter-spacing: 0.06em;
-webkit-text-stroke: 1px currentColor;
}
/* Fun badge pill animations on hover */
.badge { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.badge:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* Playful underline on section links */
.fun-link {
position: relative;
display: inline-block;
}
.fun-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 3px;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.3s ease;
}
.fun-link:hover::after { width: 100%; }
/* Wiggle on hover for interactive elements */
.wiggle-hover:hover { animation: wiggle 0.5s ease; }
/* Floating product decorations on sections */
.section-deco {
position: absolute;
pointer-events: none;
opacity: 0.08;
z-index: 0;
}
/* Testimonial card playful hover */
.testimonial-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px) rotate(-0.5deg);
box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
/* Category tile playful name with Populaire */
.category-tile-name {
font-family: var(--font-display);
font-weight: normal;
font-size: 22px;
}
.category-tile-sm .category-tile-name { font-size: 18px; }
/* Newsletter section with Populaire heading */
.newsletter h2 {
font-family: var(--font-display);
font-weight: normal;
font-size: 44px;
position: relative;
z-index: 1;
}
/* ===== SUBTLE TINT SECTIONS (only 2 used) ===== */
.section-tint-warm { background: linear-gradient(180deg, #ffffff 0%, #FAFAF8 8%, #FAFAF8 92%, #ffffff 100%); }
.section-tint-purple { background: linear-gradient(180deg, #ffffff 0%, #F8F7FA 8%, #F8F7FA 92%, #ffffff 100%); }
/* ===== LAYERED ACCENT SHAPES ===== */
.section-layered {
position: relative;
overflow: hidden;
}
.section-layered > .container {
position: relative;
z-index: 1;
}
/* Blue accent shape peeking from the left */
.section-layered-left::before {
content: '';
position: absolute;
top: 50%;
left: -6%;
width: 28%;
height: 50%;
transform: translateY(-50%);
background: var(--candy-blue);
border-radius: 0 24px 24px 0;
z-index: 0;
opacity: 0.35;
}
/* Orange accent shape peeking from the right */
.section-layered-right::after {
content: '';
position: absolute;
top: 18%;
right: -5%;
width: 24%;
height: 45%;
background: var(--candy-orange);
border-radius: 24px 0 0 24px;
z-index: 0;
opacity: 0.3;
}
/* Yellow circle for FAQ */
.section-layered-faq::before {
content: '';
position: absolute;
bottom: -5%;
left: -6%;
width: 220px;
height: 220px;
border-radius: 50%;
background: var(--candy-yellow);
opacity: 0.3;
z-index: 0;
}
/* ===== DECORATIVE FLOATING DOTS ===== */
.deco-dots {
position: relative;
overflow: hidden;
}
.deco-dots::before {
content: '';
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-primary);
opacity: 0.1;
top: 12%;
left: 6%;
box-shadow:
90px 50px 0 0 rgba(232,128,61,0.12),
220px -30px 0 5px rgba(74,144,196,0.07),
380px 70px 0 3px rgba(16,185,129,0.1),
540px -15px 0 0 rgba(245,158,11,0.12),
700px 45px 0 7px rgba(74,144,196,0.06),
850px 20px 0 2px rgba(232,128,61,0.08);
animation: float1 10s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
/* ===== SHARED CARD HOVER ===== */
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover) !important;
}
/* ===== B2B FLOATING CARD ===== */
.b2b-card {
background: var(--color-surface);
border-radius: 24px;
padding: 56px 48px;
box-shadow: 0 8px 32px rgba(0,0,0,0.06);
position: relative;
overflow: hidden;
}
.b2b-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-success));
}
/* ===== HERO TRUST BADGES ===== */
.hero-trust-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.hero-trust-badge {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.85);
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 20px;
padding: 5px 14px;
backdrop-filter: blur(4px);
}
/* ===== CERTIFICATION MARQUEE ===== */
.cert-marquee {
background: var(--color-primary);
padding: 14px 0;
overflow: hidden;
position: relative;
}
.cert-marquee-track {
display: flex;
align-items: center;
gap: 0;
white-space: nowrap;
animation: marqueeScroll 30s linear infinite;
}
.cert-marquee-item {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
padding: 0 24px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
}
.cert-marquee-item i { font-size: 14px; opacity: 0.85; }
.cert-marquee-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(255,255,255,0.3);
flex-shrink: 0;
}
@keyframes marqueeScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ===== AUDIENCE STRIPS ===== */
.audience-strips { padding: 32px 0; }
/* Audience heading */
.audience-heading {
text-align: center;
font-family: var(--font-heading);
font-size: 28px;
font-weight: 500;
color: var(--color-text);
margin-bottom: 32px;
}
.audience-heading .pop {
font-family: var(--font-display);
font-weight: normal;
color: var(--color-primary);
font-size: 28px;
}
/* Audience grid - 4 columns for 4 cards */
.audience-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 1023px) {
.audience-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.audience-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
}
.audience-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: var(--candy-blue);
border-radius: var(--card-radius);
padding: 32px 24px 28px;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
text-decoration: none;
border: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.audience-card:nth-child(2) { background: var(--candy-orange); }
.audience-card:nth-child(3) { background: var(--candy-purple); }
.audience-card:nth-child(4) { background: var(--candy-green); }
.audience-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}
.audience-icon {
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-bottom: 16px;
}
.audience-title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 8px;
}
.audience-card > div:last-child {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.audience-desc {
font-size: 13.5px;
color: var(--color-text-muted);
line-height: 1.55;
margin-bottom: 16px;
}
.audience-link {
display: inline-block;
background: var(--color-success);
color: #fff;
padding: 11px 24px;
border-radius: var(--btn-radius);
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 700;
letter-spacing: 0.02em;
margin-top: auto;
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
white-space: nowrap;
}
.audience-link:hover {
background: #059669;
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(16,185,129,0.25);
}
/* OLD PARALLAX DIETARY CARDS -- commented out for conservation
.dietary-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
justify-items: center;
}
.dietary-card-wrap {
transform: perspective(800px);
transform-style: preserve-3d;
cursor: pointer;
text-decoration: none;
display: block;
width: 100%;
}
.dietary-card-inner {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
background-color: #333;
overflow: hidden;
border-radius: var(--card-radius);
box-shadow: rgba(0,0,0,0.25) 0 20px 50px 0, inset #333 0 0 0 5px, inset rgba(255,255,255,0.4) 0 0 0 6px;
transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.dietary-card-wrap:hover .dietary-card-inner {
transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: rgba(255,255,255,0.2) 0 0 40px 5px,
white 0 0 0 1px,
rgba(0,0,0,0.5) 0 30px 60px 0,
inset #333 0 0 0 5px,
inset white 0 0 0 6px;
}
.dietary-card-bg {
opacity: 0.5;
position: absolute;
top: -20px;
left: -20px;
width: calc(100% + 40px);
height: calc(100% + 40px);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95),
opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
pointer-events: none;
}
.dietary-card-wrap:hover .dietary-card-bg {
transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1),
opacity 5s cubic-bezier(0.23, 1, 0.32, 1);
opacity: 0.8;
}
.dietary-card-info {
padding: 16px 20px 24px 28px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #fff;
transform: translateY(40%);
transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.dietary-card-info * {
position: relative;
z-index: 1;
}
.dietary-card-info::after {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 100%);
background-blend-mode: overlay;
opacity: 0;
transform: translateY(100%);
transition: 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.dietary-card-wrap:hover .dietary-card-info {
transform: translateY(0);
}
.dietary-card-wrap:hover .dietary-card-info,
.dietary-card-wrap:hover .dietary-card-info .dietary-card-desc {
transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.dietary-card-wrap:hover .dietary-card-info::after {
transition: 5s cubic-bezier(0.23, 1, 0.32, 1);
opacity: 1;
transform: translateY(0);
}
.dietary-card-icon {
margin-bottom: 8px;
}
.dietary-card-icon i {
font-size: 22px;
color: #fff;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.dietary-card-name {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 700;
text-shadow: rgba(0,0,0,0.5) 0 10px 10px;
margin-bottom: 4px;
}
.dietary-card-desc {
font-size: 13px;
line-height: 1.5;
opacity: 0;
text-shadow: rgba(0,0,0,0.8) 0 2px 3px;
transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.dietary-card-wrap:hover .dietary-card-desc {
opacity: 1;
}
END OLD PARALLAX DIETARY CARDS */
/* ===== DIETARY NEEDS GRID (Split Cards) ===== */
/* NEW: Split dietary cards -- blue top text, image bottom */
.dietary-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 32px;
}
.dietary-card-wrap {
text-decoration: none;
display: block;
border-radius: var(--card-radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dietary-card-wrap:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.dietary-card-top {
background: var(--color-primary);
padding: 24px 20px;
display: flex;
align-items: flex-start;
gap: 14px;
}
.dietary-card-icon {
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 10px;
background: rgba(255,255,255,0.2);
display: flex;
align-items: center;
justify-content: center;
}
.dietary-card-icon i {
color: #fff;
font-size: 18px;
}
.dietary-card-name {
font-family: var(--font-heading);
font-size: 17px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.dietary-card-desc {
font-size: 13px;
color: rgba(255,255,255,0.85);
line-height: 1.5;
}
.dietary-card-bottom {
height: 160px;
overflow: hidden;
}
.dietary-card-bottom img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.dietary-card-wrap:hover .dietary-card-bottom img {
transform: scale(1.05);
}
/* Thin coloured bottom border per card -- alternating accent colours */
.dietary-card-wrap:nth-child(1) { border-bottom: 3px solid var(--color-primary); }
.dietary-card-wrap:nth-child(2) { border-bottom: 3px solid var(--color-accent); }
.dietary-card-wrap:nth-child(3) { border-bottom: 3px solid var(--color-success); }
.dietary-card-wrap:nth-child(4) { border-bottom: 3px solid var(--color-highlight); }
.dietary-card-wrap:nth-child(5) { border-bottom: 3px solid #6366F1; }
.dietary-card-wrap:nth-child(6) { border-bottom: 3px solid var(--color-primary); }
@media (max-width: 768px) {
.dietary-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.dietary-grid { grid-template-columns: 1fr; }
.dietary-card-bottom { height: 140px; }
}
/* ===== EDUCATIONAL BLOCK ===== */
.edu-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: flex-start;
border-radius: var(--card-radius);
overflow: hidden;
box-shadow: 0 6px 24px rgba(0,0,0,0.08);
padding: 48px;
background: var(--color-surface);
}
.edu-text {}
.edu-eyebrow {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-primary);
margin-bottom: 12px;
}
.edu-heading {
font-family: var(--font-heading);
font-size: 32px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 20px;
line-height: 1.15;
}
.edu-text p {
font-size: 15px;
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: 14px;
}
.edu-text p strong {
color: var(--color-text);
font-weight: 600;
}
.edu-cards {
display: flex;
flex-direction: column;
gap: 16px;
}
.edu-sweetener-card {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
background: var(--color-bg);
border-radius: 14px;
border: 1.5px solid var(--color-primary);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.edu-sweetener-card:nth-child(2) { border-color: var(--color-accent); }
.edu-sweetener-card:nth-child(3) { border-color: var(--color-success); }
.edu-sweetener-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.edu-sweetener-icon {
width: 44px;
height: 44px;
flex-shrink: 0;
}
.edu-sweetener-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.edu-sweetener-name {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 4px;
}
.edu-sweetener-desc {
font-size: 13px;
color: var(--color-text-muted);
line-height: 1.5;
}
/* ===== BLOG TEASERS ===== */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.blog-card {
background: var(--color-surface);
border-radius: var(--card-radius);
overflow: hidden;
box-shadow: var(--shadow-md);
text-decoration: none;
border: none;
display: block;
}
.blog-card-image {
height: 200px;
overflow: hidden;
}
.blog-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-card-body {
padding: 24px;
}
.blog-card-tag {
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.blog-card-title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
color: var(--color-text);
line-height: 1.3;
margin-bottom: 8px;
}
.blog-card-desc {
font-size: 14px;
color: var(--color-text-muted);
line-height: 1.55;
}
/* ===== B2B CHANNELS ===== */
.b2b-channels {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
.b2b-channel {
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(255,255,255,0.85);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 20px;
padding: 7px 18px;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
}
.b2b-channel:hover {
background: rgba(255,255,255,0.15);
border-color: rgba(255,255,255,0.4);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(74,144,196,0.12);
}
/* ===== SKIP TO CONTENT ===== */
.skip-to-content {
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
background: var(--color-primary);
color: #fff;
padding: 12px 24px;
border-radius: var(--btn-radius);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
text-decoration: none;
z-index: 999;
transition: top 0.2s ease;
}
.skip-to-content:focus {
top: 12px;
}
/* ===== FAQ (design system classes) ===== */
.faq-list {
max-width: 720px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid var(--color-border);
padding: 22px 0;
}
.faq-item:first-child {
border-top: 1px solid var(--color-border);
}
.faq-toggle {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
background: none;
border: none;
cursor: pointer;
padding: 0;
text-align: left;
transition: color 0.2s;
}
.faq-toggle:hover .faq-question {
color: var(--color-primary);
}
.faq-question {
font-family: var(--font-heading);
font-size: 17px;
font-weight: 600;
color: var(--color-text);
transition: color 0.2s;
}
.faq-arrow {
transition: transform 0.3s, color 0.2s;
color: var(--color-text-muted);
font-size: 20px;
flex-shrink: 0;
margin-left: 16px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(74,144,196,0.06);
}
.faq-toggle:hover .faq-arrow {
background: rgba(74,144,196,0.12);
color: var(--color-primary);
}
.faq-item.open .faq-arrow {
transform: rotate(180deg);
background: rgba(74,144,196,0.12);
color: var(--color-primary);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-answer p {
padding: 14px 0 8px;
font-size: 15px;
color: var(--color-text-muted);
line-height: 1.7;
}
/* ===== B2B CARD VARIANTS ===== */
.b2b-card--centered { text-align: center; }
.b2b-card-inner { max-width: 640px; margin: 0 auto; }
.b2b-eyebrow {
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-highlight);
margin-bottom: 12px;
}
.b2b-heading {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 700;
color: #fff;
margin-bottom: 12px;
}
.b2b-heading .pop {
color: #7EC8F2;
}
.b2b-desc {
font-size: 16px;
color: rgba(255,255,255,0.8);
line-height: 1.65;
margin-bottom: 20px;
}
.b2b-cta { margin-top: 24px; }
/* ===== DIETARY NEEDS SECTION TINT ===== */
.dietary-needs {
background: linear-gradient(180deg, #ffffff 0%, #F8F7FA 8%, #F8F7FA 92%, #ffffff 100%);
}
/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.cert-marquee-track { animation: none; }
.hero-burst-product { animation: none; }
.hero-burst-blob--tl, .hero-burst-blob--br { animation: none; }
.candy-carousel__slide img { animation: none; }
/* OLD PARALLAX DIETARY RESPONSIVE -- commented out for conservation
.dietary-card-wrap { transform: none; }
.dietary-card-inner { transform: none !important; }
.dietary-card-bg { transform: none !important; }
*/
.logos-track-1,
.logos-track-2 { animation: none; }
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.product-grid { grid-template-columns: repeat(3, 1fr); }
.footer-main { grid-template-columns: repeat(2, 1fr); }
.product-layout { grid-template-columns: 1fr; gap: 32px; }
.product-gallery { position: static; }
}
@media (max-width: 768px) {
/* Hero burst */
.hero-burst { min-height: 360px; padding: 48px 16px; }
.hero-burst-heading { font-size: 46px; max-width: 400px; -webkit-text-stroke: 1.5px #fff; }
.hero-burst-logo { width: 160px; }
.hero-burst-product--1 { width: 140px; top: 5%; left: 3%; }
.hero-burst-product--2 { width: 115px; top: 2%; right: 8%; }
.hero-burst-product--3 { width: 175px; top: 40%; left: 1%; }
.hero-burst-product--4 { width: 95px; bottom: 5%; left: 5%; }
.hero-burst-product--5 { width: 85px; top: 1%; right: 26%; }
.hero-burst-product--6 { width: 90px; top: 34%; right: 1%; }
.hero-burst-product--7 { width: 155px; bottom: 8%; right: 14%; }
.hero-burst-product--8 { width: 160px; bottom: 2%; left: 14%; }
.hero-burst-product--9 { width: 130px; top: 1%; left: 16%; }
.hero-burst-product--10 { width: 125px; bottom: 2%; right: 2%; }
.hero-burst-blob--tl { width: 240px; height: 220px; top: -40px; left: -30px; }
.hero-burst-blob--br { width: 260px; height: 220px; bottom: -60px; right: -20px; }
.newsletter h2 { font-size: 32px; }
/* Promo tiles */
.promo-tiles-grid { grid-template-columns: 1fr; }
.promo-tile { height: 180px; }
/* Category icons */
.category-icons-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.category-icon-circle { width: 100%; }
/* Product tabs */
.product-tab-nav { flex-wrap: wrap; }
.product-tab-btn { font-size: 13px; padding: 8px 20px; }
/* Trust reasons */
.trust-reasons-grid { grid-template-columns: 1fr; gap: 20px; }
/* Audience strips */
.audience-grid { grid-template-columns: 1fr; }
/* OLD PARALLAX DIETARY RESPONSIVE -- commented out for conservation
.dietary-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.dietary-card-inner { width: 100%; }
.dietary-card-wrap { transform: none; }
.dietary-card-inner,
.dietary-card-bg { transform: none !important; }
.dietary-card-bg { opacity: 0.75; }
.dietary-card-info { transform: translateY(0); }
.dietary-card-desc { opacity: 1; }
.dietary-card-info::after { opacity: 1; transform: translateY(0); }
*/
/* Educational block */
.edu-block { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
.edu-heading { font-size: 28px; }
/* Blog teasers */
.blog-grid { grid-template-columns: 1fr; }
/* Stats bar */
.ws-stats-inner { justify-content: center; }
.ws-stat-item { min-width: 140px; }
.ws-stat-number { font-size: 32px; }
/* Benefits bar */
.benefits-bar-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
/* Existing */
.product-grid { grid-template-columns: repeat(2, 1fr); }
.testimonial-grid { grid-template-columns: 1fr; }
.section-header h2 { font-size: 32px; }
.section { padding: 36px 0; }
.footer-main { grid-template-columns: 1fr; gap: 32px; }
.about-stats { grid-template-columns: repeat(2, 1fr); }
.timeline::before { left: 20px; }
.timeline-item:nth-child(odd),
.timeline-item:nth-child(even) { justify-content: flex-start; padding-left: 48px; padding-right: 0; }
.timeline-dot { left: 20px; }
.header-nav { display: none; }
.mega-menu { display: none !important; }
.mobile-menu-btn { display: flex; }
}
/* Mobile menu button */
.mobile-menu-btn {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
border: none;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
transition: all 0.2s;
}
.mobile-menu-btn:hover {
background: var(--color-bg);
color: var(--color-text);
}
.mobile-menu-btn svg { width: 20px; height: 20px; }
/* Mobile nav overlay */
.mobile-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 200;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.mobile-nav.open { opacity: 1; pointer-events: auto; }
.mobile-nav-inner {
position: absolute;
top: 0;
right: 0;
width: 280px;
height: 100%;
background: var(--color-surface);
padding: 24px;
box-shadow: -4px 0 24px rgba(0,0,0,0.1);
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.3s ease;
}
.mobile-nav.open .mobile-nav-inner { transform: translateX(0); }
.mobile-nav-close {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
border: none;
background: var(--color-bg);
color: var(--color-text);
cursor: pointer;
font-size: 18px;
margin-bottom: 24px;
margin-left: auto;
}
.mobile-nav-links a {
display: block;
font-family: var(--font-heading);
font-size: 17px;
font-weight: 600;
color: var(--color-text);
padding: 14px 0;
border-bottom: 1px solid var(--color-border);
}
.mobile-nav-links a:hover,
.mobile-nav-links a.active { color: var(--color-primary); }
@media (max-width: 480px) {
.product-grid { grid-template-columns: 1fr; }
/* Hero burst mobile */
.hero-burst { min-height: 300px; padding: 40px 12px; }
.hero-burst-heading { font-size: 34px; max-width: 260px; -webkit-text-stroke: 1px #fff; }
.hero-burst-logo { width: 130px; }
.hero-burst-cta { font-size: 14px; padding: 12px 28px; }
/* Show only 6 products on mobile */
.hero-burst-product--3,
.hero-burst-product--5,
.hero-burst-product--7,
.hero-burst-product--8 { display: none; }
.hero-burst-product--1 { width: 105px; top: 4%; left: 2%; }
.hero-burst-product--2 { width: 90px; top: 3%; right: 3%; }
.hero-burst-product--4 { width: 72px; bottom: 5%; left: 4%; }
.hero-burst-product--6 { width: 72px; top: 35%; right: 2%; }
.hero-burst-product--9 { width: 95px; top: 1%; left: 14%; }
.hero-burst-product--10 { width: 100px; bottom: 5%; right: 2%; }
.hero-burst-blob--tl { width: 160px; height: 150px; }
.hero-burst-blob--br { width: 170px; height: 150px; }
.category-icons-grid { grid-template-columns: repeat(3, 1fr); }
.benefits-bar-grid { grid-template-columns: 1fr; }
.about-stats { grid-template-columns: 1fr; }
.newsletter-form { flex-direction: column; border-radius: 0; overflow: visible; box-shadow: none; }
.newsletter-input { border-radius: var(--btn-radius); margin-bottom: 8px; }
.newsletter-submit { border-radius: var(--btn-radius); }
.dietary-grid { grid-template-columns: 1fr; gap: 12px; }
.dietary-card-inner { width: 100%; }
.edu-block { padding: 24px; }
.edu-heading { font-size: 24px; }
.hero-trust-badges { gap: 6px; }
.hero-trust-badge { font-size: 10px; padding: 4px 10px; }
.cert-marquee-item { font-size: 11px; padding: 0 16px; }
}
/* ============================================================
CANDY STORE VIVID SECTIONS
Parallax Banners, Mosaic Gallery, Image Carousel
============================================================ */
/* ============================================================
PARALLAX BANNER SECTIONS
Scroll-driven parallax (JS translateY), no color overlay
============================================================ */
.parallax-banner {
position: relative;
min-height: 420px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.parallax-banner__bg {
position: absolute;
top: -30%;
left: 0;
right: 0;
height: 160%;
background-size: cover;
background-position: center;
will-change: transform;
z-index: 0;
}
.parallax-banner__content {
position: relative;
z-index: 1;
text-align: center;
padding: 60px 24px;
max-width: 800px;
}
.parallax-banner__eyebrow {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.9);
margin-bottom: 12px;
text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.parallax-banner__heading {
font-family: var(--font-display);
font-size: clamp(2.5rem, 6vw, 4.5rem);
color: #fff;
line-height: 1.1;
margin-bottom: 16px;
text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.parallax-banner__heading span {
display: inline-block;
background: linear-gradient(90deg, var(--vivid-yellow), var(--vivid-cyan), var(--vivid-pink));
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 4s linear infinite;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.parallax-banner__subtext {
font-family: var(--font-body);
font-size: 1.15rem;
color: rgba(255,255,255,0.95);
margin-bottom: 28px;
line-height: 1.6;
text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.parallax-banner__cta {
display: inline-block;
padding: 14px 36px;
border-radius: 100px;
font-family: var(--font-heading);
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #1A1A2E;
background: #fff;
border: none;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.parallax-banner__cta:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 8px 30px rgba(255,45,120,0.35);
background: var(--vivid-yellow);
}
@media (max-width: 768px) {
.parallax-banner { min-height: 350px; }
.parallax-banner__heading { font-size: clamp(2rem, 8vw, 3rem); }
.parallax-banner__content { padding: 40px 20px; }
}
/* ============================================================
MOSAIC IMAGE GALLERY
============================================================ */
.mosaic-gallery {
padding: 60px 0;
background: linear-gradient(180deg, #fff 0%, #FFF8F0 50%, #fff 100%);
overflow: hidden;
}
.mosaic-gallery .container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
.mosaic-gallery__header {
text-align: center;
margin-bottom: 40px;
}
.mosaic-gallery__header h2 {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 800;
color: var(--color-text);
}
.mosaic-gallery__header h2 .pop-vivid {
font-family: var(--font-display);
font-weight: normal;
background: linear-gradient(135deg, var(--vivid-pink), var(--vivid-orange), var(--vivid-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.mosaic-gallery__header p {
font-family: var(--font-body);
color: var(--color-text-muted);
font-size: 1.05rem;
margin-top: 8px;
}
.mosaic-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 12px;
}
.mosaic-item {
position: relative;
overflow: hidden;
border-radius: 16px;
cursor: pointer;
}
.mosaic-item--tall { grid-row: span 2; }
.mosaic-item--wide { grid-column: span 2; }
.mosaic-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.4s ease;
}
.mosaic-item:hover img {
transform: scale(1.08);
filter: brightness(1.05) saturate(1.2);
}
.mosaic-item__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 20px;
opacity: 0;
transition: opacity 0.4s ease;
}
.mosaic-item:hover .mosaic-item__overlay { opacity: 1; }
.mosaic-item:nth-child(1) .mosaic-item__overlay { background: linear-gradient(to top, rgba(255,45,120,0.7) 0%, transparent 60%); }
.mosaic-item:nth-child(2) .mosaic-item__overlay { background: linear-gradient(to top, rgba(0,180,255,0.7) 0%, transparent 60%); }
.mosaic-item:nth-child(3) .mosaic-item__overlay { background: linear-gradient(to top, rgba(255,107,43,0.7) 0%, transparent 60%); }
.mosaic-item:nth-child(4) .mosaic-item__overlay { background: linear-gradient(to top, rgba(139,0,255,0.7) 0%, transparent 60%); }
.mosaic-item:nth-child(5) .mosaic-item__overlay { background: linear-gradient(to top, rgba(255,214,0,0.7) 0%, transparent 60%); }
.mosaic-item:nth-child(6) .mosaic-item__overlay { background: linear-gradient(to top, rgba(0,229,255,0.7) 0%, transparent 60%); }
.mosaic-item:nth-child(7) .mosaic-item__overlay { background: linear-gradient(to top, rgba(255,0,170,0.7) 0%, transparent 60%); }
.mosaic-item:nth-child(8) .mosaic-item__overlay { background: linear-gradient(to top, rgba(124,255,1,0.6) 0%, transparent 60%); }
.mosaic-item__label {
font-family: var(--font-heading);
font-weight: 700;
font-size: 14px;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.08em;
transform: translateY(10px);
transition: transform 0.4s ease;
text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.mosaic-item:hover .mosaic-item__label { transform: translateY(0); }
.mosaic-item::after {
content: '';
position: absolute;
inset: 0;
border-radius: 16px;
border: 3px solid transparent;
transition: border-color 0.4s ease;
pointer-events: none;
}
.mosaic-item:nth-child(1):hover::after { border-color: var(--vivid-pink); }
.mosaic-item:nth-child(2):hover::after { border-color: var(--vivid-blue); }
.mosaic-item:nth-child(3):hover::after { border-color: var(--vivid-orange); }
.mosaic-item:nth-child(4):hover::after { border-color: var(--vivid-purple); }
.mosaic-item:nth-child(5):hover::after { border-color: var(--vivid-yellow); }
.mosaic-item:nth-child(6):hover::after { border-color: var(--vivid-cyan); }
.mosaic-item:nth-child(7):hover::after { border-color: var(--vivid-magenta); }
.mosaic-item:nth-child(8):hover::after { border-color: var(--vivid-lime); }
@media (max-width: 1024px) {
.mosaic-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; }
}
@media (max-width: 768px) {
.mosaic-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 8px; }
.mosaic-item--wide { grid-column: span 2; }
}
@media (max-width: 480px) {
.mosaic-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
}
/* ============================================================
IMAGE CAROUSEL / SLIDER
============================================================ */
@keyframes kenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.08) translate(-1%, -1%); }
}
.candy-carousel {
padding: 60px 0;
background: linear-gradient(135deg, #1A1A2E 0%, #2D1B3D 50%, #1A1A2E 100%);
overflow: hidden;
position: relative;
}
.candy-carousel__header {
text-align: center;
margin-bottom: 36px;
padding: 0 24px;
}
.candy-carousel__header h2 {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 800;
color: #fff;
}
.candy-carousel__header h2 .pop-vivid {
font-family: var(--font-display);
font-weight: normal;
background: linear-gradient(135deg, var(--vivid-pink), var(--vivid-yellow), var(--vivid-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.candy-carousel__header p {
font-family: var(--font-body);
color: rgba(255,255,255,0.6);
font-size: 1.05rem;
margin-top: 8px;
}
.candy-carousel__track-wrapper {
position: relative;
max-width: 1100px;
margin: 0 auto;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.candy-carousel__track {
display: flex;
transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
will-change: transform;
}
.candy-carousel__slide {
min-width: 100%;
position: relative;
overflow: hidden;
}
.candy-carousel__slide img {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
animation: kenBurns 20s ease-in-out infinite alternate;
}
.candy-carousel__slide:nth-child(2) img { animation-delay: -5s; animation-direction: alternate-reverse; }
.candy-carousel__slide:nth-child(3) img { animation-delay: -10s; }
.candy-carousel__slide:nth-child(4) img { animation-delay: -15s; animation-direction: alternate-reverse; }
.candy-carousel__caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px 32px 28px;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
color: #fff;
}
.candy-carousel__caption-title {
font-family: var(--font-display);
font-size: 1.8rem;
margin-bottom: 4px;
}
.candy-carousel__caption-text {
font-family: var(--font-body);
font-size: 0.95rem;
opacity: 0.85;
}
.candy-carousel__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.4);
background: rgba(0,0,0,0.3);
backdrop-filter: blur(10px);
color: #fff;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
}
.candy-carousel__nav:hover {
background: var(--vivid-pink);
border-color: var(--vivid-pink);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 0 20px rgba(255,45,120,0.5);
}
.candy-carousel__nav--prev { left: 16px; }
.candy-carousel__nav--next { right: 16px; }
.candy-carousel__dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 24px;
}
.candy-carousel__dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.3);
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.candy-carousel__dot.active {
background: var(--vivid-pink);
border-color: var(--vivid-pink);
box-shadow: 0 0 12px rgba(255,45,120,0.5);
transform: scale(1.2);
}
.candy-carousel__dot:hover { border-color: var(--vivid-pink); }
.candy-carousel__blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
opacity: 0.3;
}
.candy-carousel__blob--1 { width: 300px; height: 300px; background: var(--vivid-pink); top: -100px; left: -50px; }
.candy-carousel__blob--2 { width: 250px; height: 250px; background: var(--vivid-blue); bottom: -80px; right: -30px; }
.candy-carousel__blob--3 { width: 200px; height: 200px; background: var(--vivid-yellow); top: 50%; right: 15%; transform: translateY(-50%); }
@media (max-width: 768px) {
.candy-carousel__slide img { height: 320px; }
.candy-carousel__nav { width: 38px; height: 38px; font-size: 16px; }
.candy-carousel__nav--prev { left: 10px; }
.candy-carousel__nav--next { right: 10px; }
.candy-carousel__caption { padding: 30px 20px 20px; }
.candy-carousel__caption-title { font-size: 1.3rem; }
}
@media (max-width: 480px) {
.candy-carousel__slide img { height: 250px; }
}
/* ===== FEEDBACK CHANGES: Testimonial Carousel ===== */
.testimonial-carousel {
overflow: hidden;
position: relative;
}
.testimonial-track {
display: flex;
gap: 24px;
animation: testimonialScroll 30s linear infinite;
width: max-content;
}
.testimonial-carousel:hover .testimonial-track {
animation-play-state: paused;
}
@keyframes testimonialScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.testimonial-card {
flex: 0 0 380px;
min-width: 340px;
}
/* Cycle border-left colors across all carousel cards */
.testimonial-track .testimonial-card:nth-child(3n+1) { border-left-color: var(--color-primary); }
.testimonial-track .testimonial-card:nth-child(3n+2) { border-left-color: var(--color-accent); }
.testimonial-track .testimonial-card:nth-child(3n+3) { border-left-color: var(--color-success); }
.testimonial-track .testimonial-card:nth-child(3n+1) .testimonial-avatar { background: rgba(74,144,196,0.08); color: var(--color-primary); }
.testimonial-track .testimonial-card:nth-child(3n+2) .testimonial-avatar { background: rgba(232,128,61,0.08); color: var(--color-accent); }
.testimonial-track .testimonial-card:nth-child(3n+3) .testimonial-avatar { background: rgba(16,185,129,0.08); color: var(--color-success); }
/* ===== FEEDBACK CHANGES: Footer Trust Badge ===== */
.footer-trust-badge {
display: inline-block;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
color: var(--color-primary);
background: rgba(74, 144, 196, 0.1);
padding: 6px 14px;
border-radius: 100px;
margin-top: 12px;
letter-spacing: 0.02em;
}
/* ===== FEEDBACK CHANGES: B2B Subline ===== */
.b2b-subline {
font-family: var(--font-body);
font-size: 16px;
font-weight: 600;
color: #7EC8F2;
margin-top: 4px;
margin-bottom: 12px;
letter-spacing: 0.02em;
}
/* ===== FEEDBACK CHANGES: Shop by Category Blue Background ===== */
.shop-categories {
background: var(--candy-blue);
padding: 60px 0;
}
.category-icon-circle {
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 3px solid #fff;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.category-icon-item:hover .category-icon-circle {
transform: scale(1.1);
box-shadow: 0 8px 28px rgba(74,144,196,0.25);
}
.category-icon-item:hover .category-icon-label {
color: var(--color-primary);
}
@media (max-width: 640px) {
.category-icons-grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 16px;
padding-bottom: 12px;
-webkit-overflow-scrolling: touch;
}
.category-icon-item {
flex: 0 0 auto;
scroll-snap-align: start;
}
}
/* ===== FEEDBACK CHANGES: Mega Menu Diet Pills ===== */
.mega-menu__diet-item {
background: rgba(74, 144, 196, 0.06);
border-radius: 100px;
padding: 8px 16px;
margin-bottom: 6px;
}
.mega-menu__diet-item:hover {
background: rgba(74, 144, 196, 0.12);
}
/* ===== PDP Tab Content Heading ===== */
.pdp-tab-heading {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 20px;
}
/* ===== FEEDBACK CHANGES: PDP Feature Tiles Coloured Backgrounds ===== */
.pdp-tile-blue { background: #E8F4FD !important; }
.pdp-tile-green { background: #E8F8EE !important; }
.pdp-tile-amber { background: #FFF8E1 !important; }
/* ===== FEEDBACK CHANGES: PDP Health Badge ===== */
.pdp-health-badge {
margin: 16px 0;
padding: 16px;
background: #F0F9FF;
border-radius: 12px;
border: 1px solid rgba(74,144,196,0.15);
}
.pdp-badge-pill {
display: inline-block;
background: var(--color-primary);
color: #fff;
font-size: 12px;
font-weight: 600;
padding: 5px 14px;
border-radius: 100px;
margin-bottom: 12px;
}
.pdp-gi-scale { margin-top: 8px; }
.pdp-gi-label {
font-size: 12px;
font-weight: 600;
color: var(--color-text-muted);
margin-bottom: 6px;
}
.pdp-gi-bar {
position: relative;
height: 8px;
background: linear-gradient(90deg, #10B981 0%, #F59E0B 50%, #EF4444 100%);
border-radius: 4px;
margin-bottom: 4px;
}
.pdp-gi-marker {
position: absolute;
top: -6px;
width: 14px;
height: 20px;
border-radius: 3px;
}
.pdp-gi-marker-label {
position: absolute;
top: 26px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
color: var(--color-text);
}
.pdp-gi-low { border: 2px solid #10B981; background: #fff; }
.pdp-gi-high { border: 2px solid #F59E0B; background: #fff; }
.pdp-gi-pos-maltitol { left: 27%; }
.pdp-gi-pos-sucrose { left: 50%; }
.pdp-gi-range {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--color-text-muted);
margin-top: 42px;
}
/* ===== FEEDBACK CHANGES: PDP Sweetener Explainer ===== */
.pdp-sweetener-explainer {
display: flex;
gap: 16px;
padding: 20px;
background: var(--candy-blue);
border-radius: 12px;
margin: 20px 0;
align-items: flex-start;
}
.pdp-sweetener-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
color: #fff;
border-radius: 10px;
flex-shrink: 0;
font-size: 18px;
}
.pdp-sweetener-title {
font-weight: 700;
font-size: 14px;
margin-bottom: 4px;
}
.pdp-sweetener-explainer p {
font-size: 14px;
line-height: 1.5;
color: var(--color-text-muted);
margin: 0;
}
/* ===== FEEDBACK CHANGES: Sugar Comparison Bar ===== */
.pdp-sugar-compare {
margin: 24px 0;
padding: 20px;
background: #F9FAFB;
border-radius: 12px;
}
.pdp-sugar-compare-title {
font-size: 14px;
font-weight: 700;
margin-bottom: 16px;
}
.pdp-sugar-compare-bars { display: flex; flex-direction: column; gap: 12px; }
.pdp-sugar-bar-label {
font-size: 13px;
font-weight: 500;
margin-bottom: 4px;
}
.pdp-sugar-bar-track {
height: 28px;
background: #E5E7EB;
border-radius: 6px;
overflow: hidden;
}
.pdp-sugar-bar-fill {
height: 100%;
border-radius: 6px;
display: flex;
align-items: center;
padding: 0 10px;
font-size: 11px;
font-weight: 600;
color: #fff;
white-space: nowrap;
}
.pdp-sugar-bar-regular { background: #EF4444; }
.pdp-sugar-bar-diablo { background: var(--color-success); min-width: 140px; }
/* ===== FEEDBACK CHANGES: PDP Storage ===== */
.pdp-storage {
font-size: 14px;
color: var(--color-text-muted);
padding: 12px 16px;
background: #F9FAFB;
border-radius: 8px;
margin: 16px 0;
line-height: 1.5;
}
/* ===== FEEDBACK CHANGES: Allergen Summary ===== */
.allergen-summary {
font-size: 14px;
padding: 12px 16px;
background: #FEF3C7;
border-radius: 8px;
margin-top: 12px;
border-left: 3px solid #F59E0B;
}
/* ===== FEEDBACK CHANGES: PDP Sticky Buy Bar ===== */
.pdp-sticky-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid var(--color-border);
box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
z-index: 90;
padding: 0;
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.pdp-sticky-bar.visible {
transform: translateY(0);
}
.pdp-sticky-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 12px 24px;
display: flex;
align-items: center;
gap: 16px;
}
.pdp-sticky-info {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.pdp-sticky-thumb {
width: 48px;
height: 48px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
border: 1px solid var(--color-border);
}
.pdp-sticky-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pdp-sticky-text {
min-width: 0;
}
.pdp-sticky-name {
font-family: var(--font-heading);
font-weight: 700;
font-size: 14px;
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pdp-sticky-meta {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 1px;
}
.pdp-sticky-price {
font-family: var(--font-heading);
font-weight: 800;
font-size: 20px;
color: var(--color-text);
flex-shrink: 0;
}
.pdp-sticky-btn {
padding: 12px 24px;
font-size: 14px;
flex-shrink: 0;
}
/* ===== Why-card icon color variants ===== */
.why-icon-green { background: var(--candy-green); }
.why-icon-blue { background: var(--candy-blue); }
.why-icon-orange { background: var(--candy-orange); }
.why-icon-yellow { background: var(--candy-yellow); }
/* ===== PDP Certification Strip ===== */
.pdp-cert-strip {
background: var(--color-bg);
padding: 40px 0;
border-top: 1px solid var(--color-border);
}
.pdp-cert-strip-inner {
text-align: center;
}
.pdp-cert-strip-title {
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 20px;
}
.pdp-cert-strip-badges {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
/* ===== PDP UGC / Video Section ===== */
.pdp-ugc-section {
background: var(--color-bg);
}
.pdp-ugc-grid {
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
}
.pdp-ugc-card {
width: 280px;
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-md);
cursor: pointer;
position: relative;
border: none;
padding: 0;
background: #000;
transition: transform 0.25s, box-shadow 0.25s;
}
.pdp-ugc-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}
.pdp-ugc-card img {
width: 100%;
display: block;
transition: opacity 0.2s;
}
.pdp-ugc-card:hover img {
opacity: 0.85;
}
.pdp-ugc-play,
.pdp-ugc-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.2s;
}
.pdp-ugc-card:hover .pdp-ugc-play {
background: var(--color-primary);
transform: translate(-50%, -50%) scale(1.1);
}
.pdp-ugc-play svg {
width: 28px;
height: 28px;
margin-left: 3px;
}
.pdp-ugc-loading svg {
width: 24px;
height: 24px;
}
/* ===== FEEDBACK CHANGES: PDP Delivery Countdown ===== */
.pdp-delivery-countdown {
font-size: 13px;
color: var(--color-text-muted);
padding: 8px 12px;
background: rgba(16,185,129,0.06);
border-radius: 8px;
margin-top: 8px;
}
.pdp-delivery-countdown i {
color: var(--color-success);
margin-right: 4px;
}
/* ===== FEEDBACK CHANGES: PDP SEO Block ===== */
.pdp-seo-block {
padding: 60px 0;
background: var(--color-bg);
}
.pdp-seo-content {
max-width: 760px;
}
.pdp-seo-block h2 {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 18px;
}
.pdp-seo-block p {
font-size: 15px;
line-height: 1.8;
color: var(--color-text-muted);
margin-bottom: 14px;
}
/* ===== FEEDBACK CHANGES: PDP FAQ Section ===== */
.pdp-faq-section {
padding: 48px 0;
}
/* ===== FEEDBACK CHANGES: Collection Header Blue ===== */
.collection-header-blue {
background: rgba(74, 144, 196, 0.06);
}
/* ===== FEEDBACK CHANGES: Collection Sticky Filter ===== */
.collection-filter-sticky {
position: sticky;
top: 68px;
z-index: 50;
background: #fff;
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
}
/* ===== FEEDBACK CHANGES: SEO Benefits List ===== */
.seo-benefits-list {
list-style: none;
padding: 0;
margin: 16px 0;
}
.seo-benefits-list li {
padding: 4px 0 4px 20px;
position: relative;
font-size: 15px;
color: var(--color-text-muted);
}
.seo-benefits-list li::before {
content: '\2713';
position: absolute;
left: 0;
color: var(--color-success);
font-weight: 700;
}
/* ===== FEEDBACK CHANGES: Stats Bar Full-Bleed ===== */
.ws-stats-bar {
background: linear-gradient(135deg, #1a2744 0%, #243B5C 100%);
padding: 56px 24px;
width: 100%;
}
.ws-stat-number {
font-family: var(--font-heading);
font-size: 48px;
font-weight: 800;
color: #fff;
display: block;
line-height: 1.1;
}
.ws-stat-number[data-count] {
color: var(--color-highlight);
}
/* Text-only stat items (no data-count) get smaller font */
.ws-stat-number:not([data-count]) {
font-size: 18px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.02em;
}
/* Fallback for browsers supporting :has() */
.ws-stat-item:not(:has([data-count])) .ws-stat-number {
font-size: 18px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.02em;
}
.ws-stat-label {
font-size: 13px;
color: rgba(255,255,255,0.55);
font-weight: 400;
margin-top: 6px;
text-transform: uppercase;
letter-spacing: 0.06em;
}