/* DEC Drive — split login layout ("quick-and-cheap" first cut).
*
* Frappe's login markup is:
*
* logo + "Login to …"
(sibling!)
* …form…
*
* The head and the form are SIBLINGS, so we can't just move one card. Instead
* we paint the left half of the section as a branded franchise panel (gradient
* background + copy via ::before) and confine the normal flow (head + form) to
* the right half, vertically centred.
*
* Pure CSS: it can't inject a clickable into the login DOM, so the panel's
* franchise call-to-action is copy pointing at /franchise (the real, linked
* invite page). Stacks to a single column on narrow screens.
*
* Loaded on every website page via `web_include_css`, so every rule is scoped
* to `.for-login` / `.for-login-with-email-link` to avoid touching other pages.
*/
:root {
--dec-login-brand: #2b6cb0;
--dec-login-brand-2: #1b3b6f;
}
/* ── split the section: branded left half + right-hand form column ── */
section.for-login,
section.for-login-with-email-link {
position: relative;
min-height: calc(100vh - 60px);
max-width: none !important;
width: 100%;
margin: 0 !important;
display: flex;
flex-direction: column;
justify-content: center; /* vertically centre the head + form stack */
align-items: center; /* centre them within the right half */
padding: 40px 4vw 40px 50% !important; /* flow confined to right half */
box-sizing: border-box;
background: #f4f6f9;
}
/* left branded franchise panel (absolute — overlays the left 50%) */
section.for-login::before,
section.for-login-with-email-link::before {
content: "Own a DEC dental clinic.\A\A Join our Smilebetter, D4K and Facets network — we bring the brand, clinical playbook, software and patient pipeline. You bring local ownership.\A\A Not staff? Ask about franchising at /franchise";
white-space: pre-line;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
display: flex;
align-items: center;
padding: 8vh 6vw;
box-sizing: border-box;
font-size: 19px;
line-height: 1.5;
font-weight: 600;
color: #fff;
background:
radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, .12), transparent 55%),
linear-gradient(150deg, var(--dec-login-brand) 0%, var(--dec-login-brand-2) 100%);
}
/* keep the logo/title tight above the form, both centred in the right column */
section.for-login > .page-card-head,
section.for-login-with-email-link > .page-card-head {
margin: 0 0 4px !important;
text-align: center;
}
section.for-login > .login-content.page-card,
section.for-login-with-email-link > .login-content.page-card {
margin: 0 !important;
width: 100%;
max-width: 380px;
}
section.for-login .app-logo,
section.for-login-with-email-link .app-logo {
width: 46px;
height: 46px;
}
/* a touch of DEC branding on the primary buttons */
section.for-login .btn-login,
section.for-login .btn-forgot,
section.for-login-with-email-link .btn-login-with-email-link {
background: var(--dec-login-brand);
border-color: var(--dec-login-brand);
}
/* ── stack on tablets / phones ────────────────────────────────────── */
@media (max-width: 820px) {
section.for-login,
section.for-login-with-email-link {
display: block;
min-height: auto;
padding: 0 0 40px !important;
background: #f4f6f9;
}
section.for-login::before,
section.for-login-with-email-link::before {
position: static;
width: 100%;
padding: 6vh 8vw;
font-size: 17px;
}
section.for-login > .page-card-head,
section.for-login-with-email-link > .page-card-head {
margin-top: 28px !important;
}
section.for-login > .login-content.page-card,
section.for-login-with-email-link > .login-content.page-card {
margin: 0 auto !important;
}
}
/* ── per-host brand skins ─────────────────────────────────────────────
* theming.update_website_context puts `dec-host-` on
* when the site is served from a brand subdomain (facets.decdrive.in,
* smilebetter.decdrive.in, d4k.decdrive.in). Palette mirrors the locked
* dec_portal.css themes; the apex keeps the neutral DEC blue above.
* CSS vars set on body override the :root defaults for all descendants. */
body.dec-host-sb { --dec-login-brand: #E27D2D; --dec-login-brand-2: #9A4E12; }
body.dec-host-d4k { --dec-login-brand: #7F77DD; --dec-login-brand-2: #403699; }
body.dec-host-fct { --dec-login-brand: #1F73D1; --dec-login-brand-2: #123E73; }
/* brand-specific invite copy on the login panel (replaces the generic
* three-brand network pitch) */
body.dec-host-sb section.for-login::before,
body.dec-host-sb section.for-login-with-email-link::before {
content: "Smilebetter\A\A Brighter smiles, closer to home.\A\A Staff and patients sign in here. Want to own a Smilebetter clinic? Ask about franchising at /franchise";
}
body.dec-host-d4k section.for-login::before,
body.dec-host-d4k section.for-login-with-email-link::before {
content: "D4K Orthodontics\A\A Specialist smiles for kids and teens.\A\A Staff and patients sign in here. Want to own a D4K clinic? Ask about franchising at /franchise";
}
body.dec-host-fct section.for-login::before,
body.dec-host-fct section.for-login-with-email-link::before {
content: "Facets\A\A Advanced aesthetic and family dentistry.\A\A Staff and patients sign in here. Want to own a Facets clinic? Ask about franchising at /franchise";
}