/* ============================================================ STHERB — Nano Boost Landing (Redesign) Scoped to template-nano-boost-redesign.php Per explicit user decision 2026-07-10, this page keeps its OWN "nano + silver" base palette from the mockup (full base-token repaint, same pattern as Essential Care's sage+gold) rather than the Women's Care rose theme. Every custom property AND every component override below is scoped under `.sr-nb-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) so the repaint can't leak into the shared chrome (keeps the site's standard blue --accent there). ============================================================ */ .sr-nb-scope { --bg: #F2F3F8; --surface: #FFFFFF; --soft: #EAEBF6; --ink: #181A2A; --muted: #6E7288; --border: #DCDFEE; --dark: #10111C; --nano: #4B4FD1; --nano-h: #3739A6; --nano-soft: #EBEBFB; --silver: #8B8FB3; background: var(--bg); color: var(--ink); } .sr-nb-scope .sr-kicker { color: var(--nano); } .sr-nb-scope .sr-nb-accent-italic { font-style: italic; color: var(--nano); } .sr-nb-scope .sr-section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; } .sr-nb-scope .sr-nb-section-sub { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin-top: 10px; } .sr-nb-scope .sr-btn-fill { background: var(--nano); } .sr-nb-scope .sr-btn-fill:hover { background: var(--nano-h); opacity: 1; } .sr-nb-scope .sr-btn-outline { border-color: var(--nano); color: var(--nano); } .sr-nb-scope .sr-btn-outline:hover { background: var(--nano); color: #fff; } /* ---------- Shared icon badge (reused across sections) ---------- */ .sr-nb-scope .sr-nb-icon { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--nano-soft); color: var(--nano); display: flex; align-items: center; justify-content: center; } .sr-nb-scope .sr-nb-icon svg { width: 20px; height: 20px; } /* ---------- Hero ---------- */ .sr-nb-hero { padding: 56px 0 48px; background: linear-gradient(160deg, var(--nano-soft) 0%, var(--bg) 62%); } .sr-nb-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .sr-nb-hero-copy h1 { font-size: 46px; margin: 18px 0 20px; line-height: 1.15; } .sr-nb-hero-body { font-size: 16.5px; line-height: 1.65; color: var(--muted); max-width: 460px; margin-bottom: 30px; } .sr-nb-hero-stats { display: flex; gap: 28px; margin-top: 30px; } .sr-nb-hero-stats div { display: flex; flex-direction: column; } .sr-nb-hero-stats strong { font-family: 'Cormorant', Georgia, serif; font-size: 22px; color: var(--nano); line-height: 1.2; } .sr-nb-hero-stats span { font-size: 12px; color: var(--muted); } .sr-nb-hero-media { position: relative; } .sr-nb-hero-media-frame { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--nano-soft); } .sr-nb-hero-media-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 15% center; display: block; } .sr-nb-scope .sr-hero-badge, .sr-nb-scope .sr-hero-rating { position: absolute; } .sr-nb-scope .sr-hero-badge { top: 28px; right: -18px; } .sr-nb-scope .sr-hero-rating { bottom: 28px; left: -18px; } .sr-nb-scope .sr-hero-badge-icon { background: var(--nano-soft); color: var(--nano); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .sr-nb-scope .sr-hero-badge-icon svg { width: 20px; height: 20px; } @media (max-width: 900px) { .sr-nb-hero-grid { grid-template-columns: 1fr; gap: 32px; } .sr-nb-hero-copy h1 { font-size: 34px; } } /* ---------- What is Nano Boost ---------- */ .sr-nb-what-is { background: var(--surface); } .sr-nb-what-is-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .sr-nb-what-is-copy h2 { font-size: 34px; margin: 8px 0 18px; } .sr-nb-what-is-copy > p { font-size: 14.5px; color: var(--muted); line-height: 1.7; margin: 0 0 14px; } .sr-nb-what-is-copy strong { color: var(--ink); } .sr-nb-what-is-checks { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; } .sr-nb-what-is-check { display: flex; gap: 14px; align-items: flex-start; } .sr-nb-what-is-check h3 { font-size: 15px; margin: 0 0 2px; } .sr-nb-what-is-check p { font-size: 13px; color: var(--muted); margin: 0; } .sr-nb-what-is-media { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--soft); display: flex; align-items: center; justify-content: center; } .sr-nb-what-is-media-icon { width: 88px; height: 88px; color: var(--nano); opacity: 0.3; } @media (max-width: 900px) { .sr-nb-what-is-grid { grid-template-columns: 1fr; gap: 28px; } } /* ---------- Why It Has to Be Our Nano Boost ---------- */ .sr-nb-difference { background: var(--soft); } .sr-nb-difference-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .sr-nb-difference-card { background: var(--surface); border-radius: 18px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; } .sr-nb-difference-card .sr-nb-icon { width: 44px; height: 44px; margin-bottom: 4px; } .sr-nb-difference-card h3 { font-size: 15.5px; margin: 0; } .sr-nb-difference-card p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; } @media (max-width: 900px) { .sr-nb-difference-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .sr-nb-difference-grid { grid-template-columns: 1fr; } } /* ---------- How Does It Work ---------- */ .sr-nb-science { background: var(--surface); } .sr-nb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; margin-top: 36px; } .sr-nb-steps::before { content: ''; position: absolute; top: 17px; left: 16.5%; right: 16.5%; border-top: 2px dashed var(--nano); opacity: 0.4; z-index: 0; } .sr-nb-step { background: var(--soft); border-radius: 18px; padding: 40px 22px 24px; text-align: center; position: relative; } .sr-nb-step-num { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--nano); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; z-index: 1; } .sr-nb-step h3 { font-size: 17px; margin: 8px 0 6px; } .sr-nb-step p { font-size: 13px; color: var(--muted); margin: 0; } @media (max-width: 800px) { .sr-nb-steps { grid-template-columns: 1fr; } .sr-nb-steps::before { display: none; } } .sr-nb-pro-tip { display: flex; gap: 10px; align-items: center; background: var(--dark); color: #fff; border-radius: 14px; padding: 16px 22px; margin-top: 28px; font-size: 13px; } .sr-nb-pro-tip svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--silver); } .sr-nb-pro-tip strong { color: var(--silver); } /* ---------- Trust strip ---------- */ .sr-nb-trust-strip { background: var(--dark); padding: 20px 0 14px; } .sr-nb-trust-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1120px; margin: 0 auto; padding: 0 24px; } .sr-nb-trust-item { display: flex; align-items: center; gap: 10px; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; } .sr-nb-trust-item .sr-nb-icon { width: 30px; height: 30px; background: rgba(255,255,255,0.1); color: var(--silver); } .sr-nb-trust-item .sr-nb-icon svg { width: 16px; height: 16px; } .sr-nb-trust-caption { text-align: center; color: rgba(255,255,255,0.55); font-size: 12px; margin: 10px 0 0; } @media (max-width: 800px) { .sr-nb-trust-strip-grid { grid-template-columns: repeat(2, 1fr); } } /* ---------- What You Will Get ---------- */ .sr-nb-benefits { background: var(--bg); } .sr-nb-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; } .sr-nb-benefit-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 30px 24px; display: flex; flex-direction: column; gap: 8px; } .sr-nb-benefit-card .sr-nb-icon { margin-bottom: 4px; } .sr-nb-benefit-card h3 { font-weight: 800; font-size: 15.5px; color: var(--ink); margin: 0; } .sr-nb-benefit-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; } @media (max-width: 900px) { .sr-nb-benefits-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .sr-nb-benefits-grid { grid-template-columns: 1fr; } } /* ---------- Products (reuses shared .sr-products-grid / .sr-product-card) ---------- */ .sr-nb-products { background: var(--soft); } .sr-nb-scope .sr-nb-products .sr-product-cat, .sr-nb-scope .sr-nb-products .sr-product-price ins { color: var(--nano); } .sr-nb-scope .sr-nb-products .sr-product-tag { background: var(--nano); } .sr-nb-scope .sr-nb-products .sr-add-btn { background: var(--nano); } /* ---------- Testimonials (reuses shared .sr-testi-* markup) ---------- */ .sr-nb-scope .sr-testimonials { background: var(--surface); } .sr-nb-scope .sr-testimonials .sr-quote-mark, .sr-nb-scope .sr-testimonials .sr-testi-avatar { color: var(--nano); } .sr-nb-scope .sr-testimonials .sr-testi-avatar { background: var(--nano-soft); } .sr-nb-scope .sr-testimonials .sr-dot.sr-active { background: var(--nano); } /* ---------- FAQ ---------- */ .sr-nb-faq { background: var(--bg); } .sr-nb-faq-grid { display: flex; flex-direction: column; gap: 14px; max-width: 820px; margin: 0 auto; } .sr-nb-faq-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 26px; } .sr-nb-faq-card h3 { font-size: 15.5px; font-weight: 800; margin-bottom: 6px; color: var(--ink); } .sr-nb-faq-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; } /* ---------- CTA banner ---------- */ .sr-nb-cta { background: var(--nano-soft); padding: 56px 0; text-align: center; } .sr-nb-cta h2 { font-size: 28px; margin-bottom: 20px; color: var(--ink); } /* ---------- Disclaimer ---------- */ .sr-nb-disclaimer { background: var(--dark); padding: 22px 0; } .sr-nb-disclaimer p { color: rgba(255,255,255,0.7); font-size: 12px; line-height: 1.6; margin: 0; } @media (max-width: 640px) { .sr-nb-hero { padding: 40px 0 36px; } .sr-nb-difference-card, .sr-nb-benefit-card, .sr-nb-faq-card { padding: 22px 18px; } .sr-nb-step { padding: 34px 18px 20px; } .sr-nb-hero-stats { gap: 20px; } }