/* ============================================================ STHERB — Essential Breast Care Landing (Redesign) Scoped to template-essential-breast-care-redesign.php Per explicit user decision 2026-07-10, this page follows the mockup's own full "sage + gold" base palette (not just an accent swap like every other redesigned page). To keep that repaint from leaking into the shared header/footer/utility bar/cart drawer (which must keep the site's standard blue --accent), every custom property AND every component override below is scoped under `.sr-ec-scope` — a wrapper div around this page's own content only, placed between the shared header and footer in the template (NOT on or `.stherb-redesign-home`, which the header/footer are also inside). ============================================================ */ .sr-ec-scope { --bg: #F5F6F0; --surface: #FFFFFF; --soft: #E4EAD9; --ink: #20241E; --muted: #6E7568; --border: #E2E6D6; --dark: #1B2119; --sage: #4B6B4E; --sage-h: #3A5539; --sage-soft: #E3ECE1; --gold: #B08A4A; --gold-soft: #F3E9D3; background: var(--bg); color: var(--ink); } .sr-ec-scope .sr-kicker { color: var(--sage); } .sr-ec-scope .sr-ec-accent-italic { font-style: italic; color: var(--sage); } .sr-ec-scope .sr-section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; } .sr-ec-scope .sr-ec-section-sub { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin-top: 10px; } .sr-ec-scope .sr-btn-fill { background: var(--sage); } .sr-ec-scope .sr-btn-fill:hover { background: var(--sage-h); opacity: 1; } .sr-ec-scope .sr-btn-outline { border-color: var(--sage); color: var(--sage); } .sr-ec-scope .sr-btn-outline:hover { background: var(--sage); color: #fff; } /* ---------- Hero ---------- */ .sr-ec-hero { padding: 56px 0 48px; background: linear-gradient(160deg, var(--sage-soft) 0%, var(--bg) 62%); } .sr-ec-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .sr-ec-hero-copy h1 { font-size: 46px; margin: 18px 0 20px; line-height: 1.15; } .sr-ec-hero-body { font-size: 16.5px; line-height: 1.65; color: var(--muted); max-width: 460px; margin-bottom: 30px; } .sr-ec-hero-media { position: relative; } .sr-ec-hero-media-frame { border-radius: 28px; overflow: hidden; aspect-ratio: 6 / 7; background: var(--sage-soft); display: flex; align-items: center; justify-content: center; } .sr-ec-hero-media-icon { width: 96px; height: 96px; color: var(--sage); opacity: 0.35; } .sr-ec-scope .sr-hero-badge, .sr-ec-scope .sr-hero-rating { position: absolute; } .sr-ec-scope .sr-hero-badge { top: 28px; right: -18px; } .sr-ec-scope .sr-hero-rating { bottom: 28px; left: -18px; } .sr-ec-scope .sr-hero-badge-icon { background: var(--sage-soft); color: var(--sage); } @media (max-width: 900px) { .sr-ec-hero-grid { grid-template-columns: 1fr; gap: 32px; } .sr-ec-hero-copy h1 { font-size: 34px; } } /* ---------- Our Essential Care (Philosophy) ---------- */ .sr-ec-philosophy { background: var(--surface); } .sr-ec-philosophy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .sr-ec-philosophy-copy h2 { font-size: 34px; margin: 8px 0 18px; } .sr-ec-philosophy-copy > p { font-size: 14.5px; color: var(--muted); line-height: 1.7; margin: 0 0 14px; } .sr-ec-philosophy-copy strong { color: var(--ink); } .sr-ec-philosophy-checks { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; } .sr-ec-philosophy-check { display: flex; gap: 14px; align-items: flex-start; } .sr-ec-philosophy-check h3 { font-size: 15px; margin: 0 0 2px; } .sr-ec-philosophy-check p { font-size: 13px; color: var(--muted); margin: 0; } .sr-ec-philosophy-media { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--soft); } .sr-ec-philosophy-media img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 900px) { .sr-ec-philosophy-grid { grid-template-columns: 1fr; gap: 28px; } } /* ---------- Shared icon badge (reused across sections) ---------- */ .sr-ec-scope .sr-ec-icon { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--sage-soft); color: var(--sage); display: flex; align-items: center; justify-content: center; } .sr-ec-scope .sr-ec-icon svg { width: 20px; height: 20px; } /* ---------- How Does It Work (Science) ---------- */ .sr-ec-science { background: var(--soft); } .sr-ec-science-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .sr-ec-science-card { background: var(--surface); border-radius: 18px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; } .sr-ec-science-card .sr-ec-icon { width: 44px; height: 44px; margin-bottom: 4px; } .sr-ec-science-card h3 { font-size: 16px; margin: 0; } .sr-ec-science-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; } @media (max-width: 900px) { .sr-ec-science-grid { grid-template-columns: 1fr; } } /* ---------- Benefits (Why Choose Us) ---------- */ .sr-ec-benefits { background: var(--bg); } .sr-ec-trust-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 18px; } .sr-ec-trust-tags span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink); } .sr-ec-trust-tags svg { width: 14px; height: 14px; color: var(--sage); } .sr-ec-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; } .sr-ec-benefit-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 30px 24px; display: flex; flex-direction: column; gap: 8px; } .sr-ec-benefit-card .sr-ec-icon { margin-bottom: 4px; } .sr-ec-benefit-card h3 { font-weight: 800; font-size: 15.5px; color: var(--ink); margin: 0; } .sr-ec-benefit-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; } @media (max-width: 900px) { .sr-ec-benefits-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .sr-ec-benefits-grid { grid-template-columns: 1fr; } } /* ---------- Daily Ritual ---------- */ .sr-ec-ritual { background: var(--soft); } .sr-ec-ritual-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; } .sr-ec-ritual-step { background: var(--surface); border-radius: 18px; padding: 30px 22px 24px; text-align: center; display: flex; flex-direction: column; gap: 4px; } .sr-ec-ritual-num { width: 34px; height: 34px; border-radius: 50%; background: var(--sage); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 auto 12px; } .sr-ec-ritual-step h3 { font-size: 17px; margin: 0; } .sr-ec-ritual-label { font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sage); font-weight: 700; margin: 4px 0; } .sr-ec-ritual-step p { font-size: 13px; color: var(--muted); margin: 0; } @media (max-width: 800px) { .sr-ec-ritual-steps { grid-template-columns: 1fr; } } .sr-ec-ritual-extra { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border-radius: 16px; padding: 20px 24px; margin-top: 20px; } .sr-ec-ritual-extra strong { display: block; font-size: 14.5px; margin-bottom: 4px; } .sr-ec-ritual-extra p { font-size: 13px; color: var(--muted); margin: 0; } .sr-ec-ritual-tip { display: flex; gap: 10px; align-items: center; background: var(--ink); color: #fff; border-radius: 14px; padding: 16px 22px; margin-top: 14px; font-size: 13px; } .sr-ec-ritual-tip svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold); } .sr-ec-ritual-tip strong { color: var(--gold); } /* ---------- Trust strip ---------- */ .sr-ec-trust-strip { background: var(--dark); padding: 20px 0; } .sr-ec-trust-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .sr-ec-trust-item { display: flex; align-items: center; gap: 10px; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; } .sr-ec-trust-item .sr-ec-icon { width: 30px; height: 30px; background: rgba(255,255,255,0.1); color: var(--gold); } .sr-ec-trust-item .sr-ec-icon svg { width: 16px; height: 16px; } @media (max-width: 800px) { .sr-ec-trust-strip-grid { grid-template-columns: repeat(2, 1fr); } } /* ---------- Products (reuses shared .sr-products-grid / .sr-product-card) ---------- */ .sr-ec-products { background: var(--surface); } .sr-ec-scope .sr-ec-products .sr-product-cat, .sr-ec-scope .sr-ec-products .sr-product-price ins { color: var(--sage); } .sr-ec-scope .sr-ec-products .sr-product-tag { background: var(--gold); } .sr-ec-scope .sr-ec-products .sr-add-btn { background: var(--sage); } /* ---------- Testimonials (reuses shared .sr-testi-* markup) ---------- */ .sr-ec-scope .sr-testimonials { background: var(--bg); } .sr-ec-scope .sr-testimonials .sr-quote-mark, .sr-ec-scope .sr-testimonials .sr-testi-avatar { color: var(--sage); } .sr-ec-scope .sr-testimonials .sr-testi-avatar { background: var(--sage-soft); } .sr-ec-scope .sr-testimonials .sr-dot.sr-active { background: var(--sage); } .sr-ec-stats-row { display: flex; justify-content: center; gap: 56px; margin-top: 40px; text-align: center; flex-wrap: wrap; } .sr-ec-stat .sr-stat-num { display: block; font-family: 'Cormorant', Georgia, serif; font-size: 34px; font-weight: 700; color: var(--sage); line-height: 1.1; } .sr-ec-stat .sr-stat-label { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } /* ---------- FAQ ---------- */ .sr-ec-faq { background: var(--soft); } .sr-ec-faq-grid { display: flex; flex-direction: column; gap: 14px; max-width: 820px; margin: 0 auto; } .sr-ec-faq-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 26px; } .sr-ec-faq-card h3 { font-size: 15.5px; font-weight: 800; margin-bottom: 6px; color: var(--ink); } .sr-ec-faq-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; } /* ---------- CTA banner ---------- */ .sr-ec-cta { background: var(--sage-soft); padding: 56px 0; text-align: center; } .sr-ec-cta h2 { font-size: 28px; margin-bottom: 20px; color: var(--ink); } /* ---------- Disclaimer ---------- */ .sr-ec-disclaimer { background: var(--dark); padding: 22px 0; } .sr-ec-disclaimer p { color: rgba(255,255,255,0.7); font-size: 12px; line-height: 1.6; margin: 0; } @media (max-width: 640px) { .sr-ec-hero { padding: 40px 0 36px; } .sr-ec-science-card, .sr-ec-benefit-card, .sr-ec-faq-card { padding: 22px 18px; } .sr-ec-ritual-step { padding: 24px 18px 20px; } .sr-ec-stats-row { gap: 32px; } }