/* ============================================
PREMIUM VISUAL ENHANCEMENTS
Layered on top of style.css — no overrides, pure upgrades
============================================ */
/* === BRAND FONTS — Mont Heavy + ExtraLight === */
@font-face {
font-family: 'Mont';
src: url('../fonts/mont/Mont-HeavyDEMO.otf') format('opentype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mont';
src: url('../fonts/mont/Mont-ExtraLightDEMO.otf') format('opentype');
font-weight: 200;
font-style: normal;
font-display: swap;
}
/* ---- HEADINGS: Mont Heavy (thick, bold, impactful) ---- */
h1, h2, h3, h4, h5,
.section-title,
.hero-title,
.hero-stat-number,
.counter-number,
.counter-suffix,
.step-card h3,
.about-highlight h5,
.product-card-body h3,
.testimonial-author-info h5,
.cta-content h2,
.auth-card h2,
.page-header h1,
.shop-banner-overlay h2,
.shop-list-name,
.faq-question span,
.pd-nutrition-header h3,
.pd-info-card h3,
.pd-faq-item strong,
.cart-drawer-header h3,
.contact-form h3 {
font-family: var(--font-display);
font-weight: 800 !important;
}
/* ---- BODY TEXT: Mont ExtraLight but BIGGER for readability ---- */
body {
font-family: var(--font-body);
font-size: 17px !important;
letter-spacing: 0.2px;
}
/* Paragraphs & descriptions — larger + spaced for readability */
p, li,
.hero-text,
.section-subtitle,
.product-desc,
.testimonial-text,
.about-highlight p,
.step-card p,
.faq-answer p,
.pd-feature-item,
.cart-login-msg {
font-family: var(--font-body);
font-weight: 200;
font-size: 1.05rem;
line-height: 1.8;
letter-spacing: 0.3px;
}
/* Smaller text — use regular DM Sans for readability at tiny sizes */
.product-category,
.product-card-body .price,
.cert-badge,
.section-label,
.cart-item-info .cart-item-cat,
.pd-cert span,
.promo-banner,
.seasonal-banner,
.footer,
.cart-empty,
.breadcrumb {
font-family: var(--font-body);
font-weight: 400;
letter-spacing: 0.3px;
}
/* ---- NAV LINKS: bigger, clear, easy to tap ---- */
nav.nav-links a,
.nav-links a,
.header .nav-links a {
font-family: var(--font-body);
font-size: 1.08rem !important;
font-weight: 800 !important;
letter-spacing: 0.5px !important;
}
.mobile-menu a,
.nav-mobile-link {
font-family: var(--font-body);
font-weight: 800 !important;
font-size: 1.1rem !important;
}
/* ---- BUTTONS & INTERACTIVE: bold + readable ---- */
.btn,
.nav-cta,
.product-add-btn,
.float-cta,
.shop-chip,
.blog-filter-btn {
font-family: var(--font-body);
font-weight: 800 !important;
letter-spacing: 0.5px;
}
/* ---- LABELS & BADGES: medium weight for clarity ---- */
.product-badge,
label, th,
strong, b,
.form-group label,
.contact-form-styled label,
.shop-list-brand,
.feature-item h4,
.pd-cert strong,
.about-highlight-icon + div h5 {
font-family: var(--font-body);
font-weight: 800 !important;
font-size: 0.88rem;
}
/* ---- FORM INPUTS: ensure readable ---- */
input, textarea, select {
font-family: var(--font-body);
font-weight: 200;
font-size: 1rem !important;
letter-spacing: 0.3px;
}
/* Hero title stays extra heavy and large */
.hero-title {
font-weight: 800 !important;
letter-spacing: -1px;
}
/* Hero subtitle readable */
.hero-text {
font-size: 1.15rem !important;
line-height: 1.9;
}
/* === ENHANCED HERO === */
.hero {
min-height: 95vh;
position: relative;
}
@media (min-width: 769px) {
.hero { background-attachment: fixed; }
}
@media (max-width: 768px) {
.hero {
min-height: auto;
padding: 100px 0 60px;
}
.hero-grid {
padding: 30px 0 !important;
}
.hero-content {
padding: 28px 20px !important;
margin: 0 10px;
border-radius: 16px !important;
max-width: 100% !important;
}
.hero-title {
font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
line-height: 1.2 !important;
margin-bottom: 16px !important;
}
.hero-text {
font-size: .95rem !important;
line-height: 1.7 !important;
margin-bottom: 24px !important;
}
.hero-badge {
font-size: .72rem !important;
padding: 6px 14px !important;
margin-bottom: 16px !important;
white-space: normal !important;
text-align: center;
line-height: 1.6;
}
.hero-buttons, .hero-btns {
flex-direction: column !important;
gap: 10px !important;
}
.hero-buttons a, .hero-btns a,
.hero-btn-gold, .hero-btn-outline-dark {
width: 100% !important;
text-align: center !important;
padding: 14px 24px !important;
font-size: .92rem !important;
}
.hero-stats {
gap: 20px !important;
margin-top: 24px !important;
}
.hero-stat-number {
font-size: 1.6rem !important;
}
}
@media (max-width: 480px) {
.hero {
padding: 80px 0 40px;
}
.hero-content {
padding: 20px 16px !important;
margin: 0 8px;
}
.hero-title {
font-size: 1.6rem !important;
}
}
.hero::before {
background: radial-gradient(
ellipse at center,
rgba(255,255,255,.92) 0%,
rgba(255,255,255,.75) 45%,
rgba(255,255,255,.3) 80%,
transparent 100%
);
}
.hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(to top, var(--cream), transparent);
z-index: 1;
pointer-events: none;
}
.hero-title {
font-size: clamp(3rem, 6vw, 5rem);
letter-spacing: -1px;
color: var(--green-deep);
text-shadow: 0 2px 20px rgba(255,255,255,.6);
}
.hero-title em {
background: linear-gradient(135deg, var(--green-deep), var(--green-bright));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-content {
background: rgba(255,255,255,.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 24px;
padding: 48px 40px;
max-width: 700px;
}
.hero-text {
font-size: 1.1rem;
}
.hero-btn-gold {
padding: 16px 36px;
font-size: 1rem;
box-shadow: 0 8px 24px rgba(232,185,49,.35);
}
.hero-btn-outline-dark {
padding: 16px 36px;
font-size: 1rem;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(255,255,255,.85);
}
.hero-badge {
background: rgba(255,255,255,.95);
box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.hero-stats {
margin-top: 64px;
gap: 60px;
}
.hero-stat-number {
font-size: 2.6rem;
background: linear-gradient(135deg, var(--green-deep), var(--green-bright));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* === HEADER GLASS ENHANCEMENT === */
.header {
background: rgba(250,248,242,.85);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
/* === PRODUCT CARDS PREMIUM === */
.product-card {
border: 1px solid rgba(0,0,0,.06);
border-radius: 16px;
transition: all .5s cubic-bezier(.25,.46,.45,.94);
}
.product-card:hover {
transform: translateY(-12px);
box-shadow: 0 20px 60px rgba(0,0,0,.12);
border-color: rgba(82,183,136,.2);
}
.product-card-image {
border-radius: 16px 16px 0 0;
}
.product-card:hover .product-card-image img {
transform: scale(1.1);
}
.product-badge {
background: linear-gradient(135deg, var(--green-bright), var(--green-mid));
box-shadow: 0 4px 12px rgba(64,145,108,.3);
}
.product-quick-view {
backdrop-filter: blur(8px);
background: rgba(255,255,255,.9);
box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.product-add-btn {
border-radius: 10px;
padding: 13px;
font-size: .88rem;
background: linear-gradient(135deg, var(--green-deep), var(--green-mid));
box-shadow: 0 4px 16px rgba(26,60,42,.2);
}
.product-add-btn:hover {
box-shadow: 0 6px 24px rgba(26,60,42,.3);
transform: translateY(-1px);
}
/* === FEATURE STRIP UPGRADE === */
.features-strip {
background: linear-gradient(135deg, #fff 0%, var(--green-whisper) 100%);
border-bottom: none;
}
.feature-item {
border-radius: 16px;
border: 1px solid transparent;
}
.feature-item:hover {
border-color: var(--green-pale);
box-shadow: 0 8px 30px rgba(0,0,0,.06);
transform: translateY(-6px);
}
.feature-icon {
width: 64px;
height: 64px;
box-shadow: 0 4px 12px rgba(82,183,136,.1);
}
.feature-item:hover .feature-icon {
box-shadow: 0 8px 24px rgba(82,183,136,.3);
}
/* === SECTIONS DEPTH === */
.about-section {
background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
}
.about-image img {
box-shadow: 0 20px 60px rgba(0,0,0,.12);
transition: all .5s var(--ease);
}
.about-image:hover img {
transform: scale(1.02);
box-shadow: 0 24px 70px rgba(0,0,0,.16);
}
.about-image-accent {
background: linear-gradient(135deg, var(--green-whisper), var(--green-pale));
border-radius: 24px;
width: 200px;
height: 200px;
}
.about-highlight {
border: 1px solid transparent;
border-radius: 14px;
}
.about-highlight:hover {
border-color: var(--green-pale);
box-shadow: 0 6px 20px rgba(0,0,0,.04);
transform: translateY(-2px);
}
/* === COUNTER SECTION GLOW === */
.counter-section {
background: linear-gradient(135deg, var(--green-deep) 0%, #0d261a 50%, var(--green-mid) 100%);
}
.counter-section::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 20% 50%, rgba(82,183,136,.15) 0%, transparent 50%);
pointer-events: none;
}
.counter-number {
text-shadow: 0 0 40px rgba(82,183,136,.3);
}
.counter-item {
transition: transform .3s var(--ease);
}
.counter-item:hover {
transform: translateY(-4px);
}
/* === HOW IT WORKS PREMIUM === */
.step-card {
border-radius: 20px;
border: 1px solid rgba(0,0,0,.06);
}
.step-card:hover {
box-shadow: 0 20px 50px rgba(0,0,0,.1);
transform: translateY(-10px);
border-color: var(--green-pale);
}
.step-number {
background: linear-gradient(135deg, var(--green-bright), var(--green-mid));
box-shadow: 0 4px 12px rgba(64,145,108,.3);
}
.step-icon {
font-size: 3.2rem;
filter: drop-shadow(0 4px 8px rgba(0,0,0,.06));
}
.step-connector {
color: var(--green-bright);
font-size: 2rem;
opacity: .6;
}
/* === TESTIMONIALS GLOW === */
.testimonials-section {
background: linear-gradient(135deg, var(--green-deep) 0%, #0a1f15 40%, var(--green-deep) 100%);
}
.testimonial-card {
border-radius: 20px;
padding: 40px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
}
.testimonial-card:hover {
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.15);
box-shadow: 0 16px 40px rgba(0,0,0,.2);
transform: translateY(-6px);
}
.testimonial-stars {
font-size: 1.1rem;
letter-spacing: 4px;
text-shadow: 0 0 12px rgba(244,197,66,.4);
}
.testimonial-text {
font-size: 1.05rem;
line-height: 1.85;
}
/* === CTA PREMIUM === */
.cta-card {
border-radius: 32px;
background: linear-gradient(135deg, var(--green-mid) 0%, var(--green-deep) 50%, #0d261a 100%);
box-shadow: 0 24px 60px rgba(0,0,0,.12);
}
.cta-card::after {
content: '';
position: absolute;
top: -30%;
left: -10%;
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(82,183,136,.12), transparent);
pointer-events: none;
}
.cta-content h2 {
font-size: clamp(2rem, 3.5vw, 3rem);
}
.cta-image img {
box-shadow: 0 24px 60px rgba(0,0,0,.3);
border-radius: 20px;
}
/* === FOOTER PREMIUM === */
.footer {
background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
}
.footer-social a {
border-color: rgba(255,255,255,.1);
transition: all .3s var(--ease);
}
.footer-social a:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(82,183,136,.3);
}
/* === TRUSTED SECTION PREMIUM === */
.trusted-item {
transition: all .4s var(--ease);
}
.trusted-item:hover {
transform: scale(1.15) translateY(-4px);
opacity: 1;
}
/* === AUTH CARDS PREMIUM === */
.auth-card {
border-radius: 20px;
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 16px 50px rgba(0,0,0,.08);
}
/* === SHOP PAGE ENHANCEMENTS === */
.shop-banner {
border-radius: 20px;
height: 240px;
}
.shop-banner-overlay {
background: linear-gradient(135deg, rgba(26,60,42,.8), rgba(45,106,79,.6));
}
.shop-banner-overlay h2 {
font-size: 2rem;
text-shadow: 0 2px 20px rgba(0,0,0,.2);
}
/* === PROMO BANNER UPGRADE === */
.promo-banner {
background: linear-gradient(90deg, var(--green-deep) 0%, #0d261a 50%, var(--green-deep) 100%);
padding: 12px 20px;
font-size: .88rem;
letter-spacing: .3px;
}
.promo-banner a {
color: #e8b931;
text-decoration: none;
border-bottom: 1px solid rgba(232,185,49,.4);
}
.promo-banner a:hover {
border-bottom-color: #e8b931;
}
/* === SEARCH OVERLAY PREMIUM === */
.search-overlay {
background: rgba(0,0,0,.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.search-box {
border-radius: 24px;
padding: 40px;
box-shadow: 0 24px 80px rgba(0,0,0,.25);
}
/* === CART DRAWER PREMIUM === */
.cart-drawer {
box-shadow: -16px 0 60px rgba(0,0,0,.2);
border-left: 1px solid rgba(0,0,0,.04);
}
.cart-drawer-footer {
background: linear-gradient(to top, var(--cream), var(--cream-dark));
}
/* === BUTTONS SHIMMER === */
.btn-primary {
position: relative;
overflow: hidden;
}
.btn-primary::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
135deg,
transparent 40%,
rgba(255,255,255,.15) 50%,
transparent 60%
);
transition: transform .6s var(--ease);
transform: translateX(-100%);
}
.btn-primary:hover::after {
transform: translateX(50%);
}
/* === SCROLL-TRIGGERED FADE VARIANTS === */
.reveal-left {
opacity: 0;
transform: translateX(-40px);
transition: all .8s var(--ease);
}
.reveal-left.visible {
opacity: 1;
transform: translateX(0);
}
.reveal-right {
opacity: 0;
transform: translateX(40px);
transition: all .8s var(--ease);
}
.reveal-right.visible {
opacity: 1;
transform: translateX(0);
}
.reveal-scale {
opacity: 0;
transform: scale(.92);
transition: all .8s var(--ease);
}
.reveal-scale.visible {
opacity: 1;
transform: scale(1);
}
/* === SMOOTH SECTION DIVIDERS === */
.features-strip::after,
.products-section::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--green-bright), var(--green-pale));
border-radius: 2px;
margin: 0 auto;
opacity: .5;
}
.features-strip::after {
margin-top: 40px;
}
.products-section::after {
margin-bottom: -40px;
}
/* === PAGE HEADER DEPTH === */
.page-header {
background: linear-gradient(135deg, var(--green-deep) 0%, #0a1f15 60%, var(--green-mid) 100%);
padding: 110px 0 70px;
}
.page-header h1 {
text-shadow: 0 2px 20px rgba(0,0,0,.15);
}
/* === CONTACT FORM PREMIUM === */
.contact-form {
border-radius: 20px;
box-shadow: 0 16px 50px rgba(0,0,0,.08);
border: 1px solid rgba(0,0,0,.06);
}
.contact-detail {
border-radius: 14px;
}
.contact-detail:hover {
transform: translateY(-2px);
}
/* === COOKIE BANNER PREMIUM === */
.cookie-banner {
background: rgba(26,26,26,.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
/* === PRODUCT DETAIL PAGE PREMIUM === */
.pd-image-wrap {
position: relative;
}
.pd-badges-top {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.pd-badge {
font-size: .72rem;
font-weight: 700;
padding: 6px 14px;
border-radius: 50px;
letter-spacing: .5px;
text-transform: uppercase;
}
.pd-badge-organic {
background: var(--green-whisper);
color: var(--green-deep);
border: 1px solid var(--green-pale);
}
.pd-badge-fresh {
background: #fff8e1;
color: #8d6e00;
border: 1px solid #fce4a8;
}
.product-detail-image {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 16px 50px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.06);
}
.product-detail-image:hover img {
transform: scale(1.05);
transition: transform .6s var(--ease);
}
.pd-image-footer {
margin-top: 16px;
}
.pd-trust-icons {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.pd-trust-icons span {
font-size: .78rem;
font-weight: 600;
color: var(--text-light);
}
.pd-weight {
font-size: .95rem;
font-weight: 500;
color: var(--text-light);
margin: -8px 0 16px;
padding: 8px 14px;
background: var(--cream);
border-radius: 8px;
display: inline-block;
}
.product-detail-info h1 {
font-size: 2.2rem;
line-height: 1.15;
margin-bottom: 12px;
}
.pd-features {
margin-bottom: 24px;
}
.pd-feature-item {
font-size: .9rem;
color: var(--text-secondary);
line-height: 1.8;
padding: 2px 0;
}
.pd-feature-item::first-letter {
color: var(--green-bright);
}
/* Cart row */
.pd-cart-row {
display: flex;
gap: 12px;
align-items: stretch;
margin-bottom: 20px;
}
.pd-qty-selector {
display: flex;
align-items: center;
border: 2px solid rgba(0,0,0,.08);
border-radius: 12px;
overflow: hidden;
background: #fff;
}
.pd-qty-selector button {
width: 44px;
height: 48px;
font-size: 1.2rem;
font-weight: 600;
background: var(--cream);
border: none;
cursor: pointer;
transition: background .2s;
color: var(--text-primary);
}
.pd-qty-selector button:hover {
background: var(--green-whisper);
}
.pd-qty-selector input {
width: 48px;
text-align: center;
font-size: 1rem;
font-weight: 700;
border: none;
background: #fff;
font-family: var(--font-body);
outline: none;
color: var(--text-primary);
-moz-appearance: textfield;
}
.pd-qty-selector input::-webkit-outer-spin-button,
.pd-qty-selector input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.pd-add-btn {
border-radius: 12px !important;
padding: 15px 24px !important;
font-size: 1rem !important;
margin: 0 !important;
width: 100% !important;
}
/* Action links */
.pd-actions-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 28px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(0,0,0,.06);
}
.pd-action-link {
font-size: .82rem;
font-weight: 600;
color: var(--green-bright);
transition: color .2s;
}
.pd-action-link:hover {
color: var(--green-deep);
}
/* Certifications */
.pd-certs {
display: flex;
flex-direction: column;
gap: 14px;
}
.pd-cert {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: var(--cream);
border-radius: 12px;
border: 1px solid rgba(0,0,0,.04);
transition: all .3s var(--ease);
}
.pd-cert:hover {
background: var(--green-whisper);
transform: translateX(4px);
}
.pd-cert-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--green-bright);
display: flex;
align-items: center;
justify-content: center;
}
.pd-cert strong {
font-size: .85rem;
color: var(--green-deep);
display: block;
}
.pd-cert span {
font-size: .78rem;
color: var(--text-light);
}
/* Tabs */
.pd-tabs-section {
padding: 60px 0 80px;
background: #fff;
}
.pd-tabs {
display: flex;
gap: 4px;
border-bottom: 2px solid rgba(0,0,0,.06);
margin-bottom: 32px;
}
.pd-tab {
padding: 14px 24px;
font-family: var(--font-body);
font-size: .9rem;
font-weight: 600;
color: var(--text-light);
cursor: pointer;
background: none;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
transition: all .3s var(--ease);
}
.pd-tab:hover {
color: var(--text-primary);
}
.pd-tab.active {
color: var(--green-deep);
border-bottom-color: var(--green-bright);
}
.pd-tab-content {
display: none;
animation: fadeInUp .4s var(--ease);
}
.pd-tab-content.active {
display: block;
}
/* Nutrition card */
.pd-nutrition-card {
background: var(--cream);
border-radius: 16px;
padding: 32px;
border: 2px solid rgba(0,0,0,.06);
max-width: 700px;
}
.pd-nutrition-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 3px solid var(--green-deep);
}
.pd-nutrition-header h3 {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 700;
color: var(--green-deep);
}
.pd-nutrition-header span {
font-size: .88rem;
color: var(--text-light);
font-weight: 500;
}
.pd-nutrition-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.pd-nutrition-item {
padding: 16px;
background: #fff;
border-radius: 10px;
text-align: center;
border: 1px solid rgba(0,0,0,.04);
transition: all .3s var(--ease);
}
.pd-nutrition-item:hover {
border-color: var(--green-pale);
box-shadow: 0 4px 16px rgba(0,0,0,.04);
transform: translateY(-2px);
}
.pd-nutrition-value {
display: block;
font-size: 1.3rem;
font-weight: 700;
color: var(--green-deep);
margin-bottom: 4px;
}
.pd-nutrition-label {
font-size: .78rem;
color: var(--text-light);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .5px;
}
/* Info card (shipping, FAQ) */
.pd-info-card {
background: var(--cream);
border-radius: 16px;
padding: 32px;
max-width: 700px;
}
.pd-info-card h3 {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 600;
color: var(--green-deep);
margin-bottom: 12px;
}
.pd-info-card p {
font-size: .95rem;
color: var(--text-secondary);
line-height: 1.8;
}
.pd-faq-item {
padding: 16px 0;
border-bottom: 1px solid rgba(0,0,0,.06);
}
.pd-faq-item:last-child { border-bottom: none; }
.pd-faq-item strong {
font-size: .95rem;
color: var(--green-deep);
display: block;
margin-bottom: 6px;
}
.pd-faq-item p {
margin: 0;
}
/* Related products header */
.related-products {
background: var(--cream);
}
/* Mobile product detail */
@media (max-width: 768px) {
.pd-cart-row { flex-direction: column; }
.pd-qty-selector { justify-content: center; }
.pd-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pd-tab { white-space: nowrap; padding: 12px 16px; font-size: .82rem; }
.pd-badges-top { flex-wrap: wrap; }
.product-detail-info h1 { font-size: 1.6rem; }
}
/* === SHOP PAGE: US Foods Style Layout === */
/* Category Circle Filters */
.shop-category-circles {
display: flex;
justify-content: center;
gap: 32px;
padding: 40px 0 32px;
flex-wrap: wrap;
}
.shop-cat-circle {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-decoration: none;
transition: all .3s var(--ease);
}
.shop-cat-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--green-whisper);
border: 2px solid rgba(0,0,0,.06);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
transition: all .3s var(--ease);
}
.shop-cat-circle:hover .shop-cat-icon,
.shop-cat-circle.active .shop-cat-icon {
background: var(--green-pale);
border-color: var(--green-bright);
transform: scale(1.08);
box-shadow: 0 6px 20px rgba(64,145,108,.2);
}
.shop-cat-label {
font-size: .82rem;
font-weight: 600;
color: var(--text-secondary);
text-align: center;
}
.shop-cat-circle.active .shop-cat-label {
color: var(--green-deep);
}
/* Results Bar */
.shop-results-bar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
padding: 20px 0;
border-bottom: 1px solid rgba(0,0,0,.06);
}
.shop-results-count {
font-size: 1.1rem;
color: var(--text-primary);
}
.shop-results-count span { color: var(--text-secondary); font-weight: 400; }
.shop-clear-filter {
color: var(--green-bright);
font-weight: 600;
margin-left: 8px;
font-size: .85rem;
}
/* Filter Chips */
.shop-filter-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.shop-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 18px;
border-radius: 50px;
border: 1.5px solid rgba(0,0,0,.1);
font-size: .82rem;
font-weight: 600;
color: var(--text-secondary);
background: #fff;
transition: all .3s var(--ease);
cursor: pointer;
}
.shop-chip:hover {
border-color: var(--green-bright);
color: var(--green-deep);
background: var(--green-whisper);
}
.shop-chip.active {
border-color: var(--green-bright);
background: var(--green-whisper);
color: var(--green-deep);
}
.compare-chip {
border-color: transparent;
color: var(--green-bright);
background: none;
}
.compare-chip:hover {
background: var(--green-whisper);
}
/* Toolbar Row */
.shop-toolbar-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0 24px;
gap: 12px;
}
.shop-sort-select {
padding: 10px 16px;
border-radius: 8px;
border: 1.5px solid rgba(0,0,0,.1);
background: #fff;
font-family: var(--font-body);
font-size: .88rem;
outline: none;
color: var(--text-primary);
}
.shop-view-toggle {
display: flex;
gap: 4px;
}
.view-btn {
width: 38px;
height: 38px;
border-radius: 8px;
border: 1.5px solid rgba(0,0,0,.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: var(--text-light);
background: #fff;
transition: all .2s;
}
.view-btn:hover,
.view-btn.active {
border-color: var(--green-bright);
color: var(--green-deep);
background: var(--green-whisper);
}
/* List View Items */
.shop-list {
display: flex;
flex-direction: column;
gap: 0;
}
.shop-list-item {
display: flex;
align-items: center;
gap: 20px;
padding: 20px 24px;
border: 1px solid rgba(0,0,0,.06);
border-bottom: none;
background: #fff;
transition: all .3s var(--ease);
text-decoration: none;
color: inherit;
}
.shop-list-item:first-child {
border-radius: 12px 12px 0 0;
}
.shop-list-item:last-child {
border-bottom: 1px solid rgba(0,0,0,.06);
border-radius: 0 0 12px 12px;
}
.shop-list-item:first-child:last-child {
border-radius: 12px;
}
.shop-list-item:hover {
background: var(--cream);
box-shadow: 0 4px 16px rgba(0,0,0,.04);
z-index: 2;
position: relative;
}
.shop-list-img {
width: 72px;
height: 72px;
border-radius: 10px;
overflow: hidden;
background: var(--cream-dark);
flex-shrink: 0;
border: 1px solid rgba(0,0,0,.06);
}
.shop-list-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s var(--ease);
}
.shop-list-item:hover .shop-list-img img {
transform: scale(1.1);
}
.shop-list-info {
flex: 1;
min-width: 0;
}
.shop-list-brand {
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-light);
}
.shop-list-name {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin: 4px 0;
line-height: 1.3;
}
.shop-list-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: .8rem;
color: var(--text-light);
}
.shop-list-divider { opacity: .4; }
.shop-list-badge {
background: var(--green-whisper);
color: var(--green-deep);
font-size: .7rem;
font-weight: 700;
padding: 2px 10px;
border-radius: 50px;
letter-spacing: .5px;
text-transform: uppercase;
}
.shop-list-actions {
flex-shrink: 0;
}
.shop-list-add {
padding: 10px 24px !important;
border-radius: 8px !important;
font-size: .82rem !important;
margin-top: 0 !important;
width: auto !important;
}
/* Mobile list */
@media (max-width: 768px) {
.shop-category-circles { gap: 16px; padding: 24px 0; }
.shop-cat-icon { width: 60px; height: 60px; font-size: 1.5rem; }
.shop-cat-label { font-size: .72rem; }
.shop-results-bar { flex-direction: column; align-items: flex-start; }
.shop-list-item { padding: 14px 16px; gap: 14px; }
.shop-list-img { width: 56px; height: 56px; }
.shop-list-name { font-size: .9rem; }
.shop-list-add { padding: 8px 16px !important; font-size: .78rem !important; }
.shop-toolbar-row { flex-wrap: wrap; }
}
@media (max-width: 480px) {
.shop-category-circles { gap: 12px; }
.shop-cat-icon { width: 50px; height: 50px; font-size: 1.3rem; }
}
/* === CERTIFICATION BADGES BAR — circular seals with side labels === */
.cert-bar {
background: #fff;
border-bottom: 1px solid rgba(0,0,0,.06);
padding: 8px 0;
}
.cert-bar-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
.cert-badge {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: .78rem;
font-weight: 800;
color: var(--green-deep);
text-transform: uppercase;
letter-spacing: .3px;
white-space: nowrap;
transition: transform .25s var(--ease);
text-decoration: none;
}
.cert-badge:hover { transform: translateY(-1px); }
.cert-badge img { height: 44px; width: 44px; display: block; flex-shrink: 0; }
.cert-divider { display: none; }
@media (max-width: 768px) {
.cert-bar { padding: 6px 10px; }
.cert-bar-inner { gap: 14px; }
.cert-badge { font-size: .68rem; gap: 7px; }
.cert-badge img { height: 36px; width: 36px; }
}
@media (max-width: 480px) {
/* keep labels — they are the whole point of the cert bar */
.cert-bar { padding: 5px 8px; }
.cert-bar-inner { gap: 8px; }
.cert-badge { font-size: .56rem; gap: 5px; letter-spacing: 0; }
.cert-badge img { height: 22px; width: 22px; }
}
/* === SOCIETY GREENS BRAND FONTS === */
/* When the client provides font files, uncomment and update these @font-face rules:
@font-face {
font-family: 'SocietyGreens';
src: url('../fonts/SocietyGreens-Heavy.woff2') format('woff2');
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: 'SocietyGreens';
src: url('../fonts/SocietyGreens-Light.woff2') format('woff2');
font-weight: 300;
font-display: swap;
}
Then update the CSS vars:
:root {
--font-display: 'SocietyGreens', 'Playfair Display', Georgia, serif;
--font-body: 'SocietyGreens', 'DM Sans', -apple-system, sans-serif;
}
h1, h2, h3, .section-title { font-weight: 700; }
body, p, li, a { font-weight: 300; }
*/
/* === FLOATING "BECOME A CUSTOMER" CTA === */
.float-cta {
position: fixed;
bottom: 28px;
left: 28px;
z-index: 900;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 22px;
border-radius: 50px;
background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 100%);
color: #fff;
font-family: var(--font-body);
font-size: .92rem;
font-weight: 700;
text-decoration: none;
box-shadow: 0 8px 24px rgba(26,60,42,.35), 0 0 0 0 rgba(64,145,108,.5);
transition: all .3s var(--ease);
animation: floatCtaPulse 3s ease-in-out infinite;
letter-spacing: .3px;
}
.float-cta:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 32px rgba(26,60,42,.45);
color: #fff;
}
.float-cta-icon {
font-size: 1.1rem;
}
@keyframes floatCtaPulse {
0%, 100% { box-shadow: 0 8px 24px rgba(26,60,42,.35), 0 0 0 0 rgba(64,145,108,.5); }
50% { box-shadow: 0 8px 24px rgba(26,60,42,.35), 0 0 0 14px rgba(64,145,108,0); }
}
/* Mobile: stays bottom-left, slightly smaller */
@media (max-width: 768px) {
.float-cta {
bottom: 84px; /* above WhatsApp button */
left: 16px;
padding: 11px 18px;
font-size: .85rem;
}
.float-cta-icon { font-size: 1rem; }
}
/* In PWA standalone mode, lift it above the bottom nav */
.pwa-standalone .float-cta {
bottom: 90px;
bottom: calc(90px + env(safe-area-inset-bottom));
}
/* Hide on register page itself */
body.page-register .float-cta { display: none; }
/* === MOBILE HEADER FIX === */
/* Show drawer-only items only inside the open drawer */
.nav-mobile-only { display: none; }
/* Make hamburger a real, larger touch target */
.hamburger {
width: 44px !important;
height: 44px !important;
border-radius: 10px;
background: var(--green-whisper) !important;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
padding: 0;
cursor: pointer;
z-index: 1001;
border: 1px solid rgba(0,0,0,.05);
transition: all .3s var(--ease);
}
.hamburger:hover {
background: var(--green-pale) !important;
}
.hamburger span {
display: block;
width: 22px !important;
height: 2.5px !important;
background: var(--green-deep) !important;
border-radius: 2px;
transition: all .3s var(--ease);
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translateY(7.5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translateY(-7.5px); }
/* Mobile breakpoint adjustments */
@media (max-width: 1024px) {
.nav-actions { gap: 6px; }
.header-inner { gap: 8px; padding: 12px 0; }
}
@media (max-width: 768px) {
/* Hide desktop-only nav items on mobile */
.nav-desktop-only { display: none !important; }
/* Hamburger appears */
.hamburger { display: flex !important; }
/* Tighter header */
.header-inner { padding: 10px 0; gap: 8px; }
.logo img { height: 38px !important; }
/* Smaller cart icon */
.nav-icon-btn { width: 38px !important; height: 38px !important; font-size: 1rem !important; }
/* PWA install button compact */
.pwa-install-btn {
width: 38px;
height: 38px;
padding: 0 !important;
justify-content: center;
border-radius: 50% !important;
}
.pwa-install-btn span { display: none; }
/* Drawer styling — full content scrollable */
.nav-links {
padding: 90px 28px 40px !important;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-links a {
font-size: 1.05rem !important;
padding: 8px 0 !important;
width: 100%;
}
/* Drawer-only items */
.nav-mobile-only {
display: flex !important;
flex-direction: column;
gap: 4px;
margin-top: 16px;
padding-top: 16px;
}
.nav-mobile-only hr {
border: none;
border-top: 1px solid rgba(0,0,0,.08);
margin: 0 0 12px;
width: 100%;
}
.nav-mobile-link {
font-size: .95rem !important;
color: var(--text-secondary) !important;
padding: 10px 0 !important;
display: flex !important;
align-items: center;
gap: 10px;
}
.nav-mobile-cta {
margin-top: 16px;
width: 100%;
padding: 14px !important;
text-align: center;
justify-content: center;
}
/* Drawer overlay backdrop */
.nav-links.open::before {
content: '';
position: fixed;
inset: 0;
background: rgba(0,0,0,.4);
z-index: -1;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
}
@media (max-width: 380px) {
.logo img { height: 34px !important; }
.nav-icon-btn, .hamburger { width: 36px !important; height: 36px !important; }
.header-inner { gap: 4px; }
}
/* === PWA INSTALL BUTTON === */
.pwa-install-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 50px;
background: linear-gradient(135deg, var(--green-bright), var(--green-mid));
color: #fff;
font-size: .82rem;
font-weight: 700;
text-decoration: none;
transition: all .3s var(--ease);
box-shadow: 0 4px 12px rgba(64,145,108,.3);
white-space: nowrap;
}
.pwa-install-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(64,145,108,.4);
}
@media (max-width: 768px) {
/* On phones the install button becomes a round icon button matching .nav-icon-btn
(cart, hamburger) — same size, same shape, no green pill blob. */
.pwa-install-btn > span:not([aria-hidden]) { display: none; }
.pwa-install-btn {
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
background: var(--green-whisper);
color: var(--green-deep);
font-size: 1.1rem;
gap: 0;
box-shadow: none;
justify-content: center;
}
.pwa-install-btn:hover { background: var(--green-pale); transform: none; box-shadow: none; }
.pwa-install-btn > span[aria-hidden] { line-height: 1; }
}
/* === PWA STANDALONE MODE (when installed as app) === */
.pwa-standalone .promo-banner,
.pwa-standalone .cookie-banner,
.pwa-standalone .whatsapp-float,
.pwa-standalone .back-to-top,
.pwa-standalone .footer,
.pwa-standalone .pwa-install-btn {
display: none !important;
}
.pwa-standalone body {
padding-bottom: 70px;
/* Respect iOS safe area */
padding-bottom: calc(70px + env(safe-area-inset-bottom));
}
.pwa-standalone .header {
/* Respect iOS notch */
padding-top: env(safe-area-inset-top);
}
/* === PWA BOTTOM NAV (visible in standalone mode only) === */
.pwa-bottom-nav {
display: none !important;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255,.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(0,0,0,.06);
padding: 8px 0;
padding-bottom: calc(8px + env(safe-area-inset-bottom));
z-index: 900;
justify-content: space-around;
box-shadow: 0 -4px 20px rgba(0,0,0,.06);
}
html.pwa-standalone .pwa-bottom-nav,
.pwa-standalone .pwa-bottom-nav {
display: flex !important;
}
.pwa-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 6px 4px;
text-decoration: none;
color: var(--text-light);
font-size: .68rem;
font-weight: 600;
transition: color .2s;
}
.pwa-nav-item.active {
color: var(--green-deep);
}
.pwa-nav-icon {
font-size: 1.4rem;
transition: transform .2s var(--ease);
}
.pwa-nav-item:hover .pwa-nav-icon,
.pwa-nav-item.active .pwa-nav-icon {
transform: translateY(-2px);
}
.pwa-nav-label {
line-height: 1;
}
/* === FALLBACK: ensure elements become visible even if JS fails === */
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-left, .reveal-right, .reveal-scale {
opacity: 1 !important;
transform: none !important;
}
}
/* === MOBILE OVERFLOW FIXES === */
@media (max-width: 768px) {
.hero-title { word-break: break-word; }
.cert-bar-inner { gap: 8px; justify-content: center; }
.cert-divider { display: none; }
.cta-card { padding: 28px 20px !important; }
.cta-card::before, .cta-card::after { display: none; }
}
/* === PRINT: keep clean === */
@media print {
.premium-only { display: none !important; }
}
/* ─────────────────────────────────────────────────────────────────────
MOBILE RESPONSIVENESS PASS (audit findings 2026-05-31)
───────────────────────────────────────────────────────────────────── */
/* Cookie banner — bump tap targets above 44px */
@media (max-width: 640px) {
.cookie-banner .btn { padding: 12px 22px !important; font-size: .95rem !important; }
.cookie-banner .cookie-decline { padding: 12px 18px !important; font-size: .92rem !important; }
/* Keep promo dismiss inline and small — was wrapping to a second line */
.promo-banner { padding: 8px 36px 8px 12px !important; font-size: .78rem !important; line-height: 1.35 !important; }
.promo-dismiss { padding: 6px 10px !important; font-size: .95rem !important; right: 6px !important; }
}
/* Footer newsletter stacks on phones */
@media (max-width: 640px) {
.footer-newsletter-form { flex-direction: column; gap: 10px; }
.footer-newsletter-form input, .footer-newsletter-form button { width: 100%; }
}
/* Trusted-by grid */
@media (max-width: 640px) {
.trusted-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; }
}
/* Page header padding cut on phones */
@media (max-width: 640px) {
.page-header { padding: 50px 0 28px !important; }
}
/* Cart drawer: more close-tap area on very small phones */
@media (max-width: 480px) {
.cart-drawer { max-width: 85vw !important; }
}
/* Hero copy reflows naturally without
s; tighten on phones */
@media (max-width: 640px) {
.hero-title { font-size: clamp(1.8rem, 9vw, 2.6rem) !important; line-height: 1.1 !important; }
.hero-text { font-size: 1rem !important; }
.hero-buttons { gap: 10px; }
.hero-buttons .btn { flex: 1 1 calc(50% - 5px); padding: 11px 16px; font-size: .88rem; }
}
/* Floating CTAs on phones — only WhatsApp stays. The "Become a Customer"
sparkle pill is redundant on mobile (it's already in the drawer menu
and the cart drawer). Back-to-top stays but smaller and out of the way. */
@media (max-width: 640px) {
.float-cta { display: none !important; }
.back-to-top { width: 40px !important; height: 40px !important; bottom: 86px !important; right: 14px !important; font-size: 1rem !important; }
.whatsapp-float { width: 50px !important; height: 50px !important; bottom: 18px !important; right: 14px !important; }
}
/* Order page: product rows stack cleanly */
@media (max-width: 640px) {
#order-form [style*="grid-template-columns:64px 1fr 120px"] {
grid-template-columns: 56px 1fr 90px !important;
gap: 10px !important;
}
#order-form input[type="number"] { font-size: 1rem; }
}
/* Community Champions form: stack columns earlier */
@media (max-width: 768px) {
.cc-form .row { grid-template-columns: 1fr !important; }
.cc-form { padding: 28px 22px !important; }
.cc-hero h1 { font-size: clamp(1.7rem, 7vw, 2.4rem) !important; }
}
/* Compare page selector → 1 col */
@media (max-width: 768px) {
.compare-products-selector,
[style*="grid-template-columns:1fr 1fr 1fr"]:not(.cc-form .row) {
grid-template-columns: 1fr !important;
}
}
/* Dashboard tables — wrap in horizontal scroll on phones */
@media (max-width: 768px) {
#invoices table, #standing table, .dashboard-orders table {
display: block; overflow-x: auto; white-space: nowrap;
}
}
/* Admin: coupon create grid → 1-col on phones */
@media (max-width: 768px) {
body .data-card form[style*="grid-template-columns:repeat(5,1fr)"] {
grid-template-columns: 1fr !important;
}
body .data-card form[style*="grid-template-columns:repeat(5,1fr)"] button { width: 100%; }
}
/* Admin settings form rows */
@media (max-width: 640px) {
body .container .card .row { grid-template-columns: 1fr !important; }
}
/* Payment method radios — stack on phones */
@media (max-width: 480px) {
#pay-form [style*="grid-template-columns:repeat(3,1fr)"] {
grid-template-columns: 1fr !important;
}
}
/* Header inner wraps before squeezing the logo */
@media (max-width: 768px) {
.header-inner { flex-wrap: wrap; }
}
/* ──────────────────────────────────────────────────────────────────────
Product card wrap: sits above a sibling