/** * modal-v2.css — Beyond Sure UI v2 * Unified modal shell: backdrop blur, entrance animation, focus ring, * responsive sizing, dark-mode parity. * * Gated to [data-ui-v2="true"] on — all rules are scoped. * Does NOT modify openModal() / closeModal() locked regions. * Served at: /static/css/modal-v2.css * * Activation: add * to in form.html (Section 8 performance pass wires this up). */ /* ═══════════════════════════════════════════════════════════ 1. BACKDROP OVERLAY — v2 ═══════════════════════════════════════════════════════════ */ [data-ui-v2="true"] .modal-overlay, [data-ui-v2="true"] .modal-bg { background: rgba(0, 0, 0, 0.52); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); animation: v2-backdrop-in var(--dur-normal, 250ms) var(--ease-decel, cubic-bezier(0,0,0.2,1)) both; } [data-ui-v2="true"] .modal-overlay.open, [data-ui-v2="true"] .modal-bg.open { animation: v2-backdrop-in var(--dur-normal, 250ms) var(--ease-decel, cubic-bezier(0,0,0.2,1)) both; } [data-ui-v2="true"] .modal-overlay.exiting, [data-ui-v2="true"] .modal-bg.exiting { animation: v2-backdrop-in var(--dur-fast, 150ms) var(--ease-accel, cubic-bezier(0.4,0,1,1)) reverse both; } @keyframes v2-backdrop-in { from { opacity: 0; } to { opacity: 1; } } /* ═══════════════════════════════════════════════════════════ 2. MODAL BOX — v2 shell ═══════════════════════════════════════════════════════════ */ [data-ui-v2="true"] .modal-box { border-radius: var(--r16, 16px); background: var(--bg-surf, #ffffff); border: 1px solid var(--b1, rgba(0,0,0,.07)); box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 8px 40px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06); animation: v2-modal-in var(--dur-normal, 250ms) var(--ease-decel, cubic-bezier(0,0,0.2,1)) both; /* Override existing animation */ animation-name: v2-modal-in !important; } [data-ui-v2="true"] .modal-overlay.exiting .modal-box, [data-ui-v2="true"] .modal-bg.exiting .modal-box { animation: v2-modal-out var(--dur-fast, 150ms) var(--ease-accel, cubic-bezier(0.4,0,1,1)) both !important; } @keyframes v2-modal-in { from { opacity: 0; transform: scale(0.965) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes v2-modal-out { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.97) translateY(8px); } } /* Dark mode modal box */ [data-ui-v2="true"][data-theme="dark"] .modal-box { background: #1c2030; border-color: rgba(255,255,255,.08); box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 8px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25); } /* ═══════════════════════════════════════════════════════════ 3. MODAL SIZING VARIANTS ═══════════════════════════════════════════════════════════ */ /* Default: medium */ [data-ui-v2="true"] .modal-box { max-width: min(560px, calc(100vw - 32px)); width: 100%; } /* Small variant — add class .modal-sm to .modal-box */ [data-ui-v2="true"] .modal-box.modal-sm { max-width: min(400px, calc(100vw - 32px)); } /* Large variant — add class .modal-lg to .modal-box */ [data-ui-v2="true"] .modal-box.modal-lg { max-width: min(720px, calc(100vw - 32px)); } /* Wide variant — add class .modal-xl to .modal-box */ [data-ui-v2="true"] .modal-box.modal-xl { max-width: min(900px, calc(100vw - 32px)); } /* ═══════════════════════════════════════════════════════════ 4. MODAL HEADER / BODY / FOOTER STRUCTURE ═══════════════════════════════════════════════════════════ */ /* Modal title typography */ [data-ui-v2="true"] .modal-title, [data-ui-v2="true"] .modal-hdr h2, [data-ui-v2="true"] .modal-hdr h3, [data-ui-v2="true"] .modal-box > h2:first-child, [data-ui-v2="true"] .modal-box > h3:first-child { font-family: var(--fui, 'Plus Jakarta Sans', sans-serif); font-size: 1.0625rem; /* 17px */ font-weight: 600; letter-spacing: -0.02em; color: var(--color-text-primary, #1c1917); line-height: 1.25; } [data-ui-v2="true"][data-theme="dark"] .modal-title, [data-ui-v2="true"][data-theme="dark"] .modal-hdr h2, [data-ui-v2="true"][data-theme="dark"] .modal-hdr h3 { color: rgba(255,255,255,.92); } /* Modal close button */ [data-ui-v2="true"] .modal-close, [data-ui-v2="true"] .mdl-close, [data-ui-v2="true"] .modal-box .close-btn { width: 30px; height: 30px; border-radius: var(--r8, 8px); color: var(--t3, #6B7280); transition: background var(--dur-fast, 150ms) var(--ease-standard), color var(--dur-fast, 150ms) var(--ease-standard), transform var(--dur-fast, 150ms) var(--ease-spring); } [data-ui-v2="true"] .modal-close:hover, [data-ui-v2="true"] .mdl-close:hover, [data-ui-v2="true"] .modal-box .close-btn:hover { background: var(--bg-muted, #F3F4F6); color: var(--t1, #111827); transform: scale(1.06); } [data-ui-v2="true"] .modal-close:active, [data-ui-v2="true"] .mdl-close:active { transform: scale(0.94); } [data-ui-v2="true"][data-theme="dark"] .modal-close:hover, [data-ui-v2="true"][data-theme="dark"] .mdl-close:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.90); } /* ═══════════════════════════════════════════════════════════ 5. FOCUS TRAP — visible focus ring within modal ═══════════════════════════════════════════════════════════ */ /* All focusable elements inside an active modal get a clearly visible ring */ [data-ui-v2="true"] .modal-overlay.open :focus-visible, [data-ui-v2="true"] .modal-bg.open :focus-visible { outline: 2px solid var(--accent, #0D9488); outline-offset: 2px; border-radius: var(--r6, 6px); } /* Primary action buttons inside modal */ [data-ui-v2="true"] .modal-overlay.open button[data-primary]:focus-visible, [data-ui-v2="true"] .modal-bg.open button[data-primary]:focus-visible { outline-color: var(--accent, #0D9488); box-shadow: 0 0 0 4px rgba(13,148,136,.20); } /* ═══════════════════════════════════════════════════════════ 6. MODAL BUTTON STYLES ═══════════════════════════════════════════════════════════ */ /* Primary CTA button in modal */ [data-ui-v2="true"] .modal-btn-primary, [data-ui-v2="true"] .mdl-btn.primary { font-family: var(--fui, 'Plus Jakarta Sans', sans-serif); font-size: 0.875rem; font-weight: 500; padding: 9px 20px; border-radius: var(--r10, 10px); background: var(--accent, #0D9488); color: #fff; transition: background var(--dur-fast, 150ms) var(--ease-standard), transform var(--dur-fast, 150ms) var(--ease-spring), box-shadow var(--dur-fast, 150ms) var(--ease-standard); } [data-ui-v2="true"] .modal-btn-primary:hover, [data-ui-v2="true"] .mdl-btn.primary:hover { background: var(--accent-h, #0F766E); transform: scale(1.02); box-shadow: 0 4px 12px rgba(13,148,136,.28); } [data-ui-v2="true"] .modal-btn-primary:active, [data-ui-v2="true"] .mdl-btn.primary:active { transform: scale(0.97); } /* Secondary/ghost button in modal */ [data-ui-v2="true"] .modal-btn-secondary, [data-ui-v2="true"] .mdl-btn.secondary { font-family: var(--fui, 'Plus Jakarta Sans', sans-serif); font-size: 0.875rem; font-weight: 500; padding: 9px 20px; border-radius: var(--r10, 10px); background: transparent; color: var(--t2, #374151); border: 1px solid var(--b2, rgba(0,0,0,.11)); transition: background var(--dur-fast, 150ms) var(--ease-standard), border-color var(--dur-fast, 150ms) var(--ease-standard), transform var(--dur-fast, 150ms) var(--ease-spring); } [data-ui-v2="true"] .modal-btn-secondary:hover, [data-ui-v2="true"] .mdl-btn.secondary:hover { background: var(--bg-muted, #F3F4F6); border-color: var(--b3, rgba(0,0,0,.17)); transform: scale(1.02); } [data-ui-v2="true"][data-theme="dark"] .modal-btn-secondary, [data-ui-v2="true"][data-theme="dark"] .mdl-btn.secondary { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.12); } [data-ui-v2="true"][data-theme="dark"] .modal-btn-secondary:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.20); } /* ═══════════════════════════════════════════════════════════ 7. MOBILE SHEET — bottom-sheet variant on small screens ═══════════════════════════════════════════════════════════ */ @media (max-width: 540px) { [data-ui-v2="true"] .modal-box { /* Bottom sheet on mobile */ max-width: 100%; width: 100%; border-radius: var(--r20, 20px) var(--r20, 20px) 0 0; /* Position at bottom */ margin-top: auto; margin-bottom: 0; align-self: flex-end; } /* Overlay aligns to bottom on mobile */ [data-ui-v2="true"] .modal-overlay, [data-ui-v2="true"] .modal-bg { align-items: flex-end; padding: 0; } /* Mobile sheet entrance: slide up instead of scale */ [data-ui-v2="true"] .modal-box { animation-name: v2-modal-in-mobile !important; } [data-ui-v2="true"] .modal-overlay.exiting .modal-box, [data-ui-v2="true"] .modal-bg.exiting .modal-box { animation-name: v2-modal-out-mobile !important; } @keyframes v2-modal-in-mobile { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } @keyframes v2-modal-out-mobile { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(60%); } } /* Drag handle visual cue */ [data-ui-v2="true"] .modal-box::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--b2, rgba(0,0,0,.11)); margin: 10px auto 0; flex-shrink: 0; } [data-ui-v2="true"][data-theme="dark"] .modal-box::before { background: rgba(255,255,255,.15); } } /* ═══════════════════════════════════════════════════════════ 8. REDUCED-MOTION — no animations, instant transitions ═══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { [data-ui-v2="true"] .modal-overlay, [data-ui-v2="true"] .modal-bg, [data-ui-v2="true"] .modal-box, [data-ui-v2="true"] .modal-overlay.exiting .modal-box, [data-ui-v2="true"] .modal-bg.exiting .modal-box { animation: none !important; transition-duration: 0.01ms !important; } }