/* ============================================================================ QBank — Login + Profile Select · themed (follows active skin + light/dark) ---------------------------------------------------------------------------- These overlays live OUTSIDE #main-app-container, so applySkin() also stamps `qb qb-theme--{skin}` onto them → the theme tokens (--bg/--card/--accent/--ink) resolve here too, and [data-theme] on flips light/dark. The animated "blob" scene is shared by the login and profile screens for continuity. ========================================================================== */ /* Glass surface tokens — one set per mode (avoids color-mix for broad support). */ .qb-scene { --qb-glass: rgba(255,255,255,.62); --qb-glassbd: rgba(255,255,255,.80); } [data-theme="dark"] .qb-scene { --qb-glass: rgba(28,30,24,.52); --qb-glassbd: rgba(255,255,255,.10); } .qb-scene { position: fixed; inset: 0; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 24px; box-sizing: border-box; } /* Animated background blobs (dimmed in dark so they read as soft glows). */ .qb-blob { position: absolute; border-radius: 50%; filter: blur(72px); opacity: .55; pointer-events: none; } [data-theme="dark"] .qb-blob { opacity: .28; } .qb-blob--1 { width: 560px; height: 560px; left: -120px; top: -160px; background: radial-gradient(circle, #A9C7E8, transparent 70%); animation: qb-drift1 22s ease-in-out infinite alternate; } .qb-blob--2 { width: 600px; height: 600px; right: -160px; bottom: -180px; background: radial-gradient(circle, #D9C2E8, transparent 70%); animation: qb-drift2 26s ease-in-out infinite alternate; } .qb-blob--3 { width: 520px; height: 520px; left: 34%; top: 6%; background: radial-gradient(circle, #F2D6C2, transparent 70%); animation: qb-drift3 19s ease-in-out infinite alternate; } .qb-blob--4 { width: 460px; height: 460px; left: 8%; bottom: -150px; background: radial-gradient(circle, #BFE3D3, transparent 70%); animation: qb-drift4 24s ease-in-out infinite alternate; } @keyframes qb-drift1 { 0%{transform:translate(-10%,-8%) scale(1)} 100%{transform:translate(14%,10%) scale(1.3)} } @keyframes qb-drift2 { 0%{transform:translate(8%,6%) scale(1.2)} 100%{transform:translate(-12%,-10%) scale(1)} } @keyframes qb-drift3 { 0%{transform:translate(-6%,10%) scale(1.05)} 100%{transform:translate(10%,-8%) scale(1.25)} } @keyframes qb-drift4 { 0%{transform:translate(6%,-8%) scale(1.15)} 100%{transform:translate(-10%,8%) scale(1)} } @media (prefers-reduced-motion: reduce) { .qb-blob { animation: none; } } /* Lift real content above the blobs — but NOT the blobs (must stay absolute, or they stack in the flex column and push content to the bottom) and NOT the fixed theme toggle (must stay pinned top-right, not join the centered group). */ .qb-scene > *:not(.qb-blob):not(.qb-scene__theme) { position: relative; z-index: 1; } /* Minimal light/dark toggle (kept on login + profile per product decision). */ .qb-scene__theme { position: fixed; top: 20px; right: 22px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--qb-glassbd); background: var(--qb-glass); color: var(--body); cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* ---- LOGIN — floating glass pill ---------------------------------------- */ .qb-pill { display: flex; align-items: center; gap: 10px; width: 380px; max-width: calc(100vw - 48px); padding: 8px 8px 8px 26px; border-radius: 44px; background: var(--qb-glass); border: 1px solid var(--qb-glassbd); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 14px 44px rgba(30,35,50,.18); } .qb-pill__icon { color: var(--muted); font-size: 13px; } .qb-pill__input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 17px; letter-spacing: 6px; } .qb-pill__input::placeholder { letter-spacing: 6px; color: var(--muted); } .qb-pill__submit { width: 46px; height: 46px; flex: none; border: none; border-radius: 50%; background: var(--accent); color: var(--onAccent); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.20); } .qb-pill__err { color: var(--bad); font-size: 12.5px; font-weight: 600; text-align: center; } /* ---- PROFILE SELECT ----------------------------------------------------- */ .qb-title { font-family: var(--head); font-weight: 600; color: var(--ink); margin: 0; font-size: 30px; text-align: center; } .qb-profiles { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; max-width: 760px; } .qb-profile { display: flex; flex-direction: column; align-items: center; gap: 13px; cursor: pointer; position: relative; } .qb-profile__name { font-size: 14px; font-weight: 600; color: var(--ink); } .qb-avatar { width: 104px; height: 104px; border-radius: 24px; background: var(--avatar-bg, var(--accent)); border: 3px solid var(--qb-glassbd); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 44px; box-shadow: 0 10px 26px rgba(30,35,50,.20); transition: transform .15s ease; } .qb-profile:hover .qb-avatar { transform: translateY(-3px); } .qb-avatar--add { background: var(--qb-glass); color: var(--muted); font-size: 28px; border: 2px dashed var(--bd); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .qb-profile__del { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--bad); color: #fff; border: 2px solid var(--bg); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; } /* Manage-mode "edit" affordance (click the profile to open the edit modal). */ .qb-profile__edit { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--onAccent); border: 2px solid var(--bg); display: flex; align-items: center; justify-content: center; font-size: 11px; pointer-events: none; /* let the click reach the profile tile */ } .qb-manage-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 10px; background: var(--qb-glass); border: 1px solid var(--qb-glassbd); color: var(--body); font-size: 13px; font-weight: 600; cursor: pointer; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .qb-manage-btn.is-on { background: var(--accent); color: var(--onAccent); border-color: var(--accent); } /* ---- ANIMAL-GLYPH PICKER (in the add / edit profile modal) --------------- */ .qb-picker { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .qb-picker__opt { width: 50px; height: 50px; border-radius: 13px; background: var(--avatar-bg, var(--accent)); border: 2.5px solid transparent; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; cursor: pointer; transition: transform .12s ease; } .qb-picker__opt.is-selected { border-color: var(--ink); transform: scale(1.08); } .qb-picker__preview { width: 84px; height: 84px; border-radius: 20px; margin: 0 auto 4px; background: var(--avatar-bg, var(--accent)); color: #fff; font-size: 38px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(30,35,50,.2); } /* ---- EDIT PROFILE MODAL: name display + delete "danger zone" ------------- */ .edit-profile-name { font-family: var(--head); font-size: 16px; font-weight: 600; color: var(--ink); } .qb-danger { border-top: 1px solid var(--bd); padding-top: 16px; margin-top: 6px; } .qb-danger__label { color: var(--bad); display: flex; align-items: center; gap: 7px; } .qb-danger__text { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 6px 0 10px; } #btn-confirm-delete-profile { margin-top: 10px; } #btn-confirm-delete-profile:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }