diff --git a/frontend/src/components/base/ConsultationModal.astro b/frontend/src/components/base/ConsultationModal.astro index ddfb824..e12ca35 100644 --- a/frontend/src/components/base/ConsultationModal.astro +++ b/frontend/src/components/base/ConsultationModal.astro @@ -4,15 +4,16 @@ const title = 'Бесплатная консультация';
Оставьте свои контактные данные, и мы свяжемся с вами в течение 15 минут
@@ -214,73 +215,86 @@ const title = 'Бесплатная консультация'; transform: translateY(0); } + .modal-content { + padding: 2.5rem 2rem 1.5rem; + } + + .modal-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + margin-bottom: 0.5rem; + } + .modal-close { - position: absolute; - top: 1.25rem; - right: 1.25rem; background: #f1f5f9; border: none; cursor: pointer; - width: 36px; - height: 36px; + width: 32px; + height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #64748b; - z-index: 10; + flex-shrink: 0; transition: all 0.2s ease; } .modal-close:hover { background: #e2e8f0; color: #0f172a; + } + + .modal-close:hover svg { transform: rotate(90deg); } - .modal-content { - padding: 3rem 2.5rem 2rem; + .modal-close svg { + transition: transform 0.2s ease; } .modal-title { - font-size: 1.85rem; + font-size: 1.5rem; font-weight: 800; color: #0f172a; - margin: 0 0 0.5rem; + margin: 0; letter-spacing: -0.02em; + line-height: 1.2; } .modal-description { color: #64748b; - font-size: 1.05rem; + font-size: 0.95rem; text-align: center; - margin: 0 0 2rem; + margin: 0 0 1.5rem; line-height: 1.5; } .modal-form { display: flex; flex-direction: column; - gap: 1.25rem; + gap: 1rem; } .form-group { display: flex; flex-direction: column; - gap: 0.5rem; + gap: 0.4rem; } .form-label { - font-size: 0.9rem; + font-size: 0.85rem; font-weight: 600; color: #0f172a; } .form-input { - padding: 1.1rem 1.1rem; + padding: 0.9rem 1rem; border: 2px solid #e2e8f0; - border-radius: 16px; - font-size: 1.1rem; + border-radius: 14px; + font-size: 1rem; font-family: inherit; transition: all 0.3s ease; outline: none; @@ -301,9 +315,9 @@ const title = 'Бесплатная консультация'; background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%); color: #1e293b; border: none; - padding: 1rem 1.5rem; - border-radius: 16px; - font-size: 1.1rem; + padding: 0.9rem 1.5rem; + border-radius: 14px; + font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); @@ -320,7 +334,7 @@ const title = 'Бесплатная консультация'; } .form-privacy { - font-size: 0.8rem; + font-size: 0.75rem; color: #94a3b8; text-align: center; margin: 0; @@ -347,12 +361,85 @@ const title = 'Бесплатная консультация'; } @media (max-width: 480px) { + .modal-overlay { + padding: 0.5rem; + } + + .modal-container { + border-radius: 16px; + max-height: 85vh; + width: calc(100% - 1rem); + } + .modal-content { - padding: 2.5rem 1.5rem 1.5rem; + padding: 1.5rem 1.25rem 1.25rem; + } + + .modal-header { + margin-bottom: 0.4rem; + } + + .modal-close { + width: 28px; + height: 28px; + } + + .modal-close svg { + width: 16px; + height: 16px; } .modal-title { - font-size: 1.5rem; + font-size: 1.25rem; + } + + .modal-description { + font-size: 0.85rem; + margin-bottom: 1.25rem; + } + + .modal-form { + gap: 0.875rem; + } + + .form-label { + font-size: 0.8rem; + } + + .form-input { + padding: 0.8rem 0.9rem; + font-size: 0.95rem; + border-radius: 12px; + } + + .modal-submit { + padding: 0.85rem 1.25rem; + font-size: 0.95rem; + border-radius: 12px; + } + + .form-privacy { + font-size: 0.7rem; + } + } + + @media (max-width: 360px) { + .modal-title { + font-size: 1.1rem; + } + + .modal-description { + font-size: 0.8rem; + } + + .form-input { + padding: 0.75rem 0.8rem; + font-size: 0.9rem; + } + + .modal-submit { + padding: 0.75rem 1rem; + font-size: 0.9rem; } }