/* Branded Parcels — sitewide WooCommerce styling. Loads on every page (not just the homepage) so the shop grid, single product page, cart and checkout all match the brand instead of only the homepage looking designed. Uses WooCommerce's own stable class names, so this doesn't fight Kadence's structural CSS. */ :root{ --bp-blue:#123b8f; --bp-blue-dark:#0a2458; --bp-red:#d71920; --bp-gold:#c9a227; --bp-ink:#111827; --bp-muted:#667085; --bp-light:#f7f8fb; --bp-line:#e5e7eb; /* Brand type: Playfair Display for headlines, Open Sans for everything else. Solid system-font fallbacks are listed after each web font so the site still looks intentional (not "default browser font") in the split second before they load, and in the rare case a visitor has web fonts blocked entirely. Playfair's fallback stack is serif (Georgia) instead of sans, so that split-second swap still reads as "elegant serif heading" rather than visibly jumping styles. */ --bp-font-heading:'Playfair Display',Georgia,'Times New Roman',serif; --bp-font-body:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; /* Script accent, used only for the "Effortless" line on the Shop The Look advert card. Kept in the same Google Fonts request as the two fonts above, so it costs no extra round-trip. */ --bp-font-script:'Dancing Script','Brush Script MT',cursive; /* The deeper navy sampled from the approved advert artwork — darker and bluer than --bp-blue-dark, used for the Shop The Look card panel. */ --bp-navy-deep:#021530; } /* Sitewide typography. This intentionally overrides Kadence's own font (previous versions of this plugin matched whatever font Kadence was using via `font-family:inherit`; now that Branded Parcels has real brand fonts, every element below is pinned to them directly instead). !important is needed here for the same reason it's used elsewhere in this plugin: Kadence and WooCommerce both set font-family on specific elements, not just on , so plain inheritance alone isn't guaranteed to win. Weight is mostly flat by design: headings are 700/Bold (matching your reference photo's heavier stroke — the earlier 600/Semibold read too light next to it), body copy/nav/product names stay a plain 400. Prices and buttons are the one deliberate exception — bumped to 700!important below and in the other CSS files, matching the bold weight in your photo's buttons. The !important is required: without it, the blanket 400!important rule just above would silently win back over them regardless of selector specificity, since importance beats specificity when only one side has it. */ body,p,a,li,span,div,label,td,th,blockquote,figcaption, input,button,select,textarea,optgroup{ font-family:var(--bp-font-body)!important; font-weight:400!important; } h1,h2,h3,h4,h5,h6{ font-family:var(--bp-font-heading)!important; font-weight:700!important; } /* Product names and category tile labels are "product information" in Branded Parcels' type system, not major headings — even though they're marked up as heading tags for accessibility/SEO, they render in the body typeface at regular weight, matching prices and everything else around them. Higher specificity than the bare h1-h6 rule above, so this wins regardless of source order. */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce div.product .product_title, .bp-category-copy h3, .bp-product-info h3, .bp-trust-item h4{ font-family:var(--bp-font-body)!important; font-weight:400!important; } /* Buttons: add to cart, checkout, view cart, coupon apply, etc. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit{ background:var(--bp-red)!important; color:#fff!important; border-radius:4px; font-weight:700!important; letter-spacing:.01em; border:1px solid transparent; transition:background-color .2s ease,transform .2s ease; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover{ background:#bb131a!important; transform:translateY(-1px); } .woocommerce a.added_to_cart{color:var(--bp-blue)!important;font-weight:400} /* Prices, everywhere WooCommerce renders them */ .woocommerce .price, .woocommerce ul.products li.product .price{color:var(--bp-ink);font-weight:700!important} .woocommerce .price ins{color:var(--bp-red);text-decoration:none} .woocommerce .price del{color:var(--bp-muted);opacity:.8} /* Shop / category grid — card proportions and type scale tightened to mirror Jumia's denser product-card pattern (smaller name text, 2-line clamp, squarer image, bolder price standing out against it), while staying on the site's own Open Sans/Playfair fonts throughout — only sizes and the price weight were adjusted, not the typefaces. */ .woocommerce ul.products li.product{position:relative} .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-weight:400;color:var(--bp-ink);font-size:clamp(11.5px,2.4vw,14px); line-height:1.3;margin:8px 0 4px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .woocommerce ul.products li.product img{ border-radius:8px; aspect-ratio:1/1; object-fit:cover; transition:transform .35s ease; } .woocommerce ul.products li.product:hover img{transform:scale(1.03)} .woocommerce ul.products li.product .price{font-size:clamp(13px,2.8vw,17px)} /* Force a 2-up grid on small screens instead of Kadence/Woo's default single-column stack, which is what makes titles/prices look oversized relative to the product image on mobile. */ @media(max-width:480px){ .woocommerce ul.products{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:14px 10px!important; } .woocommerce ul.products li.product{ width:100%!important; margin:0!important; float:none!important; } } .woocommerce span.onsale{ background:var(--bp-red)!important; border-radius:2px; font-weight:400; font-size:11px; min-height:auto; line-height:1; padding:6px 8px; } /* Single product page */ .woocommerce div.product p.price, .woocommerce div.product span.price{color:var(--bp-ink);font-size:clamp(18px,4.5vw,24px);font-weight:700!important} .woocommerce div.product .product_title{color:var(--bp-blue-dark);letter-spacing:-.01em;font-size:clamp(22px,5.5vw,32px)} .woocommerce div.product form.cart .button{min-height:50px;padding:0 28px} .woocommerce nav.woocommerce-breadcrumb{color:var(--bp-muted)} .woocommerce nav.woocommerce-breadcrumb a{color:var(--bp-blue)} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--bp-red);border-color:var(--bp-red)} /* Cart & checkout */ .woocommerce table.shop_table{border-radius:8px;overflow:hidden;border-color:var(--bp-line)} .woocommerce table.shop_table th{background:var(--bp-light);color:var(--bp-blue-dark)} .woocommerce-checkout #payment{background:var(--bp-light);border-radius:8px} .woocommerce-checkout #payment div.payment_box{background:#eef1f7} .woocommerce a.remove{color:var(--bp-red)!important} /* Star ratings */ .woocommerce .star-rating span::before, .woocommerce .comment-form-rating .stars a::after{color:var(--bp-red)} /* Focus visibility, sitewide, since Kadence/browser defaults are often stripped */ .woocommerce a:focus-visible, .woocommerce button:focus-visible, .woocommerce input:focus-visible{ outline:3px solid var(--bp-blue); outline-offset:2px; } @media(prefers-reduced-motion:reduce){ .woocommerce *{transition-duration:.001ms!important;animation-duration:.001ms!important} }