/* ========================================================================== BMO Whitelabel Theme (Cleaned, Scoped) Scope: add class "theme-bmo" to or to activate Version: 1.0.0 (2026-08-04) Notes: - Palette restricted to BMO blues + neutrals. BMO Red (#ED1C24) is reserved for the logo roundel, secure sign-in button, negative figures, and alert/warning icons only — never a general UI accent. Cerulean (#73C3EB) covers secondary/accent tint needs instead. - Accessible contrast and consistent focus styles - Minimal !important; specificity comes from scoping ========================================================================== */ /* Self-hosted brand typeface (BMO's digital/secure-site font per brand guidelines) */ @font-face { font-family: "Heebo"; src: url("../images/bmo-img/fonts/Heebo-Regular.woff2") format("woff2"), url("../images/bmo-img/fonts/Heebo-Regular.woff") format("woff"); font-display: swap; font-weight: 400; font-style: normal; } /* -------------------------------------------------------------------------- Root Tokens -------------------------------------------------------------------------- */ .theme-bmo { /* Brand */ --app-theme-clr: #0075be; /* Primary (accessible blue) */ --app-accent-clr: #73c3eb; /* Cerulean */ --app-theme-bg-clr: #f5f6f7; /* Albicant off-white tint */ --app-nav-header-clr: #0075be; /* Same as --app-theme-clr, for consistency */ --app-font-family: "Heebo", "Segoe UI", sans-serif; /* Neutrals */ --app-light-clr: #ffffff; --app-dark-clr: #001928; --app-text-clr: #001928; --app-muted-text-clr: #646c76; --app-border-clr: #d9dce1; --app-bg-soft: #f5f6f7; /* Semantics */ --app-info-clr: #0075be; --app-success-clr: #0f9b2c; --app-warning-clr: #ffc827; --app-error-clr: #d12121; /* Controls */ --app-checkbox-bg-clr: #0075be; --app-input-txt-color: #001928; --app-input-bg-color: #ffffff; --app-input-border-color: #d9dce1; --app-focus-ring: 0 0 0 .2rem rgba(0, 117, 190, .25); /* Buttons */ --app-btn-radius: 50px; --app-card-radius: .75rem; --app-btn1-bg-clr: #0075be; --app-btn1-txt-clr: #ffffff; --app-btn1-bg-hvr-clr: #ffffff; --app-btn1-hover-txt-clr: #ffffff; --app-btn2-bg-clr: #73c3eb; --app-btn2-txt-clr: #001928; --app-btn3-bg-clr: #0075be; --app-btn3-hover-bg-clr: #ffffff; --app-btn3-hover-txt-clr: #0075be; --app-btn-disabled: #c7ccd1; --app-btn-disabled-hover: #e3e6ea; --app-disable-clr: #d9dce1; /* Tabs / Pills */ --app-tab-btn-bg-clr: #ffffff; --app-tab-btn-txt-clr: #0075be; --app-tab-btn-checked-clr: #0075be; /* Badges */ --app-badge-bg-clr: #73c3eb; --app-badge-txt-clr: #001928; /* Date Range */ --app-daterange-bg-select-clr: #73c3eb; --app-daterange-txt-select-clr: #001928; /* Shadows */ --app-shadow-sm: 0 1px 2px rgba(0,0,0,.05); --app-shadow-md: 0 2px 8px rgba(0,0,0,.08); --app-shadow-lg: 0 8px 24px rgba(0,0,0,.12); /* Ported from buyer app pattern */ --app-btn1-hover-txt-clr:#ffffff; --app-btn1-hover-bg-clr:#0075be; --bmo-pearl-white:#f5f6f7; } /* -------------------------------------------------------------------------- Base & Typography -------------------------------------------------------------------------- */ .theme-bmo, .theme-bmo body, .theme-bmo #wrapper { color: var(--app-text-clr); background: var(--app-theme-bg-clr) !important; font-family: "Heebo", Arial, sans-serif; line-height: 1.5; } /* Ensure main content area uses brand light tint too */ .theme-bmo .content-page, .theme-bmo #content-page, .theme-bmo .content, .theme-bmo .content-page .content { background: var(--app-theme-bg-clr) !important; } /* Override inline styles set by JavaScript - must be very specific */ .theme-bmo body[style*="background-color"], .theme-bmo #wrapper[style*="background-color"], .theme-bmo #content-page[style*="background-color"] { background-color: var(--app-theme-bg-clr) !important; } .theme-bmo a { color: var(--app-theme-clr) !important; text-decoration-color: color-mix(in srgb, var(--app-theme-clr) 50%, #ffffff); } .theme-bmo a:hover { color: var(--app-btn1-hover-bg-clr) !important; text-decoration-color: var(--app-btn1-hover-bg-clr) !important; } /* Top-right profile toggle (nav-user) - ensure hover background is applied */ .theme-bmo #profileDropdown:hover, .theme-bmo a.nav-link.nav-user:hover { color: var(--app-btn1-hover-bg-clr) !important; background-color: var(--bmo-pearl-white) !important; border: 2px solid var(--app-btn1-hover-bg-clr) !important; } /* Focus (use :focus-visible for keyboard) */ .theme-bmo :where(a, button, input, select, textarea, [role="button"]):focus-visible { outline: 0; box-shadow: var(--app-focus-ring); border-color: var(--app-theme-clr); } /* -------------------------------------------------------------------------- Logos (background-image approach for reliability) Apply to an empty or similar element. -------------------------------------------------------------------------- */ .theme-bmo .loginLogo, .theme-bmo .brand-logo { display: inline-block; width: 200px; height: 48px; background: url('../images/bmo-img/app-logo1.png') center/contain no-repeat; } /* Login Page Logos */ /* Hide broken img tags and use background-image on parent anchor tag */ .theme-bmo img.login-logo-dark, .theme-bmo img.login-logo-light { display: none !important; } /* Use parent anchor tag (.logo) for logo background */ .theme-bmo .auth-logo .logo, .theme-bmo .auth-logo a.logo, .theme-bmo .auth-brand .auth-logo .logo, .theme-bmo .auth-brand .auth-logo a.logo { display: inline-block !important; width: 200px !important; height: 62px !important; min-height: 62px !important; background-image: url('../images/bmo-img/app-logo-blue.svg') !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; text-align: center !important; text-decoration: none !important; border: none !important; outline: none !important; } .theme-bmo .auth-logo .logo.logo-dark, .theme-bmo .auth-logo a.logo.logo-dark, .theme-bmo .auth-brand .auth-logo .logo.logo-dark, .theme-bmo .auth-brand .auth-logo a.logo.logo-dark { background-image: url('../images/bmo-img/app-logo-blue.svg') !important; } .theme-bmo .auth-logo .logo.logo-light, .theme-bmo .auth-logo a.logo.logo-light, .theme-bmo .auth-brand .auth-logo .logo.logo-light, .theme-bmo .auth-brand .auth-logo a.logo.logo-light { background-image: url('../images/bmo-img/app-logo1.svg') !important; } /* Ensure auth-logo container properly displays logo */ .theme-bmo .auth-logo, .theme-bmo .auth-brand .auth-logo { display: block !important; text-align: center !important; margin-bottom: 1.5rem; } /* Center auth-brand container */ .theme-bmo .auth-brand { text-align: center !important; } /* Login page: Show only logo-dark (for white background), hide logo-light */ .theme-bmo .auth-logo .logo.logo-dark, .theme-bmo .auth-logo a.logo.logo-dark, .theme-bmo .auth-brand .auth-logo .logo.logo-dark, .theme-bmo .auth-brand .auth-logo a.logo.logo-dark { display: inline-block !important; margin: 0 auto !important; } .theme-bmo .auth-logo .logo.logo-light, .theme-bmo .auth-logo a.logo.logo-light, .theme-bmo .auth-brand .auth-logo .logo.logo-light, .theme-bmo .auth-brand .auth-logo a.logo.logo-light { display: none !important; } /* Auth/logout pages: prevent second logo layer from generic .logo-lg background */ .theme-bmo .auth-logo .logo .logo-lg, .theme-bmo .auth-logo a.logo .logo-lg, .theme-bmo .auth-brand .auth-logo .logo .logo-lg, .theme-bmo .auth-brand .auth-logo a.logo .logo-lg { background-image: none !important; width: auto !important; height: auto !important; min-height: 0 !important; } /* Auth Fluid Right - Background Image Container */ .theme-bmo .auth-fluid { background: url('../images/bmo-img/bmo_auth.jpg') !important; background-position: center !important; /* Center the image */ background-repeat: no-repeat !important; /* Do not repeat the image */ background-size: 100% 100% !important; /* Stretch image to fill container both vertically and horizontally */ justify-content: end !important; overflow: hidden !important; /* Login page must never scroll, under any circumstance */ } /* "Don't have an account? Contact Us" line — trailing margin can't fix this once .card-body is vertically centered inside an overflow:hidden box: a taller centered block just gets pushed off both top AND bottom equally. Fix is to shrink the block itself (see .auth-fluid-form-box overrides below), not to pad the bottom. Keep this negligible, just enough to avoid it looking flush. */ .theme-bmo footer.text-center p.text-muted:last-of-type { margin-bottom: 0.25rem !important; } /* BankOps login form has more vertical content than Seller's (extra SSO button, always-visible Contact Us line) — compact the whole centered block so it fits inside the fixed, non-scrolling auth-fluid-form-box without any part (esp. the Contact Us line) being clipped top/bottom. */ .theme-bmo .auth-fluid-form-box { padding: 1.5rem 2rem !important; display: flex !important; flex-direction: column !important; } /* The centered card-body wrapper (div.d-flex.align-items-center.h-100) was consuming the box's entire height via h-100, pushing the sibling