/* ========================================================================== Canary theme overlay - applies the index2 look & feel site-wide. Two themes via CSS variables on . Default (no attribute) = light, closest to the legacy Unify design, so the site degrades gracefully if JS is disabled. canary-theme.js sets the attribute from app.ui.theme / the user's saved choice and injects a toggle. Loaded by inc_navbar.jsp / inc_footer.jsp so every page gets it without touching page markup. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500;600&display=swap'); :root, html[data-theme="light"] { --cf-bg: #f6f9fb; --cf-panel: #ffffff; --cf-raised: #fbfdfe; --cf-text: #15202b; --cf-heading: #0d1b2a; --cf-muted: #5b6b78; --cf-border: #e3ebf1; --cf-canary: #f4b400; --cf-canary-bright: #ffd23f; --cf-teal: #3bb18f; --cf-teal-dark: #2c8a6f; --cf-navy: #0d1b2a; --cf-navy-2: #15314f; --cf-link: #2c8a6f; --cf-shadow: 0 10px 30px rgba(13, 27, 42, .08); --cf-header-bg: #ffffff; --cf-header-text: #15202b; --cf-footer-bg: #0d1b2a; --cf-footer-text: #93a7b8; --cf-input-bg: #ffffff; --cf-table-stripe: #f3f7fa; } html[data-theme="dark"] { --cf-bg: #081420; --cf-panel: #0e2235; --cf-raised: #11293f; --cf-text: #e8f0f6; --cf-heading: #ffffff; --cf-muted: #93a7b8; --cf-border: rgba(255, 255, 255, .10); --cf-canary: #ffd23f; --cf-canary-bright: #ffd23f; --cf-teal: #3bb18f; --cf-teal-dark: #4cd6a4; --cf-navy: #081420; --cf-navy-2: #15314f; --cf-link: #8be3c6; --cf-shadow: 0 18px 42px rgba(0, 0, 0, .45); --cf-header-bg: rgba(8, 20, 32, .96); --cf-header-text: #e8f0f6; --cf-footer-bg: #060f18; --cf-footer-text: #93a7b8; --cf-input-bg: #0a1c2d; --cf-table-stripe: rgba(255, 255, 255, .03); } /* ---------- Base ---------- */ body { background-color: var(--cf-bg) !important; color: var(--cf-text); font-family: 'Inter', 'Open Sans', system-ui, sans-serif; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Space Grotesk', 'Inter', sans-serif; color: var(--cf-heading); } a { color: var(--cf-link); } a:hover { color: var(--cf-canary); } hr { border-color: var(--cf-border); } p, li, label, .g-color-gray-dark-v4, .g-color-gray-dark-v5 { color: var(--cf-text); } .text-muted, small { color: var(--cf-muted) !important; } /* ---------- Header / navbar (Unify #js-header) ---------- */ .u-header, .u-header .navbar, #js-header .navbar { background-color: var(--cf-header-bg) !important; background-image: none !important; } .u-header .nav-link, #js-header .nav-link, .u-header .navbar .nav-item > a, .u-header .u-main-nav-v1 .nav-link { color: var(--cf-header-text) !important; font-family: 'Inter', sans-serif; } .u-header .nav-link:hover, #js-header .nav-link:hover, .u-header .nav-item.active > .nav-link { color: var(--cf-canary) !important; } html[data-theme="dark"] .u-header, html[data-theme="dark"] #js-header .navbar { border-bottom: 1px solid var(--cf-border); backdrop-filter: blur(10px); } html[data-theme="dark"] .navbar-brand img { filter: brightness(1.1); } html[data-theme="dark"] .hamburger-inner, html[data-theme="dark"] .hamburger-inner::before, html[data-theme="dark"] .hamburger-inner::after { background-color: var(--cf-text) !important; } /* ---------- Toolbar: index-page look & feel ---------- */ .cf-brand { font-family: 'Space Grotesk', sans-serif !important; font-weight: 700; font-size: 1.35rem; color: var(--cf-heading) !important; letter-spacing: .02em; text-decoration: none !important; text-transform: none; } .cf-brand .cf-brand-dot { color: var(--cf-canary-bright); } /* Single bar, like the index navbar: brand left, menu, utility cluster right */ #js-header .u-header__section--light { padding-top: 6px; padding-bottom: 6px; } /* Menu right-aligned like the index navbar: brand left, everything else right. Full-width bar (the index nav spans the viewport, not a centered container). */ #js-header .navbar > .container { max-width: none; width: 100%; padding-left: 4vw; padding-right: 3vw; } .cf-nav-right { flex-wrap: nowrap; align-items: center; } /* Deterministic right alignment: Unify's navbar-collapse does not grow to fill the bar (flex-grow 0), so justify-content/auto-margins had no free space to work with. Force the full flex chain with id-level specificity. */ @media (min-width: 992px) { header#js-header .navbar { display: flex !important; width: 100%; } header#js-header .navbar > .container { display: flex !important; align-items: center; } header#js-header .navbar .navbar-collapse { display: flex !important; flex-direction: row !important; flex-grow: 1 !important; flex-basis: auto !important; width: auto !important; justify-content: flex-end !important; align-items: center !important; margin-right: 0 !important; } header#js-header .navbar .navbar-collapse .navbar-nav { display: flex !important; flex-direction: row !important; float: none !important; margin: 0 !important; } header#js-header .navbar .navbar-nav .nav-item { float: none !important; } header#js-header .navbar .navbar-collapse .cf-nav-main { margin-left: auto !important; } header#js-header .navbar .navbar-collapse .cf-nav-right { margin-left: 24px !important; } } .cf-nav-right .nav-item { display: flex; align-items: center; } .cf-nav-right .nav-link { color: var(--cf-muted) !important; font-weight: 500; white-space: nowrap; } .cf-nav-right .nav-link:hover { color: var(--cf-canary) !important; } .cf-nav-right form { margin: 0; } /* Deployment notice: compact pill badge instead of the full-size alert */ .cf-deploy .alert { margin: 0 0 0 10px; padding: 4px 14px; border-radius: 999px !important; display: inline-flex; align-items: center; font-size: .72rem; white-space: nowrap; color: #081420 !important; } .cf-deploy .alert .media { align-items: center; } .cf-deploy .alert .media > span:first-child { margin: 0 5px 0 0 !important; } .cf-deploy .alert i { font-size: .8rem !important; } /* The canary pill CTA, like "Get started" on the index page */ .cf-pill { background: var(--cf-canary-bright) !important; color: #081420 !important; padding: 7px 20px !important; border-radius: 999px; font-weight: 600 !important; white-space: nowrap; } .cf-pill:hover { filter: brightness(1.07); color: #081420 !important; } /* Main menu: index-page typography (no uppercase shouting, Inter 500) */ #js-header .navbar-nav { text-transform: none !important; letter-spacing: .01em; } #js-header .navbar-nav .nav-link { font-family: 'Inter', sans-serif; font-weight: 500; font-size: .95rem; } #js-header .navbar-nav > .nav-item > .nav-link:hover { color: var(--cf-canary) !important; } /* ---------- Buttons ---------- */ .btn-primary, .btn-success, .u-btn-primary, .u-btn-darkgray, .bb-btn, .lp-cta, .lb-cta { background: linear-gradient(135deg, var(--cf-teal), #2c8a6f) !important; border-color: transparent !important; color: #fff !important; border-radius: 8px; font-weight: 600; } .btn-primary:hover, .btn-success:hover, .u-btn-primary:hover { filter: brightness(1.08); } .btn-warning, .u-btn-yellow { background: linear-gradient(135deg, var(--cf-canary-bright), var(--cf-canary)) !important; border-color: transparent !important; color: #081420 !important; border-radius: 8px; font-weight: 600; } .btn-outline-primary, .btn-outline-secondary { color: var(--cf-link) !important; border-color: var(--cf-teal) !important; border-radius: 8px; } .btn-link { color: var(--cf-link) !important; } /* ---------- Surfaces: cards, panels, modals, dropdowns ---------- */ .card, .modal-content, .dropdown-menu, .list-group-item, .u-shadow-v1-1, .u-shadow-v1-2, .u-shadow-v1-3, .bb-panel, .lh-card, .lp-panel, .lb-panel, .lh-note { background-color: var(--cf-panel) !important; color: var(--cf-text); border-color: var(--cf-border) !important; } .card { border-radius: 14px; box-shadow: var(--cf-shadow); } .card-header { border-bottom-color: var(--cf-border) !important; font-family: 'Space Grotesk', sans-serif; } .card-footer { background-color: var(--cf-raised) !important; border-top-color: var(--cf-border) !important; } .dropdown-item { color: var(--cf-text) !important; } .dropdown-item:hover { background-color: var(--cf-raised) !important; color: var(--cf-canary) !important; } .modal-header, .modal-footer { border-color: var(--cf-border) !important; } .close { color: var(--cf-text); text-shadow: none; } /* Common Unify light-surface utilities forced onto theme surfaces */ html[data-theme="dark"] .g-bg-white, html[data-theme="dark"] .g-bg-gray-light-v5, html[data-theme="dark"] .g-bg-gray-light-v4, html[data-theme="dark"] .g-bg-secondary { background-color: var(--cf-panel) !important; color: var(--cf-text); } html[data-theme="dark"] .g-color-black, html[data-theme="dark"] .g-color-gray-dark-v1, html[data-theme="dark"] .g-color-gray-dark-v2, html[data-theme="dark"] .g-color-gray-dark-v3 { color: var(--cf-text) !important; } html[data-theme="dark"] .g-brd-gray-light-v3, html[data-theme="dark"] .g-brd-gray-light-v4 { border-color: var(--cf-border) !important; } /* ---------- Forms ---------- */ .form-control, select.form-control, textarea.form-control { background-color: var(--cf-input-bg) !important; color: var(--cf-text) !important; border: 1px solid var(--cf-border) !important; border-radius: 8px !important; } .form-control:focus { border-color: var(--cf-teal) !important; box-shadow: 0 0 0 3px rgba(59, 177, 143, .18) !important; } .form-control::placeholder { color: var(--cf-muted); } .input-group-text { background-color: var(--cf-raised) !important; color: var(--cf-muted) !important; border-color: var(--cf-border) !important; } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--cf-teal) !important; border-color: var(--cf-teal) !important; } /* ---------- Tables ---------- */ .table { color: var(--cf-text); } .table th { font-family: 'Space Grotesk', sans-serif; border-color: var(--cf-border) !important; } .table td { border-color: var(--cf-border) !important; } .table-striped tbody tr:nth-of-type(odd) { background-color: var(--cf-table-stripe); } html[data-theme="dark"] .table thead th { color: var(--cf-muted); } .pagination .page-link { background-color: var(--cf-panel); color: var(--cf-link); border-color: var(--cf-border); } .pagination .page-item.active .page-link { background-color: var(--cf-teal); border-color: var(--cf-teal); color: #fff; } /* ---------- Footer ---------- The standard footer keeps the legacy design/layout (g-bg-black-opacity-0_9 markup in inc_footer.jsp) and is ALWAYS dark. The overlay's global text rules (body/heading/p/li -> theme colors) would paint dark-on-dark in light theme, so footer text is pinned back to light here, in both themes. */ .g-bg-black-opacity-0_9 h1, .g-bg-black-opacity-0_9 h2, .g-bg-black-opacity-0_9 h3, .g-bg-black-opacity-0_9 h4, .g-bg-black-opacity-0_9 h5, .g-bg-black-opacity-0_9 h6, footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { color: #ffffff !important; } .g-bg-black-opacity-0_9, .g-bg-black-opacity-0_9 p, .g-bg-black-opacity-0_9 li, .g-bg-black-opacity-0_9 small, .g-bg-black-opacity-0_9 strong, footer, footer p, footer li, footer small { color: rgba(255, 255, 255, .75) !important; } .g-bg-black-opacity-0_9 a, footer a { color: rgba(255, 255, 255, .8) !important; } .g-bg-black-opacity-0_9 a:hover, footer a:hover { color: var(--cf-canary-bright) !important; } /* ---------- New-module dark variants (bb-/lh-/lp-/lb- pages) ---------- */ html[data-theme="dark"] .bb-acct, html[data-theme="dark"] .bb-card-row, html[data-theme="dark"] .lp-offer, html[data-theme="dark"] .lb-product { background-color: var(--cf-raised) !important; border-color: var(--cf-border) !important; } html[data-theme="dark"] .bb-panel h4, html[data-theme="dark"] .lh-card h4, html[data-theme="dark"] .lp-offer .lender, html[data-theme="dark"] .lb-product h5, html[data-theme="dark"] .bb-balance, html[data-theme="dark"] .bb-acct h5 { color: var(--cf-heading) !important; } html[data-theme="dark"] .lh-hero { background: linear-gradient(160deg, #0a1a2a 0%, #0e2235 100%) !important; } html[data-theme="dark"] .lh-hero h1 { color: #fff; } html[data-theme="dark"] .lh-card p, html[data-theme="dark"] .lp-offer .label { color: var(--cf-muted) !important; } html[data-theme="dark"] .bb-setup, html[data-theme="dark"] .lp-preview-banner, html[data-theme="dark"] .lb-setup { background: rgba(255, 210, 63, .08) !important; border-color: rgba(255, 210, 63, .35) !important; color: #e8d9a8 !important; } /* ---------- Theme toggle (injected by canary-theme.js) ---------- */ .cf-theme-toggle { position: fixed; bottom: 18px; left: 18px; z-index: 9999; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--cf-border); background: var(--cf-panel); color: var(--cf-text); font-size: 1.15rem; line-height: 1; cursor: pointer; box-shadow: var(--cf-shadow); transition: transform .15s ease; } .cf-theme-toggle:hover { transform: translateY(-2px) scale(1.05); } .cf-theme-toggle:focus { outline: 2px solid var(--cf-teal); outline-offset: 2px; } @media print { .cf-theme-toggle { display: none; } }