/* auth-ui.css — Top-bar avatar pill + dropdown (Variant A). * * Sourced from Seekly-Mocks/topbar-avatar-pill.html (the canonical mock James * picked). Loaded by home.html + search.html (any page that wants the * signed-in identity chip). * * The pill is hooked up by auth-ui.js: it fetches /auth/me on page load, * populates avatar initials + email, then wires open/close on click + outside- * click + ESC. Admin link is hidden unless /auth/me returns is_admin=true. * * Color tokens come from design-system.css (--ink, --line, --bg-soft, etc.). */ /* Wrapper that anchors the dropdown positioning. */ .pill-wrap { position: relative; margin-left: 12px; } /* The pill itself — compact identity chip in the top-bar nav. */ .user-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: all var(--fast); font: inherit; color: var(--ink); } .user-pill:hover { background: #fff; border-color: var(--ink-3, #2c3a5e); } .user-pill[hidden] { display: none; } /* Round avatar with the user's 2-letter initials. */ .user-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent, #c08a4d), var(--accent-dark, #8a5f30)); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; letter-spacing: -0.02em; flex-shrink: 0; } /* Truncated email next to the avatar. Hidden on narrow screens. */ .user-pill-email { font-size: 13px; color: var(--ink); font-weight: 500; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-pill-caret { font-size: 9px; color: var(--muted); margin: 0 6px 0 -2px; } /* Dropdown menu — absolute-positioned under the pill. */ .user-menu { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md, 12px); box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.22); min-width: 240px; padding: 6px; z-index: 1000; } .user-menu[hidden] { display: none; } .user-menu-header { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .user-menu-header strong { display: block; font-size: 13px; color: var(--ink); } .user-menu-header small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; } .user-menu a, .user-menu button { display: block; width: 100%; text-align: left; padding: 8px 14px; border-radius: 6px; color: var(--body); text-decoration: none; font: inherit; background: none; border: 0; cursor: pointer; } .user-menu a:hover, .user-menu button:hover { background: var(--bg-soft); color: var(--ink); } .user-menu a[hidden], .user-menu button[hidden] { display: none; } .user-menu .signout { color: #b3261e; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; border-radius: 0 0 6px 6px; } .user-menu .signout:hover { background: #fde7e7; color: #8a1d17; } /* Mobile: hide email + caret, show avatar only. */ @media (max-width: 640px) { .user-pill-email, .user-pill-caret { display: none; } .user-pill { padding: 4px; } } /* 2026-05-29 — Public-read surface. * `` is set by auth-ui.js once /auth/me * resolves. Pages that contain save/share/note controls hide those for * anonymous viewers. The save-search + my-homes pills become a single * "Sign in to save" CTA via the .user-signin-cta injected by auth-ui.js. */ /* The standalone Sign In CTA injected into .pill-wrap when anonymous. */ .user-signin-cta { /* base styles set inline in auth-ui.js so this works even without CSS load */ cursor: pointer; } .user-signin-cta:hover { background: #0848a3 !important; } /* Hide write-only top-bar buttons when anonymous. */ :root[data-seekly-auth="anonymous"] #save-search-btn, :root[data-seekly-auth="anonymous"] #my-homes-btn, :root[data-seekly-auth="anonymous"] #notifications-btn, :root[data-seekly-auth="anonymous"] #saved-search-pill { display: none !important; } /* Hide rating + save halo column (per-property quick actions) when anonymous. * The halo lives on the right edge of the property modal and is the primary * surface for save/list/rate. None of that is meaningful pre-sign-in. */ :root[data-seekly-auth="anonymous"] #rating-halo, :root[data-seekly-auth="anonymous"] .rating-halo, :root[data-seekly-auth="anonymous"] #lot-search-save, :root[data-seekly-auth="anonymous"] [data-needs-auth] { display: none !important; } /* property.html (iframe-rendered) save / share buttons. These live inside the * iframe so the iframe's auth-ui.js sets `` * independently — same CSS selector pattern works because each frame has its * own document root. */ :root[data-seekly-auth="anonymous"] #btn-save-listing, :root[data-seekly-auth="anonymous"] #btn-share { display: none !important; } /* Generic "Sign in to save" prompt. Use `class="signin-prompt"` on any * element you want shown ONLY when anonymous. Pair with [data-needs-auth] * to swap controls. */ .signin-prompt { display: none; } :root[data-seekly-auth="anonymous"] .signin-prompt { display: inline-flex; } :root[data-seekly-auth="anonymous"] .signin-prompt-block { display: block; }