/* ============================================================================ Lets Crooz — login page styling Cohesive with the letscrooz.com landing (cobalt + violet, light glass). FLASH-FREE BY DESIGN: - Scoped under body.lc-login, which branding.update_website_context sets SERVER-SIDE on the /login route, so these rules apply at FIRST PAINT. - Loaded render-blocking from (Website Settings head_html), so the browser has this CSS before it paints. - Nothing branded depends on JavaScript, so nothing is swapped after load. - Frappe renders every login "screen" (login / forgot / email-link / signup) in the initial HTML and only collapses them to one via jQuery on frappe.ready(). We hide the inactive ones here with NON-!important rules so they never flash stacked, while jQuery's .show() (inline style) can still reveal them for navigation. ============================================================================ */ body.lc-login{ --lc-cobalt:#6474e4; --lc-violet:#7c3aed; --lc-ink:#161233; --lc-muted:#5f5a7c; --lc-faint:#9a95b8; --lc-line:rgba(23,19,49,.10); --lc-soft:#f6f5ff; --lc-grad:linear-gradient(120deg,#6474e4 0%,#7d5ce9 45%,#8b3ef0 100%); --lc-disp:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --lc-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --lc-script:"Dancing Script",cursive; min-height:100vh; min-height:100dvh; margin:0; font-family:var(--lc-body); color:var(--lc-ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background: radial-gradient(1100px 640px at 84% -12%, rgba(124,58,237,.14), transparent 60%), radial-gradient(900px 560px at 4% 8%, rgba(100,116,228,.10), transparent 55%), #ffffff; display:flex; align-items:center; justify-content:center; padding:32px 20px; position:relative; overflow-x:hidden; } /* soft drifting blobs behind the glass — same motif as the landing .blob */ body.lc-login::before, body.lc-login::after{ content:""; position:fixed; border-radius:50%; filter:blur(80px); z-index:0; pointer-events:none; } body.lc-login::before{ width:460px; height:460px; top:-150px; right:-90px; opacity:.34; background:radial-gradient(circle,#7c3aed,transparent 70%); animation:lcdrift1 20s ease-in-out infinite; } body.lc-login::after{ width:420px; height:420px; bottom:-160px; left:-120px; opacity:.30; background:radial-gradient(circle,#6474e4,transparent 70%); animation:lcdrift2 24s ease-in-out infinite; } @keyframes lcdrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(38px,54px) scale(1.1)}} @keyframes lcdrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-44px,36px) scale(1.06)}} /* remove any Frappe website chrome that could render on the login page */ body.lc-login .navbar, body.lc-login header.navbar, body.lc-login .navbar-collapse, body.lc-login .web-footer, body.lc-login footer, body.lc-login .footer{display:none !important} /* let our background show through Frappe's content wrappers */ body.lc-login .main-section, body.lc-login .page_content, body.lc-login #page-content, body.lc-login main, body.lc-login .for-login ~ *, body.lc-login section.section{background:transparent !important} /* ---- each login "screen" is a centered column: brand head above a glass card ---- */ body.lc-login section.for-login, body.lc-login section.for-email-login, body.lc-login section.for-forgot, body.lc-login section.for-login-with-email-link, body.lc-login section.for-signup{ position:relative; z-index:1; width:100%; max-width:412px; margin:0 auto; text-align:center; } /* first-paint: show ONLY the main login. NON-!important so jQuery .show() (which sets an inline display) can still reveal these for navigation. */ body.lc-login section.for-email-login, body.lc-login section.for-forgot, body.lc-login section.for-login-with-email-link, body.lc-login section.for-signup{display:none} /* --------------------------------------------------------------------------- Brand head — Frappe renders

. We keep it SERVER-RENDERED and just restyle it (no JS swap): - swap the logo image to the square gradient mark via CSS content:url - on the main login, hide the "Login to Lets Crooz"

text and render the "Lets Crooz" wordmark (Dancing Script gradient) via ::after - the forgot / email-link screens keep their real

title under the mark --------------------------------------------------------------------------- */ body.lc-login .page-card-head{ display:flex; flex-direction:column; align-items:center; gap:11px; text-align:center; margin:0 0 20px; padding:0; border:0; background:transparent; } body.lc-login .page-card-head .app-logo{ display:inline-block !important; width:168px !important; height:168px !important; /* beat Frappe's img{max-height:42px} */ max-width:none !important; max-height:none !important; object-fit:contain; content:url("/assets/emr_app/images/letscrooz-lockup.svg"); /* robot emblem + wordmark lockup */ filter:drop-shadow(0 14px 28px rgba(124,58,237,.32)); } body.lc-login .page-card-head h4{ font-family:var(--lc-disp); font-weight:600; font-size:19px; line-height:1.3; color:var(--lc-ink); margin:0; } /* main login: replace the plain heading with the Dancing Script wordmark */ body.lc-login section.for-login .page-card-head h4{ font-size:0; line-height:0; margin:0; } body.lc-login section.for-login .page-card-head h4::after{ content:""; font-family:var(--lc-script); font-weight:700; font-size:44px; line-height:1; background:var(--lc-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } body.lc-login section.for-login .page-card-head::after{ content:"Welcome back, sign in to your workspace"; font-family:var(--lc-body); font-weight:400; font-size:13.5px; line-height:1.4; color:var(--lc-muted); max-width:290px; margin-top:2px; } /* ---- the glass card ---- */ body.lc-login .login-content.page-card{ position:relative; text-align:left; background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5); border:1px solid rgba(255,255,255,.75); border-radius:22px; padding:30px 28px 26px; box-shadow:0 30px 80px -30px rgba(60,50,140,.45), 0 2px 10px -5px rgba(60,50,140,.20); animation:lccard .5s cubic-bezier(.2,.9,.3,1) both; } @keyframes lccard{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* red shake on invalid login (Frappe adds .invalid-login) */ body.lc-login .login-content.page-card.invalid-login{animation:lcshake .4s} @keyframes lcshake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}} /* ---- form fields ---- */ body.lc-login .page-card-body{padding:0} body.lc-login .form-group{margin:0 0 15px} body.lc-login .email-field, body.lc-login .password-field{position:relative} body.lc-login input.form-control{ width:100%; height:auto !important; border:1px solid var(--lc-line) !important; border-radius:12px !important; background:var(--lc-soft) !important; padding:13px 16px 13px 42px !important; /* left room for the field icon */ margin:0 !important; /* drop Frappe's input{margin-bottom:1rem} */ font-size:16px !important; line-height:1.3; color:var(--lc-ink) !important; box-shadow:none !important; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; } body.lc-login input.form-control::placeholder{color:var(--lc-faint)} body.lc-login input.form-control:focus{ border-color:var(--lc-violet) !important; background:#fff !important; outline:none !important; box-shadow:0 0 0 4px rgba(124,58,237,.14) !important; } /* field glyphs (envelope / lock): identical size + colour, vertically CENTRED INSIDE the field, a consistent 14px from the left edge — never on the border. !important resets Frappe's default left/top so the icon can't drift to the corner. */ body.lc-login .field-icon{ position:absolute !important; left:14px !important; right:auto !important; top:50% !important; bottom:auto !important; transform:translateY(-50%) !important; width:18px !important; height:18px !important; color:var(--lc-faint); pointer-events:none; } /* the password field also holds the Show/Hide toggle on the right */ body.lc-login .password-field input.form-control{padding-right:64px !important} /* show / hide password toggle (functionality kept by core login.js). !important resets Frappe's default top:5px/right:9px (its selector is more specific) so the toggle is vertically centred, matching the left-side lock. */ body.lc-login .toggle-password{ position:absolute !important; right:12px !important; left:auto !important; top:50% !important; bottom:auto !important; transform:translateY(-50%) !important; z-index:3; font-size:12px; font-weight:600; color:var(--lc-violet); cursor:pointer; user-select:none; padding:4px 7px; border-radius:8px; transition:background .15s; } body.lc-login .toggle-password:hover{background:rgba(124,58,237,.10)} /* ---- normalise Frappe's login layout so all controls line up ---- Frappe constrains the
to 320px and pads .login-button-wrapper, which makes the Login button narrower than the "Login with Email Link" button and the field gaps uneven. Give every control the same full width + rhythm. */ body.lc-login .login-content.page-card form{max-width:100% !important; margin:0 !important} body.lc-login .form-group{margin:0 0 14px !important} body.lc-login .login-button-wrapper{min-width:0 !important; padding:0 !important; margin:0 !important} body.lc-login .page-card-actions{margin-top:18px !important} body.lc-login .social-logins{margin-top:0 !important} /* forgot-password link */ body.lc-login .forgot-password-message{margin:6px 2px 0; text-align:right} body.lc-login .forgot-password-message a, body.lc-login .sign-up-message a{color:var(--lc-violet); font-weight:600; font-size:13px} body.lc-login .forgot-password-message a:hover, body.lc-login .sign-up-message a:hover{text-decoration:underline} /* ---- buttons ---- */ body.lc-login .page-card-actions{margin-top:20px; display:flex; flex-direction:column; gap:10px} /* primary — gradient pill with shimmer sweep (matches landing .btn-primary) */ body.lc-login .btn-login, body.lc-login .btn-primary, body.lc-login .btn-forgot, body.lc-login button[type="submit"].btn-primary{ position:relative; overflow:hidden; width:100%; border:none !important; cursor:pointer; background:var(--lc-grad) !important; color:#fff !important; font-family:var(--lc-disp); font-weight:600; font-size:15px; padding:13px 20px !important; border-radius:999px !important; box-shadow:0 14px 30px -10px rgba(90,70,240,.6); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; } body.lc-login .btn-login::after, body.lc-login .btn-primary::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent); transform:translateX(-120%); transition:transform .6s ease; } body.lc-login .btn-login:hover, body.lc-login .btn-primary:hover, body.lc-login .btn-forgot:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -12px rgba(90,70,240,.78); } body.lc-login .btn-login:hover::after, body.lc-login .btn-primary:hover::after{transform:translateX(120%)} body.lc-login .btn-login:focus-visible, body.lc-login .btn-primary:focus-visible, body.lc-login .btn-forgot:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(124,58,237,.32); } /* secondary / ghost — "Login with Email Link", "Back to Login", social buttons */ body.lc-login .btn-default, body.lc-login .btn-login-option{ width:100%; background:#fff !important; color:var(--lc-ink) !important; border:1px solid var(--lc-line) !important; border-radius:999px !important; font-family:var(--lc-disp); font-weight:600; font-size:14px; padding:12px 20px !important; box-shadow:none !important; transition:border-color .2s ease, color .2s ease, transform .2s ease; } body.lc-login .btn-default:hover, body.lc-login .btn-login-option:hover{ border-color:var(--lc-violet) !important; color:var(--lc-violet) !important; transform:translateY(-1px); } /* "or" divider between password login and alternative logins */ body.lc-login .login-divider{ display:flex; align-items:center; gap:12px; color:var(--lc-faint); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin:16px 0 12px; } body.lc-login .login-divider::before, body.lc-login .login-divider::after{content:""; flex:1; height:1px; background:var(--lc-line)} body.lc-login .social-login-buttons{margin-top:8px; display:flex; flex-direction:column; gap:10px} /* signup-disabled screen tidy-up */ body.lc-login .sign-up-message{color:var(--lc-muted); font-size:13px; margin-top:14px; text-align:center} body.lc-login .indicator{font-size:13px} /* injected "Get started" footer link (progressive enhancement, non-critical) */ body.lc-login .lc-cta{margin-top:18px; text-align:center; font-size:13.5px; color:var(--lc-muted)} body.lc-login .lc-cta a{color:var(--lc-violet); font-weight:600} body.lc-login .lc-cta a:hover{text-decoration:underline} /* discreet platform-admin entry: faint, small, brightens on hover only */ body.lc-login .lc-admin-link{margin-top:11px; text-align:center; font-size:11.5px; letter-spacing:.03em} body.lc-login .lc-admin-link a{ color:var(--lc-faint); font-weight:500; text-decoration:none; opacity:.7; transition:color .15s ease, opacity .15s ease; } body.lc-login .lc-admin-link a:hover{color:var(--lc-violet); opacity:1; text-decoration:underline} /* respect reduced motion */ @media (prefers-reduced-motion:reduce){ body.lc-login::before, body.lc-login::after, body.lc-login .login-content.page-card, body.lc-login .btn-login, body.lc-login .btn-primary{animation:none !important; transition:none !important} body.lc-login .btn-login::after, body.lc-login .btn-primary::after{display:none} } /* small screens */ @media (max-width:480px){ body.lc-login{padding:22px 14px} body.lc-login .login-content.page-card{padding:24px 18px 20px} body.lc-login section.for-login .page-card-head h4::after{font-size:36px} body.lc-login .page-card-head .app-logo{width:82px !important; height:82px !important} } /* ============================================================================ LOGIN PAGE 2 — interactive robot avatar (decorative, aria-hidden) Built ON TOP of the Page 1 branding above. letscrooz_login.js injects the avatar + adds `.lc-stage` to the sections' parent AFTER first paint, so the branded, server-rendered login still paints first (no flash). Every form control works without the avatar; the avatar is purely decorative. ============================================================================ */ /* Frappe wraps the login content in several width-capped columns (~656px) — too narrow for the bot + card in a row, and each cap reasserts from a higher wrapper. Rather than fight every level, full-bleed the stage to the viewport width so the pair lays out in one centered row. body.lc-login has overflow-x:hidden, so this never introduces a horizontal scrollbar. */ body.lc-login .lc-stage{ display:flex !important; align-items:center; justify-content:center; gap:46px; flex-wrap:wrap; box-sizing:border-box; width:100vw; max-width:100vw; padding:0 24px; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } /* the visible screen slides in beside the bot */ body.lc-login .lc-stage section.for-login, body.lc-login .lc-stage section.for-forgot, body.lc-login .lc-stage section.for-login-with-email-link, body.lc-login .lc-stage section.for-signup{ width:auto !important; flex:0 1 412px; /* don't let width:100% force a wrap */ margin:0 !important; /* kill Page-1 margin:auto (it ate the flex gap) */ animation:lc-slidein .6s .05s both cubic-bezier(.2,.9,.3,1); } @keyframes lc-slidein{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}} /* avatar container + entrance pop */ body.lc-login .lc-avatar{ flex:0 0 auto; width:210px; position:relative; opacity:0; transform:scale(.4) translateY(26px); } body.lc-login .lc-avatar.is-in{ opacity:1; transform:none; transition:transform .7s cubic-bezier(.2,1.15,.3,1), opacity .5s ease; } body.lc-login .lc-avatar::before{ /* soft brand glow behind the bot */ content:""; position:absolute; inset:8% 8% 16% 8%; z-index:-1; border-radius:50%; background:radial-gradient(circle,rgba(124,58,237,.30),transparent 70%); filter:blur(26px); } body.lc-login .lc-bot-svg{display:block; width:210px; height:auto; overflow:visible; cursor:pointer} /* part transform-boxes / origins */ #lc-antenna{transform-box:view-box; transform-origin:110px 46px} #lc-head-group{transform-box:view-box; transform-origin:110px 156px} #lc-bot{transform-box:view-box; transform-origin:110px 234px} /* hop squashes from the feet */ #lc-eyes{transform-box:view-box; transform-origin:110px 100px; transition:transform .13s ease-in-out} #lc-pupils{transition:transform .5s cubic-bezier(.3,.7,.3,1); transform:translate(var(--lc-px,0px),var(--lc-py,0px))} .lc-mouth{transition:opacity .25s ease-in-out} .lc-hand{transition:transform .62s cubic-bezier(.34,1.28,.44,1)} /* soft spring w/ gentle settle */ #lc-cheeks circle{transition:opacity .35s ease-in-out} /* rest positions for the floating mitts */ #lc-hand-left{transform:translate(50px,192px)} #lc-hand-right{transform:translate(170px,192px)} /* idle: slow breathing + blink */ @keyframes lc-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} body.lc-login .lc-avatar.is-in #lc-breathe{animation:lc-breathe 4.4s ease-in-out infinite} body.lc-login .lc-avatar.is-blinking #lc-eyes{transform:scaleY(.12)} /* secondary motion: antenna sways on its own slower rhythm so it never moves in perfect lockstep with the body (overlapping action) */ @keyframes lc-antenna-idle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}} body.lc-login .lc-avatar.is-in #lc-antenna{animation:lc-antenna-idle 5.2s ease-in-out infinite} /* antenna tip idle pulse */ @keyframes lc-tip{0%,100%{opacity:1}50%{opacity:.45}} body.lc-login .lc-avatar.is-in #lc-antenna-tip{animation:lc-tip 3.2s ease-in-out infinite} /* expression: SMILE (email focus/typing) */ body.lc-login .lc-avatar.is-smiling #lc-mouth-neutral{opacity:0} body.lc-login .lc-avatar.is-smiling #lc-mouth-smile{opacity:1} body.lc-login .lc-avatar.is-smiling #lc-cheeks circle{opacity:.55} body.lc-login .lc-avatar.is-smiling #lc-eyes{transform:scaleY(.9)} /* expression: COVER EYES (password focus) — palms rise onto the eyes. The soft-spring transition on .lc-hand gives the lift a natural settle. */ body.lc-login .lc-avatar.is-covering #lc-hand-left{transform:translate(88px,101px)} body.lc-login .lc-avatar.is-covering #lc-hand-right{transform:translate(132px,101px)} /* expression: PEEK through fingers (Show password) — hands drop, eyes peek over */ body.lc-login .lc-avatar.is-peeking #lc-hand-left{transform:translate(85px,131px)} body.lc-login .lc-avatar.is-peeking #lc-hand-right{transform:translate(135px,131px)} body.lc-login .lc-avatar.is-peeking #lc-mouth-neutral{opacity:0} body.lc-login .lc-avatar.is-peeking #lc-mouth-o{opacity:1} /* WAVE (right mitt) — on load + hover */ @keyframes lc-wave{ /* rise along an ARC, wave, settle back — with anticipation + follow-through */ 0% {transform:translate(170px,192px)} 8% {transform:translate(178px,205px)} /* anticipation: small wind-up down/out */ 26% {transform:translate(140px,120px)} /* arc up-and-in (curved path, not a straight line) */ 40% {transform:translate(152px,64px)} 53% {transform:translate(187px,56px)} /* wave: swing right */ 66% {transform:translate(153px,64px)} /* swing left */ 79% {transform:translate(183px,58px)} /* swing right (smaller) */ 90% {transform:translate(150px,122px)} /* arc back down */ 100%{transform:translate(170px,192px)} /* settle to rest */ } body.lc-login .lc-avatar.is-waving #lc-hand-right{animation:lc-wave 2.1s cubic-bezier(.4,.08,.3,1)} /* antenna wiggle on hover */ @keyframes lc-antenna{0%,100%{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}} body.lc-login .lc-avatar.is-hover #lc-antenna{animation:lc-antenna .9s ease-in-out} body.lc-login .lc-avatar.is-hover #lc-antenna-tip{fill:#a855f7} /* overlapping action: when the arm waves, the antenna answers a beat later (lag) */ @keyframes lc-antenna-wave{0%{transform:rotate(0)}22%{transform:rotate(-13deg)}48%{transform:rotate(11deg)}72%{transform:rotate(-6deg)}100%{transform:rotate(0)}} body.lc-login .lc-avatar.is-waving #lc-antenna{animation:lc-antenna-wave 2.1s ease-in-out .14s} /* happy HOP (success) — crouch (anticipation) -> leap+stretch -> land squash -> settle */ @keyframes lc-hop{ 0% {transform:translateY(0) scale(1,1)} 12% {transform:translateY(6px) scale(1.05,.94)} /* anticipation: crouch + squash */ 38% {transform:translateY(-34px) scale(.95,1.07)} /* leap + stretch */ 60% {transform:translateY(0) scale(1.07,.92)} /* land + squash */ 76% {transform:translateY(-10px) scale(1,1)} /* small secondary bounce */ 100%{transform:translateY(0) scale(1,1)} /* settle */ } body.lc-login .lc-avatar.is-hop #lc-bot{animation:lc-hop 1s cubic-bezier(.3,.7,.3,1)} /* head-SHAKE (error) — tiny wind-up the other way first (anticipation), then soften out */ @keyframes lc-shake{0%{transform:rotate(0)}12%{transform:rotate(4deg)}30%{transform:rotate(-9deg)}50%{transform:rotate(7deg)}70%{transform:rotate(-5deg)}86%{transform:rotate(2deg)}100%{transform:rotate(0)}} body.lc-login .lc-avatar.is-shake #lc-head-group{animation:lc-shake .8s cubic-bezier(.36,.07,.19,1)} /* stack on small screens: bot on top, form below */ @media (max-width:820px){ body.lc-login .lc-stage{flex-direction:column; gap:10px} body.lc-login .lc-avatar{width:148px; order:-1} body.lc-login .lc-bot-svg{width:148px} } /* reduced motion: calm + instant, but expressions still convey state */ @media (prefers-reduced-motion:reduce){ body.lc-login .lc-avatar{opacity:1 !important; transform:none !important; transition:none !important} body.lc-login .lc-avatar.is-in #lc-breathe, body.lc-login .lc-avatar.is-in #lc-antenna, body.lc-login .lc-avatar.is-in #lc-antenna-tip, body.lc-login .lc-avatar.is-waving #lc-hand-right, body.lc-login .lc-avatar.is-waving #lc-antenna, body.lc-login .lc-avatar.is-hover #lc-antenna, body.lc-login .lc-avatar.is-hop #lc-bot, body.lc-login .lc-avatar.is-shake #lc-head-group, body.lc-login .lc-stage section.for-login, body.lc-login .lc-stage section.for-forgot, body.lc-login .lc-stage section.for-login-with-email-link, body.lc-login .lc-stage section.for-signup{animation:none !important} body.lc-login .lc-hand, body.lc-login #lc-pupils, body.lc-login #lc-eyes, body.lc-login .lc-mouth{transition:none !important} }