/* ========================================================================== auth-modal.css — the "Sign in or create account" modal. -------------------------------------------------------------------------- EXTRACTED from css/shared/s-7b769d0663.css (index's own bundle) so the modal is a real shared component rather than an index-only block. It is now the ONE source of truth for the modal's look — the rules were REMOVED from that bundle, not copied, so the two cannot drift. Linked by every page that opens the modal: index.html (hero banner) and solutions-operations.html (the "Set up outcome" CTAs). Markup + behaviour live in js/auth-modal.js. RTL: the close button uses a logical inset so AR/HE mirror correctly. ========================================================================== */ /* Scroll-lock companion: js/auth-modal.js sets `body { overflow: hidden }` while the modal is open. On classic-scrollbar platforms (e.g. Windows Chrome) that removes the ~15px viewport scrollbar, widening the viewport and making the page — and the fixed header — jump/clip horizontally as the modal opens or closes. Reserving the gutter permanently keeps the layout width constant across the lock, so nothing shifts. Chosen over a JS padding-right compensation because this also stabilises fixed-position chrome, which padding on cannot. */ html { scrollbar-gutter: stable; } /* Auth Modal */ .auth-modal-overlay { position: fixed; inset: 0; /* With `scrollbar-gutter: stable` (above) the reserved gutter is excluded from a fixed element's containing block, so `inset:0` would stop ~15px short of the right edge and leave an un-dimmed seam while the scroll-lock hides the scrollbar. `100vw` spans the full viewport width, gutter included, so the scrim covers everything. A fixed element does not add to scrollable overflow, so this introduces no horizontal scrollbar. */ width: 100vw; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); /* Top-most: this is a full-viewport modal layer that must sit above ALL page chrome. At 9999 it TIED with the cookie consent bar (#mihu-cookie-bar) and the language menu (.lang-dropdown-menu), both z-index:9999 — and on a tie the winner is decided by DOM insertion order, a race between async scripts. The cookie bar could then paint over the scrim (looked like the footer showing through). A decisively higher value makes coverage deterministic. */ z-index: 100000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .auth-modal-overlay.open { opacity: 1; visibility: visible; } /* Self-contained box model. index.html's bundle ships a global `* { box-sizing: border-box }` reset, but the solutions bundle does not — so the card fell back to content-box and its `padding: 40px` was ADDED outside `max-width: 90vw`, pushing the box ~80px past its cap. On narrow viewports that overflowed the screen and the modal read as off-centre. Scoping the reset to the component keeps it correct on any host, like the font rule below. */ .auth-modal-overlay, .auth-modal-overlay * { box-sizing: border-box; } .auth-modal-card { /* Self-contained on purpose. This used to inherit DM Sans from index's own bundle; on any other host page the body font is not set and the whole modal fell back to Times New Roman. A shared component must not depend on where it is mounted. */ font-family: var(--font-sans, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); background: #FFFFFF; border-radius: 20px; padding: 40px; width: 420px; max-width: 90vw; box-shadow: 0 24px 60px rgba(0,0,0,0.2); position: relative; text-align: center; transform: scale(0.95); transition: transform 0.2s ease; } .auth-modal-overlay.open .auth-modal-card { transform: scale(1); } .auth-modal-close { position: absolute; top: 16px; /* logical, not `right`: keeps the × on the trailing edge in AR/HE too */ inset-inline-end: 16px; background: none; border: none; color: #9CA3AF; cursor: pointer; font-size: 20px; line-height: 1; padding: 4px; transition: color 0.2s; } .auth-modal-close:hover { color: #1D1D1F; } .auth-modal-logo { width: 28px; height: 28px; display: inline-grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-bottom: 20px; } .auth-modal-logo span { width: 100%; aspect-ratio: 1; background: #1D1D1F; border-radius: 1px; } .auth-modal-subtitle { font-size: 16px; font-weight: 400; color: #9CA3AF; margin: 0 0 4px; } .auth-modal-title { font-size: 22px; font-weight: 700; color: #1D1D1F; margin: 0 0 28px; } .auth-modal-btn-login { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 10px; font-size: 15px; font-weight: 600; color: #1D1D1F; cursor: pointer; text-decoration: none; transition: all 0.2s; font-family: var(--font-sans) !important; margin-bottom: 10px; } .auth-modal-btn-login:hover { background: #F9FAFB; border-color: #1D1D1F; } .auth-modal-btn-login svg { width: 16px; height: 16px; flex-shrink: 0; } .auth-modal-btn-email { display: block; width: 100%; padding: 14px; background: #1D1D1F; color: #FFFFFF; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; transition: background 0.2s; font-family: var(--font-sans) !important; } .auth-modal-btn-email:hover { background: #374151; } .auth-modal-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0; font-size: 11px; font-weight: 500; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.06em; } .auth-modal-divider::before, .auth-modal-divider::after { content: ''; flex: 1; height: 1px; background: #E5E7EB; } .auth-modal-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .auth-modal-btn-social { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 10px; font-size: 14px; font-weight: 500; color: #1D1D1F; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; text-decoration: none; } .auth-modal-btn-social:hover { background: #F9FAFB; border-color: #1D1D1F; } .auth-modal-btn-social svg { width: 18px; height: 18px; flex-shrink: 0; display: block; } .auth-modal-terms { font-size: 12px; color: #9CA3AF; margin-top: 16px; line-height: 1.5; } .auth-modal-terms a { color: #9CA3AF; text-decoration: underline; } .auth-modal-terms a:hover { color: #374151; } /* Was inside this bundle's @media (max-width:768px) block alongside hero rules; moved here with the rest of the component. */ @media (max-width: 768px) { .auth-modal-card { padding: 28px 24px; } }