/* * HW Delivery Login theme — an original, CSS/HTML-only redesign of the * standard Frappe /login page. See HW_DELIVERY_DESIGN_SYSTEM.md for the * full token reference and design rationale. * * SCOPING: this file is network-loaded on every website-rendered page * (via the global web_include_css hook - Frappe has no narrower * "this route only" include hook), but every single rule below is * prefixed with `body[data-path="login"]`, the exact attribute Frappe's * own base template stamps on for this route only. That means * it has ZERO visual effect on the /hw-delivery portal (its own * data-path, e.g. "hw-delivery"), other website pages, web forms, or * print/PDF (which don't even use this base template). This mirrors * how hw_delivery_desk.css is loaded on every /app page but scoped * under html.hw-delivery-desk-theme. * * No image assets are used anywhere in this file - the brand mark is * a CSS-styled "HW" text badge (same treatment as the Desk sidebar * logo badge), and all background visuals are CSS gradients/shapes. */ body[data-path="login"] { --hwl-bg: #f3f5f7; --hwl-surface: #ffffff; --hwl-border: #dde3e8; --hwl-text-primary: #1c2530; --hwl-text-secondary: #5c6b7a; --hwl-text-faint: #8996a3; --hwl-primary: #1f6f78; --hwl-primary-hover: #175860; --hwl-primary-tint: rgba(31, 111, 120, 0.1); --hwl-danger: #c33f3f; --hwl-brand-bg-1: #0f1420; --hwl-brand-bg-2: #16233a; --hwl-brand-accent: #45b3a8; --hwl-brand-accent-2: #5b6fd6; --hwl-brand-text: #e7ecf1; --hwl-brand-text-dim: #93a2b5; --hwl-radius-sm: 6px; --hwl-radius-md: 10px; --hwl-radius-lg: 16px; --hwl-shadow-md: 0 12px 32px rgba(15, 20, 32, 0.16), 0 2px 8px rgba(15, 20, 32, 0.08); background: var(--hwl-bg); } /* Hide the stock website navbar/breadcrumb/page-header chrome for a full-bleed, immersive enterprise login screen. Nothing functional lives in them when logged out (empty nav-link list, empty breadcrumb, empty header) - confirmed by inspecting the rendered markup before removing. */ body[data-path="login"] .navbar, body[data-path="login"] .page-breadcrumbs, body[data-path="login"] .page-header-wrapper { display: none !important; } body[data-path="login"] #page-login { min-height: 100vh; } body[data-path="login"] .page-content-wrapper { min-height: 100vh; } body[data-path="login"] main.container { max-width: 100% !important; width: 100%; margin: 0 !important; padding: 0 !important; min-height: 100vh; } /* .page_content becomes the two-column shell. Its only children are the brand panel (inserted by hw_delivery_login.js) and Frappe's own unmodified wrapper div holding the for-login/for-forgot/for-signup/ for-login-with-email-link sections - so this layout works no matter which of those sections is currently shown by Frappe's own login.js. */ body[data-path="login"] .page_content { display: flex; min-height: 100vh; align-items: stretch; } /* =================================================================== LEFT — brand panel (JS-inserted .hwd-login-brand) =================================================================== */ body[data-path="login"] .hwd-login-brand { position: relative; flex: 0 0 44%; max-width: 560px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 56px 56px; color: var(--hwl-brand-text); background: radial-gradient(560px 420px at 12% 18%, rgba(69, 179, 168, 0.24), transparent 60%), radial-gradient(520px 460px at 88% 82%, rgba(91, 111, 214, 0.22), transparent 62%), linear-gradient(160deg, var(--hwl-brand-bg-1) 0%, var(--hwl-brand-bg-2) 100%); overflow: hidden; } /* Fine grid-line texture, pure CSS repeating-gradient - no image. */ body[data-path="login"] .hwd-login-brand::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 64px); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.15)); pointer-events: none; } /* Large soft rotated rectangle - a geometric accent shape, CSS only. */ body[data-path="login"] .hwd-login-brand::after { content: ""; position: absolute; width: 640px; height: 640px; right: -220px; bottom: -260px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 120px; transform: rotate(18deg); pointer-events: none; } body[data-path="login"] .hwd-login-brand-inner { position: relative; z-index: 1; } body[data-path="login"] .hwd-login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; } body[data-path="login"] .hwd-login-logo-badge { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--hwl-radius-sm); background: var(--hwl-brand-accent); color: #0e1520; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; letter-spacing: 0.01em; } body[data-path="login"] .hwd-login-logo-text { font-weight: 600; font-size: 16px; letter-spacing: 0.01em; color: var(--hwl-brand-text); } body[data-path="login"] .hwd-login-brand h1 { font-size: 32px; line-height: 1.25; font-weight: 700; color: #ffffff; margin: 0 0 16px; } body[data-path="login"] .hwd-login-brand p.hwd-login-tagline { font-size: 15px; line-height: 1.6; color: var(--hwl-brand-text-dim); max-width: 400px; margin: 0 0 40px; } body[data-path="login"] .hwd-login-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0; } body[data-path="login"] .hwd-login-flow-step { font-size: 12.5px; font-weight: 600; color: var(--hwl-brand-text); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 7px 14px; margin: 4px 0; white-space: nowrap; } body[data-path="login"] .hwd-login-flow-arrow { color: var(--hwl-brand-accent); margin: 0 6px; font-size: 13px; opacity: 0.85; } /* =================================================================== RIGHT — login form pane (Frappe's own, unmodified, wrapper div) =================================================================== */ body[data-path="login"] .page_content > div:not(.hwd-login-brand) { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--hwl-bg); } body[data-path="login"] .page-card-head { text-align: left; margin-bottom: 4px; } /* The default app-logo points at the ERPNext mark - replaced entirely by the brand panel on the left, so it's hidden here rather than left showing unrelated third-party branding. */ body[data-path="login"] .page-card-head img.app-logo { display: none; } body[data-path="login"] .page-card-head h4 { font-size: 24px; font-weight: 700; color: var(--hwl-text-primary); margin: 0 0 4px; } body[data-path="login"] .hwd-login-subtitle { font-size: 13.5px; color: var(--hwl-text-secondary); margin: 0 0 28px; } body[data-path="login"] .login-content.page-card { width: 100%; max-width: 400px; background: var(--hwl-surface); border: 1px solid var(--hwl-border); border-radius: var(--hwl-radius-lg); box-shadow: var(--hwl-shadow-md); padding: 36px 36px 28px; } body[data-path="login"] .page-card-body .form-group { margin-bottom: 16px; } body[data-path="login"] .form-control { height: 42px; border: 1px solid var(--hwl-border); border-radius: var(--hwl-radius-sm); background-color: var(--hwl-surface); color: var(--hwl-text-primary); font-size: 13.5px; padding-left: 14px; transition: border-color 0.12s ease, box-shadow 0.12s ease; } body[data-path="login"] .form-control:focus { border-color: var(--hwl-primary); box-shadow: 0 0 0 3px var(--hwl-primary-tint); } body[data-path="login"] .form-control::placeholder { color: var(--hwl-text-faint); } body[data-path="login"] a.toggle-password, body[data-path="login"] .form-group a { color: var(--hwl-primary); font-size: 12.5px; font-weight: 600; } body[data-path="login"] a.toggle-password:hover, body[data-path="login"] .form-group a:hover { color: var(--hwl-primary-hover); } body[data-path="login"] .btn-login, body[data-path="login"] .btn-forgot, body[data-path="login"] .btn-login-with-email-link { height: 42px; border-radius: var(--hwl-radius-sm); font-weight: 600; font-size: 13.5px; } body[data-path="login"] .btn-login, body[data-path="login"] .btn-forgot { background-color: var(--hwl-primary); border-color: var(--hwl-primary); } body[data-path="login"] .btn-login:hover, body[data-path="login"] .btn-login:focus, body[data-path="login"] .btn-forgot:hover, body[data-path="login"] .btn-forgot:focus { background-color: var(--hwl-primary-hover) !important; border-color: var(--hwl-primary-hover) !important; } body[data-path="login"] .btn-login-option, body[data-path="login"] .btn-login-with-email-link { background-color: var(--hwl-surface); border: 1px solid var(--hwl-border); color: var(--hwl-text-primary); } body[data-path="login"] .btn-login-option:hover, body[data-path="login"] .btn-login-with-email-link:hover { background-color: var(--hwl-bg); } body[data-path="login"] .login-divider { font-size: 12px; color: var(--hwl-text-faint); } /* Error/help text below fields (invalid credentials etc.) - keep legible, never colour-only (Frappe already renders text alongside). */ body[data-path="login"] .help-box, body[data-path="login"] .text-danger { font-size: 12.5px; } body[data-path="login"] .text-danger { color: var(--hwl-danger) !important; } /* =================================================================== Responsive — brand panel collapses to a compact top banner, form pane stays full-width and fully usable, no horizontal scroll. =================================================================== */ @media (max-width: 900px) { body[data-path="login"] .page_content { flex-direction: column; min-height: auto; } body[data-path="login"] .hwd-login-brand { flex: 0 0 auto; max-width: 100%; min-height: 0; padding: 32px 24px; } body[data-path="login"] .hwd-login-brand h1 { font-size: 24px; } body[data-path="login"] .hwd-login-brand p.hwd-login-tagline { font-size: 13.5px; margin-bottom: 24px; } body[data-path="login"] .hwd-login-flow { display: none; } body[data-path="login"] .page_content > div:not(.hwd-login-brand) { padding: 32px 20px 48px; } body[data-path="login"] .login-content.page-card { max-width: 100%; padding: 28px 22px 22px; } } @media (max-width: 420px) { body[data-path="login"] .hwd-login-brand { padding: 24px 18px; } body[data-path="login"] .hwd-login-logo { margin-bottom: 20px; } }