/* ========================================================================== ACRENKEY-IDENTICAL LEAD FORM STYLING FOR SELF STORAGE INDIA Preserves brand colors (#FF9600 Orange, #002B49 Navy) while implementing Acre&Key's exact geometry, floating labels, country dropdown & error states. ========================================================================== */ .lf-modal-overlay, .lf-modal-overlay * { box-sizing: border-box; } .lf-modal-overlay h1, .lf-modal-overlay h2, .lf-modal-overlay h3, .lf-modal-overlay p, .lf-modal-overlay form { margin: 0; padding: 0; } .lf-modal-overlay { position: fixed; inset: 0; background: rgba(0, 43, 73, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 99999999 !important; display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; pointer-events: none; overflow-y: auto; transition: opacity 0.3s ease, visibility 0.3s ease; } .lf-modal-overlay.lf-modal-open { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .lf-wrap { --lf-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --lf-font-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --lf-ink: #002B49; --lf-muted: rgba(0, 43, 73, 0.55); --lf-line: #E2E8F0; --lf-line-focus: #FF9600; --lf-err: #DC2626; --lf-ok: #16A34A; --lf-bg-surface: #FFFFFF; position: relative; z-index: 10; width: min(420px, 92vw); max-width: 420px; background: var(--lf-bg-surface); border-radius: 12px; padding: 40px 32px 34px 32px; box-shadow: 0 24px 60px rgba(0, 43, 73, 0.28); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: visible; transform: translateY(24px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .lf-modal-overlay.lf-modal-open .lf-wrap { transform: translateY(0); } @media (max-width: 768px) { .lf-modal-overlay { padding: 0 !important; align-items: flex-end !important; overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; } .lf-wrap { max-width: 100% !important; width: 100% !important; border-radius: 20px 20px 0 0 !important; padding: 16px 24px max(38px, calc(20px + env(safe-area-inset-bottom, 24px))) 24px !important; max-height: 92vh !important; max-height: 92dvh !important; transform: translateY(100%); box-shadow: 0 -10px 40px rgba(0, 43, 73, 0.3) !important; overflow-x: hidden !important; box-sizing: border-box !important; } .lf-modal-overlay.lf-modal-open .lf-wrap { transform: translateY(0) !important; left: 0 !important; right: 0 !important; } .lf-wrap input.lf-input { font-size: 16px !important; } } @media (prefers-reduced-motion: reduce) { .lf-modal-overlay, .lf-wrap, .lf-label { transition: none !important; transform: none !important; backdrop-filter: none !important; } } .lf-drag-handle { display: none; } @media (max-width: 768px) { .lf-drag-handle { display: block; width: 44px; height: 4px; background: #CBD5E1; border-radius: 8px; margin: 2px auto 16px auto; } } .lf-modal-close-icon { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; background: none; border: none; outline: none; cursor: pointer !important; color: var(--lf-muted); padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: color 0.15s, background-color 0.15s, transform 0.15s; z-index: 200 !important; pointer-events: auto !important; -webkit-tap-highlight-color: transparent; } .lf-modal-close-icon svg { width: 16px; height: 16px; } .lf-modal-close-icon:hover { color: var(--lf-ink); background: rgba(0, 43, 73, 0.06); transform: scale(1.06); } .lf-modal-close-icon:active { background: rgba(0, 43, 73, 0.1); transform: scale(0.96); } @media (max-width: 768px) { .lf-modal-close-icon { top: 10px !important; right: 12px !important; } } .lf-header { margin-bottom: 22px; text-align: center; } .lf-main-heading { font-family: var(--lf-font-sans); font-size: 24px; font-weight: 700; margin-bottom: 8px; color: var(--lf-ink); letter-spacing: -0.01em; line-height: 1.25; } .lf-sub-heading { font-family: var(--lf-font-sans); font-size: 13.5px; color: var(--lf-muted); line-height: 1.5; max-width: 330px; margin: 0 auto; } @media (max-width: 768px) { .lf-header { margin-bottom: 18px; } .lf-main-heading { font-size: 22px; } .lf-sub-heading { font-size: 13px; } } .lf-form { display: flex; flex-direction: column; gap: 16px; } .lf-form .lf-field { position: relative; width: 100%; } .lf-form .lf-field-phone { position: relative; z-index: 50; } .lf-input-box { position: relative; width: 100%; height: 50px; min-height: 50px; border: 1px solid var(--lf-line); border-radius: 8px; background: var(--lf-bg-surface); display: flex; align-items: center; padding: 0 16px !important; transition: border-color .2s, background-color .2s, box-shadow .2s; } .lf-field.lf-focused .lf-input-box { border-color: var(--lf-line-focus); box-shadow: 0 0 0 3px rgba(255, 150, 0, 0.12); } .lf-field.lf-has-error .lf-input-box { border-color: var(--lf-err) !important; background: #FFFBFB; } .lf-field.lf-has-error.lf-focused .lf-input-box { border-color: var(--lf-line-focus) !important; background: var(--lf-bg-surface); } .lf-field.lf-is-valid .lf-input-box { border-color: var(--lf-ok) !important; } .lf-wrap .lf-label { position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 14px !important; color: var(--lf-muted) !important; transition: transform .2s ease, top .2s ease, font-size .2s ease, color .2s ease, background-color .2s ease !important; font-family: var(--lf-font-sans) !important; pointer-events: none; z-index: 5 !important; background: transparent !important; padding: 0 4px !important; } .lf-field.lf-focused .lf-label, .lf-field.lf-has-value .lf-label, .lf-field.lf-autofilled .lf-label { top: 0 !important; transform: translateY(-50%) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: var(--lf-line-focus) !important; background-color: var(--lf-bg-surface) !important; left: 12px !important; } .lf-field-phone .lf-label { left: 87px !important; } .lf-field-phone.lf-focused .lf-label, .lf-field-phone.lf-has-value .lf-label, .lf-field-phone.lf-autofilled .lf-label { left: 12px !important; } .lf-req { color: var(--lf-err); margin-left: 3px; } .lf-wrap input.lf-input { flex: 1 1 auto !important; width: 0 !important; min-width: 0 !important; border: none !important; background: transparent !important; outline: none !important; font-family: var(--lf-font-sans) !important; font-size: 15px !important; font-weight: 500 !important; color: var(--lf-ink) !important; padding: 0 !important; height: 100% !important; line-height: normal !important; } .lf-wrap input.lf-input:-webkit-autofill, .lf-wrap input.lf-input:-webkit-autofill:hover, .lf-wrap input.lf-input:-webkit-autofill:focus, .lf-wrap input.lf-input:-webkit-autofill:active { -webkit-text-fill-color: var(--lf-ink) !important; transition: background-color 5000s ease-in-out 0s; } input::-webkit-contacts-auto-fill-button, input::-webkit-credentials-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; height: 0; width: 0; margin: 0; } .lf-clear-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: #94A3B8; padding: 6px; margin-left: 8px; flex-shrink: 0; z-index: 6; opacity: 0; visibility: hidden; transition: opacity 0.15s, color 0.15s; height: 32px; width: 32px; border-radius: 50%; } .lf-clear-btn svg { width: 10px; height: 10px; pointer-events: none; } .lf-clear-btn:hover { color: var(--lf-ink); background: rgba(0, 43, 73, 0.06); } .lf-field.lf-has-input-text .lf-clear-btn { opacity: 1; visibility: visible; } .lf-valid-icon { display: none; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; margin-left: 6px; color: var(--lf-ok); } .lf-valid-icon svg { width: 14px; height: 14px; } .lf-field.lf-is-valid:not(.lf-has-input-text) .lf-valid-icon { display: inline-flex; } input:-webkit-autofill { animation-name: lfAutofillDetected; animation-duration: 0.01s; } @keyframes lfAutofillDetected { from {} to {} } .lf-phone-row { display: flex !important; align-items: center !important; width: 100% !important; position: relative !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } .lf-cc-trigger { display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 4px !important; cursor: pointer !important; padding: 0 6px 0 0 !important; background: none !important; border: none !important; font-family: var(--lf-font-sans) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--lf-ink) !important; height: 100% !important; min-width: 52px !important; width: auto !important; flex-shrink: 0 !important; margin: 0 !important; } .lf-cc-arrow { width: 8px; height: 5px; color: var(--lf-muted); flex-shrink: 0; transition: transform 0.2s ease; } .lf-cc-trigger[aria-expanded="true"] .lf-cc-arrow { transform: rotate(180deg); } .lf-cc-panel { display: none; position: absolute; top: calc(100% + 8px); left: -16px; z-index: 99999999 !important; width: calc(100% + 32px); background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 43, 73, 0.22); max-height: 240px; overflow: hidden; flex-direction: column; } .lf-cc-panel.lf-cc-open { display: flex; } @media (max-width: 768px) { .lf-cc-backdrop { display: none; position: fixed !important; inset: 0 !important; background: rgba(0, 43, 73, 0.6) !important; z-index: 50 !important; } .lf-cc-backdrop.lf-cc-open { display: block !important; } .lf-cc-panel { display: flex !important; visibility: hidden; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; width: 100% !important; max-height: 60vh !important; max-height: 60dvh !important; border-radius: 16px 16px 0 0 !important; border: none !important; box-shadow: 0 -10px 32px rgba(0, 43, 73, 0.28) !important; z-index: 10000000 !important; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s; padding-bottom: env(safe-area-inset-bottom); margin: 0 !important; } .lf-cc-panel.lf-cc-open { visibility: visible; transform: translateY(0) !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } .lf-cc-panel::before { content: ''; display: block; width: 36px; height: 4px; background: #CBD5E1; border-radius: 8px; margin: 12px auto 6px; flex-shrink: 0; } } .lf-cc-search { padding: 12px 14px; border: none !important; border-bottom: 1px solid #E2E8F0 !important; width: 100%; outline: none !important; font-family: var(--lf-font-sans) !important; font-size: 15px !important; flex-shrink: 0; color: var(--lf-ink) !important; background: #FAFAFA; } .lf-cc-list { max-height: 190px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; } .lf-cc-opt { padding: 11px 16px; font-family: var(--lf-font-sans) !important; font-size: 13.5px; cursor: pointer; display: flex; gap: 10px; color: var(--lf-ink); user-select: none; -webkit-user-select: none; transition: background 0.15s ease; } .lf-cc-opt:hover, .lf-cc-opt.lf-keyboard-active { background: #F1F5F9; outline: none; } .lf-cc-trigger, .lf-cc-opt, .lf-btn, .lf-modal-close-icon { touch-action: manipulation; } .lf-cc-opt-dial { font-family: var(--lf-font-sans) !important; font-weight: 600; color: var(--lf-line-focus); min-width: 44px; } @media (max-width: 768px) { .lf-cc-opt { padding: 14px 16px; font-size: 15px; } } .lf-divider { width: 1px !important; height: 18px !important; background: var(--lf-line) !important; margin: 0 12px 0 6px !important; flex-shrink: 0 !important; } .lf-err { font-size: 11px; color: var(--lf-err); font-weight: 500; visibility: hidden; height: 0; overflow: hidden; padding: 0 4px; font-family: var(--lf-font-sans); line-height: 1.3; } .lf-has-error .lf-err { visibility: visible; height: auto; padding: 6px 4px 0; } .lf-submit-wrap { margin-top: 10px; } .lf-btn { width: 100%; height: 48px; min-height: 48px; border: none !important; border-radius: 6px !important; background: linear-gradient(135deg, #FF9600 0%, #E68500 100%) !important; color: #FFFFFF !important; font-family: var(--lf-font-sans) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; text-transform: none !important; text-decoration: none !important; cursor: pointer !important; position: relative; box-shadow: 0 4px 14px rgba(255, 150, 0, 0.3) !important; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 0 16px 0 24px !important; box-sizing: border-box !important; } .lf-btn:hover { background: linear-gradient(135deg, #FFA51A 0%, #E85D0A 100%) !important; box-shadow: 0 8px 22px rgba(255, 150, 0, 0.45) !important; transform: translateY(-1px) !important; } .lf-btn:active { transform: translateY(0) !important; box-shadow: 0 4px 12px rgba(255, 150, 0, 0.25) !important; } .lf-btn:disabled { opacity: 0.6 !important; cursor: not-allowed !important; transform: none !important; } .lf-btn span { position: relative; z-index: 1; } .lf-btn > span:not(.cta-arrow-badge) { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; width: auto !important; flex: 0 0 auto !important; line-height: 1 !important; white-space: nowrap !important; } .lf-btn .cta-arrow-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; border-radius: 50% !important; border: 1px solid rgba(255, 255, 255, 0.45) !important; background: rgba(255, 255, 255, 0.12) !important; color: #FFFFFF !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; flex-grow: 0 !important; box-sizing: border-box !important; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important; } .lf-btn .cta-arrow-badge svg { width: 11px !important; height: 11px !important; stroke: currentColor !important; stroke-width: 1.8 !important; display: block !important; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } .lf-btn:hover .cta-arrow-badge { background: rgba(255, 255, 255, 0.24) !important; border-color: rgba(255, 255, 255, 0.95) !important; transform: scale(1.06) !important; box-shadow: 0 0 10px rgba(255, 255, 255, 0.25) !important; } .lf-btn:hover .cta-arrow-badge svg { transform: translate(1.5px, -1.5px) !important; } .lf-btn.lf-loading .cta-arrow-badge { display: none !important; } .lf-spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #FFFFFF; border-radius: 50%; animation: lfSpin 0.7s linear infinite; flex-shrink: 0; } .lf-btn.lf-loading .lf-spinner { display: block; } @keyframes lfSpin { to { transform: rotate(360deg); } } .lf-privacy-consent { font-size: 0.75rem; color: var(--lf-muted); margin-top: 12px; text-align: center; line-height: 1.4; } .lf-privacy-consent a { text-decoration: underline; color: inherit; cursor: pointer; } .lf-global-err { font-size: 12px; color: var(--lf-err); margin-top: 14px; text-align: center; display: none; font-family: var(--lf-font-sans); line-height: 1.4; } .lf-global-err.lf-show { display: block; } .lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .lf-wrap:focus, .lf-wrap:focus-visible { outline: none; } .lf-modal-close-icon:focus-visible { outline: none !important; box-shadow: 0 0 0 2px rgba(255, 150, 0, 0.5) !important; background-color: rgba(255, 150, 0, 0.08) !important; } .lf-clear-btn:focus-visible { outline: none !important; box-shadow: 0 0 0 2px rgba(255, 150, 0, 0.5) !important; } .lf-cc-trigger:focus-visible { outline: none !important; border-radius: 6px !important; box-shadow: 0 0 0 2px rgba(255, 150, 0, 0.45) !important; } .lf-cc-search:focus-visible { outline: none !important; border-bottom-color: var(--lf-line-focus) !important; } .lf-btn:focus-visible { outline: none !important; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(255, 150, 0, 0.65), 0 6px 18px rgba(0, 43, 73, 0.2) !important; } /* Hide floating advisor widget when quote modal is open */ body.quote-modal-open .advisor-floating-unit, .lf-modal-overlay.lf-modal-open ~ .advisor-floating-unit { display: none !important; } /* Force 1-line fitting for headings */ .lf-main-heading { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: clamp(14px, 5.5vw, 24px) !important; } .lf-sub-heading { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: clamp(11px, 3.3vw, 13.5px) !important; max-width: none !important; } @media (max-width: 400px) { .lf-main-heading { font-size: clamp(12px, 4.8vw, 20px) !important; } .lf-sub-heading { font-size: clamp(10px, 3.1vw, 12px) !important; } }