Spaces:
Sleeping
Sleeping
| .contact-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 60px; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| } | |
| .contact-info p { | |
| color: var(--text-secondary); | |
| font-size: 1.05rem; | |
| margin-bottom: 32px; | |
| line-height: 1.8; | |
| } | |
| .social-links { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .social-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| font-size: 1rem; | |
| padding: 12px 20px; | |
| border-radius: var(--radius-sm); | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-subtle); | |
| transition: all var(--transition-base); | |
| } | |
| .social-link:hover { | |
| color: var(--accent-primary); | |
| border-color: var(--accent-primary); | |
| transform: translateX(5px); | |
| } | |
| .contact-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .form-group input, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 14px 18px; | |
| border-radius: var(--radius-sm); | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-subtle); | |
| color: var(--text-primary); | |
| font-size: 1rem; | |
| transition: all var(--transition-base); | |
| } | |
| .form-group input:focus, | |
| .form-group textarea:focus { | |
| border-color: var(--accent-primary); | |
| box-shadow: 0 0 0 3px var(--glow-primary); | |
| } | |
| .form-group textarea { | |
| resize: vertical; | |
| min-height: 140px; | |
| } | |
| @media (max-width: 992px) { | |
| .contact-grid { grid-template-columns: 1fr; gap: 40px; } | |
| } | |
| .form-success { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| padding: 40px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--accent-primary); | |
| border-radius: var(--radius-md); | |
| animation: fadeIn 0.5s ease-out; | |
| } | |
| .form-success h3 { | |
| color: var(--accent-primary); | |
| margin-bottom: 12px; | |
| } | |
| .form-success p { | |
| color: var(--text-secondary); | |
| margin-bottom: 24px; | |
| } | |
| .error-message { | |
| color: #ff4d4d; | |
| font-size: 0.85rem; | |
| margin-top: 4px; | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |