/* ================================================= */ /* contact/css/contact.css */ /* Styles specific for the Contact Page */ /* Assumes a global CSS file handles base styling */ /* (dark theme, fonts, primary colors, etc.) */ /* ================================================= */ /* Variables (Consider defining these globally if not already done) */ :root { --theme-bg-page: #1e1e2d; /* Example page background */ --theme-bg-card: #252530; /* Example card background */ --theme-text-primary: #e0e0e0; --theme-text-secondary: #b0b0b0; --theme-text-input: #e0e0e0; --theme-bg-input: #1a1a26; --theme-border-input: #3a3a50; --theme-border-input-focus: #7a00ff; /* Your accent color */ --theme-accent-primary: #7a00ff; /* Your primary accent color */ --theme-accent-hover: #6a00e0; /* Darker accent for hover */ --theme-text-on-accent: #ffffff; --theme-success-bg: #28a745; /* Green for success */ --theme-success-text: #ffffff; --theme-danger-bg: #dc3545; /* Red for error */ --theme-danger-text: #ffffff; --theme-border-radius-medium: 0.3rem; --theme-border-radius-large: 0.5rem; --theme-shadow-soft: 0 2px 10px rgba(0,0,0,0.15); } /* If no global styles are setting this for the body */ body.contact-body-override { /* Add this class to in contact.php if needed */ background-color: var(--theme-bg-page); color: var(--theme-text-primary); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; } .contact-page-container { max-width: 700px; margin: 40px auto; padding: 20px; } .contact-form-card { background-color: var(--theme-bg-card); padding: 25px 30px; border-radius: var(--theme-border-radius-large); box-shadow: var(--theme-shadow-soft); border: 1px solid var(--theme-border-input); /* Subtle border */ } .contact-form-card h1 { color: var(--theme-text-primary); text-align: center; margin-top: 0; margin-bottom: 15px; font-size: 2rem; /* Adjust as needed */ font-weight: 600; } .contact-form-card .intro-text { color: var(--theme-text-secondary); text-align: center; margin-bottom: 30px; font-size: 0.95rem; } .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; margin-bottom: 0.5rem; color: var(--theme-text-secondary); font-weight: 500; font-size: 0.9rem; } .form-group input[type="text"], .form-group input[type="email"], .form-group textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--theme-border-input); border-radius: var(--theme-border-radius-medium); background-color: var(--theme-bg-input); color: var(--theme-text-input); font-size: 0.95rem; box-sizing: border-box; /* Important for 100% width with padding */ transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .form-group input[type="text"]::placeholder, .form-group input[type="email"]::placeholder, .form-group textarea::placeholder { color: #6c757d; /* Standard placeholder color */ opacity: 0.7; } .form-group input[type="text"]:focus, .form-group input[type="email"]:focus, .form-group textarea:focus { outline: none; border-color: var(--theme-border-input-focus); box-shadow: 0 0 0 0.2rem rgba(122, 0, 255, 0.25); /* Glow effect for your accent */ } .form-group textarea { min-height: 120px; resize: vertical; } .btn-submit, .btn.btn-primary { /* Assuming you might have a global .btn.btn-primary */ display: inline-block; width: 100%; /* Full width button */ background-color: var(--theme-accent-primary); color: var(--theme-text-on-accent); padding: 0.8rem 1.5rem; border: none; border-radius: var(--theme-border-radius-medium); font-size: 1rem; font-weight: 600; text-align: center; cursor: pointer; transition: background-color 0.2s ease-in-out, transform 0.1s ease; text-decoration: none; /* If used as an tag */ } .btn-submit:hover, .btn.btn-primary:hover { background-color: var(--theme-accent-hover); transform: translateY(-1px); /* Subtle lift effect */ } .btn-submit:active, .btn.btn-primary:active { transform: translateY(0px); } .alert { padding: 0.8rem 1.25rem; margin-bottom: 1.5rem; border: 1px solid transparent; border-radius: var(--theme-border-radius-medium); font-size: 0.9rem; } .alert-success { color: var(--theme-success-text); background-color: var(--theme-success-bg); border-color: #1f8536; /* Darker green border */ } .alert-danger { color: var(--theme-danger-text); background-color: var(--theme-danger-bg); border-color: #b22222; /* Darker red border */ } .alternative-contact { text-align: center; margin-top: 30px; font-size: 0.9rem; color: var(--theme-text-secondary); } .alternative-contact a { color: var(--theme-accent-primary); text-decoration: none; } .alternative-contact a:hover { text-decoration: underline; } /* Responsive Adjustments */ @media (max-width: 768px) { .contact-page-container { margin: 20px auto; padding: 15px; } .contact-form-card { padding: 20px; } .contact-form-card h1 { font-size: 1.75rem; } }