/* Whitebird-branded login page. Scoped to body[data-path="login"] so it only touches /login, not the rest of the customer portal. Frappe stamps data-path on from templates/base.html, so this survives upgrades better than guessing at a page-specific class. */ body[data-path="login"] { background-color: #cfe3dc; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23eaf3ef'/%3E%3Cstop offset='30%25' stop-color='%23cfe3dc'/%3E%3Cstop offset='60%25' stop-color='%236f9c8e'/%3E%3Cstop offset='85%25' stop-color='%231c4a42'/%3E%3Cstop offset='100%25' stop-color='%23143631'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1440' height='900' fill='url(%23g)'/%3E%3Ccircle cx='1100' cy='620' r='260' fill='%23e06a1b' opacity='0.10'/%3E%3Ccircle cx='1100' cy='620' r='150' fill='%23e06a1b' opacity='0.12'/%3E%3Cpath d='M0,260 C260,200 420,320 700,280 C980,240 1180,310 1440,250 L1440,900 L0,900 Z' fill='%23bcd6cc' opacity='0.55'/%3E%3Cpath d='M0,400 C260,460 460,360 720,400 C980,440 1200,360 1440,400 L1440,900 L0,900 Z' fill='%236f9c8e' opacity='0.6'/%3E%3Cpath d='M0,560 C240,520 440,600 700,570 C960,540 1200,600 1440,560 L1440,900 L0,900 Z' fill='%232a5850'/%3E%3Cpath d='M0,680 C260,730 480,650 760,680 C1020,708 1240,650 1440,680 L1440,900 L0,900 Z' fill='%231c4a42'/%3E%3Cpath d='M0,800 C260,770 500,830 780,800 C1040,772 1260,820 1440,790 L1440,900 L0,900 Z' fill='%23143631'/%3E%3Cg stroke='%23ffffff' stroke-linecap='round' fill='none'%3E%3Cpath d='M180,130 Q205,105 230,130 Q255,105 280,130' stroke-width='5' opacity='0.55'/%3E%3Cpath d='M980,85 Q1000,65 1020,85 Q1040,65 1060,85' stroke-width='4' opacity='0.4'/%3E%3Cpath d='M1120,160 Q1135,142 1150,160 Q1165,142 1180,160' stroke-width='3' opacity='0.32'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; background-attachment: fixed; min-height: 100vh; position: relative; overflow-x: hidden; } /* The website navbar has no purpose on a standalone login screen. */ body[data-path="login"] .navbar, body[data-path="login"] #navbar, body[data-path="login"] .website-topbar { display: none !important; } body[data-path="login"] .page-content-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } body[data-path="login"] .web-footer { display: none; } body[data-path="login"] .for-login { position: relative; z-index: 1; max-width: 480px; width: 100%; margin: 0 auto; padding: 8px 16px 24px; background: #ffffff; border-radius: 16px; box-shadow: 0 16px 40px rgba(20, 54, 49, 0.28); } body[data-path="login"] .page-card-head { padding: max(4vh, 20px) 0 6px; } body[data-path="login"] .page-card-head img.app-logo { max-height: 84px; } @media (max-width: 480px) { body[data-path="login"] .page-card-head img.app-logo { max-height: 64px; } body[data-path="login"] .for-login { padding: 8px 12px 20px; } } body[data-path="login"] .for-login .page-card { max-width: none; width: 100%; margin: 0; padding: 8px 0 0; background: transparent; border: none; border-radius: 0; box-shadow: none; } body[data-path="login"] .btn-login, body[data-path="login"] .btn-forgot, body[data-path="login"] .btn-login-with-email-link { background-color: #2a5850; border-color: #2a5850; } body[data-path="login"] .btn-login:hover, body[data-path="login"] .btn-forgot:hover, body[data-path="login"] .btn-login-with-email-link:hover { background-color: #1c4a42; border-color: #1c4a42; } body[data-path="login"] .forgot-password-message a, body[data-path="login"] .sign-up-message a { color: #e06a1b; } /* Sage and Silver Furnished Homes: a second brand sharing this same login page (hooks.py's static includes can't branch per-site -- see brand.js's own comment -- so both brands' rules live in this one file, gated by [data-brand] on rather than a second CSS file). The background is a hand-built SVG gradient, same shape/wave-layer structure as Whitebird's own above, restopped with Sage and Silver's real palette (sampled from the live marketing site's own CSS: button #566149, heading ink #33402e, background #f7f3ea) rather than Whitebird's sage-to-ink green. */ html[data-brand="sage_and_silver"] body[data-path="login"] { background-color: #e3e6d5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f7f3ea'/%3E%3Cstop offset='30%25' stop-color='%23e3e6d5'/%3E%3Cstop offset='60%25' stop-color='%237d8a6c'/%3E%3Cstop offset='85%25' stop-color='%233a4433'/%3E%3Cstop offset='100%25' stop-color='%23232b1f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1440' height='900' fill='url(%23g)'/%3E%3Ccircle cx='1100' cy='620' r='260' fill='%23a8642f' opacity='0.10'/%3E%3Ccircle cx='1100' cy='620' r='150' fill='%23a8642f' opacity='0.12'/%3E%3Cpath d='M0,260 C260,200 420,320 700,280 C980,240 1180,310 1440,250 L1440,900 L0,900 Z' fill='%23cfd6bd' opacity='0.55'/%3E%3Cpath d='M0,400 C260,460 460,360 720,400 C980,440 1200,360 1440,400 L1440,900 L0,900 Z' fill='%237d8a6c' opacity='0.6'/%3E%3Cpath d='M0,560 C240,520 440,600 700,570 C960,540 1200,600 1440,560 L1440,900 L0,900 Z' fill='%23566149'/%3E%3Cpath d='M0,680 C260,730 480,650 760,680 C1020,708 1240,650 1440,680 L1440,900 L0,900 Z' fill='%233a4433'/%3E%3Cpath d='M0,800 C260,770 500,830 780,800 C1040,772 1260,820 1440,790 L1440,900 L0,900 Z' fill='%23232b1f'/%3E%3Cg stroke='%23ffffff' stroke-linecap='round' fill='none'%3E%3Cpath d='M180,130 Q205,105 230,130 Q255,105 280,130' stroke-width='5' opacity='0.55'/%3E%3Cpath d='M980,85 Q1000,65 1020,85 Q1040,65 1060,85' stroke-width='4' opacity='0.4'/%3E%3Cpath d='M1120,160 Q1135,142 1150,160 Q1165,142 1180,160' stroke-width='3' opacity='0.32'/%3E%3C/g%3E%3C/svg%3E"); } html[data-brand="sage_and_silver"] body[data-path="login"] .btn-login, html[data-brand="sage_and_silver"] body[data-path="login"] .btn-forgot, html[data-brand="sage_and_silver"] body[data-path="login"] .btn-login-with-email-link { background-color: #566149; border-color: #566149; } html[data-brand="sage_and_silver"] body[data-path="login"] .btn-login:hover, html[data-brand="sage_and_silver"] body[data-path="login"] .btn-forgot:hover, html[data-brand="sage_and_silver"] body[data-path="login"] .btn-login-with-email-link:hover { background-color: #3a4433; border-color: #3a4433; } html[data-brand="sage_and_silver"] body[data-path="login"] .forgot-password-message a, html[data-brand="sage_and_silver"] body[data-path="login"] .sign-up-message a { color: #a8642f; }