/* ========================================================================= ProCraft Organic Funnel — full-screen modal overlay + card styling Shared asset 1 (see _build-spec/BUILD-PLAN.md -> "Shared asset 1"). The modal chains the two funnel steps in-place: step 1 = Apply ("Apply To Be A Featured Property") step 2 = Priority List ("Priority List Application") The forms INSIDE the card reuse fp's own Tailwind classes (fp/assets/styles.css) so they look identical to /fp. This file only styles the OVERLAY, CARD, HEADER, BODY, and step visibility -- nothing that collides with Tailwind or site chrome. Class prefix `.ofx-` is unique (not used by Tailwind or the chrome CSS). ========================================================================= */ /* Overlay -- fixed full-screen scrim, hidden until `.open` is added by JS. */ .ofx-overlay{ position:fixed; inset:0; z-index:900; background:rgba(8,16,26,.72); display:none; align-items:flex-start; justify-content:center; overflow:auto; padding:32px 16px; -webkit-overflow-scrolling:touch; } .ofx-overlay.open{ display:flex; } /* Card -- white rounded panel. */ .ofx-card{ position:relative; max-width:640px; width:100%; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 40px 90px -24px rgba(8,16,26,.6); margin:auto 0; font-family:"DM Sans", system-ui, -apple-system, sans-serif; } /* Header bar -- title + round close button. */ .ofx-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; border-bottom:1px solid #eef; } .ofx-title{ font-weight:700; font-size:1.05rem; line-height:1.25; color:#0D2137; margin:0; font-family:"DM Sans", system-ui, sans-serif; } .ofx-x{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; border:none; background:#f1f4f7; color:#0D2137; font-size:22px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .15s; } .ofx-x:hover{ background:#e2e8ee; } /* Scrollable body -- holds both step forms. */ .ofx-body{ padding:22px 24px 28px; max-height:calc(100vh - 160px); overflow-y:auto; } /* Step visibility -- one step shown at a time via the card's data-active attribute. Both steps ship in the DOM; CSS hides the inactive one. */ .ofx-step{ display:none; } .ofx-card[data-active="1"] .ofx-step[data-step="1"]{ display:block; } .ofx-card[data-active="2"] .ofx-step[data-step="2"]{ display:block; } /* Small intro line shown above each step's form. */ .ofx-sub{ margin:0 0 16px; font-size:.85rem; line-height:1.45; color:#6C7E91; font-family:"DM Sans", system-ui, sans-serif; } /* Body scroll lock helper -- JS toggles this on while the modal is open. */ body.ofx-lock{ overflow:hidden; } /* Narrow screens -- let the card use the full width and round a little less. */ @media (max-width:480px){ .ofx-overlay{ padding:16px 10px; } .ofx-card{ border-radius:16px; } .ofx-head{ padding:15px 16px; } .ofx-body{ padding:18px 16px 22px; max-height:calc(100vh - 130px); } .ofx-title{ font-size:.98rem; } }