/** Shopify CDN: Minification failed Line 111:4 Unexpected "}" Line 340:154 Unexpected "}" **/ /* ===== NAPHCLEAN MODERN UI FIX ===== */ /* Import Fonts */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Inter:wght@400;500&display=swap'); /* Reset improvements */ body { font-family: 'Inter', sans-serif; color: #111111; background-color: #ffffff; line-height: 1.6; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; color: #111111; font-weight: 600; } /* Paragraph */ p { color: #555555; } /* Links */ a { color: #0FA958; text-decoration: none; transition: 0.3s ease; } a:hover { color: #0c7f42; } /* Buttons */ .btn { background-color: #0FA958; color: #ffffff; border-radius: 8px; font-family: 'Inter', sans-serif; font-weight: 500; text-transform: none; padding: 12px 20px; border: none; } .btn:hover { background-color: #0c7f42; } /* Product Titles */ .grid-view-item__title, .product-single__title { color: #111111; } /* Prices */ .product-price__price { color: #0FA958; font-weight: 600; } /* Sections spacing */ .section-header { margin-bottom: 40px; } /* Improve layout spacing */ .page-width { max-width: 1200px; margin: auto; } /* Cards */ .grid-view-item { border-radius: 10px; transition: 0.3s ease; } .grid-view-item:hover { transform: translateY(-3px); } /* ===== PRODUCT PAGE - Remove green background, use clean white ===== */ .product-description-product-template { background: #ffffff !important; background-color: #ffffff !important; } /* ===== PRODUCT PAGE - Sticky add-to-cart bar ===== */ #addtocart-sticky { background: #0A2540 !important; background-color: #0A2540 !important; } /* ===== PRODUCT PAGE - Title and price colors on white background ===== */ .product-description-product-template .product-meta-block .product-title { color: #0A2540 !important; } .product-description-product-template .product-price, .product-description-product-template .product-price .price-list { color: #111111 !important; } } /* ===== PRODUCT PAGE - Sticky bar ===== */ .sticky-bar { background: #0A2540 !important; background-color: #0A2540 !important; } /* ===== PRODUCT PAGE - Social share icon color ===== */ .share-facebook .fa, .share-twitter .fa, .share-pinterest .fa, .share-google .fa { color: #ffffff !important;} /* ================================================ FOOTER - Compact layout & multi-column fix ================================================ */ /* 1. Fix columns stacking vertically — force row layout */ body .site-footer .site-footer__top .dt-sc-flex-space-between { flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 0 20px !important;} /* Hide empty clearfix divs that break flex row */ .site-footer__top .footer__clear { display: none !important;} /* 2. Reduce top section padding */ .site-footer__top { padding-top: 36px !important; padding-bottom: 28px !important;} /* 3. Logo column — set width, trim space below */ .footer__item--nc-footer-logo { flex: 0 0 27% !important; max-width: 27% !important; padding-bottom: 16px !important; margin-bottom: 0 !important;} /* 4. Quick Links + Customer Service columns */ .footer__item--nc-footer-quicklinks, .footer__item--nc-footer-service { flex: 0 0 20% !important; max-width: 20% !important; padding-left: 16px !important; padding-bottom: 16px !important; margin-bottom: 0 !important;} /* 5. Contact column */ .footer__item--nc-footer-contact { flex: 0 0 25% !important; max-width: 25% !important; padding-left: 16px !important; padding-bottom: 16px !important; margin-bottom: 0 !important;} /* 6. Footer section titles */ footer .footer__title { margin-bottom: 10px !important; padding-bottom: 6px !important; font-size: 11px !important;} /* 7. Footer nav link spacing */footer .footer-links { margin-top: 0 !important; } footer .footer_menu.dt-sc-list li { margin-bottom: 5px !important;} /* 8. Contact info list spacing */ footer ul.contact-info li { margin-bottom: 5px !important; line-height: 1.4 !important;} /* 9. Logo image — keep compact */ .footer__item--nc-footer-logo img { max-height: 80px !important; width: auto !important;} /* 10. Logo anchor spacing */ .footer__item--nc-footer-logo .text-start > a:first-child { display: block !important; margin-bottom: 12px !important;} /* 11. Tagline paragraph spacing */ .footer__item--nc-footer-logo .text-start > p { margin-bottom: 10px !important; line-height: 1.5 !important; font-size: 12px !important;} /* 12. Shop Now button — smaller, less margin */ .footer__item--nc-footer-logo .dt-sc-btn { margin-bottom: 12px !important; padding: 8px 18px !important; font-size: 12px !important;} /* 13. Newsletter strip — tighter padding */ footer .full-width-newsletter { padding-top: 20px !important; padding-bottom: 20px !important;} /* 14. Footer bottom bar — reduce oversized padding */ .site-footer__bottom { padding-top: 12px !important; padding-bottom: 12px !important;} .site-footer__bottom .dt-sc-flex-space-between { padding-top: 0 !important; padding-bottom: 0 !important; align-items: center !important;} /* 15. Copyright text — tighten height */ .site-footer__bottom .footer__copyright { line-height: 1.4 !important; font-size: 12px !important;} /* 16. Footer link hover — keep navy theme */ footer .footer_menu a:hover, footer .contact-info a:hover { color: #ffffff !important;} /* ===== CONTACT PAGE - Fix dark text on dark backgrounds ===== */ .dt-sc-section-wrapper.dt-sc-overlay h4, .dt-sc-section-wrapper.dt-sc-overlay h5 { color: #ffffff !important; } /* ================================================================ FULL SITE AUDIT FIXES ================================================================ */ /* 1. TRUST STRIP - white background instead of green tint */ .nc-trust-strip { background-color: #ffffff !important; border-bottom: 1px solid #e8ecf0 !important; } .nc-trust-strip .nc-trust-item { color: #0A2540 !important; } /* 2. PRODUCT PAGE - Quantity label */ p.product-label { background-color: #0A2540 !important; color: #ffffff !important; border-radius: 3px !important; font-weight: 600 !important; } /* 3. PRODUCT PAGE - Accordion buttons */ .dt-sc-accordion-btn { background-color: #f1f5f9 !important; color: #0A2540 !important; border: 1px solid #dde3ea !important; } .dt-sc-accordion-btn:hover { background-color: #0A2540 !important; color: #ffffff !important; } .dt-sc-accordion-content { background-color: #ffffff !important; border: 1px solid #dde3ea !important; border-top: none !important; color: #374151 !important; } /* 4. PRODUCT PAGE - Recently Viewed section */ .recently-viewed-products { background-color: #0A2540 !important; } .recently-viewed-products h2, .recently-viewed-products h3, .recently-viewed-products h4, .recently-viewed-products .title { color: #ffffff !important; } .recently-viewed-products .product-title a, .recently-viewed-products .product-name a { color: #e2e8f0 !important; } .recently-viewed-products .price, .recently-viewed-products .product-price { color: #94d3a2 !important; } /* 5. HOMEPAGE - Reduce oversized section padding */ .template-index .dt-sc-section-wrapper { padding-top: 60px !important; padding-bottom: 60px !important; } /* 6. PAGE HEADER BANNER - reduce oversized padding */ .page-header { padding-top: 28px !important; padding-bottom: 28px !important; } .page-header h1, .page-header .page-title { color: #0A2540 !important; } /* 7. STICKY ADD-TO-CART BAR - product title white */ #addtocart-sticky .product-title, #addtocart-sticky .product-name { color: #ffffff !important; } /* 8. PRODUCT VARIANT SELECTS */ .product-single__variants select, .variant-select, .single-option-selector { border: 1px solid #dde3ea !important; border-radius: 4px !important; color: #0A2540 !important; } /* 9. ANNOUNCEMENT BAR - stays green */ .announcement-bar, .nc-announcement-bar { background-color: #0FA958 !important; color: #ffffff !important; } .announcement-bar a, .nc-announcement-bar a { color: #ffffff !important; } /* 10. CART - tighten bottom padding */ #CartContainer { padding-bottom: 0 !important; } /* =================================================== 11. SOCIAL SHARE ICONS - force white (strengthened selectors) =================================================== */ /* Covers both .fa font-icons and inline SVGs across all known share-button class patterns */ .social-sharing .fa, .social-sharing i, .share-facebook .fa, .share-facebook i, .share-twitter .fa, .share-twitter i, .share-pinterest .fa, .share-pinterest i, .share-google .fa, .share-google i, .dt-sc-sociable a i, .dt-sc-sociable a svg, .social-sharing a i, .social-sharing a svg { color: #ffffff !important; fill: #ffffff !important; } /* Social share button backgrounds - navy so icons are visible */ .social-sharing .share-facebook, .social-sharing .share-twitter, .social-sharing .share-pinterest, .social-sharing .share-google { background-color: #0A2540 !important; border-color: #0A2540 !important; } /* =================================================== 12. TRUST STRIP - keep white on all page templates =================================================== */ .nc-trust-strip, .trust-strip, .dt-sc-trust-strip { background: #ffffff !important; } .nc-trust-strip *, .trust-strip *, .dt-sc-trust-strip * { color: #0A2540 !important; } /* =================================================== 13. FOOTER - enforce 4-column row layout site-wide =================================================== */ body .site-footer .site-footer__top .dt-sc-flex-space-between { flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; } footer .footer-links { margin-top: 0 !important; } /* =================================================== 14. CONTACT PAGE - overlay heading colour safety net =================================================== */ .dt-sc-dark-bg h1, .dt-sc-dark-bg h2, .dt-sc-dark-bg h3, .dt-sc-overlay h1, .dt-sc-overlay h2, .dt-sc-overlay h3 { color: #ffffff !important; } /* ================================================================ 15. MOBILE – Product description: compact text + Read-More clamp ================================================================ */ @media (max-width: 768px) { /* Compact font & spacing in accordion description */ .dt-sc-accordion-content-inner.rte { font-size: 14px !important; line-height: 1.5 !important; padding: 0 12px 16px !important; } .dt-sc-accordion-content-inner.rte p { font-size: 14px !important; line-height: 1.5 !important; margin: 0 0 10px !important; } .dt-sc-accordion-content-inner.rte ul, .dt-sc-accordion-content-inner.rte ol { font-size: 14px !important; line-height: 1.5 !important; padding-left: 18px !important; margin: 0 0 10px !important; } .dt-sc-accordion-content-inner.rte li { margin-bottom: 5px !important; line-height: 1.5 !important; } /* Truncation state – class added by JS */ .nc-rte-truncated { max-height: 180px; overflow: hidden; position: relative; transition: max-height 0.35s ease; } .nc-rte-truncated::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 64px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 85%); pointer-events: none; } .nc-rte-expanded { max-height: 4000px !important; overflow: visible !important; } .nc-rte-expanded::after { opacity: 0 !important; pointer-events: none !important; } /* Read-more / Show-less button */ .nc-read-more-btn { display: block; width: 100%; background: transparent; border: 1.5px solid #0A2540; color: #0A2540; padding: 7px 16px; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; margin-top: 8px; font-family: inherit; letter-spacing: 0.02em; } .nc-read-more-btn:hover { background: #0A2540; color: #ffffff; } /* Accordion button – smaller on mobile */ .dt-sc-accordion-btn { font-size: 14px !important; padding: 12px 14px !important; } /* Outer product description panel – tighter padding on mobile */ .product-description-product-template { padding-top: 20px !important; padding-bottom: 20px !important; } } } } } } } } } } } } } } /* §16 - HIDE BROKEN REVIEWER IMAGES IN TESTIMONIALS */ /* Images whose src is a Liquid template error string */ .dt-sc-testimonial-image img[src^="Liquid"] { display: none !important; } .dt-sc-testimonial-image img[src=""], .dt-sc-testimonial-image img:not([src]) { display: none !important; } /* Suppress broken-image icon and alt text via color trick */ .dt-sc-testimonial-image img { color: transparent; } /* §17 - READ MORE LINK IN PRODUCT ACCORDIONS */ .nc-accordion-readmore { display: inline-block; margin-top: 10px; color: #0A2540; font-weight: 600; text-decoration: underline; font-size: 14px; } .nc-accordion-readmore:hover { color: #0FA958; } /* §18 — Footer mobile layout fix */ @media (max-width: 768px) { body .site-footer .site-footer__top .dt-sc-flex-space-between { display: grid !important; grid-template-columns: 1fr 1fr !important; flex-direction: unset !important; flex-wrap: unset !important; gap: 20px 12px !important; padding: 24px 16px !important; } body .site-footer .site-footer__top .dt-sc-flex-space-between > * { max-width: 100% !important; min-width: 0 !important; flex: unset !important; box-sizing: border-box !important; } body .site-footer .site-footer__top .dt-sc-flex-space-between > *:first-child { grid-column: 1 / -1 !important; } body .site-footer .site-footer__top .dt-sc-flex-space-between > :nth-child(7) { grid-column: 1 / -1 !important; } .site-footer, .site-footer a, .site-footer p, .site-footer li { font-size: 13px !important; line-height: 1.6 !important; } .site-footer h4, .site-footer h5, .site-footer .widget-title { font-size: 12px !important; letter-spacing: 1px !important; margin-bottom: 8px !important; } .site-footer__bottom { flex-direction: column !important; text-align: center !important; gap: 8px !important; padding: 12px 16px !important; } } /* Mobile product title — reduce huge font on small screens */ @media (max-width: 768px) { .product-single__title, .product__title, .product-single h1, .product-detail h1, h1.product-name, h1.product-title, .product-meta-block h1 { font-size: 20px !important; line-height: 1.35 !important; word-break: break-word !important; } } /* 12. SOCIAL SHARE LINKS - broader fix targeting tags directly */ .social-sharing a, .social-sharing-icon a { color: #ffffff !important; background-color: #0A2540 !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; } .social-sharing a:hover, .social-sharing-icon a:hover { background-color: #0c7f42 !important; color: #ffffff !important; } /* Footer gap fix — hide 0-height clear divs from mobile grid */ @media (max-width: 768px) { body .site-footer .site-footer__top .dt-sc-flex-space-between .footer__clear { display: none !important; } } /* Sticky bar fix — constrain to viewport width and fix close button */ .sticky-bar { max-width: 100vw !important; width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; left: 0 !important; right: 0 !important; } .sticky-bar form, .sticky-bar .dt-sc-flex-space-between, .sticky-bar > div { max-width: 100% !important; } #sticktClose { background-color: #f5f5f5 !important; border: 1px solid #ccc !important; color: #333 !important; min-width: 32px !important; min-height: 32px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } #sticktClose::before { content: none !important; } #sticktClose::after { content: "\00D7" !important; font-size: 22px !important; line-height: 1 !important; color: #333 !important; } /* ================================================================ §19 — HOME SUPPORT BLOCK: Fix icon size + text visibility ================================================================ */ /* Fix 1 — Make icon images fill the card area properly */ .home-support-block .dt-sc-support-icon-image { padding: 0 !important; width: 110px !important; height: 110px !important; min-height: 110px !important; overflow: hidden !important; border-radius: 10px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .home-support-block .dt-sc-support-icon-image img { width: 110px !important; height: 110px !important; min-width: 110px !important; min-height: 110px !important; max-width: 110px !important; object-fit: cover !important; margin-bottom: 0 !important; display: block !important; } /* Fix 2 — Text labels: change from white to dark navy on white card */ .home-support-block .dt-sc-support-heading, .home-support-block h5.dt-sc-support-heading, .home-support-block h4.dt-sc-support-heading, .home-support-block h6.dt-sc-support-heading { color: #0a2540 !important; } .home-support-block .dt-sc-support-content p, .home-support-block .dt-sc-support-description { color: #333333 !important; }