.at-quote-modal .modal-dialog { width: min(560px, 92vw); max-width: 560px; transition: opacity 0.35s ease, transform 0.35s ease; transform: scale(0.94) translateY(10px); opacity: 0; } .at-quote-modal.show .modal-dialog { transform: scale(1) translateY(0); opacity: 1; } .at-quote-modal .modal-content { position: relative; background: var(--at-neutral-0, #0c0c0c); border: 1px solid var(--at-neutral-100, #212121); border-radius: 24px; padding: clamp(28px, 2vw, 48px); } .at-quote-modal__close { position: fixed; top: 30px; right: 30px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--at-neutral-100, #212121); background: var(--at-neutral-0, #0c0c0c); color: var(--at-neutral-900, #efefef); cursor: pointer; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(-8px); transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease; z-index: 1; } .at-quote-modal.show .at-quote-modal__close { opacity: 1; transform: translateY(0); } .at-quote-modal__close:hover { transform: rotate(90deg); background: rgba(255, 255, 255, 0.06); } @media (max-width: 574.98px) { .at-quote-modal__close { top: 16px; right: 16px; width: 34px; height: 34px; } } /* Bootstrap appends .modal-backdrop as a sibling of the modal on , not inside it, so it can't be scoped with a descendant selector — this page only ever opens #quoteModal, so styling it globally is safe. */ .modal-backdrop { background-color: rgba(10, 10, 10, 0.72); } .modal-backdrop.show { opacity: 1; } @media (max-width: 574.98px) { .at-quote-modal .modal-content { padding: 24px 20px; } } /* Gradient focus underline — same treatment as .at-contact-form-card's copy of this form in contact.css, scoped here too since the modal has its own copy of the shared .sec-4-about-form markup. */ .at-quote-modal .sec-4-about-form__field { position: relative; } .at-quote-modal .sec-4-about-form__field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, #F0460E, #FFB703); transform: scaleX(0); transform-origin: center; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .at-quote-modal .sec-4-about-form__field:focus-within::after { transform: scaleX(1); }