/* =========================================================================== Benjamin Moore BG — design system --------------------------------------------------------------------------- Every class is `bm-` prefixed on purpose: Bootstrap and the legacy style.css are still loaded for pages that haven't been converted yet, and unprefixed names like .btn / .header / .nav would collide with them. When the last template is converted, the old libraries come out and the prefix can stay — it costs nothing and keeps the origin obvious. Chrome is achromatic. All colour on the site comes from the paint. =========================================================================== */ /* ============ FONT (self-hosted; no third-party connection) ============ */ @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/onest/onest-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/onest/onest-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/onest/onest-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/onest/onest-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============ TOKENS ============ */ :root { --bm-bg: #ffffff; --bm-card: #ffffff; --bm-brand: #101010; --bm-brand-hover: #3a3a3a; --bm-ink: #101010; --bm-body: #56534e; --bm-meta: #8c8880; --bm-border: #e4e0d9; --bm-cream: #f4f1ec; --bm-paper: #fafaf7; /* near-white ground for card grids (prototype --bg) */ --bm-navy: #0e2e4a; /* prototype --navy: card titles, so they read as links */ --bm-red: #c8102e; /* logo red — the only accent */ --bm-ok: #2e7d5b; --bm-radius: 2px; /* prototype --radius; softens cards, chips and inputs */ --bm-section: 96px; --bm-section-sm: 56px; --bm-container: 1280px; --bm-font: 'Moderat', 'Onest', Helvetica, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ============ BASE ============ */ /* The UA sheet's [hidden] { display: none } is beaten by any author rule that sets display — .bm-prod is display:flex, so hidden cards stayed on screen. One authoritative rule, so `el.hidden = true` means hidden everywhere. */ [hidden] { display: none !important; } /* The prototype resets with `* { box-sizing: border-box; margin: 0; padding: 0 }`. The port kept only box-sizing AND scoped it to `.bm *`, which is a DESCENDANT selector — is not matched by it. So body kept the UA default margin: 8px and every page rendered inside an 8px frame. The scattered `margin: 0` rules further down this file are all symptoms of this. */ .bm { font-family: var(--bm-font); color: var(--bm-ink); background: var(--bm-bg); font-size: 16px; line-height: 1.6; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .bm, .bm *, .bm *::before, .bm *::after { box-sizing: border-box; } /* Zero specificity, so any explicit rule below still wins. */ .bm :where(*) { margin: 0; padding: 0; } /* :where() keeps these resets at ZERO specificity. Without it `.bm button` (0,1,1) beats `.bm-btn` (0,1,0) and every