/* ============================================================ hemp-background.css Sets hempPaper.png as a fixed full-page background texture. All content scrolls over it. White section wrappers are made transparent so the texture shows through everywhere. ============================================================ */ /* ── 1. Fixed paper texture on and ─────────────── */ html { background: url('../images/hempPaper.png') no-repeat fixed center center; background-size: cover; /* stretch to fill entire viewport */ } body { background: transparent !important; } /* ── 2. Main content wrappers → transparent ───────────────────── */ /* style.css sets .main-content to bg-main.jpg — override it */ .main-content, .main-content-st2, .main-content-wrapper { background: transparent !important; background-image: none !important; } /* ── 3. Page-level section wrappers → transparent ─────────────── */ /* These are the wide full-width bands that often carry #fff */ .section-padding, .section-pt, .section-pb, .page-content, .page-wrapper, .st2-wrapper, .container-fluid { background: transparent !important; } /* ── 4. Shop / product list page ──────────────────────────────── */ .list-shop-page, .list-shop-full-width, .shop-content, .shop-layout, .product-list-wrapper, .sidebar-wrapper { background: transparent !important; } /* The grey filter/sort bar on shop pages — make semi-transparent */ .shoppage-fullwidth { background: rgba(236, 239, 230, 0.88) !important; } /* Shop page product grid area — transparent so texture shows */ .shoppage-fullwidth-box, .popular-product.product-shoppage-fullwidth { background: transparent !important; } /* ── 5. Blog page ─────────────────────────────────────────────── */ .blog-page, .blog-wrapper, .blog-content, .blog-list-wrapper { background: transparent !important; } /* Blog section wrapper on homepage — solid #f4f4f4 in style.css → transparent */ .blog-post-wrapper-st2, .blog-post-wrapper { background: transparent !important; } /* "Blog posts" intro label strip — #f4f4f4 → transparent */ .blog-post .box-title .blog-post-intro .blog-post-des-st2 { background: transparent !important; } /* Alternating grey card bg on blog list → transparent */ .blog-post .blog-post-list .blog-post-item-bg3 { background: transparent !important; } /* ── 6. Contact / About page ──────────────────────────────────── */ .contact-page, .about-page { background: transparent !important; } /* ── 7. Individual product cards — keep their white bg ────────── */ /* Cards should stay white/near-white so they pop off the texture */ .box-item, .product-card, .card, .blog-card, .blog-post-card { background: #ffffff !important; } /* ── 8a. Top bar links — white to match the green bar text ───────── */ .header-topbar a, .header-topbar a:visited, .header-topbar a:hover { color: #ffffff !important; text-decoration: none; } .header-topbar a:hover { text-decoration: underline; } /* ── 8. Header — green bar stays solid, white nav bar transparent ── */ /* Top bar (green strip) — keep solid, no change */ .header-topbar { /* solid #748a53 from style.css — leave as-is */ } /* Logo / nav bar — white → semi-transparent */ .header-bottom-st2-wrapper { background: rgba(255, 255, 255, 0.55) !important; } .header-bottom { background: transparent !important; } /* ── 9. Mini-cart and mobile menu — keep solid ────────────────── */ .hamadryad-minicart, .box-mobile-menu { background: #ffffff; } /* ── 10. Footer — keep its own dark background ─────────────────── */ .footer-wrapper-st2, .footer-st2, .footer-content-st2, .footer-info { /* footer already has its own background from style.css — leave it */ } /* ── 11. Product detail page ──────────────────────────────────── */ .product-detail-v4, .product-detail-page, .product-quick-view, .product-quick-view-box { background: transparent !important; } /* The quick-view modal inner box needs to stay white */ .product-quick-view-box-inner, .product-detail-v1 { background: #ffffff !important; } /* ── 12. Section blocks that are intentionally white ──────────── */ /* Give slightly translucent white so texture is barely visible underneath */ section.popular-products, section.new-arrivals, section.featured-section, section.blog-section, .section-block, .st2-section-block { background: rgba(255, 255, 255, 0.82) !important; } /* ── 13. Breadcrumb bars ──────────────────────────────────────── */ .breadcrumb-section, .breadcrumb-wrapper, .page-breadcrumb { background: rgba(244, 246, 240, 0.85) !important; } /* ── 14. Sidebar widgets ──────────────────────────────────────── */ .sidebar, .widget, .widget-block, .st2-sidebar { background: rgba(255, 255, 255, 0.88) !important; border-radius: 6px; } /* ── 15. Search / filter bars ─────────────────────────────────── */ .shop-filter-bar, .product-filter, .filter-wrapper { background: rgba(255, 255, 255, 0.88) !important; border-radius: 6px; } /* ── 16. Cart, Checkout, Account, Wishlist page cards ─────────── */ .cart-page-wrapper, .checkout-card, .order-summary-card, .account-card, .account-section, #resultsArea .order-card, .wish-card { background: #ffffff !important; } /* The account section has a tinted bg — make it transparent */ .account-section { background: transparent !important; } /* ── 17. Slide / hero section — keep images visible ───────────── */ .slide-page2, .slide-wrapper, .slide-bg { background: transparent !important; } /* ── 17b. Banner pages override — restore background image ─────── */ /* .banner-title-header is on the same element as .slide-wrapper so */ /* the combined selector beats the transparent rule above. */ .slide-wrapper.banner-title-header { background: url("../images/banner.jpg") no-repeat center center !important; background-size: cover !important; } /* ── 18. Quick-view overlay ───────────────────────────────────── */ .product-quick-view-overlay, .minicart-bg-overlay { background: rgba(0, 0, 0, 0.55) !important; } /* ── 19. Forms and inputs — keep white ────────────────────────── */ input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="password"], textarea, select { background: #ffffff !important; } /* ── 20. Tables in cart ───────────────────────────────────────── */ .cart-table-wrapper, table.cart-table { background: rgba(255, 255, 255, 0.92) !important; border-radius: 8px; overflow: hidden; }