/* ===================================================================== ONBOARDING REDESIGN — additive stylesheet ===================================================================== Loaded LAST in template.blade.php's (after style1.css/ responsive1.css) so it wins the cascade on shared class names without !important. Every rule below is scoped to a specific overlay ID (#purposeModalOverlay, #tenantTypeModalOverlay, etc.) - never the bare .property-item/.property-options/.property-selector selectors - so footer.blade.php's #hpAccountSheetOverlay (which reuses those same base classes for an unrelated account-settings sheet) is unaffected. ONE deliberate exception: the VisualViewport keyboard-gap fix at the bottom applies to the bare .property-selector-overlay class. It's a pure positioning fix (falls back to today's exact behavior whenever the --vvh/--vv-top custom properties aren't set), not a visual change, so the account sheet benefits from the same fix rather than being disrupted by it. Design tokens/type/component styles ported 1:1 from the approved reference build (website html/index/onboarding.html) - system font stack, not the site's Newsreader/Konnect faces, and the prototype's own accent (#E8551F), not the live modal's #FC4A0A. This is a deliberate correction after the first pass reused the live site's existing look; the brief is to match the reference exactly, not blend the two. ===================================================================== */ :root { --ob-accent: #E8551F; --ob-accent-deep: #C74313; --ob-accent-tint: #FCE3D4; --ob-ink: #241B14; --ob-ink-soft: #6E6153; --ob-ink-faint: #9A8F7C; --ob-line: #E7DFD0; --ob-surface: #FFFFFF; --ob-surface-2: #FCFAF5; --ob-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --ob-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace; } /* All nine onboarding overlays, scoped by ID (never the bare classes - #hpAccountSheetOverlay is a tenth user of .property-selector-overlay and must not pick any of this up). */ #loginModalOverlay .selector-content, #loginModalOverlay .mobile-card, #otpModalOverlay .selector-content, #otpModalOverlay .mobile-card, #nameModalOverlay .selector-content, #nameModalOverlay .mobile-card, #purposeModalOverlay .selector-content, #purposeModalOverlay .mobile-card, #locationModalOverlay .selector-content, #locationModalOverlay .mobile-card, #propertyTypeModalOverlay .selector-content, #propertyTypeModalOverlay .mobile-card, #categoryModalOverlay .selector-content, #categoryModalOverlay .mobile-card, #tenantTypeModalOverlay .selector-content, #tenantTypeModalOverlay .mobile-card, #budgetEstimateModalOverlay .selector-content, #budgetEstimateModalOverlay .mobile-card { font-family: var(--ob-font); } #loginModalOverlay .property-selector, #otpModalOverlay .property-selector, #nameModalOverlay .property-selector, #purposeModalOverlay .property-selector, #locationModalOverlay .property-selector, #propertyTypeModalOverlay .property-selector, #categoryModalOverlay .property-selector, #tenantTypeModalOverlay .property-selector, #budgetEstimateModalOverlay .property-selector { width: 460px; border-radius: 22px; } /* ---------------- headings + subtext ---------------- */ /* Unifies the h5.mobile-card-title (phone/OTP/name/purpose) and bare h2 (location/property type/category/tenant type/budget) steps to the same look - both currently inherit different base styles (Newsreader serif vs plain), neither matching the reference. */ #loginModalOverlay .mobile-card-title, #otpModalOverlay .mobile-card-title, #nameModalOverlay .mobile-card-title, #purposeModalOverlay .mobile-card-title, #locationModalOverlay .login-modal-title, #propertyTypeModalOverlay h2, #categoryModalOverlay h2, #tenantTypeModalOverlay h2, #budgetEstimateModalOverlay h2 { font-family: var(--ob-font); font-size: 21px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; color: var(--ob-ink); margin: 0 0 6px; } .ob-sub, #otpModalOverlay .otp-subtitle, #locationModalOverlay .location-modal-description { font-family: var(--ob-font); font-size: 13px; color: var(--ob-ink-soft); margin: 0 0 20px; max-width: 34ch; } #otpModalOverlay .otp-subtitle strong { color: var(--ob-ink); font-weight: 700; } /* ---------------- progress bar + step kicker ---------------- */ .ob-progress { display: flex; gap: 5px; margin-bottom: 16px; } .ob-progress i { flex: 1; height: 3px; border-radius: 3px; background: var(--ob-line); display: block; } .ob-progress i.ob-done { background: var(--ob-accent); } .ob-step-kicker { font-family: var(--ob-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ob-ink-faint); margin-bottom: 8px; } /* ---------------- text fields (phone / name / location) ---------------- */ #loginModalOverlay .login-phone-wrapper { display: flex; align-items: center; position: relative; border: 1.5px solid var(--ob-line); border-radius: 12px; background: var(--ob-surface-2); } #loginModalOverlay .login-phone-wrapper:focus-within { border-color: var(--ob-accent); background: var(--ob-surface); } #loginModalOverlay .country-code { font-family: var(--ob-font-mono); font-size: 14px; color: var(--ob-ink-soft); padding: 0 0 0 14px; } #loginModalOverlay .login-phone-input { flex: 1; border: none; background: transparent; padding: 14px; font-size: 15px; color: var(--ob-ink); font-family: var(--ob-font); } #loginModalOverlay .login-phone-input:focus { outline: none; } #nameModalOverlay .name-input, #locationModalOverlay .location-search-input { width: 100%; border: 1.5px solid var(--ob-line); border-radius: 12px; padding: 14px; font-size: 15px; font-family: var(--ob-font); color: var(--ob-ink); background: var(--ob-surface-2); } #locationModalOverlay .location-search-input { padding-left: 44px; } #nameModalOverlay .name-input:focus, #locationModalOverlay .location-search-input:focus { outline: none; border-color: var(--ob-accent); background: var(--ob-surface); } #locationModalOverlay .location-search-wrapper { position: relative; } #locationModalOverlay .location-search-icon { color: var(--ob-ink-soft); } /* ---------------- OTP boxes ---------------- */ #otpModalOverlay .otp-input-wrapper { display: flex; gap: 10px; margin-bottom: 4px; } #otpModalOverlay .otp-input { /* flex-shrink/height/padding/box-sizing explicitly reset - an older equal-specificity rule in responsive.css (#otpModalOverlay .otp-input inside a mobile media query) sets flex-shrink:0 and a fixed height, and since this rule loads later but never mentioned those properties, they survived the cascade untouched: each box refused to shrink, so the first one filled the row and the other three were pushed off-screen. Every property that rule sets is repeated here so nothing leaks through. */ width: 100%; flex-shrink: 1; height: auto; padding: 0; box-sizing: border-box; aspect-ratio: 1; text-align: center; font-size: 20px; font-family: var(--ob-font-mono); font-weight: 700; border: 1.5px solid var(--ob-line); border-radius: 12px; background: var(--ob-surface-2); color: var(--ob-ink); } #otpModalOverlay .otp-input:focus { outline: none; border-color: var(--ob-accent); background: var(--ob-surface); } #otpModalOverlay .otp-input.ob-filled { border-color: var(--ob-accent); background: var(--ob-accent-tint); } #otpModalOverlay .otp-resend-section { font-family: var(--ob-font); font-size: 12.5px; color: var(--ob-ink-faint); margin: 10px 0 20px; } /* !important needed here specifically to counter a leftover #otpModalOverlay .otp-resend-link { display:none !important; } inside a mobile media query in responsive.css - dead CSS from an older OTP layout that targeted classes the current markup no longer has (its sibling rules reference .otp-verify-btn, .otp-success-message, etc., none of which exist in login-modal.blade.php today), but this one class name still matches and its !important can't be beaten by source order or specificity alone. */ #otpModalOverlay .otp-resend-link { color: var(--ob-accent) !important; font-weight: 700; text-decoration: none; display: inline !important; visibility: visible !important; } /* ---------------- buttons ---------------- */ #loginModalOverlay .continue-btn, #otpModalOverlay .continue-btn, #nameModalOverlay .continue-btn, #purposeModalOverlay .continue-btn, #locationModalOverlay .login-continue-btn-a, #propertyTypeModalOverlay .continue-btn, #categoryModalOverlay .continue-btn, #tenantTypeModalOverlay .continue-btn, #budgetEstimateModalOverlay .continue-btn { width: 100%; border: none; border-radius: 12px; padding: 15px; font-size: 14.5px; font-weight: 800; background: var(--ob-accent); color: #fff; cursor: pointer; font-family: var(--ob-font); transition: background .15s ease; } #loginModalOverlay .continue-btn:hover, #otpModalOverlay .continue-btn:hover, #nameModalOverlay .continue-btn:hover, #purposeModalOverlay .continue-btn:hover, #locationModalOverlay .login-continue-btn-a:hover, #propertyTypeModalOverlay .continue-btn:hover, #categoryModalOverlay .continue-btn:hover, #tenantTypeModalOverlay .continue-btn:hover, #budgetEstimateModalOverlay .continue-btn:hover { background: var(--ob-accent-deep); } /* Loading/processing state - previously undefined, so a JS-set "Processing..."/"Please wait..." text change during an ajax wait looked almost identical to the normal button, easy to read as "nothing is happening." A spinner + dimmed, uninteractive look makes the wait unmistakable regardless of which exact text a given caller sets. */ #loginModalOverlay .continue-btn:disabled, #otpModalOverlay .continue-btn:disabled, #nameModalOverlay .continue-btn:disabled, #purposeModalOverlay .continue-btn:disabled, #locationModalOverlay .login-continue-btn-a:disabled, #propertyTypeModalOverlay .continue-btn:disabled, #categoryModalOverlay .continue-btn:disabled, #tenantTypeModalOverlay .continue-btn:disabled, #budgetEstimateModalOverlay .continue-btn:disabled { background: var(--ob-ink-faint) !important; cursor: not-allowed; position: relative; color: transparent !important; } #loginModalOverlay .continue-btn:disabled::after, #otpModalOverlay .continue-btn:disabled::after, #nameModalOverlay .continue-btn:disabled::after, #purposeModalOverlay .continue-btn:disabled::after, #locationModalOverlay .login-continue-btn-a:disabled::after, #propertyTypeModalOverlay .continue-btn:disabled::after, #categoryModalOverlay .continue-btn:disabled::after, #tenantTypeModalOverlay .continue-btn:disabled::after, #budgetEstimateModalOverlay .continue-btn:disabled::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: ob-spin .7s linear infinite; } @keyframes ob-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #loginModalOverlay .continue-btn:disabled::after, #otpModalOverlay .continue-btn:disabled::after, #nameModalOverlay .continue-btn:disabled::after, #purposeModalOverlay .continue-btn:disabled::after, #locationModalOverlay .login-continue-btn-a:disabled::after, #propertyTypeModalOverlay .continue-btn:disabled::after, #categoryModalOverlay .continue-btn:disabled::after, #tenantTypeModalOverlay .continue-btn:disabled::after, #budgetEstimateModalOverlay .continue-btn:disabled::after { animation: none; } } /* ---------------- icon-card grid: purpose / property type / tenant type ---------------- */ #purposeModalOverlay .property-options, #propertyTypeModalOverlay .property-options, #tenantTypeModalOverlay .property-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #purposeModalOverlay .property-item label, #propertyTypeModalOverlay .property-item label, #tenantTypeModalOverlay .property-item label { height: auto; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px 10px; gap: 8px; font-size: 13.5px; font-family: var(--ob-font); font-weight: 700; border: 1.5px solid var(--ob-line); background: var(--ob-surface-2); color: var(--ob-ink); } /* Replace the fake radio dot (label:before) with the icon - the icon itself is a real child of the label, added in the blade markup, not a background-image, so it can inherit currentColor and flip to white on the selected state below. */ #purposeModalOverlay .property-item label:before, #propertyTypeModalOverlay .property-item label:before, #tenantTypeModalOverlay .property-item label:before { display: none; } #purposeModalOverlay .property-item svg[data-ob-icon], #propertyTypeModalOverlay .property-item svg[data-ob-icon], #tenantTypeModalOverlay .property-item svg[data-ob-icon] { width: 26px; height: 26px; color: var(--ob-ink-soft); flex-shrink: 0; } #purposeModalOverlay .property-item input:checked + label, #propertyTypeModalOverlay .property-item input:checked + label, #tenantTypeModalOverlay .property-item input:checked + label { border-color: var(--ob-accent); background: var(--ob-accent-tint); color: var(--ob-accent-deep); box-shadow: none; } #purposeModalOverlay .property-item input:checked + label svg[data-ob-icon], #propertyTypeModalOverlay .property-item input:checked + label svg[data-ob-icon], #tenantTypeModalOverlay .property-item input:checked + label svg[data-ob-icon] { color: var(--ob-accent); } /* ---------------- chip-list: category / budget ---------------- */ #categoryModalOverlay .property-options, #budgetEstimateModalOverlay .property-options { gap: 8px; } #categoryModalOverlay .property-item label, #budgetEstimateModalOverlay .property-item label { height: auto; padding: 13px 16px; font-size: 13.5px; font-weight: 600; font-family: var(--ob-font); color: var(--ob-ink); background: var(--ob-surface-2); border: 1.5px solid var(--ob-line); } #categoryModalOverlay .property-item label:before, #budgetEstimateModalOverlay .property-item label:before { display: none; } #categoryModalOverlay .property-item input:checked + label, #budgetEstimateModalOverlay .property-item input:checked + label { background: var(--ob-accent-tint); border-color: var(--ob-accent); color: var(--ob-accent-deep); box-shadow: none; } @media (max-width: 768px) { #purposeModalOverlay .property-item label, #propertyTypeModalOverlay .property-item label, #tenantTypeModalOverlay .property-item label { padding: 14px 8px; } } /* Keyboard-gap fix (VisualViewport-driven top/height on .property-selector-overlay) removed - a real mobile device test showed the phone-number input becoming unclickable after this shipped, and it was a proactive addition (not a confirmed bug in this modal to begin with), so the safe move is reverting it rather than debugging further under time pressure. Reference build (onboarding.html) still has it and works there; if this comes back, it needs real-device testing before landing again, not just simulator/DOM checks. */