/* shared/lock-sheet.css * ───────────────────────────────────────────────────────────────────── * Lock notice — FLAT DESIGN. No glows, no gradients, no soft shadows. * The dating site is built flat; the lock card matches. * * Blur strategy: when the card mounts, `html.spark-lock-active` is added * which instantly applies a CSS filter to 's primary children. * Doing it on the page itself (not via overlay backdrop-filter) avoids * the 1-2s repaint lag the user reported — the browser already has the * page composited so toggling a filter on it paints next frame. * * z-index is intentionally very high so the card always wins over the * support widget bubble + panel below it. * ───────────────────────────────────────────────────────────────────── */ /* Page-level effects while the popup is up: no blur (the user said the global blur looked terrible). We just stop scroll on body so the page underneath can't drift while a modal-ish notice is displayed. Pointer-events on the page itself are left alone — the per-surface placeholders (swipe-deck lock screen, chat-list lock badges) handle "can't interact with primary actions". */ html.spark-lock-active body { overflow: hidden; } .spark-lock-sheet { position: fixed; inset: 0; z-index: 2147483600; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--c-burgundy, #5C0923); /* Bug fix 2026-04-28: was no darkening backdrop, the sheet covered the viewport but the page beneath stayed at full brightness — popup felt floating, hard to focus on. Now the sheet itself acts as a dark overlay (rgba 50%) so the user sees the popup clearly framed against a dimmed page. backdrop-filter:blur(2px) adds a subtle defocus on top for the modern modal feel. */ background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); /* No fade animation either — appearance is instant per user request (popup must arrive together with the blur, not stagger). */ } .spark-lock-card { position: relative; width: 100%; max-width: 380px; background: var(--c-blush, #FFF0F5); border: 2px solid var(--c-blush-dark, #F2DDE4); border-radius: 20px; padding: 28px 24px 22px; text-align: center; /* Flat: no box-shadow, no glow, no gradient. */ box-shadow: none; } /* × close button — flat, no circle background, just a hit target. */ .spark-lock-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--c-burgundy, #5C0923); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; font-family: inherit; opacity: 0.55; transition: opacity 0.12s ease, color 0.12s ease; } .spark-lock-close:hover { opacity: 1; color: var(--c-crimson, #D91A4D); } .spark-lock-close:focus-visible { outline: 2px solid var(--c-crimson, #D91A4D); outline-offset: 2px; opacity: 1; } .spark-lock-close svg { display: block; } .spark-lock-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--c-crimson, #D91A4D); color: var(--c-blush, #FFF0F5); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; /* Flat: no shadow on the icon disc. */ box-shadow: none; } .spark-lock-title { font-size: 20px; font-weight: 900; line-height: 1.15; margin: 0 0 8px; color: var(--c-burgundy, #5C0923); letter-spacing: -0.2px; } .spark-lock-message { font-size: 14px; font-weight: 600; line-height: 1.45; /* Was burgundy@72% which read as red-ish on the blush card. The user wants the body copy unambiguously black — no theme tint — so we keep it deliberately neutral and ignore the palette here. */ color: #1a1a1a; margin: 0 0 18px; } .spark-lock-amount { font-size: 28px; font-weight: 900; color: var(--c-crimson, #D91A4D); letter-spacing: -0.6px; margin: 0 0 12px; line-height: 1; } .spark-lock-cta { display: block; width: 100%; padding: 13px 18px; background: var(--c-crimson, #D91A4D); color: var(--c-blush, #FFF0F5); font-weight: 900; font-size: 15px; border-radius: 12px; text-decoration: none; /* Flat: no transform on hover, no shadow. Just a brightness shift. */ box-shadow: none; transition: filter 0.15s ease; margin: 0; } .spark-lock-cta:hover { filter: brightness(0.9); } .spark-lock-cta:active, .spark-lock-cta:focus { transform: none; } @media (max-width: 360px) { .spark-lock-card { padding: 22px 18px 18px; border-radius: 16px; } .spark-lock-title { font-size: 18px; } } @media (min-width: 640px) { .spark-lock-card { max-width: 420px; padding: 32px 28px 24px; } .spark-lock-title { font-size: 22px; } } /* B8.3 fix 2026-05-11: enforce 44×44 minimum on mobile bottom-nav anchors. The fixed bottom bar is rendered in every page's HTML with the tailwind class string `fixed bottom-0 left-0 w-full md:hidden ...`; targeting that pattern keeps the rule chrome-free + survives markup tweaks that don't change the layout intent. Loaded in every dating-site HTML via lock-sheet.css (small + ubiquitous). */ [class*="fixed bottom-0"][class*="md:hidden"] > a { min-width: 44px; min-height: 44px; flex: 1 1 0; justify-content: center; }