/* =================================================================== LOGIN Redesigned as a light, paper-and-brass "reading room" look, built around the "lamp" motif that already runs through this codebase (lampPulse / lamp-glow / the occupied-desk indicator) — here it becomes an actual banker's-lamp illustration instead of just a glow effect. All new tokens are scoped to #view-login so this doesn't touch the dark navy theme used by the dashboard (defined in variables.css, not part of this pass). TYPE: display headings/body use Plus Jakarta Sans — a professional, highly readable sans-serif with a bit more warmth than a generic system font, still clean enough to read as one consistent product with the rest of the app. Labels/eyebrow/hint keep IBM Plex Mono for a bit of structure and contrast against the sans body copy. Requires the Google Fonts link in index.php's : https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap =================================================================== */ #view-login{ /* ---- local tokens ------------------------------------------- */ --lg-paper: #F6F1E4; /* brand panel background */ --lg-paper-deep: #ECE1C6; /* paper gradient depth */ --lg-surface: #FFFDF9; /* form panel background */ --lg-surface-raised:#FFFFFF; /* inputs */ --lg-ink: #2A2521; /* primary text */ --lg-ink-dim: #8A7F71; /* secondary text */ --lg-line: #E7DCC4; /* hairlines / borders */ --lg-green: #4f4f4f; /* banker's-lamp glass green — primary accent */ --lg-green-deep: #616262; /* pressed / hover */ --lg-green-soft: #E3EEE8; /* tinted fills */ --lg-brass: #B4915A; /* metal accent, focus rings */ --lg-brass-deep: #8F7040; --lg-brass-glow: rgba(180,145,90,.30); --lg-coral: #B3452F; /* errors only */ /* type: professional, readable sans-serif throughout; mono kept only for small uppercase labels. */ --lg-ff-display: var(--ff-display, 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif); --lg-ff-mono: var(--ff-mono, 'IBM Plex Mono', monospace); /* background photo, used by .login-bg below */ --lg-bg-photo: url('https://images.unsplash.com/photo-1764922145331-7b726c1826b5?fm=jpg&q=80&w=2400&auto=format&fit=crop'); position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; overflow:hidden; background:var(--lg-paper-deep); } /* Background: a warm, minimalist library/reading-corner photo (books + soft interior light — on brand for a study hub / co-working space) sitting under the existing paper-grain + brass/green vignette. The gradients act as a tint/scrim over the photo so it reads as "warm ambient backdrop" rather than a busy stock photo, and the card in front stays fully legible. */ .login-bg{ position:absolute; inset:0; z-index:0; background-image: radial-gradient(circle at 15% 20%, rgba(180,145,90,.18), transparent 45%), radial-gradient(circle at 85% 85%, rgba(30,92,69,.16), transparent 50%), repeating-radial-gradient(circle at 0 0, rgba(42,37,33,.02) 0, rgba(42,37,33,.02) 1px, transparent 1px, transparent 3px), linear-gradient(rgba(246,241,228,.38), rgba(236,225,198,.42)), var(--lg-bg-photo); background-size:auto, auto, auto, auto, cover; background-position:center, center, center, center, center; background-repeat:no-repeat, no-repeat, repeat, no-repeat, no-repeat; } /* --- Card shell: landscape split, lamp/logo on the left, the sign-in form on the right. --- */ .login-card{ position:relative; z-index:1; display:flex; width:100%; max-width:880px; min-height:480px; background:var(--lg-surface); border:1px solid var(--lg-line); border-radius:22px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(42,37,33,.28), 0 2px 0 rgba(255,255,255,.6) inset; } .login-panel{ padding:44px 40px; } /* Left panel: paper background, hosts the lamp illustration + logo + wordmark. */ .login-panel-brand{ flex:0 0 40%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative; background: linear-gradient(165deg, rgba(255,255,255,.5), transparent 55%), var(--lg-paper); border-right:1px solid var(--lg-line); } /* Signature illustration: banker's lamp, sits above the logo with a slow, gentle glow breathing behind the shade. */ .brand-lamp{ width:112px; height:auto; margin-bottom:4px; overflow:visible; } .brand-lamp-glow{ animation:lampBreathe 5s ease-in-out infinite; transform-origin:66px 58px; } .brand-lamp-bulb{ animation:lampBulbGlow 5s ease-in-out infinite; } @keyframes lampBreathe{ 0%,100%{opacity:.55;transform:scale(1);} 50%{opacity:.95;transform:scale(1.12);} } @keyframes lampBulbGlow{ 0%,100%{opacity:.75;} 50%{opacity:1;} } @media (prefers-reduced-motion: reduce){ .brand-lamp-glow, .brand-lamp-bulb{animation:none;} } .login-card .brand-lockup{ display:flex;align-items:flex-start;gap:12px; margin-bottom:0; } .login-card .brand-lockup--logo{ justify-content:center; margin-bottom:20px; } /* Logo sits on a soft paper-white plate so any logo file (light or dark) reads cleanly against the paper background. */ .login-card .brand-logo{ width:88px; height:88px; object-fit:contain; padding:14px; border-radius:18px; background:var(--lg-surface-raised); border:1px solid var(--lg-line); box-shadow:0 10px 24px -10px rgba(42,37,33,.18); } .brand-wordmark{ text-align:center; margin:0; } .brand-wordmark-name{ display:block; font-family:var(--lg-ff-display); font-weight:700; font-size:25px; line-height:1.2; letter-spacing:-.015em; color:var(--lg-ink); } .brand-wordmark-sub{ display:block; font-family:var(--lg-ff-mono); font-weight:500; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--lg-green); margin-top:8px; } /* Right panel: the form, vertically centered. */ .login-panel-form{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; background:var(--lg-surface); } .login-step{animation:loginStepIn .22s ease;} @keyframes loginStepIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}} /* --- Role toggle --- */ .role-toggle{ display:flex;gap:4px;padding:4px;margin:0 0 26px; background:var(--lg-green-soft);border:1px solid var(--lg-line);border-radius:12px; } .role-tab{ flex:1;text-align:center;padding:9px 10px;border-radius:9px;border:none;cursor:pointer; background:transparent;color:var(--lg-ink-dim); font-family:var(--lg-ff-display);font-weight:600;font-size:13.5px; transition:background .15s, color .15s; } .role-tab:hover{color:var(--lg-ink);} #loginFormStep .role-tab.is-active{background:var(--lg-green);color:#fff;} .role-tab:focus-visible{outline:2px solid var(--lg-brass);outline-offset:2px;} .login-card .eyebrow{ font-family:var(--lg-ff-mono);font-size:11px;text-transform:uppercase; letter-spacing:.09em;color:var(--lg-brass-deep);margin:0 0 10px; } .login-card h1{ font-family:var(--lg-ff-display);font-weight:700;font-size:28px; line-height:1.2;letter-spacing:-.015em;margin:0 0 10px;color:var(--lg-ink); } .login-card .sub{ font-family:var(--lg-ff-display); font-size:14px;color:var(--lg-ink-dim);line-height:1.55;margin:0 0 30px; } .login-card .field{margin-bottom:18px;} .login-card .field label{ display:block;font-family:var(--lg-ff-display);font-size:12.5px;font-weight:600;margin-bottom:6px; letter-spacing:.01em; color:var(--lg-ink); } .login-card .field input{ width:100%;padding:12px 14px;border-radius:10px; border:1px solid var(--lg-line);font-size:14px;font-family:var(--lg-ff-display); background:var(--lg-surface-raised);color:var(--lg-ink); transition:border-color .15s, box-shadow .15s, background .15s; } .login-card .field input::placeholder{color:var(--lg-ink-dim);opacity:.7;} .login-card .field input:focus{ outline:none;border-color:var(--lg-brass); box-shadow:0 0 0 3px var(--lg-brass-glow); } /* --- Remember me + Forgot password --- */ .field-options{ display:flex;align-items:center;justify-content:space-between; margin:-6px 0 20px;flex-wrap:wrap;gap:10px; } .remember-me{ display:flex;align-items:center;gap:8px; font-family:var(--lg-ff-display); font-size:13px;color:var(--lg-ink-dim);cursor:pointer;user-select:none; } .remember-me input{position:absolute;opacity:0;width:0;height:0;} .remember-me .checkbox-box{ width:17px;height:17px;border-radius:5px;border:1px solid var(--lg-line); background:var(--lg-surface-raised);flex-shrink:0;position:relative; transition:background .15s, border-color .15s; } .remember-me .checkbox-box::after{ content:'';position:absolute;left:5px;top:1px;width:4px;height:8px; border:solid #fff;border-width:0 2px 2px 0; transform:rotate(45deg);opacity:0;transition:opacity .1s; } .remember-me input:checked + .checkbox-box{background:var(--lg-green);border-color:var(--lg-green);} .remember-me input:checked + .checkbox-box::after{opacity:1;} .remember-me input:focus-visible + .checkbox-box{outline:2px solid var(--lg-brass);outline-offset:2px;} .forgot-link{ font-family:var(--lg-ff-display); font-size:13px;color:var(--lg-green);text-decoration:none;font-weight:600; } .forgot-link:hover{text-decoration:underline;color:var(--lg-green-deep);} .login-card .login-error{ display:none;font-family:var(--lg-ff-display);color:var(--lg-coral);font-size:13px;margin:-6px 0 14px; } /* --- Submit button: brass-bordered banker's-lamp green, deepens on hover/press rather than glowing brighter (paper doesn't glow). --- */ .login-card .btn-lamp.login-submit{ width:100%;margin-top:6px; display:flex;align-items:center;justify-content:center; padding:13px 20px; border-radius:11px; border:1px solid var(--lg-green-deep); background:var(--lg-green); color:#fff; font-family:var(--lg-ff-display); font-weight:600; font-size:15px; letter-spacing:.01em; cursor:pointer; box-shadow:0 12px 24px -14px rgba(30,92,69,.55); transition:background .15s, box-shadow .15s, transform .1s; } .login-card .btn-lamp.login-submit:hover{ background:var(--lg-green-deep); box-shadow:0 14px 28px -14px rgba(30,92,69,.65); } .login-card .btn-lamp.login-submit:active{ transform:translateY(1px); } .login-card .btn-lamp.login-submit:focus-visible{ outline:2px solid var(--lg-brass);outline-offset:2px; } /* --- Owner-only "Create an account" link ------------------------ Hidden by default; only surfaced when the role toggle has set #loginFormStep[data-role="owner"]. Staff never see this — account creation is an admin/owner-only path. UI only for now: the anchor doesn't do anything yet, it's just wired to the same data-role state loginView.js already maintains. --- */ .login-card .create-account-link{ display:none; margin:18px 0 0; font-family:var(--lg-ff-display); font-size:13px; color:var(--lg-ink-dim); text-align:center; } #loginFormStep[data-role="owner"] .create-account-link{ display:block; } .login-card .create-account-link a{ color:var(--lg-green); font-weight:600; text-decoration:none; } .login-card .create-account-link a:hover{ text-decoration:underline; color:var(--lg-green-deep); } .login-card .login-hint{ margin-top:22px;font-size:12px;font-family:var(--lg-ff-mono); color:var(--lg-ink-dim); text-align:center;line-height:1.6; } .login-card .login-hint b{color:var(--lg-ink);font-weight:600;} /* ================================================================= RESPONSIVE Same breakpoints as before: landscape split from tablet width up, collapsing to a stacked column below 760px so the card never grows as tall as a single-column layout would. ================================================================= */ @media (max-width:760px){ .login-card{ flex-direction:column; max-width:420px; min-height:0; } .login-panel-brand{ flex-direction:row; justify-content:center; gap:16px; padding:24px; border-right:none; border-bottom:1px solid var(--lg-line); } .brand-lamp{width:56px;margin-bottom:0;} .login-card .brand-lockup--logo{margin-bottom:0;} .login-card .brand-logo{width:52px;height:52px;padding:9px;border-radius:12px;} .brand-wordmark{text-align:left;} .brand-wordmark-name{font-size:18px;} .brand-wordmark-sub{font-size:10.5px;margin-top:4px;} .login-panel-form{padding:32px 28px;} } @media (max-width:480px){ .login-panel-form{padding:28px 22px;} } @media (max-width:380px){ #view-login{padding:16px;} .login-card{border-radius:18px;} .login-panel-brand{padding:18px 16px;} .brand-lamp{width:44px;} .login-card .brand-logo{width:44px;height:44px;padding:7px;} .brand-wordmark-name{font-size:16px;} .brand-wordmark-sub{font-size:9.5px;} .login-panel-form{padding:24px 18px;} .login-card h1{font-size:22px;} .login-card .sub{margin-bottom:22px;} .field-options{flex-direction:column;align-items:flex-start;gap:12px;} } @media (max-height:640px) and (max-width:480px){ .login-panel-brand{padding:14px 20px;} .login-panel-form{padding:20px 22px;} .login-card h1{margin-bottom:6px;} .login-card .sub{margin-bottom:18px;} .login-card .field{margin-bottom:14px;} } /* ================================================================= CREATE-ACCOUNT MODAL — themed to match the login page The modal lives outside #view-login in the DOM (it's a sibling, not a descendant), so it can't inherit the --lg-* tokens defined on #view-login — CSS custom properties only cascade to descendants. They're redeclared here, scoped to the modal itself, so this block works independently of where the modal is mounted. modal.css loads AFTER this file, so if its .modal-overlay/.modal rules share the same specificity as these, cascade order lets it win. Every selector below is scoped under the #createAccountModalOverlay ID to outrank plain class selectors regardless of load order — same fix as the earlier role-tab active-state issue. ================================================================= */ #createAccountModalOverlay{ --lg-paper: #F6F1E4; --lg-surface: #FFFDF9; --lg-surface-raised:#FFFFFF; --lg-ink: #2A2521; --lg-ink-dim: #8A7F71; --lg-line: #E7DCC4; --lg-green: #4f4f4f; --lg-green-deep: #616262; --lg-brass: #B4915A; --lg-brass-deep: #8F7040; --lg-brass-glow: rgba(180,145,90,.30); --lg-coral: #B3452F; --lg-ff-display: var(--ff-display, 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif); --lg-ff-mono: var(--ff-mono, 'IBM Plex Mono', monospace); position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(42,37,33,.45); } #createAccountModalOverlay.hidden{display:none;} #createAccountModalOverlay .modal{ width:100%; max-width:440px; max-height:88vh; overflow-y:auto; background:var(--lg-surface); border:1px solid var(--lg-line); border-radius:18px; padding:30px 30px 26px; box-shadow:0 40px 80px -30px rgba(42,37,33,.35), 0 2px 0 rgba(255,255,255,.6) inset; font-family:var(--lg-ff-display); } #createAccountModalOverlay .modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } #createAccountModalOverlay .modal-head h2{ font-family:var(--lg-ff-display); font-weight:700; font-size:21px; letter-spacing:-.01em; color:var(--lg-ink); margin:0; } #createAccountModalOverlay .modal-close{ background:none; border:none; font-size:22px; line-height:1; color:var(--lg-ink-dim); cursor:pointer; padding:4px; border-radius:8px; transition:background .15s, color .15s; } #createAccountModalOverlay .modal-close:hover{ background:var(--lg-line); color:var(--lg-ink); } #createAccountModalOverlay .modal-close:focus-visible{ outline:2px solid var(--lg-brass); outline-offset:2px; } #createAccountModalOverlay .wifi-note{ font-family:var(--lg-ff-display); font-size:13px; line-height:1.55; color:var(--lg-ink-dim); margin:0 0 18px; } #createAccountModalOverlay .field{margin-bottom:16px;} #createAccountModalOverlay .field label{ display:block; font-family:var(--lg-ff-display); font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--lg-ink); } #createAccountModalOverlay .field input{ width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--lg-line); font-size:14px; font-family:var(--lg-ff-display); background:var(--lg-surface-raised); color:var(--lg-ink); transition:border-color .15s, box-shadow .15s; } #createAccountModalOverlay .field input::placeholder{color:var(--lg-ink-dim);opacity:.7;} #createAccountModalOverlay .field input:focus{ outline:none; border-color:var(--lg-brass); box-shadow:0 0 0 3px var(--lg-brass-glow); } #createAccountModalOverlay .field-error{ display:none; font-family:var(--lg-ff-display); color:var(--lg-coral); font-size:13px; margin:-6px 0 14px; } #createAccountModalOverlay .modal-actions{ display:flex; gap:10px; margin-top:22px; } #createAccountModalOverlay .modal-actions .btn{ flex:1; padding:12px 18px; border-radius:11px; font-family:var(--lg-ff-display); font-weight:600; font-size:14.5px; cursor:pointer; transition:background .15s, box-shadow .15s, transform .1s, color .15s, border-color .15s; } #createAccountModalOverlay .modal-actions .btn-ghost{ background:transparent; border:1px solid var(--lg-line); color:var(--lg-ink-dim); } #createAccountModalOverlay .modal-actions .btn-ghost:hover{ background:var(--lg-line); color:var(--lg-ink); } #createAccountModalOverlay .modal-actions .btn-lamp{ border:1px solid var(--lg-green-deep); background:var(--lg-green); color:#fff; box-shadow:0 12px 24px -14px rgba(30,92,69,.55); } #createAccountModalOverlay .modal-actions .btn-lamp:hover{ background:var(--lg-green-deep); box-shadow:0 14px 28px -14px rgba(30,92,69,.65); } #createAccountModalOverlay .modal-actions .btn-lamp:active{ transform:translateY(1px); } #createAccountModalOverlay .modal-actions .btn:focus-visible{ outline:2px solid var(--lg-brass); outline-offset:2px; } @media (max-width:480px){ #createAccountModalOverlay .modal{padding:24px 22px 22px;} }