/* ============================================================================ IMPACT archetype — replication of the "Solanly" design Reference: https://offmarketx.shop (WooCommerce/Elementor) · https://solanly.com Mood: friendly, premium, rounded wellness-commerce. Tokens from offmarketx Elementor global kit: primary #7069BC (purple), accent #F6985B (coral), teal #6DA4B0, navy #1A1A3F, light bg #F2F7F8. Type: Baloo 2 (rounded display) + Montserrat (body). Container 1140px. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Montserrat:wght@400;500;600;700&display=swap'); :root { --imp-primary: #7069BC; /* purple — brand + primary CTA */ --imp-primary-d: #5b54a6; /* hover darken */ --imp-secondary: #1A1A3F; /* navy — dark text / footer */ --imp-accent: #F6985B; /* coral — sparing highlight / savings */ --imp-teal: #6DA4B0; /* teal — sparing accent / icons */ --imp-ink: #1A1A3F; /* heading ink (navy) */ --imp-bg: #ffffff; --imp-surface: #F2F7F8; /* light section / chip bg */ --imp-periwinkle: #C9D2E3; --imp-border: #e3e7ef; --imp-muted: #5A5A5A; /* body text */ --imp-r-btn: 999px; /* pill */ --imp-r-card: 20px; --imp-r-input: 12px; --imp-shadow: 0 10px 24px rgba(26,26,63,0.08); --imp-shadow-lg: 0 18px 44px rgba(26,26,63,0.14); --imp-head: 'Baloo 2', -apple-system, system-ui, sans-serif; --imp-body: 'Montserrat', -apple-system, system-ui, sans-serif; --imp-maxw: 1140px; } /* ---- base ---- */ body, .ms-shell, .ms-wrap, .ms-main { font-family: var(--imp-body); background: var(--imp-bg); color: var(--imp-muted); -webkit-font-smoothing: antialiased; } .ms-section-title, .ms-impact-section, .ms-collection-section { background: var(--imp-bg); } /* ---- typography: rounded friendly display (Baloo 2) ---- */ h1, h2, h3, .ms-section-title, .ms-impact-title, .ms-page-title, .ms-hero-body, .ms-hero-full-content h1, .ms-card-title, .ms-footer-title, .ms-brand-name, .pdp-title, .ms-collection-tile-title { font-family: var(--imp-head); font-weight: 700; letter-spacing: -0.01em; color: var(--imp-ink); } .ms-hero-full-content h1, .ms-hero-body { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.06; font-weight: 800; } .ms-section-title, .ms-impact-title { font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.1; font-weight: 700; } .pdp-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.12; } .ms-section-kicker, .ms-kicker, .ms-impact-kicker, .ms-card-category { font-family: var(--imp-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--imp-primary); } p, .ms-impact-body, .ms-hero-sub, .ms-card-desc { font-family: var(--imp-body); color: var(--imp-muted); } .ms-kicker-light { color: rgba(255,255,255,0.92) !important; } .ms-hero-full-content .ms-kicker { color: rgba(255,255,255,0.92); } /* ---- scrolling marquee ticker (signature Solanly element) ---- */ .ms-marquee { background: var(--imp-surface); color: var(--imp-primary); overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--imp-border); font-family: var(--imp-body); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.02em; } .ms-marquee-track { display: inline-block; padding: 9px 0; animation: ms-marquee-scroll 32s linear infinite; will-change: transform; } .ms-marquee:hover .ms-marquee-track { animation-play-state: paused; } .ms-marquee-track span { padding: 0 26px; } .ms-marquee-track span::after { content: "•"; color: var(--imp-accent); margin-left: 26px; } @keyframes ms-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ms-marquee-track { animation: none; } } /* ---- header + nav ---- */ .ms-header, .ms-header-inner { background: var(--imp-bg); border-bottom: 1px solid var(--imp-border); } .ms-brand-name { font-weight: 800; letter-spacing: -0.02em; color: var(--imp-ink); } .ms-brand-tagline { color: var(--imp-muted); } .ms-nav-link { color: var(--imp-ink); font-family: var(--imp-body); font-weight: 600; } .ms-nav-link:hover { color: var(--imp-primary); } /* ---- announcement topbar ---- */ .ms-topbar, .ms-topbar-inner { background: var(--imp-secondary); color: #fff; } .ms-topbar a, .ms-topbar-phone, .ms-topbar-trust-item { color: #fff; } .ms-topbar-sep { opacity: 0.4; } /* ---- buttons: purple pill, darken on hover ---- */ .ms-button, .ms-button-primary, .ms-card-btn, .ms-cookie-accept, .ms-page-btn, .pdp-cta-primary, .pdp-sticky-cta, .pdp-sticky-bar-cta, .ms-newsletter-form button, button[type="submit"] { background: var(--imp-primary); color: #fff; border: 2px solid var(--imp-primary); border-radius: var(--imp-r-btn); padding: 14px 34px; font-family: var(--imp-body); font-weight: 700; letter-spacing: 0.02em; text-transform: none; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; } .ms-button:hover, .ms-button-primary:hover, .ms-card-btn:hover, .pdp-cta-primary:hover, .pdp-sticky-bar-cta:hover, button[type="submit"]:hover { background: var(--imp-primary-d); border-color: var(--imp-primary-d); transform: translateY(-2px); box-shadow: var(--imp-shadow); } .ms-button-ghost, .ms-button-light, .ms-pill { background: transparent; color: var(--imp-ink); border: 2px solid var(--imp-ink); border-radius: var(--imp-r-btn); font-family: var(--imp-body); font-weight: 700; } .ms-button-ghost:hover, .ms-button-light:hover, .ms-pill:hover { background: var(--imp-ink); color: #fff; } /* ---- product cards: rounded, soft shadow, lift on hover ---- */ .ms-product-card { background: var(--imp-bg); border: none; border-radius: var(--imp-r-card); box-shadow: var(--imp-shadow); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .ms-product-card:hover { transform: translateY(-5px); box-shadow: var(--imp-shadow-lg); } .ms-card-figure, .ms-card-link img { border-radius: 0; } .ms-card-title { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: var(--imp-ink); } .ms-card-price, .ms-price-main { font-family: var(--imp-head); font-weight: 700; color: var(--imp-ink); } .ms-price-compare { color: var(--imp-muted); } .ms-card-material-chip, .ms-chip { background: var(--imp-surface); color: var(--imp-primary); border-radius: var(--imp-r-btn); font-size: 0.72rem; font-weight: 600; border: none; } .ms-card-scarcity { color: #fff; font-weight: 700; } .ms-card-savings-line { color: var(--imp-accent); font-weight: 700; } .ms-card-wishlist { color: var(--imp-ink); } /* ---- collection tiles ---- */ .ms-collection-tile, .ms-sub-collection-card { border-radius: var(--imp-r-card); overflow: hidden; box-shadow: var(--imp-shadow); } .ms-collection-tile-overlay { background: linear-gradient(180deg, transparent 38%, rgba(26,26,63,0.62)); } .ms-collection-tile-title { color: #fff; font-weight: 700; letter-spacing: -0.01em; } /* ---- hero: full-bleed image, centered white headline ---- */ .ms-hero-full { border-radius: 0; min-height: 74vh; display: flex; align-items: center; justify-content: center; text-align: center; background-size: cover; background-position: center; } .ms-hero-full-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,63,0.34), rgba(26,26,63,0.46)); } .ms-hero-full-content { position: relative; z-index: 2; text-align: center; margin: 0 auto; max-width: 760px; } .ms-hero-full-content h1, .ms-hero-body { color: #fff; text-shadow: 0 2px 18px rgba(26,26,63,0.4); } .ms-hero-sub, .ms-hero-full-content p { color: rgba(255,255,255,0.94); font-size: clamp(1rem,1.4vw,1.18rem); } .ms-hero-actions { justify-content: center; display: flex; } .ms-hero-actions .ms-button-primary { box-shadow: var(--imp-shadow-lg); } /* ---- alternating section backgrounds ---- */ .ms-impact-section { background: var(--imp-surface); text-align: center; padding-top: 72px; padding-bottom: 72px; } .ms-impact-section .ms-impact-body { max-width: 720px; margin-left: auto; margin-right: auto; } .ms-collection-section { padding-top: 72px; padding-bottom: 24px; } /* ---- trust + payment strips ---- */ .ms-trust-strip { background: var(--imp-surface); border-top: 1px solid var(--imp-border); border-bottom: 1px solid var(--imp-border); } .ms-trust-label { color: var(--imp-ink); font-family: var(--imp-head); font-weight: 700; } .ms-trust-body, .ms-trust-icon { color: var(--imp-muted); } .ms-trust-icon { color: var(--imp-primary); } .ms-payment-strip { color: var(--imp-muted); } /* ---- newsletter ---- */ .ms-newsletter-band { background: var(--imp-primary); color: #fff; } .ms-newsletter-band h2, .ms-newsletter-band .ms-section-title { color: #fff; } .ms-newsletter-band .ms-button, .ms-newsletter-band button[type="submit"] { background: var(--imp-accent); border-color: var(--imp-accent); } .ms-newsletter-band .ms-button:hover, .ms-newsletter-band button[type="submit"]:hover { background: #e8854a; border-color: #e8854a; } /* ---- footer: navy anchor ---- */ .ms-footer, .ms-footer-inner { background: var(--imp-secondary); color: #fff; } .ms-footer-title { color: #fff; } .ms-footer a, .ms-footer-trust, .ms-footer-bottom { color: rgba(255,255,255,0.82); } .ms-footer a:hover { color: #fff; } /* ---- inputs ---- */ input, textarea, select, .ms-sort-select, .ms-newsletter-form input { border-radius: var(--imp-r-input); border: 1px solid var(--imp-border); font-family: var(--imp-body); } input:focus, textarea:focus, select:focus { outline: 2px solid var(--imp-primary); outline-offset: 1px; border-color: var(--imp-primary); } /* ---- PDP ---- */ .pdp-price-main { font-family: var(--imp-head); font-weight: 700; color: var(--imp-ink); } .pdp-badge, .pdp-badge-savings { background: var(--imp-accent); color: #fff; border-radius: var(--imp-r-btn); font-weight: 700; } .pdp-badge-stock { background: rgba(112,105,188,0.12); color: var(--imp-primary-d); border-radius: var(--imp-r-btn); font-weight: 700; } .pdp-badge-oos { background: var(--imp-surface); color: var(--imp-muted); border-radius: var(--imp-r-btn); } .pdp-swatch, .pdp-variant-pill { border-radius: var(--imp-r-input); border: 2px solid var(--imp-border); font-family: var(--imp-body); font-weight: 600; } .pdp-variant-pill:hover { border-color: var(--imp-primary); } .pdp-sticky-bar { background: var(--imp-bg); box-shadow: 0 -8px 18px rgba(26,26,63,0.08); border-top: 1px solid var(--imp-border); } .pdp-buybox { border-radius: var(--imp-r-card); } .pdp-benefit-card { background: var(--imp-surface); border-radius: var(--imp-r-card); border: none; } .pdp-benefit-icon { color: var(--imp-primary); } .pdp-trust-grid, .pdp-trust-item { color: var(--imp-muted); } .pdp-trust-icon { color: var(--imp-primary); } .pdp-specs-table { border-radius: var(--imp-r-input); overflow: hidden; } .pdp-features-strip, .pdp-atc-trust-strip { color: var(--imp-muted); } /* ============================================================================ LAYOUT FIDELITY — Solanly proportions: 1140px page width, 4-up grid, square card media, ~56/44 PDP split, sticky header. ============================================================================ */ .ms-header-inner, .ms-footer-inner, .ms-topbar-inner, .ms-section-head, .ms-product-grid, .ms-collection-tiles, .ms-hero-full-content, .ms-newsletter-inner, .ms-impact-section, .ms-marquee-inner { max-width: var(--imp-maxw); margin-left: auto; margin-right: auto; } .ms-header { position: sticky; top: 0; z-index: 50; } .ms-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; } @media (max-width: 1100px) { .ms-product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 760px) { .ms-product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } } .ms-product-card { position: relative; text-align: left; display: flex; flex-direction: column; } .ms-card-figure { position: relative; aspect-ratio: 1 / 1; overflow: hidden; } .ms-card-figure img, .ms-card-link img { width: 100%; height: 100%; object-fit: cover; display: block; } .ms-card-scarcity { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--imp-accent); color:#fff; padding: 4px 11px; border-radius: var(--imp-r-btn); font-size: .66rem; letter-spacing: .04em; } .ms-card-wishlist { position: absolute; top: 10px; right: 10px; z-index: 2; } .ms-collection-tiles, .ms-sub-collections-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; } @media (max-width: 760px) { .ms-collection-tiles, .ms-sub-collections-grid { grid-template-columns: 1fr 1fr; gap: 14px; } } .ms-collection-tile, .ms-sub-collection-card { aspect-ratio: 4 / 5; } .pdp-layout { display: grid; grid-template-columns: minmax(0,1.14fr) minmax(0,0.86fr); gap: 48px; align-items: start; } @media (max-width: 900px) { .pdp-layout { grid-template-columns: 1fr; gap: 24px; } } .pdp-buybox { position: sticky; top: 88px; } @media (max-width: 900px) { .pdp-buybox { position: static; } } .pdp-gallery img, .pdp-main-img-wrap img { border-radius: var(--imp-r-card); } .ms-footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 32px; } @media (max-width: 820px) { .ms-footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; } } /* ============================================================================ PASS 2 — fixes from visual re-audit vs offmarketx.shop reference ============================================================================ */ /* Hide the navy announcement topbar for impact: the scrolling marquee replaces it (Solanly has no navy bar) and it avoids the German trust-string locale leak. */ .ms-topbar { display: none !important; } /* Logo: the mark image renders nearly invisible (light) on the white header. Use a clean Baloo-2 wordmark instead (matches Solanly's text logo). */ .ms-brand-mark { display: none; } .ms-brand-name { font-size: 1.5rem; font-weight: 800; color: var(--imp-secondary); letter-spacing: -0.02em; } /* Pills (header "Shop", section "View all") → purple outline, fills on hover. */ .ms-pill { background: transparent; color: var(--imp-primary); border: 2px solid var(--imp-primary); } .ms-pill:hover { background: var(--imp-primary); color: #fff; border-color: var(--imp-primary); } /* Cookie consent banner → navy + purple/coral (its base