/* FormFix base stylesheet — load FIRST on every page. * * Canonical design tokens plus accessibility baseline. Page stylesheets may * override tokens (they load after this file), so adding this file changes * nothing visually on pages that already define their own values. */ :root { /* Surfaces */ --bg: #0a0a0f; --bg-card: rgba(255, 255, 255, 0.02); --bg-card-hover: rgba(255, 255, 255, 0.04); /* Text */ --fg: #ffffff; --fg-muted: rgba(255, 255, 255, 0.6); --fg-subtle: rgba(255, 255, 255, 0.4); /* Brand */ --accent: #6366f1; --accent-light: #818cf8; --accent-glow: rgba(99, 102, 241, 0.3); --pro-gradient: linear-gradient(135deg, #a855f7, #ec4899); /* Borders & radii */ --border: rgba(255, 255, 255, 0.08); --border-hover: rgba(255, 255, 255, 0.15); --radius: 16px; /* Status */ --success: #10b981; } /* --------------------------------------------------------------------------- * Accessibility baseline * ------------------------------------------------------------------------ */ /* Visible keyboard focus everywhere (mouse clicks are unaffected). */ :focus-visible { outline: 2px solid var(--accent, #6366f1); outline-offset: 2px; } /* Screen-reader-only content (e.g. page

headings). / .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } / Honor the user's motion preference globally. / @media (prefers-reduced-motion: reduce) { , ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------------- * Full-screen loading / redirect overlay (JS: FF.showLoadingOverlay). * Blacks out the viewport with a spinner + message while a redirect is in * flight (e.g. opening the Stripe billing portal). Viewport-anchored via * position:fixed — relies on no ancestor (incl. ) carrying a transform. * ------------------------------------------------------------------------ / .ff-loading-overlay { position: fixed; inset: 0; z-index: 30000; / above notifications (20000) and modals (15000) */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; background: rgba(6, 6, 14, 0.82); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .ff-loading-overlay.visible { opacity: 1; visibility: visible; } .ff-loading-overlayspinner { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: var(--accent-light, #818cf8); animation: ff-overlay-spin 0.8s linear infinite; } .ff-loading-overlaymessage { color: var(--fg, #fff); font-size: 1rem; font-weight: 600; text-align: center; padding: 0 1.5rem; } @keyframes ff-overlay-spin { to { transform: rotate(360deg); } }