/* ========================================================================== imsi.css — the join between the brand layer (imsi-base.css + printshop.css / encore.css, generated from the landing design) and Hummingbird 2.0's own pages: listings, product, cart, checkout, account. Hummingbird puts Bootstrap in @layer, so these unlayered rules win without !important (mem:hummingbird-layer-important). Brand colours come from the brand layer's tokens (--accent…); the Bootstrap variables that need an rgb triple are set per brand from the body class the imsistore module adds. ========================================================================== */ /* ---------- Bootstrap in the brand's colours ---------- */ body.imsi-broderbund { --imsi-rgb: 0, 95, 173; } body.imsi-printshop { --imsi-rgb: 0, 74, 143; } body.imsi-encore { --imsi-rgb: 14, 65, 107; } body.imsi-printmaster { --imsi-rgb: 102, 45, 145; } body[class*="imsi-"] { --bs-primary: var(--accent); --bs-primary-rgb: var(--imsi-rgb); --bs-link-color: var(--accent-text); --bs-link-color-rgb: var(--imsi-rgb); --bs-link-hover-color: var(--ink); --bs-body-font-family: var(--font-body); --bs-body-color: var(--ink); --bs-body-bg: var(--paper); --bs-border-color: var(--rule); --bs-border-radius: var(--radius); --bs-focus-ring-color: rgba(var(--imsi-rgb), 0.3); font-family: var(--font-body); } body[class*="imsi-"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { font-family: var(--font-display); letter-spacing: -0.01em; } .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: var(--accent-ink); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--ink); --bs-btn-active-border-color: var(--ink); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); font-weight: 700; } .btn-outline-primary { --bs-btn-color: var(--accent-text); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-hover-color: var(--accent-ink); --bs-btn-active-bg: var(--accent); --bs-btn-active-border-color: var(--accent); } /* imsi-base.css's plain a{color} is unlayered, Hummingbird's Bootstrap .btn color is layered, so the link colour won on every (cart modal "Proceed to checkout" and the cart page button were purple-on-purple on PrintMaster, blue-on-blue elsewhere; mem:hummingbird-layer-important). A class selector, unlayered, puts the button colour back. */ a.btn { color: var(--bs-btn-color); } a.btn:hover, a.btn:focus-visible { color: var(--bs-btn-hover-color); } a.btn:active, a.btn.active { color: var(--bs-btn-active-color, var(--bs-btn-hover-color)); } .bb-news .bb-news__status.is-error { color: #ffd6d6; } .bb-news .bb-news__gdpr { flex: 1 1 100%; font-size: var(--step--1); opacity: 0.9; } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem rgba(var(--imsi-rgb), 0.2); } .page-link { --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent); --bs-pagination-color: var(--accent-text); } .badge.bg-primary, .bg-primary { background-color: var(--accent) !important; } .text-primary { color: var(--accent-text) !important; } /* ---------- the designed header inside Hummingbird's