/* ============================================================================ B2C SITE-WIDE B2C_SITEWIDE_V1 ---------------------------------------------------------------------------- The Blue Patriot B2C design carried to every page the skin never reached. skins.css covers the home page, the header, the footer, the contact page, the policy pages, the tiles and the rows. It has never touched the product page, the breadcrumbs, the pagers, the brand index, the cart, the checkout, the login, the account pages or the articles - all of which still wore the old glass design: pill radii, IBM Plex Mono labels, blurred panels, green and red status colours. Loaded by includes/b2c-lock.php LAST in the head, after skins.css, the header lock, the Custom CSS box and everything else, so it wins on order as well as specificity. Everything is scoped to body.sk-bluepatriot; on any other skin this file is not even linked. THE RULES IT APPLIES, so a new page can follow them: two colours the primary (indigo) and the accent (lime); ink and a muted grey for text; hairlines at rgba(20,30,60,.11). No green, no red, no amber - status reads in weight and the two colours, not a third one. one typeface the page face. Nothing in IBM Plex Mono. Labels are 11px, .08em tracking, uppercase, primary, weight 800. square no radius anywhere. Every card surface carries the family's cut corner and the accent line along the cut. hover primary at rest, accent with dark ink on hover for a filled control; on an indigo surface, text goes accent. Text on white goes primary - lime on white does not read. no eyebrows, the page and section heads are the heading with the no breadcrumbs accent bar. Both are display:none, not removed from the markup, so the JSON-LD breadcrumbs still ship. The palette comes from --bp-p / --bp-a / --bp-pd / --bp-on-a, which the lock pins on as hex literals, so var() here always resolves. ============================================================================ */ /* ---------- 0. tokens the lock does not carry ---------------------------- */ body.sk-bluepatriot{ --price-new:#12181F; /* a sale price is the price, in ink - the saving is the lime chip beside it */ --price-old:#68727f; --tint:color-mix(in srgb,var(--bp-p) 6%,#fff); --b2c-line:rgba(20,30,60,.11); --b2c-line-strong:rgba(20,30,60,.2); --b2c-cut16:linear-gradient(315deg,transparent 11.31px,var(--bp-a) 11.31px,var(--bp-a) 14.31px,transparent 14.31px); } /* ---------- 1. one typeface, no eyebrows, no breadcrumbs ----------------- */ body.sk-bluepatriot .mono, body.sk-bluepatriot .crumbs, body.sk-bluepatriot .eyebrow, body.sk-bluepatriot .tile__none, body.sk-bluepatriot .tile__part, body.sk-bluepatriot .price-ask, body.sk-bluepatriot .pdp__meta, body.sk-bluepatriot .pdp__cur, body.sk-bluepatriot .pdp__save, body.sk-bluepatriot .spectable th, body.sk-bluepatriot .linetable th, body.sk-bluepatriot .linetable .mono, body.sk-bluepatriot .totals div b, body.sk-bluepatriot .ordersummary__name em, body.sk-bluepatriot .ordersummary li b, body.sk-bluepatriot .toolbar__count, body.sk-bluepatriot .pager a,body.sk-bluepatriot .pager span,body.sk-bluepatriot .pager__gap, body.sk-bluepatriot .azbar a, body.sk-bluepatriot .pill, body.sk-bluepatriot .infolist .k, body.sk-bluepatriot .dropdown__more{font-family:inherit} /* PAGEHEAD_PLAIN_V1 moved this to style.css so it holds on every skin and every site. Kept here so the rule survives if the base file is ever rolled back on a site that is on this skin. */ body.sk-bluepatriot .eyebrow, body.sk-bluepatriot .crumbs{display:none!important} /* the page head is the heading with the bar; the old eyebrow box above it and the mono breadcrumb below are gone, so the padding closes up */ body.sk-bluepatriot .pagehead{padding:30px 0 6px} body.sk-bluepatriot .pagehead + .section, body.sk-bluepatriot .pagehead + .crumbs + .section{padding-top:24px} body.sk-bluepatriot .pagehead h1{font-size:clamp(28px,3.4vw,40px)} body.sk-bluepatriot .pagehead .btn--accent{background:var(--bp-p);color:#fff;border:0;margin-top:14px} body.sk-bluepatriot .pagehead .btn--accent:hover{background:var(--bp-a);color:var(--bp-on-a)} body.sk-bluepatriot .section__head{max-width:none} body.sk-bluepatriot .section__lede{color:#68727f} body.sk-bluepatriot .tb-sechead{align-items:flex-end} /* ---------- 2. the card surfaces the skin never styled ------------------- Flat white, one hairline, square; and - because the design applies the family to every surface - the cut corner and the accent line along it. Each of these has no pseudo-element of its own in style.css. */ body.sk-bluepatriot .card, body.sk-bluepatriot .notice, body.sk-bluepatriot .empty, body.sk-bluepatriot .ordersummary, body.sk-bluepatriot .sidemenu, body.sk-bluepatriot .sidemenu__aside, body.sk-bluepatriot .tblwrap, body.sk-bluepatriot .totals, body.sk-bluepatriot .pdp__buy, body.sk-bluepatriot .gallery__main, body.sk-bluepatriot .spectable, body.sk-bluepatriot .policycard, body.sk-bluepatriot .artsingle__img{ background:#fff;border:1px solid var(--b2c-line);border-radius:0; box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} body.sk-bluepatriot.bpc-cut .card, body.sk-bluepatriot.bpc-cut .notice, body.sk-bluepatriot.bpc-cut .empty, body.sk-bluepatriot.bpc-cut .ordersummary, body.sk-bluepatriot.bpc-cut .totals, body.sk-bluepatriot.bpc-cut .pdp__buy, body.sk-bluepatriot.bpc-cut .gallery__main, body.sk-bluepatriot.bpc-cut .policycard{ position:relative; clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)} body.sk-bluepatriot.bpc-cut .card::after, body.sk-bluepatriot.bpc-cut .notice::after, body.sk-bluepatriot.bpc-cut .empty::after, body.sk-bluepatriot.bpc-cut .ordersummary::after, body.sk-bluepatriot.bpc-cut .totals::after, body.sk-bluepatriot.bpc-cut .pdp__buy::after, body.sk-bluepatriot.bpc-cut .gallery__main::after, body.sk-bluepatriot.bpc-cut .policycard::after{ content:"";position:absolute;inset:-1px;pointer-events:none;z-index:6; background-image:var(--b2c-cut16);background-repeat:no-repeat; background-origin:border-box;background-clip:border-box} /* the sticky order summary is positioned already; it keeps sticky */ body.sk-bluepatriot.bpc-cut .ordersummary{position:sticky} /* inline-styled surfaces on the product and checkout pages */ body.sk-bluepatriot .policycard{border-radius:0!important;border-color:var(--b2c-line)!important;background:#fff!important} body.sk-bluepatriot .notice{margin:20px 0;padding:15px 20px;border-left:4px solid var(--bp-p)} body.sk-bluepatriot .notice--err{border-left-color:var(--bp-p);background:var(--tint)} body.sk-bluepatriot .notice--ok{border-left-color:var(--bp-a);background:#fff} body.sk-bluepatriot .empty{padding:44px 28px;color:#68727f} body.sk-bluepatriot .empty strong{color:#12181F} body.sk-bluepatriot .empty a:not(.btn){color:var(--bp-p);font-weight:700} body.sk-bluepatriot .card h3{color:#12181F} body.sk-bluepatriot .card p{color:#68727f} /* ---------- 3. forms: the underline field, everywhere --------------------- The contact form already had it (skins.css). The checkout, the login, the cart's part-number line and the account pages still had the glass field with a 12px radius and a blue focus halo. One field now. */ body.sk-bluepatriot .field label{font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--bp-p);font-weight:800;margin-bottom:5px} body.sk-bluepatriot .field input, body.sk-bluepatriot .field select, body.sk-bluepatriot .field textarea, body.sk-bluepatriot .qtybox, body.sk-bluepatriot .toolbar select, body.sk-bluepatriot .filterbar select, body.sk-bluepatriot .filterbar input[type=number]{ border-radius:0;background:#fff;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none;color:#12181F} body.sk-bluepatriot .field input, body.sk-bluepatriot .field select, body.sk-bluepatriot .field textarea{ border:0;border-bottom:2px solid var(--b2c-line-strong);padding:9px 2px;font-size:14.5px;background:transparent} body.sk-bluepatriot .field input:focus, body.sk-bluepatriot .field select:focus, body.sk-bluepatriot .field textarea:focus{outline:0;box-shadow:none;background:transparent;border-bottom-color:var(--bp-a)} body.sk-bluepatriot .field select{cursor:pointer} body.sk-bluepatriot .qtybox, body.sk-bluepatriot .toolbar select, body.sk-bluepatriot .filterbar select, body.sk-bluepatriot .filterbar input[type=number]{border:1.5px solid var(--b2c-line-strong)} body.sk-bluepatriot .qtybox:focus, body.sk-bluepatriot .toolbar select:focus, body.sk-bluepatriot .filterbar select:focus, body.sk-bluepatriot .filterbar input[type=number]:focus{outline:0;box-shadow:none;border-color:var(--bp-p)} body.sk-bluepatriot .checkline input, body.sk-bluepatriot .filterbar__check input, body.sk-bluepatriot input[type=checkbox], body.sk-bluepatriot input[type=radio]{accent-color:var(--bp-p)} body.sk-bluepatriot .filterbar__clear:hover, body.sk-bluepatriot .linkbtn{color:var(--bp-p)} body.sk-bluepatriot .linkbtn:hover{color:var(--bp-pd);text-decoration:underline} body.sk-bluepatriot :focus-visible{outline:2.5px solid var(--bp-a);outline-offset:3px;border-radius:0} /* ---------- 4. the product page ------------------------------------------ */ /* gallery: a flat white plate with the cut; thumbnails square, the chosen one framed in primary with an accent rule beneath */ body.sk-bluepatriot .gallery__main{padding:28px;background:#fff} body.sk-bluepatriot .gallery__main img{mix-blend-mode:normal} body.sk-bluepatriot .gallery__thumbs button{ border-radius:0;background:#fff;border:1px solid var(--b2c-line);box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none;position:relative;transition:border-color .15s} body.sk-bluepatriot .gallery__thumbs button:hover{transform:none;border-color:var(--bp-p)} body.sk-bluepatriot .gallery__thumbs button.is-on{border-color:var(--bp-p);box-shadow:inset 0 -3px 0 var(--bp-a)} /* buying panel */ body.sk-bluepatriot .pdp__brand{font-size:11px;letter-spacing:.11em;font-weight:800;color:var(--bp-p);margin-bottom:10px} body.sk-bluepatriot .pdp h1{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.025em;margin-bottom:14px} body.sk-bluepatriot .pdp__meta{font-size:12.5px;color:#68727f;gap:8px} body.sk-bluepatriot .pdp__meta span{ padding:6px 11px;border-radius:0;background:#fff;border:1px solid var(--b2c-line); -webkit-backdrop-filter:none;backdrop-filter:none} body.sk-bluepatriot .pdp__meta b, body.sk-bluepatriot .stock{color:var(--bp-p)!important;font-weight:700} body.sk-bluepatriot .pdp__price{padding:18px 0 4px} body.sk-bluepatriot .pdp__price .price-new{font-size:34px;letter-spacing:-.03em} body.sk-bluepatriot .pdp__price .price-old{font-size:16px} body.sk-bluepatriot .pdp__save{ border-radius:0;background:var(--bp-a);color:var(--bp-on-a);border:0; font-size:11px;font-weight:800;letter-spacing:.04em;padding:4px 9px;margin-left:8px} body.sk-bluepatriot .pdp__cur{font-size:12px;color:#68727f;font-weight:600} body.sk-bluepatriot .pdp__buy{padding:20px;margin-top:18px;gap:12px} body.sk-bluepatriot .qty{border-radius:0;background:#fff;border:1.5px solid var(--b2c-line-strong);overflow:hidden} body.sk-bluepatriot .qty button{color:var(--bp-p);font-weight:800} body.sk-bluepatriot .qty button:hover{background:var(--bp-a);color:var(--bp-on-a)} body.sk-bluepatriot .qty input{font-weight:700} body.sk-bluepatriot .pdp__note{font-size:13px;color:#68727f} /* assurance list: the tick was a hard-coded green; the only colours here are the two. CSS outranks the SVG's own stroke attribute. */ body.sk-bluepatriot .pdp__assure li{color:#12181F!important;font-weight:500} body.sk-bluepatriot .pdp__assure svg{stroke:var(--bp-p)!important} body.sk-bluepatriot .pdp__brochure{ border-radius:0;background:#fff;color:var(--bp-p);border:1.5px solid var(--bp-p); font-weight:800;box-shadow:none;transition:background .15s,color .15s} body.sk-bluepatriot .pdp__brochure:hover{background:var(--bp-p);color:#fff;filter:none;transform:none} /* the specification tabs: the strip carries one hairline, the open tab is primary with the accent rule beneath it - the same idea as the nav's current item. The rest sit as text and go primary on hover. */ body.sk-bluepatriot .tabs{gap:0;border-bottom:1px solid var(--b2c-line);margin-bottom:0} body.sk-bluepatriot .tabs button{ border:0;border-radius:0;background:transparent;color:#68727f; font-family:inherit;font-size:13.5px;font-weight:700;line-height:1;padding:13px 20px;margin-bottom:-1px; position:relative;transition:background .15s,color .15s} body.sk-bluepatriot .tabs button:hover{background:var(--tint);color:var(--bp-p)} body.sk-bluepatriot .tabs button.is-on{ background:var(--bp-p);color:#fff;box-shadow:none;border:0; -webkit-backdrop-filter:none;backdrop-filter:none} body.sk-bluepatriot .tabs button.is-on::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--bp-a)} body.sk-bluepatriot .tabpanel{padding:0} body.sk-bluepatriot .spectable{border-top:0;font-size:14px} body.sk-bluepatriot .spectable th{ font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:800;color:var(--bp-p); background:var(--tint);border-bottom:1px solid var(--b2c-line);width:240px} body.sk-bluepatriot .spectable td{border-bottom:1px solid var(--b2c-line);color:#12181F} body.sk-bluepatriot .spectable tr:hover th, body.sk-bluepatriot .spectable tr:hover td{background:var(--tint)} body.sk-bluepatriot .spectable .specgroup th{ background:var(--bp-p);color:#fff;font-size:11.5px;letter-spacing:.08em} body.sk-bluepatriot .spectable a{color:var(--bp-p);font-weight:600} body.sk-bluepatriot .marketing-info{color:#12181F} /* related-category chips (catalog and product page) carry a 20px pill radius as an inline style */ body.sk-bluepatriot .relcats{border-top-color:var(--b2c-line)!important} body.sk-bluepatriot .relcats a{ border-radius:0!important;border:1px solid var(--b2c-line-strong)!important; color:var(--bp-p)!important;font-weight:700;transition:background .15s,color .15s,border-color .15s} body.sk-bluepatriot .relcats a:hover{background:var(--bp-p);border-color:var(--bp-p)!important;color:#fff!important} /* the section heads on the product page are bare h2s; they take the bar */ body.sk-bluepatriot section.wrap > h2{padding-left:14px;position:relative;font-size:24px;margin-bottom:16px} body.sk-bluepatriot section.wrap > h2::before{ content:"";position:absolute;left:0;top:3px;bottom:3px;width:5px;background:var(--bp-a)} /* ---------- 5. listing chrome: toolbar, filter bar, pager ----------------- */ body.sk-bluepatriot .toolbar__count{font-size:13px;color:#68727f;font-weight:500} body.sk-bluepatriot .toolbar select, body.sk-bluepatriot .filterbar select, body.sk-bluepatriot .filterbar input[type=number]{padding:8px 12px;font-size:13.5px} body.sk-bluepatriot .filterbar__check{color:#12181F} body.sk-bluepatriot .pager{gap:6px;margin-top:30px} body.sk-bluepatriot .pager a, body.sk-bluepatriot .pager span{ border-radius:0;background:#fff;border:1px solid var(--b2c-line);box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none;font-size:13px;font-weight:700;color:var(--bp-p); padding:9px 12px;transition:background .15s,color .15s,border-color .15s} body.sk-bluepatriot .pager a:hover{transform:none;background:var(--bp-a);border-color:var(--bp-a);color:var(--bp-on-a)} body.sk-bluepatriot .pager .is-on{background:var(--bp-p);border-color:var(--bp-p);color:#fff;box-shadow:none} body.sk-bluepatriot .pager__gap{border:0;background:transparent;color:#68727f} body.sk-bluepatriot .pager__step{font-family:inherit!important} /* the phone-only "Filters" toggle above the listing (inline 8px radius) */ body.sk-bluepatriot .catfilter-mobtoggle{ border-radius:0!important;border:1.5px solid var(--bp-p)!important;color:var(--bp-p); background:#fff;font-weight:800} body.sk-bluepatriot .catfilter-mobtoggle:hover, body.sk-bluepatriot .catfilter-mobtoggle[aria-expanded="true"]{background:var(--bp-p);color:#fff} /* ---------- 5b. THE FILTER, as the approved panel draws it -------------- Two filter panels exist: render_product_filter() in functions.php (.pf2, used on the product, brand, market and about pages) and the catalog page's own (#catfilter, .catfilter__*). Same look for both: a REFINE title the panel's own label, above everything group titles 'Categories' / 'Brands' in bold ink, not shouted option rows a square box, the name, the count on the right; hover tint; a chosen row is primary with white text and the box goes accent the search fields kept (this catalogue has hundreds of brands) as the underline field Clear all + Apply a muted link and a full-width primary button The box is the native checkbox with appearance:none, so the JS that reads checked state, the keyboard and screen readers all keep working. */ body.sk-bluepatriot:not(.bpc-bar) .pf2::before, body.sk-bluepatriot:not(.bpc-bar) .catfilter::before{ content:"Refine";display:block;padding:15px 16px 11px;font-size:12px;letter-spacing:.11em; text-transform:uppercase;color:var(--bp-p);font-weight:800;line-height:1;order:-1} body.sk-bluepatriot .pf2__head, body.sk-bluepatriot .catfilter__head{border-top:1px solid var(--b2c-line)!important;border-bottom:0;padding:13px 16px 8px} /* the group titles. catalog.php prints its own