/* css/login-popover.css — Login dropdown popover (desktop) + full-screen sheet (mobile)
Built 2026-05-03. Pivots away from /login/ as a separate page.
Reuses .login-card / .login-form / .login-tab / .login-cta / .login-input / .login-phone
/ .login-input / heartbeat keyframe from login/css/login.css (loaded alongside this file).
Architecture:
...form...
JS toggles `[hidden]` and `.is-open`. CSS handles the rest. */
/* ============== Mascot — sits on the navbar Login link (landing only) ============== */
.login-mascot {
position: absolute;
/* Sits ON the Login link, slightly overlapping from above */
inset-block-end: calc(100% - 14px);
inset-inline-start: 50%;
inline-size: 48px;
block-size: 48px;
pointer-events: none;
z-index: 5;
transform-origin: center 80%;
/* Stack two animations: continuous lub-dub heartbeat + periodic "hi" wave.
They target different transform sub-properties so they compose cleanly. */
animation:
pulse-heart 1000ms var(--ease-out-quart) infinite,
wave-hi 8000ms var(--ease-out-quart) infinite;
filter: drop-shadow(0 2px 6px color-mix(in oklab, var(--color-burgundy), transparent 75%));
/* translate is animated by wave-hi — set initial centering via inline-start math instead */
margin-inline-start: -24px;
}
/* "Hi! Looking at you" gesture — head-tilt + bob, every 8 seconds.
90% of the cycle is idle (rotate:0, translate:0) so the heartbeat reads
undisturbed; the wave fires in the final ~800ms then resets. */
@keyframes wave-hi {
0%,
89%,
100% {
rotate: 0deg;
translate: 0 0;
}
91% {
rotate: -10deg;
translate: 0 -3px;
}
93% {
rotate: 10deg;
translate: 0 -3px;
}
95% {
rotate: -8deg;
translate: 0 -2px;
}
97% {
rotate: 6deg;
translate: 0 -1px;
}
99% {
rotate: 0deg;
translate: 0 0;
}
}
.login-mascot img {
inline-size: 100%;
block-size: 100%;
object-fit: contain;
display: block;
}
/* Make the parent Login link the positioning context for the mascot */
.actions .login {
position: relative;
}
/* Hide mascot below tablet — desktop nav only */
@media (max-width: 1024px) {
.login-mascot {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.login-mascot {
animation: none !important;
transform: none;
}
}
/* ============== Popover container ============== */
/* Hidden state — JS toggles `[hidden]` AND `.is-open` for animation */
.login-popover[hidden] {
display: none;
}
.login-popover {
/* Layer above navbar (which uses z-index ~100) and below modal-tier */
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
/* Desktop default — anchored top-right under navbar Login */
align-items: start;
justify-items: end;
padding-block-start: calc(var(--navbar-height, 80px) + 8px);
padding-inline-end: clamp(16px, 4vw, 64px);
pointer-events: none; /* let backdrop pick up clicks, panel re-enables */
}
/* Backdrop — covers the screen, click-to-close */
.login-popover__backdrop {
position: fixed;
inset: 0;
background: color-mix(in oklab, var(--color-navy), transparent 65%);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
pointer-events: none;
transition: opacity 250ms var(--ease-out-quart);
}
.login-popover.is-open .login-popover__backdrop {
opacity: 1;
pointer-events: auto;
}
/* Panel — the actual card containing the form */
.login-popover__panel {
position: relative;
z-index: 1;
inline-size: min(380px, calc(100vw - 32px));
background: linear-gradient(180deg, var(--color-white) 0%, var(--color-cream) 240%);
border: 1px solid color-mix(in oklab, var(--color-navy), transparent 88%);
border-radius: var(--radius-xl);
padding: var(--space-xl) var(--space-l) var(--space-l);
box-shadow:
0 1px 2px color-mix(in oklab, var(--color-navy), transparent 92%),
0 12px 32px color-mix(in oklab, var(--color-navy), transparent 80%),
0 24px 64px color-mix(in oklab, var(--color-navy), transparent 88%);
pointer-events: auto;
/* Entry animation — Recipe O snap + slight scale */
opacity: 0;
transform: translateY(-12px) scale(0.98);
transform-origin: top right;
transition:
opacity 220ms var(--ease-out-quart),
transform 220ms var(--ease-out-quart);
max-block-size: calc(100dvh - var(--navbar-height, 80px) - 24px);
overflow-y: auto;
}
.login-popover.is-open .login-popover__panel {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Close button — top-right corner of panel */
.login-popover__close {
position: absolute;
inset-block-start: 12px;
inset-inline-end: 12px;
inline-size: 36px;
block-size: 36px;
padding: 0;
background: transparent;
border: 0;
border-radius: var(--radius-full);
color: var(--color-text-muted);
cursor: pointer;
display: grid;
place-items: center;
transition:
background-color var(--duration-hover) var(--ease-hover),
color var(--duration-hover) var(--ease-hover);
}
.login-popover__close:hover {
background: color-mix(in oklab, var(--color-navy), transparent 92%);
color: var(--color-navy);
}
.login-popover__close:focus-visible {
outline: 2px solid var(--color-burgundy);
outline-offset: 2px;
}
.login-popover__close svg {
inline-size: 20px;
block-size: 20px;
}
/* Inside the popover, suppress the page-wrapper card chrome — the panel IS the card */
.login-popover .login-card {
background: none;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
}
.login-popover .login-h1 {
font: var(--type-h4);
}
.login-popover .login-kicker {
margin-block-end: 4px;
}
.login-popover .login-lead {
margin-block-end: var(--space-m);
}
/* ============== Mobile (<744px) — full-screen bottom sheet (Recipe K from EMS teardown) ============== */
@media (max-width: 744px) {
.login-popover {
/* Override desktop top-right anchoring → bottom-sheet */
align-items: end;
justify-items: stretch;
padding: 0;
}
.login-popover__panel {
inline-size: 100%;
max-inline-size: 100%;
max-block-size: 92dvh;
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
padding: var(--space-l) var(--space-m) calc(var(--space-l) + env(safe-area-inset-bottom, 0px));
/* Bottom-sheet entry — translate from below with overshoot */
transform: translateY(100%);
transform-origin: center bottom;
transition:
transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
/* Recipe K spring overshoot */ opacity 220ms var(--ease-out-quart);
box-shadow:
0 -8px 32px color-mix(in oklab, var(--color-navy), transparent 80%),
0 -2px 8px color-mix(in oklab, var(--color-navy), transparent 88%);
}
.login-popover.is-open .login-popover__panel {
transform: translateY(0);
}
/* Drag-handle hint at top */
.login-popover__panel::before {
content: "";
display: block;
inline-size: 36px;
block-size: 4px;
background: color-mix(in oklab, var(--color-navy), transparent 75%);
border-radius: var(--radius-full);
margin: 0 auto var(--space-s);
}
.login-popover__close {
inset-block-start: 14px;
inset-inline-end: 14px;
}
.login-popover__mascot {
margin-block-start: 0;
}
.login-popover__mascot img {
inline-size: 88px;
block-size: 88px;
}
}
/* ============== Desktop ≥1024px — clean compact parchment letter ==============
Pivoted 2026-05-03 (round 2). Simple, professional, Stripe/Linear/Notion bar.
Mascot is decoupled — lives on navbar, will animate IN on open (Phase 2). */
@media (min-width: 1024px) {
.login-popover {
align-items: start;
justify-items: center;
padding-block-start: calc(var(--navbar-height, 80px) + 24px);
padding-inline: clamp(16px, 3vw, 48px);
}
.login-popover__panel {
/* Compact card — Stripe-style auth modal width */
inline-size: 380px;
max-inline-size: 380px;
background: linear-gradient(180deg, var(--color-white) 0%, var(--color-cream) 320%);
border: 1px solid color-mix(in oklab, var(--color-navy), transparent 90%);
border-radius: var(--radius-xl);
padding: var(--space-l) var(--space-m) var(--space-m);
box-shadow:
0 1px 2px color-mix(in oklab, var(--color-navy), transparent 92%),
0 12px 32px color-mix(in oklab, var(--color-navy), transparent 84%),
0 24px 56px color-mix(in oklab, var(--color-navy), transparent 88%);
filter: none;
transform-origin: center top;
animation: none;
overflow: visible;
max-block-size: calc(100dvh - var(--navbar-height, 80px) - 60px);
display: block;
}
.login-popover__close {
inset-block-start: 10px;
inset-inline-end: 10px;
}
/* Compact, professional input sizing — Linear / Stripe / Notion bar */
.login-popover .login-kicker {
margin-block-end: 4px;
font-size: 0.625rem;
letter-spacing: 0.12em;
}
.login-popover .login-h1 {
font: var(--type-h6);
font-size: 1.125rem;
line-height: 1.25;
margin-block-end: 4px;
}
.login-popover .login-lead {
font-size: 0.8125rem;
line-height: 1.4;
margin-block-end: 14px;
}
.login-popover .login-form {
gap: 10px;
}
.login-popover .login-tabs {
margin-block-end: 12px;
padding: 3px;
}
.login-popover .login-tab {
padding: 6px 12px;
min-block-size: 30px;
font-size: 0.8125rem;
}
.login-popover .login-label {
font-size: 0.6875rem;
margin-block-end: 4px;
}
.login-popover .login-phone-cc,
.login-popover .login-phone input,
.login-popover .login-input {
padding-block: 8px;
min-block-size: 36px;
font-size: 0.875rem;
}
.login-popover .login-cta {
min-block-size: 38px;
padding: 8px 18px;
font-size: 0.875rem;
}
.login-popover .login-alt,
.login-popover .login-remember {
font-size: 0.75rem;
}
.login-popover .login-meta {
font-size: 0.75rem;
margin-block-start: 12px;
}
}
/* Slightly more breathing room on large desktops */
@media (min-width: 1440px) {
.login-popover__panel {
inline-size: 400px;
max-inline-size: 400px;
}
}
/* ============== Reduced motion ============== */
@media (prefers-reduced-motion: reduce) {
.login-popover__panel,
.login-popover__backdrop {
transition-duration: 80ms;
}
.login-popover__panel {
animation: none !important;
transform: none;
}
}