/** * Cahill Consultants — tpl_cahillnet * instantpaypal.css | Brand skin for Instant PayPal Pro Shop (com_instantpaypal) * * HOW IT WORKS * ------------ * Set the component's "Template color variation" to BLUE in Configuration. * That theme paints every accent with #2a88dd via !important. This file is * loaded AFTER the component CSS (added in index.php after template.css), so * these identical selectors override the blue accent with the cahillnet palette. * It only re-colours accents — base layout, images and arrows stay from the * component's own theme, so nothing else is affected. * * Palette * #3D5473 slate (button / active backgrounds — strong contrast with #fff) * #2d3f57 slate-dark (button hover) * #5e88bf medium blue (text accents, prices, borders) * #723847 wine (reserved for the site's primary CTA — not used here) */ /* ---- Breadcrumbs ---- */ #default_breadcrumbs li.default_active_breadcrumb { color: #5e88bf !important; } /* ---- Category: paging & sorting ---- */ #default_cat_pages .instantpaypal_category_sort_page:hover { background-color: #3D5473 !important; } #default_cat_pages .instantpaypal_category_sort_page_active { color: #5e88bf !important; } #default_cat_sort li a.sort_selected { background: #3D5473 !important; color: #fff !important; } #default_cat_sort li a:hover { border-color: #5e88bf !important; } /* ---- Category boxes / list ---- */ #default_category_items .default_category_box_details h3.instantpaypal_category_item_price { color: #5e88bf !important; } #default_category_items .default_category_box_buy { background: #3D5473 !important; color: #fff !important; } #default_category_items .default_category_list_price h3 { color: #5e88bf !important; } #default_category_items .default_category_list_button { background: #3D5473 !important; color: #fff !important; } #default_category_items h3.default_category_item_name { color: #5e88bf !important; } /* ---- Single item: buy button, price, layout ---- */ #default_item_buy_button input.instantpaypal_item_submit { background: #3D5473 !important; } #default_item_buy_button input.instantpaypal_item_submit:hover { background: #2d3f57 !important; } #default_item_right { border-left: 1px solid #5e88bf !important; } /* ---- Item tabs ---- */ #default_tabs_holder .instantpaypal_tabs li { color: #5e88bf !important; background: #f4f3f3 !important; } #default_tabs_holder .instantpaypal_tabs li:hover { color: #5e88bf !important; } #default_tabs_holder .instantpaypal_tabs li.instantpaypal_active_tab { background: #3D5473 !important; color: #fff !important; } #default_tabs_content .instantpaypal_tab { border: 1px solid #5e88bf !important; background: #f4f3f3 !important; } /* ---- Search module ---- */ input.mod_instantpaypal_search_submit { background: #3D5473 !important; } /* ---- Home category boxes ---- */ #instantpaypal_home_categories .instantpaypal_home_categories_box { background: #3D5473 !important; } #instantpaypal_home_categories .instantpaypal_home_categories_box:hover h3.instantpaypal_home_categories_box_name { color: #5e88bf !important; } /* ---- Basket module ---- */ #mod_instantpaypal_basket a.instantpaypal_basket_checkout { background: #3D5473 !important; } #mod_instantpaypal_basket a.instantpaypal_basket_checkout:after { background: #3D5473 !important; } /* ---- Checkout buttons ---- */ #instantpaypal .instantpaypal_checkout_submit, #instantpaypal .instantpaypal_checkout_placeholder, #instantpaypal .instantpaypal_checkout_placeholder:hover { background: #3D5473 !important; } #instantpaypal .instantpaypal_checkout_submit:after, #instantpaypal .instantpaypal_checkout_placeholder:after { background: #3D5473 !important; } #checkout_steps .current a:hover, #instantpaypal .instantpaypal_checkout_submit:hover { background: #2d3f57 !important; } #checkout_steps .current a:hover:after, #instantpaypal .instantpaypal_checkout_submit:hover:after { background: #2d3f57 !important; } #instantpaypal .instantpaypal_continue_shopping { background: #3D5473 !important; } #instantpaypal .instantpaypal_continue_shopping:before { background: #3D5473 !important; } /* ---- Showcase / category / item widgets ---- */ #instantpaypal .instantpaypal_widget_category_name { color: #f4f3f3 !important; background: #3D5473 !important; } #instantpaypal .instantpaypal_widget_category_cell:hover .instantpaypal_widget_category_name { color: #fff !important; background: #3D5473 !important; } #instantpaypal .instantpaypal_widget_item_link_holder { background: #3D5473 !important; } #instantpaypal .instantpaypal_widget_item_cell:hover .instantpaypal_widget_item_link_holder, #instantpaypal .instantpaypal_widget_item_cell:hover .instantpaypal_widget_item_link { background: #3D5473 !important; } #instantpaypal .instantpaypal_widget_listitem_button { background: #3D5473 !important; color: #fff !important; } #instantpaypal .instantpaypal_widget_listitem:hover .instantpaypal_widget_listitem_button { background: #2d3f57 !important; } /* ---- Tags ---- */ #instantpaypal ul.instantpaypal_tags li { background-color: #3D5473 !important; } #instantpaypal ul.instantpaypal_tags_search_view li span.innertag { color: #5e88bf !important; background-color: #fff !important; } /* ---- Custom field radios ---- */ .instantpaypal_field.customfield input[type="radio"]:checked + span { background-color: #3D5473 !important; color: #fff !important; } /* ---- Typographic polish: inherit the site font on shop pages ---- */ #instantpaypal, .instantpaypal_item_view, #mod_instantpaypal_basket, .mod_instantpaypal_search { font-family: 'Plus Jakarta Sans', sans-serif; } /* ============================================================ Checkout / login flow on the DARK content background The shop renders over the template's dark page, so the component's default dark text (labels, headings, step nav) is invisible and its login/register buttons + current step show IPP's default blue. Recolour text to light, accents to the brand slate. Added 2026-07-18. ============================================================ */ /* Headings + field labels -> light so they read on dark */ /* Softer heading colour across the shop (2026-07-18) — not the price, which sits on a light box */ #instantpaypal h1, #instantpaypal h2:not(#default_item_price), #instantpaypal h3, #instantpaypal h4 { color: #c3ccda !important; } /* Item title: keep ALL CAPS, just ease the weight */ #instantpaypal #default_item_details h1 { font-weight: 600 !important; } /* Item subtitle: normal case, lighter */ #instantpaypal #default_item_details h2 { text-transform: none !important; font-weight: 400 !important; } #instantpaypal .instantpaypal_field label, #instantpaypal_login_view label { color: rgba(255,255,255,0.82) !important; } /* Checkout step nav (Login / Billing / Payment / Complete) */ /* Step bar: drop the stark light strip; passive steps = medium slate (readable), active stays darkest */ #checkout_steps { background: transparent !important; } #checkout_steps li a { background: #5a6b82 !important; color: rgba(255,255,255,0.92) !important; } #checkout_steps li a:after { background: #5a6b82 !important; } #checkout_steps li.current a { background: #3D5473 !important; color: #fff !important; } #checkout_steps li.current a:after { background: #3D5473 !important; } /* Login + Register buttons (were IPP default blue) */ #instantpaypal .instantpaypal_login_submit, #instantpaypal .instantpaypal_button, #instantpaypal a.instantpaypal_login_submit_registration { background: #3D5473 !important; color: #fff !important; border-color: #3D5473 !important; } #instantpaypal .instantpaypal_login_submit:hover, #instantpaypal .instantpaypal_button:hover { background: #2d3f57 !important; } /* ---- Checkout: require Terms before payment (added 2026-07-18) ---- Persistent required-marking + a red notice; the button itself is disabled via JS (pointer-events) until the boxes are ticked. */ #instantpaypal .ipp-req { color: #ff6b6b !important; font-weight: 700; } #instantpaypal .ipp-pay-msg { clear: both; color: #ff6b6b; font-weight: 700; font-size: 13px; margin: 0 0 8px; text-align: right; } #instantpaypal .ipp-tc-label--unmet, #instantpaypal .ipp-tc-label--unmet a { color: #ff6b6b !important; } /* ---- Home category widget: hide the (placeholder) thumbnail ---- Clean text tiles instead of the empty square image. Remove this block later if real category images are added. (2026-07-18) */ #instantpaypal .instantpaypal_widget_category_img { display: none !important; } #instantpaypal .instantpaypal_widget_category_name { border-radius: 6px !important; padding: 14px 12px !important; text-align: center; } /* ---- Category breadcrumb: visible on the dark background (2026-07-18) Links were black-on-dark (invisible). Make them light/clickable so the breadcrumb works as the "back to shop / parent" navigation. */ #instantpaypal #default_breadcrumbs { color: rgba(255,255,255,0.45) !important; } #instantpaypal #default_breadcrumbs li a { color: #C9DFF2 !important; text-decoration: none; } #instantpaypal #default_breadcrumbs li a:hover { color: #ffffff !important; text-decoration: underline; } /* ===== Item page: dark-theme the panels (IPP defaults assume a light page) 2026-07-18 ===== */ /* Price box: subtle dark panel + light price (was stark #f4f3f3 with black price) */ #instantpaypal #default_item_buy_price { background: rgba(255,255,255,0.05) !important; border-radius: 8px; } #instantpaypal #default_item_buy_price #default_item_price { color: #c3ccda !important; } /* Product description / body text: readable light instead of dark grey */ #instantpaypal #default_item_details p, #instantpaypal #default_item_desc, #instantpaypal #default_tabs_content .instantpaypal_tab, #instantpaypal #default_tabs_content .instantpaypal_tab * { color: rgba(255,255,255,0.78) !important; } /* Description tab panel: dark instead of stark #f4f3f3 */ #instantpaypal #default_tabs_content .instantpaypal_tab { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.14) !important; } /* Hide the empty thumbnail strip under the main image */ #instantpaypal #default_slider_thumbholder { display: none !important; } /* Tags: soften the stark white text */ #instantpaypal ul.instantpaypal_tags li, #instantpaypal ul.instantpaypal_tags li a, #instantpaypal ul.instantpaypal_tags li span { color: #dbe3ee !important; } /* ===== Basket: dark-theme the item row (was stark light; price/name were light-on-light) 2026-07-18 ===== */ #instantpaypal .instantpaypal_basket_item { background: rgba(255,255,255,0.05) !important; border-radius: 8px; } #instantpaypal h3.instantpaypal_basket_item_name a, #instantpaypal .instantpaypal_basket_item_name { color: #c3ccda !important; } /* delete / update icons are dark sprites -> invert so they show on dark */ #instantpaypal .instantpaypal_basket_item .delete, #instantpaypal .instantpaypal_basket_item .update { filter: invert(1) brightness(1.8) !important; } /* Registration field requirement hints (2026-07-18) */ #instantpaypal .ipp-field-hint { display: block; font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 4px; }