7e44e7e132
Improve contact form styling with dedicated CSS file Move contact form styles from base.css to separate file Add security measures to custom directory with .htaccess Update honeypot field styling and implementation
97 lines
2 KiB
CSS
97 lines
2 KiB
CSS
/* Contact Form Styles */
|
|
|
|
/* Honeypot field - hidden from users but looks normal to bots */
|
|
.hp-field {
|
|
position: absolute;
|
|
left: -5000px;
|
|
}
|
|
|
|
/* Contact form section */
|
|
.contact-form {
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* Success message */
|
|
.form-success {
|
|
background-color: #d4edda;
|
|
border: 1px solid #c3e6cb;
|
|
color: #155724;
|
|
padding: 1rem;
|
|
border-radius: 0.25rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Error messages */
|
|
.form-errors {
|
|
background-color: #f8d7da;
|
|
border: 1px solid #f5c6cb;
|
|
color: #721c24;
|
|
padding: 1rem;
|
|
border-radius: 0.25rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-errors ul {
|
|
margin: 0.5rem 0 0 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
/* Form fields */
|
|
.contact-form-inner .form-group {
|
|
margin-bottom: 1.3rem;
|
|
}
|
|
|
|
.contact-form-inner .form-group label {
|
|
display: block;
|
|
font-weight: 600;
|
|
margin-bottom: 0.3rem;
|
|
color: var(--color-grey);
|
|
}
|
|
|
|
.contact-form-inner .form-group label .required {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.contact-form-inner .form-group input[type="text"],
|
|
.contact-form-inner .form-group input[type="email"],
|
|
.contact-form-inner .form-group textarea {
|
|
width: 100%;
|
|
padding: 0.6rem;
|
|
border: 1px solid #ccc;
|
|
border-radius: 0.25rem;
|
|
font-family: inherit;
|
|
font-size: 1rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.contact-form-inner .form-group input[type="text"]:focus,
|
|
.contact-form-inner .form-group input[type="email"]:focus,
|
|
.contact-form-inner .form-group textarea:focus {
|
|
outline: none;
|
|
border-color: var(--color-green);
|
|
box-shadow: 0 0 0 0.2rem rgba(0, 156, 128, 0.25);
|
|
}
|
|
|
|
.contact-form-inner .form-group textarea {
|
|
resize: vertical;
|
|
min-height: 150px;
|
|
}
|
|
|
|
.contact-form-inner .form-group small {
|
|
display: block;
|
|
margin-top: 0.3rem;
|
|
color: #6c757d;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.contact-form-inner .form-group button[type="submit"] {
|
|
cursor: pointer;
|
|
border: none;
|
|
font-size: 1rem;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.contact-form-inner .form-group button[type="submit"]:hover {
|
|
cursor: pointer;
|
|
}
|