/* Beacon login — personal theme for beacon.akashmishra.cloud * Palette lifted from the icon.svg on akashmishra.com. * Loaded only by beacon/www/login.html; every rule is gated behind * .bcn-login-page on so nothing here can leak into the desk or website. */ /* ---------- palette ---------- */ .bcn-login-page { --bcn-bg: #0c0b09; --bcn-bg-raise: #14120f; --bcn-card: rgba(23, 20, 16, 0.72); --bcn-border: rgba(201, 168, 124, 0.16); --bcn-border-hi: rgba(201, 168, 124, 0.42); --bcn-fg: #ece5d8; --bcn-muted: #9a9184; --bcn-faint: #6b6459; --bcn-accent: #c9a87c; --bcn-accent-in: #0c0b09; --bcn-danger: #d98b7a; --bcn-field: rgba(255, 255, 255, 0.04); --bcn-glow: rgba(201, 168, 124, 0.30); --bcn-veil: radial-gradient(ellipse 120% 85% at 50% 42%, rgba(12,11,9,0.30) 0%, rgba(12,11,9,0.82) 62%, var(--bcn-bg) 100%); --bcn-sky-opacity: 0.85; /* consumed by the inlined constellation markup */ --accent: var(--bcn-accent); --foreground: var(--bcn-fg); color-scheme: dark; } @media (prefers-color-scheme: light) { .bcn-login-page:not([data-bcn-theme="dark"]) { --bcn-bg: #f5f0e8; --bcn-bg-raise: #efe8dc; --bcn-card: rgba(255, 253, 249, 0.78); --bcn-border: rgba(138, 115, 82, 0.20); --bcn-border-hi: rgba(138, 115, 82, 0.50); --bcn-fg: #2b241a; --bcn-muted: #6f6455; --bcn-faint: #948873; --bcn-accent: #8a7352; --bcn-accent-in: #fdfbf7; --bcn-danger: #a8442e; --bcn-field: rgba(43, 36, 26, 0.035); --bcn-glow: rgba(138, 115, 82, 0.26); --bcn-veil: radial-gradient(ellipse 120% 85% at 50% 42%, rgba(245,240,232,0.28) 0%, rgba(245,240,232,0.80) 62%, var(--bcn-bg) 100%); --bcn-sky-opacity: 1; color-scheme: light; } } /* explicit toggle wins over the system preference, in both directions */ .bcn-login-page[data-bcn-theme="light"] { --bcn-bg: #f5f0e8; --bcn-bg-raise: #efe8dc; --bcn-card: rgba(255, 253, 249, 0.78); --bcn-border: rgba(138, 115, 82, 0.20); --bcn-border-hi: rgba(138, 115, 82, 0.50); --bcn-fg: #2b241a; --bcn-muted: #6f6455; --bcn-faint: #948873; --bcn-accent: #8a7352; --bcn-accent-in: #fdfbf7; --bcn-danger: #a8442e; --bcn-field: rgba(43, 36, 26, 0.035); --bcn-glow: rgba(138, 115, 82, 0.26); --bcn-veil: radial-gradient(ellipse 120% 85% at 50% 42%, rgba(245,240,232,0.28) 0%, rgba(245,240,232,0.80) 62%, var(--bcn-bg) 100%); --bcn-sky-opacity: 1; color-scheme: light; } /* ---------- page shell ---------- */ .bcn-login-page, .bcn-login-page body { background: var(--bcn-bg) !important; color: var(--bcn-fg); min-height: 100%; } .bcn-login-page body { margin: 0; font-family: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, sans-serif; -webkit-font-smoothing: antialiased; } /* frappe chrome we don't want on this page */ .bcn-login-page .navbar, .bcn-login-page .web-footer, .bcn-login-page .page-breadcrumbs, .bcn-login-page footer { display: none !important; } .bcn-login-page .page-content-wrapper, .bcn-login-page .page_content { padding: 0; margin: 0; } /* ---------- blurred constellation sky ---------- */ .bcn-sky { position: fixed; inset: -6vmax; /* overscan so the blur never reveals an edge */ z-index: 0; overflow: hidden; pointer-events: none; opacity: var(--bcn-sky-opacity); } .bcn-sky .bcn-constellation { width: 100%; height: 100%; display: block; color: var(--bcn-accent); filter: blur(7px) saturate(115%); transform: scale(1.06); animation: bcn-sky-in 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } /* legibility veil between the sky and the card */ .bcn-veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: var(--bcn-veil); } @keyframes bcn-sky-in { from { opacity: 0; transform: scale(1.14); filter: blur(18px) saturate(115%); } to { opacity: 1; transform: scale(1.06); filter: blur(7px) saturate(115%); } } /* constellation's own line/node animations (moved out of the SVG) */ @keyframes bcn-draw-line { from { stroke-dashoffset: var(--line-length, 200); } to { stroke-dashoffset: 0; } } @keyframes bcn-fade-in-node { from { opacity: 0; transform: scale(0); } to { opacity: var(--node-opacity, 0.4); transform: scale(1); } } @keyframes bcn-pulse-node { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .bcn-line { stroke-dasharray: var(--line-length, 200); stroke-dashoffset: var(--line-length, 200); animation: bcn-draw-line 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .bcn-node { opacity: 0; transform-origin: center; transform-box: fill-box; animation: bcn-fade-in-node 0.5s ease forwards, bcn-pulse-node 4.5s ease-in-out infinite; } /* ---------- layout ---------- */ .bcn-login-page .bcn-shell { position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.25rem 1.25rem; box-sizing: border-box; } /* frappe's login.js toggles these
s; only ever one is visible */ .bcn-login-page .bcn-shell > section { width: 100%; max-width: 25.5rem; animation: bcn-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; } @keyframes bcn-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ---------- masthead ---------- */ .bcn-login-page .page-card-head { text-align: center; margin-bottom: 1.5rem; padding: 0; border: 0; background: none; } .bcn-mark { width: 44px; height: 44px; display: block; margin: 0 auto 0.9rem; filter: drop-shadow(0 3px 14px var(--bcn-glow)); } .bcn-login-page .page-card-head h4 { font-size: 1.28rem; font-weight: 600; letter-spacing: -0.015em; color: var(--bcn-fg); margin: 0; } .bcn-kicker { display: block; margin-top: 0.45rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.66rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--bcn-faint); } /* frappe injects in some flows — we use our own mark */ .bcn-login-page .app-logo { display: none; } /* ---------- card ---------- */ .bcn-login-page .login-content.page-card { background: var(--bcn-card); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); border: 1px solid var(--bcn-border); border-radius: 14px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 50px -12px rgba(0, 0, 0, 0.55); padding: 1.6rem; margin: 0; width: 100%; box-sizing: border-box; } .bcn-login-page .page-card-body { padding: 0; } .bcn-login-page .page-card-actions { padding: 0; margin-top: 1.1rem; } /* ---------- fields ---------- */ .bcn-login-page .form-group { margin-bottom: 0.85rem; } .bcn-login-page .form-control { background: var(--bcn-field); border: 1px solid var(--bcn-border); border-radius: 9px; color: var(--bcn-fg); font-size: 0.925rem; height: auto; padding: 0.68rem 0.85rem; width: 100%; box-shadow: none; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .bcn-login-page .form-control::placeholder { color: var(--bcn-faint); } .bcn-login-page .form-control:focus { outline: none; background: var(--bcn-field); border-color: var(--bcn-border-hi); box-shadow: 0 0 0 3px var(--bcn-glow); color: var(--bcn-fg); } /* frappe places its icons inside .email-field / .password-field */ .bcn-login-page .email-field, .bcn-login-page .password-field { position: relative; } .bcn-login-page .field-icon { position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--bcn-faint); opacity: 0.65; pointer-events: none; } .bcn-login-page .password-field .field-icon { display: none; } .bcn-login-page .toggle-password { position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bcn-faint); user-select: none; } .bcn-login-page .toggle-password:hover { color: var(--bcn-accent); } /* autofill shouldn't repaint the field white */ .bcn-login-page .form-control:-webkit-autofill, .bcn-login-page .form-control:-webkit-autofill:hover, .bcn-login-page .form-control:-webkit-autofill:focus { -webkit-text-fill-color: var(--bcn-fg); caret-color: var(--bcn-fg); -webkit-box-shadow: 0 0 0 1000px var(--bcn-bg-raise) inset; transition: background-color 9999s ease-in-out 0s; } /* ---------- buttons ---------- */ .bcn-login-page .btn-primary, .bcn-login-page .btn-primary:not(:disabled):not(.disabled) { background: var(--bcn-accent); border: 1px solid var(--bcn-accent); color: var(--bcn-accent-in); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.01em; border-radius: 9px; padding: 0.68rem 1rem; box-shadow: 0 6px 18px -8px var(--bcn-glow); transition: filter 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease; } .bcn-login-page .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 10px 26px -8px var(--bcn-glow); } .bcn-login-page .btn-primary:active { transform: translateY(1px); } .bcn-login-page .btn-primary:focus-visible { outline: 2px solid var(--bcn-accent); outline-offset: 2px; } .bcn-login-page .btn-default, .bcn-login-page .btn-login-option { background: transparent; border: 1px solid var(--bcn-border); color: var(--bcn-fg); border-radius: 9px; font-size: 0.875rem; padding: 0.62rem 1rem; transition: border-color 0.18s ease, background 0.18s ease; } .bcn-login-page .btn-default:hover, .bcn-login-page .btn-login-option:hover { border-color: var(--bcn-border-hi); background: var(--bcn-field); color: var(--bcn-fg); } .bcn-login-page .login-button-wrapper { margin-top: 0.55rem; } /* ---------- links & small print ---------- */ .bcn-login-page a { color: var(--bcn-accent); text-decoration: none; } .bcn-login-page a:hover { text-decoration: underline; } .bcn-login-page .forgot-password-message { margin: 0.7rem 0 0; font-size: 0.8rem; text-align: right; } .bcn-login-page .sign-up-message { margin-top: 1.1rem; font-size: 0.82rem; color: var(--bcn-muted); text-align: center; } .bcn-login-page .login-divider { margin: 1.05rem 0 0.5rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bcn-faint); display: flex; align-items: center; gap: 0.75rem; } .bcn-login-page .login-divider::before, .bcn-login-page .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--bcn-border); } .bcn-login-page .text-muted { color: var(--bcn-muted) !important; } /* invalid-login feedback from login.js */ .bcn-login-page .login-content.page-card.invalid-login { animation: bcn-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97); border-color: var(--bcn-danger); } @keyframes bcn-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } } .bcn-login-page .page-card-body.invalid .form-control { border-color: var(--bcn-danger); } /* ---------- footer: links back to akashmishra.com ---------- */ .bcn-footer { position: relative; z-index: 2; margin-top: 2rem; text-align: center; font-size: 0.78rem; color: var(--bcn-muted); animation: bcn-rise 0.7s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .bcn-footer nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem 0.9rem; } .bcn-footer a { color: var(--bcn-muted); border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color 0.18s ease, border-color 0.18s ease; } .bcn-footer a:hover { color: var(--bcn-accent); border-bottom-color: var(--bcn-border-hi); text-decoration: none; } .bcn-footer .bcn-sep { color: var(--bcn-faint); opacity: 0.5; } .bcn-colophon { margin-top: 0.75rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.63rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--bcn-faint); } /* ---------- theme toggle ---------- */ .bcn-theme-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 5; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer; background: var(--bcn-card); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--bcn-border); color: var(--bcn-muted); transition: color 0.18s ease, border-color 0.18s ease; } .bcn-theme-toggle:hover { color: var(--bcn-accent); border-color: var(--bcn-border-hi); } .bcn-theme-toggle:focus-visible { outline: 2px solid var(--bcn-accent); outline-offset: 2px; } .bcn-theme-toggle svg { width: 16px; height: 16px; } /* show the icon for the theme you'd switch *to* */ .bcn-theme-toggle .bcn-icon-sun { display: block; } .bcn-theme-toggle .bcn-icon-moon { display: none; } @media (prefers-color-scheme: light) { .bcn-login-page:not([data-bcn-theme="dark"]) .bcn-theme-toggle .bcn-icon-sun { display: none; } .bcn-login-page:not([data-bcn-theme="dark"]) .bcn-theme-toggle .bcn-icon-moon { display: block; } } .bcn-login-page[data-bcn-theme="light"] .bcn-theme-toggle .bcn-icon-sun { display: none; } .bcn-login-page[data-bcn-theme="light"] .bcn-theme-toggle .bcn-icon-moon { display: block; } /* ---------- small screens ---------- */ @media (max-width: 480px) { .bcn-login-page .bcn-shell { padding: 2.5rem 1rem 1rem; } .bcn-login-page .login-content.page-card { padding: 1.25rem; border-radius: 12px; } .bcn-sky .bcn-constellation { filter: blur(9px) saturate(115%); } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .bcn-login-page *, .bcn-login-page *::before, .bcn-login-page *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .bcn-line { stroke-dashoffset: 0; } .bcn-node { opacity: var(--node-opacity, 0.4); } .bcn-sky .bcn-constellation { opacity: 1; transform: scale(1.06); } } /* ===================================================================== * Rules absorbed from login.bundle.css, which this page no longer loads. * Everything below is behaviour that login.js depends on, restyled. * ===================================================================== */ /* login.js toggles these; only .for-login may be visible on first paint. jQuery .toggle(true) sets an inline display and overrides this. */ .bcn-login-page .for-forgot, .bcn-login-page .for-signup, .bcn-login-page .for-email-login, .bcn-login-page .for-login-with-email-link { display: none; } /* login.js removes .hide once it has bound its submit handlers */ .bcn-login-page .hide { display: none !important; } /* the bundle constrained forms to 320px; we let the card set the width */ .bcn-login-page .login-content.page-card form { max-width: none; margin: 0; } .bcn-login-page .form-label.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* social/alternate sign-in buttons */ .bcn-login-page .social-logins { margin-top: 0; } .bcn-login-page .social-login-buttons { display: flex; flex-direction: column; } .bcn-login-page .btn-login-option img, .bcn-login-page .btn-login-option svg { width: 16px; height: 16px; margin-right: 0.5rem; vertical-align: -3px; } /* ---------- two-factor screen (injected by login.js request_otp) ---------- */ .bcn-login-page #twofactor_div { text-align: center; } .bcn-login-page #twofactor_div .page-card-head { margin-bottom: 1rem; padding: 0; } .bcn-login-page #otp_div { margin-bottom: 0.9rem; font-size: 0.85rem; color: var(--bcn-muted); line-height: 1.5; } /* the QR code renders as a plain /canvas; keep it readable on dark */ .bcn-login-page #otp_div img, .bcn-login-page #otp_div canvas, .bcn-login-page #otp_div svg { display: block; margin: 0.6rem auto; max-width: 180px; height: auto; padding: 0.5rem; background: #fff; /* QR codes need a light quiet zone to scan */ border-radius: 8px; } .bcn-login-page #login_token { text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; letter-spacing: 0.35em; text-indent: 0.35em; /* re-centre against the trailing letter-space */ } .bcn-login-page #verify_token { margin-top: 0.9rem; } .bcn-login-page #qr_info { color: var(--bcn-muted); } /* ---------- indicators (2FA header, signup-disabled notice) ---------- */ .bcn-login-page .indicator { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bcn-muted); } .bcn-login-page .indicator::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bcn-accent); box-shadow: 0 0 0 3px var(--bcn-glow); } .bcn-login-page .indicator.gray::before { background: var(--bcn-faint); box-shadow: none; } /* ---------- signup form (frappe/templates/signup.html) ---------- */ .bcn-login-page .form-signup .page-card-body { padding: 0; } .bcn-login-page .form-signup .sign-up-message { margin-top: 1rem; } .bcn-login-page .sign-up-message a.blue { color: var(--bcn-accent); } /* ---------- field icons: own the positioning outright ---------- */ .bcn-login-page .email-field input, .bcn-login-page .password-field input { padding-left: 0.85rem; } /* website.bundle.css ships `.btn.btn-primary:active { color: var(--gray-100) !important }`, which is the only !important on this page that reaches our controls. Match it. */ .bcn-login-page .btn.btn-primary:active, .bcn-login-page .btn.btn-primary:focus { color: var(--bcn-accent-in) !important; background-color: var(--bcn-accent) !important; border-color: var(--bcn-accent); }