/* ════════════════════════════════════════════════════════════════════════ BROKER HUB — Login reskin. Injected into web.layout on every page, but every selector is scoped to #wrapwrap.bh-login-page / .oe_website_login_container so it only ever affects the /web/login screen. Default palette = LIGHT. Dark is opt-in via [data-theme="dark"] on #wrapwrap (set by the inline FOUC script + theme.js, sharing the 'bh-theme' key). ═══════════════════════════════════════════════════════════════════════════ */ #wrapwrap.bh-login-page { --bhl-bg: #f4f4f6; --bhl-bg-2: #ffffff; /* card */ --bhl-input-bg: #ffffff; --bhl-line: rgba(10,10,15,.12); --bhl-text: #1c1c1f; --bhl-muted: #6b6b73; --bhl-glow: rgba(176,136,56,.14); --bhl-shadow: 0 24px 60px rgba(0,0,0,.12); --bhl-ghost-bg: rgba(10,10,15,.05); --bhl-ghost-bg-h: rgba(10,10,15,.10); min-height: 100vh; background: radial-gradient(900px 500px at 50% -10%, var(--bhl-glow), transparent 70%), var(--bhl-bg); color: var(--bhl-text); font-family: "Inter", "Helvetica Neue", Arial, sans-serif; } /* ── Dark theme override (the original carefully-tuned palette) ───────────── */ #wrapwrap.bh-login-page[data-theme="dark"] { --bhl-bg: #0a0a0b; --bhl-bg-2: #111114; --bhl-input-bg: #0a0a0b; --bhl-line: rgba(255,255,255,.08); --bhl-text: #ececee; --bhl-muted: #8c8c95; --bhl-glow: rgba(201,164,92,.16); --bhl-shadow: 0 24px 60px rgba(0,0,0,.5); --bhl-ghost-bg: rgba(255,255,255,.05); --bhl-ghost-bg-h: rgba(255,255,255,.10); } /* ── Floating theme toggle (login has no navbar) ─────────────────────────── */ #wrapwrap.bh-login-page .bh-login-theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 10; width: 38px; height: 38px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: var(--bhl-ghost-bg); border: 1px solid var(--bhl-line); color: var(--bhl-text); font-size: 16px; line-height: 1; transition: all .2s ease; } #wrapwrap.bh-login-page .bh-login-theme-toggle:hover { background: var(--bhl-ghost-bg-h); transform: translateY(-1px); } #wrapwrap.bh-login-page .bh-theme-icon { display: inline-flex; align-items: center; justify-content: center; } #wrapwrap.bh-login-page .oe_website_login_container { max-width: 500px; margin: 0 auto; padding: 8vh 20px 40px; } /* Hide Odoo's "- or - / Use a Passkey" alternative auth block */ #wrapwrap.bh-login-page .o_login_auth { display: none !important; } /* Make the form + its inputs fill the full container width */ #wrapwrap.bh-login-page form.oe_login_form, #wrapwrap.bh-login-page .oe_website_login_container .field-login, #wrapwrap.bh-login-page .oe_website_login_container .field-password, #wrapwrap.bh-login-page .oe_website_login_container .input-group, #wrapwrap.bh-login-page .oe_website_login_container .form-control { width: 100% !important; max-width: 100% !important; } /* Brand block above the form */ #wrapwrap.bh-login-page .bh-login-brand { text-align: center; margin-bottom: 26px; } #wrapwrap.bh-login-page .bh-login-brand-text { display: inline-block; font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -.02em; color: var(--bhl-text); line-height: 1; margin-bottom: 14px; } #wrapwrap.bh-login-page .bh-login-brand-text .bh-brand-accent { color: #c9a45c; } #wrapwrap.bh-login-page[data-theme="dark"] .bh-login-brand-text .bh-brand-accent { color: #e6c585; } #wrapwrap.bh-login-page .bh-login-sub { color: var(--bhl-muted); font-size: 14px; margin: 0; } /* Card */ #wrapwrap.bh-login-page .oe_website_login_container .card, #wrapwrap.bh-login-page form.oe_login_form { background: var(--bhl-bg-2); border: 1px solid var(--bhl-line); border-radius: 18px; box-shadow: var(--bhl-shadow); padding: 30px 28px; } #wrapwrap.bh-login-page .field-login label, #wrapwrap.bh-login-page .field-password label, #wrapwrap.bh-login-page label { color: var(--bhl-text); font-weight: 600; font-size: 14px; } /* Inputs */ #wrapwrap.bh-login-page input[type="text"], #wrapwrap.bh-login-page input[type="email"], #wrapwrap.bh-login-page input[type="password"] { background: var(--bhl-input-bg) !important; border: 1px solid var(--bhl-line) !important; color: var(--bhl-text) !important; border-radius: 12px !important; padding: 12px 14px !important; box-shadow: none !important; } #wrapwrap.bh-login-page input[type="text"]:focus, #wrapwrap.bh-login-page input[type="email"]:focus, #wrapwrap.bh-login-page input[type="password"]:focus { border-color: #c9a45c !important; box-shadow: 0 0 0 3px rgba(201,164,92,.14) !important; } /* Primary button */ #wrapwrap.bh-login-page .oe_login_buttons .btn-primary, #wrapwrap.bh-login-page button[type="submit"].btn-primary { background: linear-gradient(95deg, #e6c585, #c9a45c) !important; border: none !important; color: #1a1407 !important; font-weight: 700 !important; border-radius: 999px !important; padding: 12px 18px !important; box-shadow: 0 10px 30px rgba(201,164,92,.28) !important; } /* Links + alerts */ #wrapwrap.bh-login-page a { color: #c9a45c; } #wrapwrap.bh-login-page .alert { border-radius: 12px; } #wrapwrap.bh-login-page .bh-login-home-link { text-align: center; margin-top: 22px; } #wrapwrap.bh-login-page .bh-login-home-link a { color: var(--bhl-muted); font-size: 14px; } #wrapwrap.bh-login-page .bh-login-home-link a:hover { color: var(--bh-gold, #b08838); } #wrapwrap.bh-login-page[data-theme="dark"] .bh-login-home-link a:hover { color: #e6c585; }