design-qa.md

# Shared support control — 2 October 2026 Final result: passed. ## Reference and comparison The supplied glass-pill screenshot (`codex-clipboard-afbfef10-ba38-4fab-95bd-b26ead1bd2ca.png`, 1072×464) sets the rounded glass surface, divider, label and chevron. The subsequent hand-and-bird image (`codex-clipboard-01ae546c-e479-45bc-bef6-3edeedc47dfa.png`, 736×736) replaces its heart symbol as requested. Both originals and the final rendered component were inspected together. This is a reference-inspired component, not a clone of the screenshot's surrounding interface. The actual desktop pill is approximately 216×58px; mobile is 179×48px. Captures use normal browser pixels at 1280×812 and 375×812. Comparing the component region accounts for the reference's much larger display scale. The site font, readable 17/15px label, smoked translucent surface, divider, icon spacing and rounded border preserve the reference's hierarchy. Light mode uses pale glass and a dark mark. The original hand-and-bird bitmap is unchanged; CSS handles colour and excess outer whitespace. A generated cutout was rejected for visible speckles. Evidence: - `/tmp/fact-support-pill-final-2026-10-02.png` - `/tmp/fact-kofi-photo-safe-dark-desktop-2026-10-02.png` - `/tmp/fact-kofi-photo-safe-dark-mobile-2026-10-02.png` - `/tmp/fact-kofi-light-desktop-2026-10-02.png` ## Behaviour and layout - All eight generated HTML pages include one shared support launcher. The old external floating-widget script is removed. The iframe loads only after opening; the anchor remains a direct Ko-fi link without JavaScript. - Home, xray, a case page and emergence were checked at 320, 375 and 1280px. Both colour modes fit without sideways scrolling. Mobile pill targets are 48px high; emergence's bottom navigation has 12px clearance. Pane padding keeps the last content reachable. - The real Ko-fi widget loads inside a native modal. Close works, and Escape from the parent dialog returns focus to the launcher. An actual amount field accepted focus through the overlay, with its value unchanged. No payment was attempted. Escape while focus is inside the third-party iframe is controlled by that frame; the visible Close button remains available. - Dark mode filters rendered form pixels through a transparent, non-interactive overlay. The measured 88px banner and circular 90px portrait are excluded. Desktop and mobile captures show their original colours. Light mode disables the overlay. The modal's 400px inner width avoids the widget's white banner gutters. - The long mobile rail identity was shortened to fit beside the verified count. Record labels, source links, verified-state content and data fields are preserved. The build refreshed the current append-only snapshot automatically. - The build succeeds with the existing xray transcript warnings. Ko-fi's own Cloudflare console messages were observed; the local support code produced no errors. ## Known seam The photo mask follows Ko-fi's current header geometry rather than accessing its cross-origin DOM. A provider layout change needs a mask adjustment, and scrolling the embedded header away on a short screen can expose the reserved unfiltered area. Older engines without backdrop filtering receive a dimmed, uninverted fallback. This is a local visual treatment of the real embed, not a native Ko-fi theme or a rebuilt checkout.